眾所周知Material Design（材質(zhì)設(shè)計(jì)）是Google在2014年I/O大會(huì)上發(fā)布的一種新的設(shè)計(jì)規(guī)范祖很。一經(jīng)推出就好評如潮，個(gè)人是非常喜歡這種風(fēng)格的颇蜡，由于他只支持5.0及其以上的設(shè)備价说，開發(fā)者也只是去嘗嘗鮮，并沒用在真實(shí)的項(xiàng)目中去风秤，使得其在國內(nèi)的市場并不是太好鳖目。隨后不久Google就退出了其兼容庫Android Design Support Library，兼容至2.1缤弦！這絕對是業(yè)界良心领迈，極大的便利了我們這些開發(fā)者。這一兼容庫可以讓我們可以在自己的項(xiàng)目真實(shí)的去體驗(yàn)一把碍沐。百度谷歌一下狸捅，其實(shí)現(xiàn)在已經(jīng)有個(gè)很多介紹這個(gè)支持庫的文章，但是很多都并不太詳細(xì)抢韭，大部分讓人看了都似懂非懂薪贫，我之前也學(xué)習(xí)過這個(gè)庫的用法，很久沒看基本又忘了刻恭，最近我又重新開始學(xué)習(xí)了這個(gè)庫瞧省，所以本文也主要是對這次學(xué)習(xí)的一個(gè)總結(jié)扯夭，當(dāng)然也參考了其他很多的文章，算是站在巨人的肩膀上吧鞍匾，當(dāng)然這篇文章也為后來的學(xué)習(xí)者有更多的參考資料交洗。
先來幾張效果圖吧：
感興趣的也可以先看看，最后能做一個(gè)什么樣的App：MDDemo.apk
說到這個(gè)兼容庫橡淑，其實(shí)很多都是可以在Github去找到對應(yīng)的效果的构拳，其實(shí)我們也是可以去用Github上的那些開源項(xiàng)目，那么多的庫都要一個(gè)一個(gè)去引用梁棠，還是非常的麻煩置森，我猜可能Google也是看到這些東西經(jīng)常被開發(fā)者用在了項(xiàng)目中，索性自己將其封裝成了一個(gè)庫符糊，以方便開發(fā)者的使用凫海。這個(gè)庫我們應(yīng)該怎樣去使用呢？這是本文講解的重點(diǎn)男娄。首先我們看看這個(gè)庫怎么去引用到我們的項(xiàng)目中：
compile 'com.android.support:design:23.1.1'
我們只需將其添加到項(xiàng)目的依賴中去行贪，然后同步一下就OK了。
添加了依賴之后我們再來看看這個(gè)庫里面都有哪些控件吧模闲，如下圖建瘫，紅色邊框矩形框出來的就是這個(gè)庫里面包含的控件，我們可以看到有AppBarLayout尸折、CollapsingToolbarLayout啰脚、CoordinatorLayout，F(xiàn)loatingActionButton翁授、NavigationView拣播、Snackbar、TabLayout收擦、TextInputLayout這八種贮配，后面我會(huì)一個(gè)一個(gè)介紹用法，如果還沒學(xué)過這些控件使用的本文可以手把手教你學(xué)會(huì)怎么去使用塞赂，如果之前有了解過的或者對這個(gè)還比較熟悉的泪勒，也可以繼續(xù)看下去，就當(dāng)做溫習(xí)一下宴猾，順便還可以幫我找出有表達(dá)不正確的地方圆存。
1.Snackbar
SnackBar通過在屏幕底部展示簡潔的信息，為一個(gè)操作提供了一個(gè)輕量級的反饋仇哆，并且在Snackbar中還可以包含一個(gè)操作沦辙，在同一時(shí)間內(nèi)，僅且只能顯示一個(gè) Snackbar讹剔，它的顯示依賴于UI油讯，不像Toast那樣可以脫離應(yīng)用顯示详民。它的用法和Toast很相似，唯一不同的就是它的第一個(gè)參數(shù)不是傳入Context而是傳入它所依附的父視圖陌兑，但是他比Toast更強(qiáng)大沈跨。
我們來看看它的基本使用
<pre>
Snackbar.make(mDrawerLayout, "SnackbarClicked", Snackbar.LENGTH_SHORT).show();</pre>
是不是和Toast很相似。我們來看看它的效果圖：
是不是看著比Toast舒服多了
好了兔综，我們再來看看一個(gè)包含Action的Snackbar怎么使用
<pre>
Snackbar.make(mDrawerLayout, "SnackbarClicked", Snackbar.LENGTH_SHORT).setAction("Action", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "I'm a Toast", Toast.LENGTH_SHORT).show();
}
}).setActionTextColor(Color.RED).show();
</pre>
這里我給Snackbar設(shè)置了一個(gè)Action饿凛，設(shè)置其文字顏色為紅色，并帶有了一個(gè)點(diǎn)擊事件软驰，在單擊這個(gè)Action后就彈出一個(gè)Toast涧窒，效果圖如下
2.TextInputLayout
使用過EditText的同學(xué)肯定知道，有一個(gè)叫hint的屬性碌宴，它可以提示用戶此處應(yīng)該輸入什么內(nèi)容杀狡，然而當(dāng)用戶輸入真實(shí)內(nèi)容之后，hint的提示內(nèi)容就消失了贰镣，用戶的體驗(yàn)效果是十分不好的，TextInputLayout的出現(xiàn)解決了這個(gè)問題膳凝。
我們來看看這個(gè)控件的是怎么使用的
<pre>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"
tools:context="burgess.com.materialdesignstudy.MDTextViewActivity">
<!--TextInputLayout的顏色來自style中的colorAccent的顏色-->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="用戶名/手機(jī)號"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/edit_pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="密碼"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</pre>
其實(shí)這個(gè)控件的使用非常簡單碑隆，我們只需在EditText外面再嵌套一個(gè)TextInputLayout就行了。我們來看看效果
還是很不錯(cuò)的蹬音，當(dāng)用戶在輸入的時(shí)候hint的內(nèi)容就會(huì)跑到輸入內(nèi)容的上邊去上煤，其中TextInputLayout中字體的顏色是style文件中的colorAccent（關(guān)于colorAccent是什么，文末有一張圖看了就清楚了）的顏色著淆。
3.FloatingActionButton
FloatingActionButton從名字可以看出它是一個(gè)浮動(dòng)的按鈕劫狠，它是一個(gè)帶有陰影的圓形按鈕，可以通過fabSize來改變其大小永部，主要負(fù)責(zé)界面的基本操作独泞，這個(gè)按鈕總體來說還是比較簡單的。
我們來看看它的一些屬性：
- 默認(rèn)FloatingActionButton 的背景色是應(yīng)用主題的 colorAccent（其實(shí)MD中的控件主題默認(rèn)基本都是應(yīng)用的這個(gè)主題）苔埋，可以通過app:backgroundTint 屬性或者setBackgroundTintList (ColorStateList tint)方法去改變背景顏色懦砂。
- 上面提到 Floating action button 的大小尺寸，可以用過**app:fabSize **屬性設(shè)置（normal or mini）
- ** android:src** 屬性改變 drawable
- app:rippleColor設(shè)置點(diǎn)擊 button 時(shí)候的顏色（水波紋效果）
- app:borderWidth設(shè)置 button 的邊框?qū)挾?/li>
- app:elevation設(shè)置普通狀態(tài)陰影的深度（默認(rèn)是 6dp）
- app:pressedTranslationZ設(shè)置點(diǎn)擊狀態(tài)的陰影深度（默認(rèn)是 12dp）
怎么去使用：
<pre><android.support.design.widget.FloatingActionButton
android:id="@+id/fab_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@android:drawable/ic_dialog_email"
app:borderWidth="2dp"
app:fabSize="normal"
app:rippleColor="#ff0000" />
</pre>
其效果圖如下：
4.CoordinatorLayout
我們來看看官方對他的描述：
- CoordinatorLayout is a super-poweredFrameLayout.
- CoordinatorLayout is intended for two primary use cases:
1.As a top-level application decor or chrome layout
2.As a container for a specific interaction with one or more child views
從這里我們可以知道它是一個(gè)增強(qiáng)版的FrameLayout组橄，他可以協(xié)調(diào)其子View的交互荞膘，控制手勢機(jī)滾動(dòng)技巧。這個(gè)控件十分的強(qiáng)大玉工，用處也十分的廣泛羽资。就比如剛才說的FloatingActionButton如果用CoordinatorLayout 作為FloatingActionButton的父布局，它將很好的協(xié)調(diào)Snackbar的顯示與FloatingActionButton遵班。
這兩個(gè)動(dòng)態(tài)圖來源于網(wǎng)上屠升，效果是顯而易見的瞄勾，原諒我用的手機(jī)測試，所以沒法錄制動(dòng)態(tài)圖（如果有人知道怎么去錄制的請告知）弥激。
還有它的另外一個(gè)比較重要的用處是控制協(xié)調(diào)內(nèi)容區(qū)和AppBarLayout的滾動(dòng)进陡，這個(gè)后面會(huì)講到。這個(gè)控件還是比較復(fù)雜的微服，用多了就能慢慢體會(huì)到他的強(qiáng)大之處趾疚。我對這個(gè)控件的還不是那么的清楚，所以在這里提供一篇關(guān)于CoordinatorLayout 用法的譯文: 掌握 Coordinator Layout
5.NavigationView
抽屜式的導(dǎo)航控件以蕴，有了他我們可以使得導(dǎo)航更簡單糙麦。我們可以直接通過菜單資源文件生成所需的元素。下圖左邊的即是NavigationView丛肮。
下面我們來看看它是怎么實(shí)現(xiàn)的吧赡磅。
<pre>
<?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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--內(nèi)容區(qū)-->
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="@+id/appbar"
layout="@layout/toolbar" />
<FrameLayout
android:id="@+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/appbar"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<!--左側(cè)導(dǎo)航菜單-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>
</pre>
可以看到這里我們是以DrawerLayout作為其父布局，對于DrawLayout他可以實(shí)現(xiàn)一種抽屜式的側(cè)滑效果宝与，這里不多做講解,這里只簡單說一點(diǎn):DrawLayout中的第一個(gè)布局是內(nèi)容布局焚廊，第二個(gè)是菜單布局。現(xiàn)在我們直接定位到NavigationView习劫，我們看到這里有** app:headerLayout="@layout/navigation_header"咆瘟、app:menu="@menu/drawer"**這兩行代碼，其中headerLayout是設(shè)置其頭部的布局诽里，這個(gè)布局我們可以隨便寫袒餐，就和寫普通的布局文件一樣的。對于menu就是菜單項(xiàng)的配置了谤狡，其配置文件如下：
<pre>
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity">
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_item_home"
android:icon="@drawable/iconfont_home"
android:title="首頁" />
<item
android:id="@+id/navigation_item_blog"
android:icon="@drawable/iconfont_blog"
android:title="我的博客" />
<item
android:id="@+id/navigation_item_about"
android:icon="@drawable/iconfont_about"
android:title="關(guān)于" />
</group>
</menu>
</pre>
就這么簡單灸眼，我們要實(shí)現(xiàn)上述的效果就只要這些就足夠了。但是如果我們想要對Item添加一個(gè)點(diǎn)擊的事件怎么做呢墓懂？請看下面：
<pre>
private void setNavigationViewItemClickListener() {
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_item_home:
mToolbar.setTitle("首頁");
switchFragment("MainFragment");
break;
case R.id.navigation_item_blog:
mToolbar.setTitle("我的博客");
switchFragment("BlogFragment");
break;
case R.id.navigation_item_about:
mToolbar.setTitle("關(guān)于");
switchFragment("AboutFragment");
break;
default:
break;
}
item.setChecked(true);
mDrawerLayout.closeDrawer(Gravity.LEFT);
return false;
}
});
}
</pre>
上面的代碼很清楚了焰宣，就是為NavigationView添加了一個(gè)OnNavigationItemSelectedListener的監(jiān)聽事件，然后我們就可以做我們想做的事了拒贱。
6. AppBarLayout宛徊、CollapsingToolbarLayout、TabLayout
這三個(gè)控件我用一個(gè)例子一下講解了逻澳，在實(shí)際的使用中這三個(gè)控件還是經(jīng)常會(huì)組合在一起的闸天。
-
AppBarLayout：其繼承于LinearLayout，使用AppBarLayout可以讓包含在其中的子控件能響應(yīng)被標(biāo)記了ScrollingViewBehavior的的滾動(dòng)事件（要與CoordinatorLayout 一起使用）斜做，利用它我們可以很容易的去實(shí)現(xiàn)視差滾動(dòng)效果苞氮，這樣所你可能還是不太懂，千言萬語不如一張圖來的直接爽快（這樣圖還是來源于網(wǎng)上瓤逼，其藍(lán)色的部分就是AppBarLayout笼吟，內(nèi)容區(qū)就是被標(biāo)記了ScrollingViewBehavior的库物，可以看到效果是不是挺不錯(cuò)的）。
CollapsingToolbarLayout ：讓Toolbar可伸縮贷帮，在伸縮的時(shí)候決定ToolBar是移除屏幕和固定在最上面戚揭。由于Toolbar 只能固定到屏幕頂端并且不能做出好的動(dòng)畫效果，所以才有了這個(gè)Layout的出現(xiàn)撵枢。
-
TabLayout：這個(gè)其實(shí)和我們之前使用的第三方庫ViewPagerIndicator是很類似的民晒，一般都和ViewPager一起使用，效果如下圖：
動(dòng)態(tài)圖來源于網(wǎng)上
基本知道他們是干什么用的了锄禽，下面就讓我們動(dòng)手潜必，看看到底怎么用吧。
先來幾張下面我們要實(shí)現(xiàn)的效果沃但。由于我是真機(jī)測試磁滚，沒法錄制動(dòng)態(tài)圖，這里就用幾張靜態(tài)圖代替了宵晚。
布局文件（這個(gè)是很重要的垂攘，很多的效果都是直接在布局文件中配置的）:
<pre>
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/iv_book_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerInside"
android:transitionName="transition_book_img"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#292929"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_rating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="2dp"
android:textColor="#FF6347"
android:textSize="14sp" />
</LinearLayout>
<TextView
android:id="@+id/tv_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:textColor="#575757"
android:textSize="12sp" />
</LinearLayout>
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</pre>
我們來分析一下這個(gè)布局文件：
1.最外層的布局用的是CoordinatorLayout，因?yàn)檫@里面有很多的動(dòng)畫坝疼，CoordinatorLayout可以很好的去協(xié)調(diào)里面的動(dòng)畫搜贤。在android.support.design.widget.AppBarLayout下面的那個(gè)LinearLayout被標(biāo)記了appbar_scrolling_view_behavior，這樣一來AppBarLayout就能響應(yīng)LinearLayout中的滾動(dòng)事件钝凶。
2.再來看看CollapsingToolbarLayout，其中contentScrim是設(shè)置其內(nèi)容區(qū)的顏色唁影，layout_scrollFlags取了scroll和exitUntilCollapsed兩個(gè)值耕陷。
layout_scrollFlags的Flag包括：
- scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag，沒有設(shè)置這個(gè)flag的view將被固定在屏幕頂部据沈。
**enterAlways**: 這個(gè)flag讓任意向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢娪茨?dāng)向上滑的時(shí)候Toolbar就隱藏，下滑的時(shí)候顯示锌介。**enterAlwaysCollapsed**: 顧名思義嗜诀，這個(gè)flag定義的是何時(shí)進(jìn)入（已經(jīng)消失之后何時(shí)再次顯示）。假設(shè)你定義了一個(gè)最小高度（minHeight）同時(shí)enterAlways也定義了孔祸，那么view將在到達(dá)這個(gè)最小高度的時(shí)候開始顯示隆敢，并且從這個(gè)時(shí)候開始慢慢展開，當(dāng)滾動(dòng)到頂部的時(shí)候展開完崔慧。**exitUntilCollapsed**: 同樣顧名思義拂蝎，這個(gè)flag時(shí)定義何時(shí)退出，當(dāng)你定義了一個(gè)minHeight惶室，這個(gè)view將在滾動(dòng)到達(dá)這個(gè)最小高度的時(shí)候消失温自。
只看概覽可能還是不會(huì)太清楚玄货，注意一定要多實(shí)踐，感興趣的讀者可以一個(gè)一個(gè)去試一試效果悼泌。
3.定位到ImageView松捉，有這兩個(gè)屬性是我們平常用沒看到的，說明我寫在注釋上了
<pre>
app:layout_collapseMode="parallax"http://這個(gè)是配置當(dāng)ImageView消失或者顯示時(shí)候有一種視差滾動(dòng)效果
app:layout_collapseParallaxMultiplier="0.7"http://視差因子馆里，越大視差特效越明顯隘世，最大為1 </pre>
4.Toolbar中有一個(gè)app:layout_collapseMode="pin" 這個(gè)確保Toolbar在AppBarLayout折疊的時(shí)候仍然被固定在屏幕的頂部
布局文件就到這，我們來看看Activity中的邏輯
<pre>
/**
Created by _SOLID
Date:2016/3/30
-
Time:20:16
*/
public class BookDetailActivity extends BaseActivity {private String mUrl;
private Toolbar mToolbar;
private CollapsingToolbarLayout mCollapsingToolbarLayout;
private ImageView mIvBook;private BookBean mBookBean;
private TextView mTvTitle;
private TextView mTvMsg;
private TextView mTvRating;
private ViewPager mViewPager;
private TabLayout mTabLayout;@Override
protected void initView() {
//設(shè)置Toolbar
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setHomeButtonEnabled(true);//決定左上角的圖標(biāo)是否可以點(diǎn)擊
getSupportActionBar().setDisplayHomeAsUpEnabled(true);//決定左上角圖標(biāo)的右側(cè)是否有向左的小箭頭
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
onBackPressed();
}
});mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout); mIvBook = (ImageView) findViewById(R.id.iv_book_image); mTvTitle = (TextView) findViewById(R.id.tv_title); mTvMsg = (TextView) findViewById(R.id.tv_msg); mTvRating = (TextView) findViewById(R.id.tv_rating); mViewPager = (ViewPager) findViewById(R.id.viewpager); mTabLayout = (TabLayout) findViewById(R.id.sliding_tabs); mTabLayout.addTab(mTabLayout.newTab().setText("作者信息")); mTabLayout.addTab(mTabLayout.newTab().setText("章節(jié)")); mTabLayout.addTab(mTabLayout.newTab().setText("書籍簡介"));}
@Override
protected int setLayoutResourseID() {
return R.layout.activity_book_detail;
}@Override
protected void init() {
mUrl = getIntent().getStringExtra("url");
}@Override
protected void initData() {
SolidHttpUtils.getInstance().loadString(mUrl, new SolidHttpUtils.HttpCallBack() {
@Override
public void onLoading() {} @Override public void onSuccess(String result) { Gson gson = new Gson(); mBookBean = gson.fromJson(result, BookBean.class); mCollapsingToolbarLayout.setTitle(mBookBean.getTitle()); mTvTitle.setText(mBookBean.getTitle()); mTvMsg.setText(mBookBean.getAuthor() + "/" + mBookBean.getPublisher() + "/" + mBookBean.getPubdate()); mTvRating.setText(mBookBean.getRating().getAverage() + "分"); SolidHttpUtils.getInstance().loadImage(mBookBean.getImages().getLarge(), mIvBook); BookInfoPageAdapter adapter = new BookInfoPageAdapter(BookDetailActivity.this, mBookBean, getSupportFragmentManager()); mViewPager.setAdapter(adapter); mTabLayout.setupWithViewPager(mViewPager); } @Override public void onError(Exception e) { } });}
}
</pre>
其實(shí)并不難也拜，這里只需注意一點(diǎn)以舒，當(dāng)Toolbar被CollapsingToolbarLayout包裹的時(shí)候，設(shè)置標(biāo)題是設(shè)置CollapsingToolbarLayout的慢哈，而不是Toolbar蔓钟。
好了終于寫完了，差不多寫了接近4個(gè)小時(shí)卵贱，好累的說滥沫，現(xiàn)在整個(gè)人都是暈暈的。
源碼獻(xiàn)上:MaterialDesignDemo
參考鏈接:
Android的材料設(shè)計(jì)兼容庫（Design Support Library）
Material Design控件使用
Floating Action Button（翻譯）
Material Design 中文版
Android Design Support Library概覽
附(一些控件使用使用應(yīng)注意的地方):
1.在使用CardView的時(shí)候键俱，一定要注意兰绣，當(dāng)CardView的寬和高填充父容器的時(shí)候，CardView的margin最好要比cardElevation大编振，不然就看不到立體的效果缀辩。
2.我們知道ListView有一個(gè)onItemClick的事件，但是RecyclerView卻沒有踪央，那么我們應(yīng)該怎樣去設(shè)置呢臀玄？其實(shí)很簡單，關(guān)于RecyclerView設(shè)置item的點(diǎn)擊事件畅蹂，只需在創(chuàng)建ViewHolder的時(shí)候健无，給填充的View設(shè)置單擊事件即可。
3.在使用android.support.design.widget.AppBarLayout的時(shí)候內(nèi)容區(qū)最好使用android.support.v4.widget.NestedScrollView液斜，之前我的內(nèi)容區(qū)用的是ScrollView累贤，在往上拉的時(shí)候AppBarLayout一直沒有動(dòng)畫效果，折騰了幾個(gè)小時(shí)都沒找到原因少漆。最后逼不得用Android Studio創(chuàng)建了一個(gè)他自帶的關(guān)于AppBarLayout的模板項(xiàng)目臼膏，看到他用的是NestedScrollView作為內(nèi)容區(qū)，我果斷就把我的內(nèi)容區(qū)換成了這個(gè)检疫，立馬就有動(dòng)畫效果了讶请。
NestedScrollView官方的描述：
NestedScrollView is just likeScrollView, but it supports acting as both a nested scrolling parent and child on both new and old versions of Android. Nested scrolling is enabled by default.
如果感覺還不錯(cuò)的就給個(gè)喜歡支持一下吧，有問題請留言，謝謝
最后附一張MD的主題色解析圖:
