前言
郭神出品,必屬精品,記得在剛做Android開(kāi)發(fā)的時(shí)候,當(dāng)時(shí)買了Android第一行代碼第一版,看了之后感覺(jué)內(nèi)容通俗易懂,收獲頗多,當(dāng)時(shí)還不知道作者是郭神,后來(lái)在CSDN上看了很多他寫(xiě)的文章,發(fā)現(xiàn)原來(lái)作者就是郭神,現(xiàn)在他出了第二版,果斷將書(shū)買了回來(lái),書(shū)很早就看完了,今天將書(shū)籍翻了出來(lái)看了一下,決定將自己的想法給記錄一下.
第十二章 最佳的UI體驗(yàn)------Material Design實(shí)踐
??其實(shí)長(zhǎng)久以來(lái),大多數(shù)人都認(rèn)為Android系統(tǒng)的UI并不算美觀,至少?zèng)]有iOS系統(tǒng)的美觀.以至于很多IT公司在進(jìn)行應(yīng)用界面設(shè)計(jì)的時(shí)候,為了保證平臺(tái)的統(tǒng)一性,強(qiáng)制要求Android端的界面風(fēng)格必須和iOS端一致,這種情況在工作中很常見(jiàn),為了解決這個(gè)問(wèn)題,谷歌也祭出了殺手锏,在2014Google I/O大會(huì)上重磅推出了一套全新的界面設(shè)計(jì)語(yǔ)言------Material Design
12.1 什么是Material Design
??Material Design是由谷歌的設(shè)計(jì)工程師基于傳統(tǒng)優(yōu)秀的設(shè)計(jì)原則,結(jié)合豐富的創(chuàng)意和科學(xué)技術(shù)所發(fā)明的一套全新的界面設(shè)計(jì)語(yǔ)言,包含了視覺(jué),運(yùn)動(dòng),互動(dòng)效果等特性.為了做出表率,谷歌從Android5.0系統(tǒng)開(kāi)始,就將所有的應(yīng)用都是用Material Design風(fēng)格來(lái)進(jìn)行設(shè)計(jì),但是一開(kāi)始Material Design主要是面向UI設(shè)計(jì)人員的,很多開(kāi)發(fā)者根本搞不清楚什么樣的界面和效果才叫Material Design,就算搞清楚了,實(shí)現(xiàn)起來(lái)也很費(fèi)勁,當(dāng)時(shí)Android中并沒(méi)有提供相應(yīng)的API支持,一切要開(kāi)發(fā)者從零寫(xiě)起.
?? 谷歌當(dāng)然也意識(shí)到了這個(gè)問(wèn)題,于是在2015年的Google I/O大會(huì)上推出了一個(gè)Design Support庫(kù),這個(gè)庫(kù)中最具代表性的一些控件和效果進(jìn)行了封裝,使得開(kāi)發(fā)者在即使不了解Material Design的情況也能非常輕松地將自己的應(yīng)用Material化.
12.2 Toolbar
??Toolbar使我們接觸的第一個(gè)Material控件,雖說(shuō)對(duì)于Toolbar你暫時(shí)應(yīng)該還是比較陌生的,但是對(duì)于它的另一個(gè)相關(guān)控件ActionBar.你應(yīng)該就熟悉了.Toolbar的強(qiáng)大之處在于,他不僅繼承了ActionBar的所有功能,而且靈活性很高,可以配合其他控件來(lái)完成一些Material Design的效果.
??如下代碼:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="?attr/actionBarSize"/>
</FrameLayout>
??Toolbar是由appcompat-v7庫(kù)提供的,這里我們給Toolbar指定了一個(gè)id,將它的寬度設(shè)置為match_parent,高度設(shè)置為actionBar的高度,背景色設(shè)置為colorPrimary,由于我們剛才在styles.xml中將程序的主題指定成了淡色主題,因此Toolbar現(xiàn)在也是淡色主題,而Toolbar上面的各種元素就會(huì)自動(dòng)使用深色系,這是為了和主體顏色區(qū)別開(kāi),但是這個(gè)效果會(huì)看起來(lái)很差,之前使用ActionBar時(shí)文字都是白色的, 現(xiàn)在變成了黑色的會(huì)很難看.那么為了能讓Toolbar單獨(dú)使用深色主題,這里我們使用android:theme屬性,將Toolbar的主題指定成了ThemeOverlay.AppCompat.Dark.ActionBar.但是這樣指定完了之后又會(huì)出現(xiàn)新的問(wèn)題,如果Toolbar中有菜單按鈕,那么彈出的菜單項(xiàng)也會(huì)變成深色主題,這樣就再次變得十分難看.于是這里使用了app:popupThme這個(gè)屬性單獨(dú)將彈出的菜單項(xiàng)指定成淡色在主題,之所以使用app:popupTheme,是因?yàn)閜opupTheme這個(gè)屬性是在Android5.0系統(tǒng)中新增的,我們使用app:popupTheme的話就可以兼容Android5.0以下的系統(tǒng)了.
??代碼中設(shè)置:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
??運(yùn)行效果:
12.3 滑動(dòng)菜單
滑動(dòng)菜單可以說(shuō)是Material Design最常見(jiàn)的效果了,在許多的應(yīng)用中,都有滑動(dòng)菜單的功能.
12.3.1 DrawerLayout
DrawerLayout它是一個(gè)布局,在布局中允許放入兩個(gè)直接子控件,第一個(gè)子控件是主屏幕中顯示的內(nèi)容,第二個(gè)子控件是滑動(dòng)菜單中顯示的內(nèi)容.它是由support-v4庫(kù)提供的,關(guān)于第二個(gè)子控件有一點(diǎn)需要注意,layout_gravity這個(gè)屬性是必須指定的,因?yàn)槲覀冃枰嬖VDrawerLayout滑動(dòng)菜單是在屏幕的左邊還是右邊,指定left表示滑動(dòng)菜單在左邊,指定right表示滑動(dòng)菜單在右邊.如果指定start的話,表示會(huì)根據(jù)系統(tǒng)語(yǔ)言進(jìn)行判斷,如果系統(tǒng)語(yǔ)言是從左往右的,比如英語(yǔ),漢語(yǔ),滑動(dòng)菜單就在左邊, 如果系統(tǒng)語(yǔ)言是從右往左的,比如阿拉伯語(yǔ),滑動(dòng)菜單就在右邊.
12.4 懸浮按鈕和可交互提示
12.4.1 FloatingActionButton
FloatingActionButton是Design Support庫(kù)中提供的一個(gè)控件,這個(gè)控件可以幫助我們比較輕松地實(shí)現(xiàn)懸浮按鈕的效果.
FloatingActionButton屬性介紹:
- app:elevation: 給FloatingActionButton指定一個(gè)高度值,高度值越大,投影范圍越大,但是投影效果越淡,高度值越小,投影范圍越小,但是投影的效果越濃
- app:backgroundTing: FloatingActionButton背景顏色
12.4.2 Snackbar
12.4.3 Coordinatorlayout
Coordinatorlayout可以說(shuō)是一個(gè)加強(qiáng)版的FrameLayout,這個(gè)布局也是由Design Support庫(kù)提供的,他在普通情況下的作用和FrameLayout基本一致 ,不過(guò)既然是Design Support庫(kù)中提供的布局,那么必然有一些Material Design的魔力了.事實(shí)上Coordinatorlayout可以監(jiān)聽(tīng)所有子控件的各種事件,然后自動(dòng)幫助我們做出最為合理的相應(yīng),故又被稱作協(xié)作布局.
12.5 卡片式布局
12.5.1 CardView
CardView是用于實(shí)現(xiàn)卡片布局效果的重要控件,由appcompat-v7庫(kù)提供,實(shí)際上,CardView也是一個(gè)FrameLayout,只是額外提供了圓角和陰影等效果,看上去會(huì)有立體的感覺(jué).
12.5.2 AppBarLayout
在開(kāi)發(fā)中,AppBarLayout一般是嵌套Toolbar使用,并設(shè)置app:layout_scrollFlags屬性,從而實(shí)現(xiàn)Material Design的效果
12.6 下拉刷新SwipeRefreshlayout
官方提供的下拉刷新控件
12.7 可折疊式標(biāo)題欄
12.7.1 CollapsingToolbarLayout
顧名思義,CollapsingToolbarLayout是一個(gè)作用于Toolbar基礎(chǔ)之上的布局,他也是由Design Support庫(kù)提供的.CollapsingToolbarLayout可以讓Toolbar的效果變得更加豐富,不僅展示一個(gè)標(biāo)題欄,而是能夠?qū)崿F(xiàn)非常華麗的效果.不過(guò)CollapsingToolbarLayout是不能獨(dú)立存在的,它在設(shè)計(jì)的時(shí)候就被限定只能作為AppBarlayout的直接子布局來(lái)使用.
最佳實(shí)踐
看代碼:
activity_material_design.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="250dp">
<android.support.design.widget.CollapsingToolbarLayout
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:expandedTitleGravity="center|bottom"
android:id="@+id/collapsing_toolbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:scaleType="fitXY"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:src="@drawable/timg"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
app:layout_anchor="@+id/appbar"
app:layout_anchorGravity="bottom|right"
android:layout_margin="20dp"
app:fabSize="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.v4.widget.NestedScrollView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/> <ImageView
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
menu_material_design.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="test"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:showAsAction="never"
android:icon="@mipmap/ic_launcher"/>
</menu>
MaterialDesignActivity
public class MaterialDesignActivity extends AppCompatActivity{
CollapsingToolbarLayout collapsingToolbar;
Toolbar toolbar;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_material_design);
collapsingToolbar = findViewById(R.id.collapsing_toolbar);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapsingToolbar.setTitle("erdai66sdfawsdfasdfasdfasdfasdf6");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_material_design,menu);
return true;
}
}
主題設(shè)置--在res下新建一個(gè)value-v21的文件夾,創(chuàng)建一個(gè)styles.xml
<style name="MaterialDesignTheme" parent="AppTheme">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
效果展示:
展開(kāi)的時(shí)候:
折疊的時(shí)候:
