Material Design簡介

Material Design是谷歌新的設(shè)計語言，谷歌希望寄由此來統(tǒng)一各種平臺上的用戶體驗，Material Design的特點是干凈的排版和簡單的布局，以此來突出內(nèi)容。

Material Design對排版、材質(zhì)、配色、光效、間距、文字大小、交互方式、動畫軌跡都做出了建議，以幫助設(shè)計者設(shè)計出符合Material Design風(fēng)格的應(yīng)用。

Material Design設(shè)計語言鼓勵大家使用充滿活力的鮮艷色彩，并在同一界面建議使用三種色調(diào)，并保障有一個強色調(diào)，強色一般處于處于視圖最底層，例如狀態(tài)欄或者actionbar。通過強色調(diào)形成鮮明的對比，更容易突出內(nèi)容的重要性。對于文字色彩的取值，Material Design建議在淺色背景上采用黑色，在深色背景上采用白色。重要信息和標題采用87%透明度，次要文字采用54%透明度，而更次要的說明文字可以采用26%的透明度。對于想特別突出或者可點擊的文字，建議使用強色調(diào)。不同層級的視圖，可以通過陰影來凸顯。對于帶有操作且內(nèi)容突出的區(qū)域，可以使用cardview進行隔離，對于內(nèi)容不太重要或者操作比較單一的區(qū)域，可以使用分割線進行隔離。

最近項目中需要用到Material Design，整理了下面幾個常用的控件，以便記憶。

一、Snackbar

1.作用：與Toast類似，但是可以點擊監(jiān)聽；

2.使用：

（1）Snackbar調(diào)用靜態(tài)類make()，傳入三個參數(shù)：View父組件，文本，顯示時間；

（2）Snackbar調(diào)用setAction()，傳入兩個參數(shù)：文本，點擊監(jiān)聽事件實現(xiàn)OnClickListener接口；

（3）顯示show()與隱藏dismiss()；

二、TextInputLayout

1.作用：包裹在EditText外邊，可以將文本在EditText上方提示，同時可以設(shè)置錯誤提示；

2.使用：

（1）TextInputLayout對象調(diào)用setErrorEnable(),傳入boolean類型參數(shù)表示是否顯示錯誤信息；

（2）TextInputLayout對象調(diào)用SetError()，設(shè)置錯誤信息；

三、FloationgActionButton

1.作用：懸浮在頁面上方的按鈕；

2.特有屬性：

app:elevation="5dp" //陰影效果
app:pressedTranslationZ="10dp" //按壓時顯示效果
app:rippleColor="@color" //顏色

四、DrawerLayout

1.作用：作為布局的子布局，實現(xiàn)左右兩側(cè)的側(cè)滑效果，用于添加菜單；

2.使用：（1）以DraweLayout作為根布局，內(nèi)部可以包含三個及三個以下布局；

（2）為作為菜單的布局設(shè)置android:layout_gravity屬性，在左側(cè)顯示值為”left”，在右側(cè)顯示值為”right”；

（3）動態(tài)打開或關(guān)閉DrawerLayout中的布局：

　　　　　　DraweLayout對象調(diào)用openDrawer()，傳入Gravity.Left或者Gravity.Right兩種參數(shù)值打開關(guān)閉布局；

　　　　　　DrawerLayout對象調(diào)用closeDrawer()，傳入兩種參數(shù)值關(guān)閉布局；

五、NavigationView

1.作用 ：作為導(dǎo)航欄或者菜單欄的Menu視圖添加；

2.使用：（1）靜態(tài)屬性：app:headerLayout添加頭布局文件；

　　（2）靜態(tài)屬性：app:menu添加菜單文件；

　　（3）設(shè)置頭視圖監(jiān)聽：

　?。?-1）得到頭視圖：NavigationView對象調(diào)用getHeaderView()，傳入索引號0；

　　　　 注意：如果沒有g(shù)etHeaderView()，可以使用findViewById()得到頭視圖；

　  （3-2）找控件：頭視圖調(diào)用findViewById()得到頭視圖中的控件；

　?。?-3）設(shè)置監(jiān)聽事件：得到的控件調(diào)用setOnClickListener()；

