先看看Demo的演示效果:
1.Toolbar
- Toolbar是代替Actionbar的使用却妨,因?yàn)樵诶^承了Actionbar的所有功能以外红氯,靈活性更高豪娜,并且可以配合其他的一些控件實(shí)現(xiàn)MaterailDesign的效果 跟畅,因此官方推薦使用Toolbar。
- 要使用Toolbar,則必須要要配置當(dāng)前Activity的主題為“***.NoActionBar”,否則會(huì)報(bào)一個(gè)"This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_SUPPORT_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead."的異常晌块,就是提醒爱沟,已經(jīng)有actionbar,不能再使用toolBar。
- 如何使用:
先配置主題為noActionbar
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>
Activity的中的代碼
//如果不設(shè)置匆背,則不會(huì)出現(xiàn)標(biāo)題
Toolbar tbAtToolbar = findViewById(R.id.tb_at_toolbar);
//不設(shè)置會(huì)顯示label的屬性,也可以在清單文件中進(jìn)行配置
// tbAtToolbar.setTitle(" I am toolbar ");
setSupportActionBar(tbAtToolbar);
布局文件中的代碼:
<android.support.v7.widget.Toolbar
android:id="@+id/tb_at_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
這里我們使用"android:theme"去指定和ActionBar的主題一樣呼伸。app:popupTheme是為了兼容5.0一下的系統(tǒng)使用的主題,因?yàn)镸aterailDesign是在5.0以后才出現(xiàn)的靠汁。到這一步蜂大,Toolbar的簡(jiǎn)單使用已經(jīng)介紹完畢。
但是蝶怔,如果只是這樣實(shí)現(xiàn)的話,你可能會(huì)有疑問(wèn)兄墅,和Actionbar有個(gè)毛線的不同踢星,別急,高級(jí)定制Toolbar才剛剛開始隙咸。
先看看效果:
具體實(shí)現(xiàn) :
先在res中創(chuàng)建menu文件夾沐悦,然后創(chuàng)建toolbarmenu.xml,并編寫以下代碼
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/add"
android:icon="@drawable/ic_menu_camera"
android:title="add"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:icon="@drawable/ic_menu_slideshow"
android:title="delete"
app:showAsAction="never"/>
<item
android:id="@+id/tb_setting"
android:title="@string/action_settings"
android:icon="@drawable/ic_menu_manage"
android:orderInCategory="100"
app:showAsAction="ifRoom"/>
</menu>
先介紹一下 app:showAsAction這個(gè)屬性:'ifRoom'表示如果空間充足則顯示成洗,如果不充足,則不顯示藏否,'always'一直顯示瓶殃,'never'則表示不出現(xiàn),點(diǎn)擊副签,則先會(huì)出現(xiàn)title的屬性遥椿,即為3個(gè)小白點(diǎn)。
然后去重寫Activity的onCreateOptionsMenu()方法去加載toolbarmenu.xml配置文件淆储,重寫onOptionsItemSelected()去實(shí)現(xiàn)菜單的點(diǎn)擊事件
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toobalr, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
dlAtDrawLayout.openDrawer(Gravity.START);
break;
case R.id.add:
Toast.makeText(this, "add", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
break;
case R.id.tb_setting:
Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
到這里冠场,關(guān)于toolbar的使用就完全介紹完畢咯。
2.DrawerLayout
滑動(dòng)菜單本砰,通過(guò)滑動(dòng)將菜單欄滑動(dòng)出來(lái)。
先看看效果:
下來(lái)介紹如何實(shí)現(xiàn)上面的效果:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/dl_at_draw_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.it.onex.materialdesigndemo.ToolbarActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<!-- 菜單選項(xiàng)布局 -->
<ScrollView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
如果要定制菜單選項(xiàng)欄,只需要替換ScrollView的布局屯烦,但是一定要保留android:layout_gravity="start"屬性洁灵,并不一定要用"start",也可以使用left和right屬性,表示從那邊進(jìn)行滑動(dòng)出來(lái)菜單还棱。但是如果不添加任何的標(biāo)記的話载慈,用戶一般不會(huì)發(fā)現(xiàn)這個(gè)菜單,所以最好是添加一個(gè)菜單指示器诱贿。
這里介紹2中方式:
第一種:完全自定義:沒(méi)有效果和button的點(diǎn)擊事件類似
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.drawable.ic_drawer_am);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
dlAtDrawLayout.openDrawer(Gravity.START);
break;
}
return true;
}
第二種:使用ActionBarDrawerToggle類進(jìn)行添加
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, dlAtDrawLayout, tbAtToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
dlAtDrawLayout.addDrawerListener(toggle);
toggle.syncState();
strings.xml
<resources>
<string name="app_name">MaterialDesignDemo</string>
<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>
<string name="action_settings">Settings</string>
</resources>
則會(huì)出現(xiàn)滑動(dòng)菜單欄指示器娃肿,并且自動(dòng)監(jiān)聽是否閉合的監(jiān)聽。
3. CoordinatorLayout
CoordinatorLayout可以理解為一個(gè)加強(qiáng)版的FrameLayout,如果使用常規(guī)的控件珠十,使用和效果和FrameLayout沒(méi)有多大的效果料扰,但是如果使用一些Design Support中的另外一些控件使用,就體現(xiàn)出它的強(qiáng)大之處了焙蹭。
CoordinatorLayout為什么強(qiáng)大晒杈,因?yàn)樗梢员O(jiān)聽所有它的子View的各種事件,并且會(huì)通過(guò)這些事件的監(jiān)聽孔厉,會(huì)動(dòng)態(tài)的去調(diào)整布局拯钻,比如,我們?cè)谄帘斡蚁陆鞘褂肍loatingActionButton撰豺,并添加一個(gè)彈出Snackbar的提示粪般,如果使用的FrameLayout,則Snackbar會(huì)擋住FloatingActionButton,但是如果使用CoordinatorLayout,則不會(huì)出現(xiàn)污桦,它會(huì)動(dòng)態(tài)的將布局整體上移亩歹。
FloatingActionButton fabButton = (FloatingActionButton) findViewById(R.id.fab_at_action);
fabButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(v, "snack action ", 1000)
.setAction("Toast", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(ToolbarActivity.this, " to do ", Toast.LENGTH_SHORT).show();
}
}).show();
}
});
在看一個(gè)例子:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.it.onex.materialdesigndemo.ToolbarActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/tb_at_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_at_list"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- 使用popupTheme是為了兼容5.0以下的系統(tǒng)-->
</android.support.design.widget.CoordinatorLayout>
加入我們使用上面的這種布局,我們會(huì)發(fā)現(xiàn)RecycleView會(huì)將Toolbar擋住,類似于這種效果小作,
不難理解亭姥,因?yàn)镃oordinatorLayout在前面提到過(guò)是類似于FrameLayout的使用,所以顾稀,RecycleView會(huì)擋住Toolbar的一部分达罗,我們?nèi)绾谓鉀Q呢?如果不在添加任何的materialDesign的效果静秆,我們可以添加Margin效果粮揉,實(shí)現(xiàn)想要的效果,但是Google肯定提供了解決方案诡宗,那就是使用AppBarLayout的布局滔蝉,我們?cè)谙旅胬^續(xù)。
4.AppBarLayout
針對(duì)上面出現(xiàn)的bug塔沃,我們提到了AppBarLayout的使用蝠引,這里先看看如何使用,我們?cè)赥oolbar的最外面進(jìn)行嵌套了一層AppBarLayout,然后再看效果蛀柴,是不是解決了上面出現(xiàn)的bug
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.it.onex.materialdesigndemo.ToolbarActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/tb_at_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_at_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<!-- 使用popupTheme是為了兼容5.0以下的系統(tǒng)-->
</android.support.design.widget.CoordinatorLayout>
因?yàn)锳ppBarLayout通過(guò)查看源碼是繼承自LinearLayout,則我們可以將AppBarLayout看做事垂直方向的LinearLayout進(jìn)行使用螃概。因?yàn)槭荕aterialDesign設(shè)計(jì)效果,所以我們配合RecycleView進(jìn)行使用鸽疾,因?yàn)閞ecycleView的滑動(dòng)會(huì)被AppBarLayout監(jiān)聽到吊洼,所以我們通過(guò)給RecycleView設(shè)置一個(gè)內(nèi)定的布局行為
app:layout_behavior="@string/appbar_scrolling_view_behavior"
給Toolbar設(shè)置
app:layout_scrollFlags="scroll|enterAlways"
“scroll”代表:RecycleView向上滾動(dòng)時(shí),toolbar也會(huì)向上滑動(dòng)制肮,直到隱藏冒窍,“enterAlways”屬性代表:當(dāng)RecycleView向下滾動(dòng)時(shí),Toolbar也會(huì)向下滑動(dòng)豺鼻,并且重新顯示综液。“snap”屬性代表:當(dāng)Toolbar還沒(méi)有完全隱藏或顯示的時(shí)候儒飒,會(huì)根據(jù)當(dāng)前滑動(dòng)的距離谬莹,自動(dòng)選擇隱藏或者顯示。
看看運(yùn)行的效果:
5.CollapsingToolbarLayout
如果你見過(guò)類似的效果桩了,那么絕大多數(shù)是使用的這個(gè)布局附帽,即可折疊標(biāo)題欄
先看看效果:
從命名規(guī)則上面看出,它是作用于Toolbar上面的折疊布局井誉,但是蕉扮,它的作用范圍有限,即CollapsingToolbarLayout不能單獨(dú)使用颗圣,即CollapsingToolbarLayout必須作為AppbarLayout的直接子布局進(jìn)行使用慢显,AppbarLayout又是CoordinatorLayout的子布局爪模,所以看看我們的布局文件
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="450dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<ImageView
android:id="@+id/iv_movie_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/ic"
app:layout_collapseMode="parallax"
android:transitionName="basic"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:id="@+id/tb_amd_toolbar"
android:layout_width="match_parent"
app:titleTextColor="#ff4081"
app:subtitleTextColor="#ff4081"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@drawable/add"
app:layout_anchor="@id/appBar"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>
解釋一下幾個(gè)屬性: app:layout_scrollFlags="scroll|exitUntilCollapsed"
“scroll” 表示隨著recycleView的滾動(dòng)欠啤,CollapsingToolbarLayout也進(jìn)行滾動(dòng)荚藻,“exitUntilCollapsed”屬性代表:隨著滾動(dòng)完成折疊以后保留在屏幕上,不再移出界面洁段。 app:contentScrim="?attr/colorPrimary"指定當(dāng)CollapsingToolbarLayout折疊完成以后Toolbar的背景顏色应狱。
NestedScrollView
NestedScrollView類似于一個(gè)ScrollView,將其app:layout_behavior="@string/appbar_scrolling_view_behavior"和之前RecycleView的使用是一樣的祠丝。
填充狀態(tài)欄的空間
想要使用和設(shè)置狀態(tài)欄疾呻,我們只需要這行代碼就行
android:fitsSystemWindows="true"
當(dāng)然設(shè)置了這行以后,還需要將你的Activity的主題的狀態(tài)欄的背景設(shè)置為透明
即:
<style name="MovieDetailActivityTheme" parent="AppTheme.NoActionBar">
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
RecycleView和SwipeRefreshLayout写半、FloatingActionButton的使用這里不用介紹了岸蜗,因?yàn)樘嗔恕T谶@個(gè)Demo中也都有叠蝇,所以不做介紹了璃岳,也相對(duì)的比較簡(jiǎn)單。
最后看看整體的效果
最后附上Github地址:https://github.com/OnexZgj/MaterialDesign