Material Designer設計(上)

1.什麼是Material Designer

android 自推出以來,一直沒有固定的風格,於是國內的產品與設計師大量的抄襲了IOS的風格,但是有些風格是不應該在android 手機上面出現的,因此android開發者被抄襲風格弄的苦不堪言。

爲了統一風格,Google I/O 2014 推出了一個Material Designer的風格,建議android應用都按照這個風格進行開發,Material Designer 除了有一部分是UI的規定外,也提供了很多絢麗的效果.

這裏寫圖片描述

Material Design 有以下的特點:

  1. 實體感的操作
  2. 鮮明、形象的視覺效果
  3. 有意義的動畫效果

Material Design 樣式

系統也爲Material Design提供了一系列的樣式,代碼如下:

@android:style/Theme.Material
@android:style/Theme.Material.Light
@android:style/Theme.Material.Light.DarkActionBar

樣子如下:

這裏寫圖片描述

5.0以後的版本(也就是21版本號)我們可以根據樣式內部的顏色值進行修改相應的內容的顏色。

這裏寫圖片描述

我們可以在style文件中修改需要顯示的樣式

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
     <item name="colorAccent">@color/colorAccent</item>
 </style>

除了上面的方式以外,我們還有其他的方式來修改對應的顏色,注意以下的方法只在5.0以上的手機上能夠生效

Window window = getWindow();
window.setStatusBarColor(ContextCompat.getColor(this, R.color.colorBlue));
window.setNavigationBarColor(ContextCompat.getColor(this, R.color.colorGreen));

2.視圖高度和陰影

我們在之前的開發中,知道了android 的座標系,屏幕的左上角是座標系的原點,代表 x y 分別是(0,0).在21版本以後,所有的控件還多了一個屬性z。我們看看下圖。

這裏寫圖片描述

從上面的代碼中可以看出圓形控件的層次比白色背景要高一些,比黑色控件要低一些,那麼如何設置一個控件的高度呢?只需要在控件的佈局文件中添加屬性:

android:translationZ

除此之外android還提供了一個api用來設置控件的陰影,注意使用這個api要提供一個背景給控件才能生效。注意,該高度和陰影必須是21版本里面並且該陰影只有當控件有了背景顏色纔有用

android:elevation

注意這些api都是21版本以上的纔有,注意好版本適配.

這裏寫圖片描述

或者爲控件添加代碼:

ImageView iv= (ImageView) findViewById(R.id.iv);
//如果版本大於等於5.0版本 則可以添加屬性
if (Build.VERSION.SDK_INT>=21){
    iv.setTranslationZ(30);
    iv.setElevation(30);
}

3.波紋觸摸反饋

這裏寫圖片描述

android 在5.0以後提供了一個觸摸反饋的效果給開發者,開發者能夠很輕鬆的實現當用戶點擊後即出現一個向外擴展的圓形波紋反饋。觸摸反饋的配置分成兩組:

  1. 波紋無邊界的 ?android:attr/selectableItemBackground
  2. 波紋帶邊界的 ?android:attr/selectableItemBackgroundBorderless

代碼開發的步驟如下:

  1. 在res下創建一個layout-v21文件夾。
  2. 將你想實現波紋效果的控件所在的佈局複製一份
  3. 找到對應的控件,添加背景,代碼如下:

    <ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:clickable="true"
        android:background="?android:attr/selectableItemBackground"
        android:layout_margin="10dp" />
    

注意 該效果一般用在輕色調的控件上配置好些

4.CardView

CardView是一種自帶圓角 陰影的容器。

這裏寫圖片描述

如果我們需要使用這個控件,我們需要增加這個控件的依賴。在app項目下的,build.gradle添加依賴,注意CarView的版本必須和v7包的版本一致。如下圖:

這裏寫圖片描述

使用的方法很簡單,首先需要在佈局文件中使用CardView:

 <android.support.v7.widget.CardView
     android:layout_width="300dp"
     android:layout_height="300dp">

 </android.support.v7.widget.CardView>

CardView有以下特殊的屬性:(需要導入自定義命名空間 xmlns:app=”http://schemas.android.com/apk/res-auto”)

app:cardElevation:控件的陰影大小
app:cardCornerRadius:控件的圓角大小
app:cardBackgroundColor:控件的背景顏色

這裏寫圖片描述
圖示如下:

這裏寫圖片描述

5.TextInputLayout

android 在舊版本就提供了輸入控件EditText,輸入控件能夠很好的滿足我們的需求,但是爲了提供更加友善的界面.我們可以使用TextInputLayout可以作爲EditText的父控件。在需要提示信息 顯示輸入字數長度 錯誤等方面做了很大的處理.

  1. 在app的build.gradle添加依賴:

這裏寫圖片描述

  1. 在layout-v21中創建佈局。在輸入框外面嵌套一層,代碼如下:

這裏寫圖片描述

3.效果圖如下:

這裏寫圖片描述

4.當用戶輸入失敗的時候,我們也可以給他設置錯誤的提示,如下:

這裏寫圖片描述

5.效果圖如下:

這裏寫圖片描述

6.如果你覺得提示的文本樣式不符合你的需求,可以再樣式文件中修改,如下:

<style name="TextLabel" parent="TextAppearance.Design.Hint">
    <item name="android:textSize">33sp</item>
</style>

<style name="myError" parent="TextAppearance.Design.Error">
    <item name="android:textSize">33sp</item>
    <item name="android:textColor">@android:color/holo_red_dark</item>
</style>

6.NestedScrollView

android 在舊版本提供了一個控件ScrollView ,能夠將內部的很長的控件滾動顯示,但是我們在實際開發中難免會碰到這樣的需求,如在一個ScrollView
中,增加一個能夠滾動的區域。或在一個列表控件(ListView RecyerView)中,除了能夠上下滾動外,也可以對內部的某個滾動,現在Material Design提供了一個進階版本的ScrollView給我們使用。

如下圖,我們想將列表中每個item變成一個個可以內部滑動的控件,圖如下:

這裏寫圖片描述

此時,只需要對每個item佈局實現如下的代碼即可:

這裏寫圖片描述

7.FloatActionButton

android 在 Material Designer 中提供了一種漂浮的按鈕,我們可以使用這個控件開發出很酷炫的效果,如下圖:

這裏寫圖片描述

該控件也是design包下的提供的一個組件,具體用法如下:

這裏寫圖片描述

常用的屬性:

android:src 中間的icon
app:backgroundTint 背景的顏色
app:rippleColor 點擊時的顏色
app:borderWidth 應該設置爲0,否則會在4.1會顯示爲正方形,而在5.0以後沒有陰影效果
app:fabSize 控件的大小,有兩個值 normal和mini
app:layout_anchor 設置FloatActionButton相對於那個控件
app:elevation 默認顯示的陰影的大小

需要注意的是 FloatingActionButton有些版本默認是無法點擊的 所以點擊效果無效,請設置android:clickable=”true”屬性

8.ToolBar

google在舊版本推出過一個控件ActionBar,但是ActionBarzhi只能固定在頂部,不能靈活使用,所以google推出了一個ToolBar來替換ActionBar.

我們可以配合一些新的控件實現很多酷炫的效果。下圖是ToolBar內部顯示的內容.

這裏寫圖片描述

關於舊版本是如何演化的,大家可以參考博客《從ActionBar,沉浸式 再到ToolBar》

9.Snackbar

Toast是我們在日常開發中經常使用的控件,簡單易用,但是現在有這樣的需求,需要與Toast交互,比如登陸失敗了,彈出Toast後,點擊Toast能夠重新登陸,但是就目前的Toast來說是無法解決這種問題的。因此google提供了一個新的控件給開發者,也就是Snackbar。Snackbar除了有Toast的功能外,還具備了Toast不具備的交互功能。

1 生成一個 Snackbar,該靜態方法類似toast的makeText()

//傳入某一個控件 它會找到該控件的最外層容器 在該容器中添加一個snackbar
//提示的長度 LENGTH_LONG2LENGTH_SHORT2LENGTH_INDEFINITE
make(View view, CharSequence text, int duration)

2 設置Snackbar的點擊方法

setAction(CharSequence text, final OnClickListener listener)

3 顯示

show()

具體的代碼圖如下:

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章