　?。?）設(shè)置menu按鈕監(jiān)聽：

　　　　　NavigationView對象調(diào)用setNavigationItemSelectedListener()，

　　　　　　傳入NavigationView. OnNavigationViewIntemSelectedListener接口，

　　　　　　重寫onNavigationItemSelected()接口；

六、TabLayout

1.作用：與ViewPager結(jié)合，達到聯(lián)動導(dǎo)航效果；

2. 靜態(tài)屬性：

1 app:tabIndicatorColor="@color/colorAccent"

2 app:tabIndicatorHeight="5dp"

3 app:tabSelectedTextColor="@color/colorAccent"

4 app:tabTextColor="#ffffff"

3.動態(tài)使用：

（1）聲明并實例化TabLayout，ViewPager；

（2）為ViewPager控件設(shè)置適配器；

（3）設(shè)置Tablayout與ViewPager的聯(lián)動：

　　　（3-1）TabLayout對象調(diào)用setupWithViewPager()傳入要聯(lián)動的ViewPager對象；

　　　　（3-2）在自定義ViewPager的適配器中，重寫getPageTitle()，返回當前標題；

　　　（3-3）TabLayout對象調(diào)用setTabMode()，傳入TabLayout.MODE_SCROLLABLE常量，設(shè)置TabLayout的滾動；

七、NestedScrollView

1.作用：替代ScrollView；

2.使用：與ScrollView相同，內(nèi)部只能有一個子控件；

八、Toolbar

1.作用：

　　注意：使用Toolbar時必須將該Activity的主題設(shè)置為NoActionBar屬性值；

2.使用：Toolbar控件必須放在AppBarLayout控件中，而AppBarLayout最好放在CoordinatorLayout控件（協(xié)同布局）中；

3.靜態(tài)屬性：

1 app:layout_scrollFlags=”scroll|enterAlways” //Toolbar控件中，設(shè)置滑動響應(yīng)事件；

2 app:title=”” //為Toolbar設(shè)置標題名；

3 app:layout_behavior="@string/appbar_scrolling_view_behavior" //NestedScrollView控件中，設(shè)置控件行為

4.動態(tài)方法：

（4-1）聲明并實例化Toolbar控件實例；

（4-2）將ActionBar設(shè)置為Toolbar：在當前Activity中調(diào)用setSupportActionBar()，傳入新創(chuàng)建的Toolbar對象；

（4-3）當前Activity主題修改為NoActionBar模式：在清單文件中設(shè)置當前Activity標簽下的屬性android:theme="@style/Theme.AppCompat.NoActionBar"；

注意：只有當前Activity主題為NoActionBar時，才會顯示Toolbar；

九、CollapsingToolbar

1.作用：實現(xiàn)Toolbar的折疊效果；

2.使用：

　　CollapsingToolbar必須放在AppBarLayout中，

　　而AppBarLayout最好放在協(xié)同布局CoordinatorLayout控件中；

　　而Toolbar作為CollapsingToolbar的不折疊控件使用；

注意：CollapsingToolbar控件之下必須有且只有兩個控件；

3.靜態(tài)屬性：

app:title=”標題” //設(shè)置標題內(nèi)容
app:layout_scrollFlags="scroll|exitUntilCollapsed" //設(shè)置滾動標記
app:expandedTitleGravity="right|bottom" //設(shè)置標題位置
app:expandedTitleMarginBottom="@dimen/activity_vertical_margin" //設(shè)置標題到底部的距離
app:expandedTitleMarginEnd="@dimen/activity_horizontal_margin" //設(shè)置標題距底部的距離
app:contentScrim="#00ff00" //設(shè)置折疊時上方控件的顏色
//注意：下邊兩條屬性必須設(shè)置；
app:layout_collapseMode="parallax" //在其需要被折疊的子控件中；
app:layout_collapseMode="pin"： //在需要留下來的子控件中；

4.動態(tài)設(shè)置：

//（1）設(shè)置展開狀態(tài)下標題顏色
collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);
//（2）設(shè)置折疊后標題顏色
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.BLUE);

以上所述是小編給大家介紹的Android5.0中Material Design的新特性，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論