Material Design簡(jiǎn)介

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

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

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

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

一、Snackbar

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

2.使用：

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

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

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

二、TextInputLayout

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

2.使用：

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

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

三、FloationgActionButton

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

2.特有屬性：

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

四、DrawerLayout

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

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

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

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

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

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

五、NavigationView

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

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

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

　?。?）設(shè)置頭視圖監(jiān)聽(tīng)：

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

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

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

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

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

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

　　　　　　傳入NavigationView. OnNavigationViewIntemSelectedListener接口，

　　　　　　重寫(xiě)onNavigationItemSelected()接口；

六、TabLayout

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

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

1 app:tabIndicatorColor="@color/colorAccent"

2 app:tabIndicatorHeight="5dp"

3 app:tabSelectedTextColor="@color/colorAccent"

4 app:tabTextColor="#ffffff"

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

（1）聲明并實(shí)例化TabLayout，ViewPager；

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

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

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

　　　?。?-2）在自定義ViewPager的適配器中，重寫(xiě)getPageTitle()，返回當(dāng)前標(biāo)題；

　　?。?-3）TabLayout對(duì)象調(diào)用setTabMode()，傳入TabLayout.MODE_SCROLLABLE常量，設(shè)置TabLayout的滾動(dòng)；

七、NestedScrollView

1.作用：替代ScrollView；

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

八、Toolbar

1.作用：

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

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

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

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

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

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

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

（4-1）聲明并實(shí)例化Toolbar控件實(shí)例；

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

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

注意：只有當(dāng)前Activity主題為NoActionBar時(shí)，才會(huì)顯示Toolbar；

九、CollapsingToolbar

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

2.使用：

　　CollapsingToolbar必須放在AppBarLayout中，

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

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

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

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

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

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

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

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

最新評(píng)論