轉(zhuǎn)：http://blog.csdn.net/jdsjlzx/article/details/41441083
前言
我們都知道Marterial Design是Google推出的全新UI設(shè)計(jì)規(guī)范，如果對其不太了解的可以看下：Material design非官方中文指導(dǎo)手冊?，或者我的前面幾篇Material Design的譯文，相比之前Google在Android Holo風(fēng)格上平平淡淡的表現(xiàn)不同，Material Design現(xiàn)在是被Google所比較重視的。在推出這門全新設(shè)計(jì)語言后，Android上自家的應(yīng)用很快就使用Material Design全新設(shè)計(jì)了，如Play商店，Google Map，Google+，比較新的Inbox等；Web上的視覺體驗(yàn)也是很Material的，最有幫助的當(dāng)屬這個了Material Design的官方介紹（自備梯子）了；IOS方面的Google應(yīng)用也在慢慢推進(jìn)中。所以作為一個Android開發(fā)者怎么能不緊跟Google的步伐呢，下面就來通過Toolbar和Palette這兩個在API21后推出的東西，當(dāng)然Google已經(jīng)把它們放到到v7庫里了，使用Material Design來設(shè)計(jì)App當(dāng)然不僅限于這兩個方面了，前面的Material Design的譯文已經(jīng)清楚知道怎么去全面設(shè)計(jì)。除了Toolbar和Palette這篇文章還會介紹在Toolbar下使用Drawer，以及?Android L中的RecyclerView 、CardView 、Palette的使用。
Toolbar
Toolbar是什么？大概說一下它的官方介紹。Toolbar是應(yīng)用的內(nèi)容的標(biāo)準(zhǔn)工具欄，可以說是Actionbar的升級版，兩者不是獨(dú)立關(guān)系，要使用Toolbar還是得跟ActionBar扯上關(guān)系的。相比Actionbar Toolbar最明顯的一點(diǎn)就是變得很自由，可隨處放置，因?yàn)樗亲鳛橐粋€ViewGroup來定義使用的，所以單純使用ActionBar已經(jīng)稍顯過時了，它的一些方法已被標(biāo)注過時。
那么它怎么使用呢，首先我們一樣要用到v7的支持包，然后定義程序的主題樣式，在style里得先把Actionbar去掉，有點(diǎn)像欲想練功，必先自宮的感覺啊。如下：
<resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- toolbar（actionbar）顏色 --> <item name="colorPrimary">#4876FF</item> <!-- 狀態(tài)欄顏色 --> <item name="colorPrimaryDark">#3A5FCD</item> <!-- 窗口的背景顏色 --> <item name="android:windowBackground">@android:color/white</item> <!-- SearchView --> <item name="searchViewStyle">@style/MySearchViewStyle</item> </style> <style name="AppTheme" parent="@style/AppBaseTheme"></style> <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView"> <!--
Background for the search query section (e.g. EditText) <item name="queryBackground">...</item>
Background for the actions section (e.g. voice, submit) <item name="submitBackground">...</item>
Close button icon <item name="closeIcon">...</item>
Search button icon <item name="searchIcon">...</item>
Go/
commit button icon <item name="goIcon">...</item>
Voice search button icon <item name="voiceIcon">...</item>
Commit icon shown in the query suggestion row <item name="commitIcon">...</item>
Layout for query suggestion rows <item name="suggestionRowLayout">...</item> --> </style> </resources> <resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- toolbar（actionbar）顏色 --> <item name="colorPrimary">#4876FF</item> <!-- 狀態(tài)欄顏色 --> <item name="colorPrimaryDark">#3A5FCD</item> <!-- 窗口的背景顏色 --> <item name="android:windowBackground">@android:color/white</item> <!-- SearchView --> <item name="searchViewStyle">@style/MySearchViewStyle</item> </style> <style name="AppTheme" parent="@style/AppBaseTheme"></style> <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView"> <!--
Background for the search query section (e.g. EditText) <item name="queryBackground">...</item>
Background for the actions section (e.g. voice, submit) <item name="submitBackground">...</item>
Close button icon <item name="closeIcon">...</item>
Search button icon <item name="searchIcon">...</item>
Go/
commit button icon <item name="goIcon">...</item>
Voice search button icon <item name="voiceIcon">...</item>
Commit icon shown in the query suggestion row <item name="commitIcon">...</item>
Layout for query suggestion rows <item name="suggestionRowLayout">...</item> --> </style> </resources>
去除Actionbar最簡單的方法就是直接繼承NoActionBar的主題了。顏色的屬性說明，還是下面這張圖最清楚了：
?
?
另外，SearchView在AppCompat中提供了更強(qiáng)的可定制性和更多的樣式可供設(shè)置，不過一般我們用默認(rèn)的就行。
還有我們可以在values-v21給API21的系統(tǒng)版本設(shè)置默認(rèn)的底部導(dǎo)航欄默認(rèn)的顏色：
/res/values-v21/styles.xml
?
[html]?view plaincopy
<resources?xmlns:android="http://schemas.android.com/apk/res/android">????????<style?name="AppTheme"?parent="@style/AppBaseTheme">????????????????????<item?name="android:navigationBarColor">#4876FF</item>??????</style>????</resources>?? [html]?view plaincopy
<resources?xmlns:android="http://schemas.android.com/apk/res/android">????????<style?name="AppTheme"?parent="@style/AppBaseTheme">????????????????????<item?name="android:navigationBarColor">#4876FF</item>??????</style>????</resources>?? 設(shè)置好主題的下一步工作：
在xml的layout中定義一個Toolbar：
?
/layout/toolbar.xml
?
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>??<android.support.v7.widget.Toolbar?xmlns:android="http://schemas.android.com/apk/res/android"??????xmlns:app="http://schemas.android.com/apk/res/com.example.toolbar"??????android:id="@+id/toolbar"??????android:layout_width="match_parent"??????android:layout_height="wrap_content"??????android:background="?attr/colorPrimary"??????android:minHeight="?attr/actionBarSize"??????app:popupTheme="@style/ThemeOverlay.AppCompat.Light"??????app:theme="@style/ThemeOverlay.AppCompat.ActionBar"?>????</android.support.v7.widget.Toolbar>?? [html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>??<android.support.v7.widget.Toolbar?xmlns:android="http://schemas.android.com/apk/res/android"??????xmlns:app="http://schemas.android.com/apk/res/com.example.toolbar"??????android:id="@+id/toolbar"??????android:layout_width="match_parent"??????android:layout_height="wrap_content"??????android:background="?attr/colorPrimary"??????android:minHeight="?attr/actionBarSize"??????app:popupTheme="@style/ThemeOverlay.AppCompat.Light"??????app:theme="@style/ThemeOverlay.AppCompat.ActionBar"?>????</android.support.v7.widget.Toolbar>?? 我們把toolbar作為一個獨(dú)立的布局xml，方便在其他布局里include進(jìn)去。可以看到我們在這里是可以設(shè)置Toolbar的屬性的，初上面的外還有以下的屬性，都是見名知意的就不一一說明了。
?
?
然后在activity的布局里把它include進(jìn)去就行了，當(dāng)然一般把它放到最上面了，有需要你是可以把它放到中間、底部或其它位置的，可見它的自由度是很高的。在下一步呢就到代碼了，在onCreate中：
?
[java]?view plaincopy
mToolbar?=?(Toolbar)?findViewById(R.id.toolbar);??mToolbar.setTitle("Rocko");setSupportActionBar(mToolbar);????mToolbar.setOnMenuItemClickListener(new?Toolbar.OnMenuItemClickListener()?{??????@Override??????public?boolean?onMenuItemClick(MenuItem?item)?{??????????switch?(item.getItemId())?{??????????case?R.id.action_settings:??????????????Toast.makeText(MainActivity.this,?"action_settings",?0).show();??????????????break;??????????case?R.id.action_share:??????????????Toast.makeText(MainActivity.this,?"action_share",?0).show();??????????????break;??????????default:??????????????break;??????????}??????????return?true;??????}??});?? [java]?view plaincopy
mToolbar?=?(Toolbar)?findViewById(R.id.toolbar);??mToolbar.setTitle("Rocko");setSupportActionBar(mToolbar);????mToolbar.setOnMenuItemClickListener(new?Toolbar.OnMenuItemClickListener()?{??????@Override??????public?boolean?onMenuItemClick(MenuItem?item)?{??????????switch?(item.getItemId())?{??????????case?R.id.action_settings:??????????????Toast.makeText(MainActivity.this,?"action_settings",?0).show();??????????????break;??????????case?R.id.action_share:??????????????Toast.makeText(MainActivity.this,?"action_share",?0).show();??????????????break;??????????default:??????????????break;??????????}??????????return?true;??????}??});?? 上面關(guān)鍵的一點(diǎn)就是setSupportActionBar(mToolbar);把Toolbar當(dāng)做ActionBar給設(shè)置了。menu還是可以像ActionBar一樣用和處理的：
?
res/menu/main.xml
?
[html]?view plaincopy
<menu?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"??????tools:context=".MainActivity"?>????????<item??????????android:id="@+id/ab_search"??????????android:orderInCategory="80"??????????android:title="action_search"??????????app:actionViewClass="android.support.v7.widget.SearchView"??????????app:showAsAction="ifRoom"/>??????<item??????????android:id="@+id/action_share"??????????android:orderInCategory="90"??????????android:title="action_share"??????????app:actionProviderClass="android.support.v7.widget.ShareActionProvider"??????????app:showAsAction="ifRoom"/>??????<item??????????android:id="@+id/action_settings"??????????android:orderInCategory="100"??????????android:title="action_settings"??????????app:showAsAction="never"/>????</menu>?? [html]?view plaincopy
<menu?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"??????tools:context=".MainActivity"?>????????<item??????????android:id="@+id/ab_search"??????????android:orderInCategory="80"??????????android:title="action_search"??????????app:actionViewClass="android.support.v7.widget.SearchView"??????????app:showAsAction="ifRoom"/>??????<item??????????android:id="@+id/action_share"??????????android:orderInCategory="90"??????????android:title="action_share"??????????app:actionProviderClass="android.support.v7.widget.ShareActionProvider"??????????app:showAsAction="ifRoom"/>??????<item??????????android:id="@+id/action_settings"??????????android:orderInCategory="100"??????????android:title="action_settings"??????????app:showAsAction="never"/>????</menu>?? 這一步時候程序的樣子：
? ?PS. ?Genymotion可以用5.0的模擬器了
?
可以感覺到這樣是不是和ActionBar沒什么區(qū)別呢。誒，左邊的菜單圖標(biāo)怎么出來的呢，其實(shí)上面還沒處理到，他就是Navigation drawer了，使用新版本的v4、v7庫的drawer明顯的一點(diǎn)是它帶了一個酷酷的交互動畫（請看最后的gif圖）。那么使用Toolbar之后又怎么去在Toolbar中使用drawer呢。下面當(dāng)然也是跟著代碼來.
/layout/activity_main.xml
?
[html]?view plaincopy
<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"??????tools:context="com.example.toolbar.MainActivity"?>????????<include?layout="@layout/toolbar"?/>????????<android.support.v4.widget.DrawerLayout??????????android:id="@+id/drawer"??????????android:layout_width="match_parent"??????????android:layout_height="match_parent"?>??????????????????????<LinearLayout??????????????android:layout_width="match_parent"??????????????android:layout_height="match_parent"??????????????android:orientation="vertical"?>????????????????<com.example.toolbar.widget.PagerSlidingTabStrip??????????????????android:id="@+id/tabs"??????????????????android:layout_width="match_parent"??????????????????android:layout_height="48dip"?>??????????????</com.example.toolbar.widget.PagerSlidingTabStrip>????????????????<android.support.v4.view.ViewPager??????????????????android:id="@+id/pager"??????????????????android:layout_width="match_parent"??????????????????android:layout_height="match_parent"?>??????????????</android.support.v4.view.ViewPager>??????????</LinearLayout>??????????????????????<LinearLayout??????????????android:id="@+id/drawer_view"??????????????android:layout_width="match_parent"??????????????android:layout_height="match_parent"??????????????android:layout_gravity="start"??????????????android:background="@drawable/drawer"??????????????android:orientation="vertical"??????????????android:padding="8dp"?>????????????????<TextView??????????????????android:layout_width="match_parent"??????????????????android:layout_height="match_parent"?/>??????????</LinearLayout>??????</android.support.v4.widget.DrawerLayout>????</LinearLayout>?? [html]?view plaincopy
<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"??????tools:context="com.example.toolbar.MainActivity"?>????????<include?layout="@layout/toolbar"?/>????????<android.support.v4.widget.DrawerLayout??????????android:id="@+id/drawer"??????????android:layout_width="match_parent"??????????android:layout_height="match_parent"?>??????????????????????<LinearLayout??????????????android:layout_width="match_parent"??????????????android:layout_height="match_parent"??????????????android:orientation="vertical"?>????????????????<com.example.toolbar.widget.PagerSlidingTabStrip??????????????????android:id="@+id/tabs"??????????????????android:layout_width="match_parent"??????????????????android:layout_height="48dip"?>??????????????</com.example.toolbar.widget.PagerSlidingTabStrip>????????????????<android.support.v4.view.ViewPager??????????????????android:id="@+id/pager"??????????????????android:layout_width="match_parent"??????????????????android:layout_height="match_parent"?>??????????????</android.support.v4.view.ViewPager>??????????</LinearLayout>??????????????????????<LinearLayout??????????????android:id="@+id/drawer_view"??????????????android:layout_width="match_parent"??????????????android:layout_height="match_parent"??????????????android:layout_gravity="start"??????????????android:background="@drawable/drawer"??????????????android:orientation="vertical"??????????????android:padding="8dp"?>????????????????<TextView??????????????????android:layout_width="match_parent"??????????????????android:layout_height="match_parent"?/>??????????</LinearLayout>??????</android.support.v4.widget.DrawerLayout>????</LinearLayout>?? Pager的東西可以先忽略，后面會說到。側(cè)滑菜單的內(nèi)容為簡單起見直接先用圖片來演示了。可以看到布局的設(shè)置大同小異，不同點(diǎn)在代碼中：
?
?
[java]?view plaincopy
getSupportActionBar().setDisplayHomeAsUpEnabled(true);??mDrawerLayout?=?(DrawerLayout)?findViewById(R.id.drawer);??mDrawerToggle?=?new?ActionBarDrawerToggle(this,?mDrawerLayout,?mToolbar,?R.string.drawer_open,??????????R.string.drawer_close);??mDrawerToggle.syncState();??mDrawerLayout.setDrawerListener(mDrawerToggle);?? [java]?view plaincopy
getSupportActionBar().setDisplayHomeAsUpEnabled(true);??mDrawerLayout?=?(DrawerLayout)?findViewById(R.id.drawer);??mDrawerToggle?=?new?ActionBarDrawerToggle(this,?mDrawerLayout,?mToolbar,?R.string.drawer_open,??????????R.string.drawer_close);??mDrawerToggle.syncState();??mDrawerLayout.setDrawerListener(mDrawerToggle);?? 先把圖標(biāo)設(shè)置顯示出來，然后把ActionBarDrawerToggle作為DrawerLayout的監(jiān)聽器設(shè)置進(jìn)去，還是比較簡單的，效果：
要是需要把drawer覆蓋toolbar怎么辦呢？需要稍微調(diào)整一下界面的布局位置就行了，效果就不貼上來了(腦補(bǔ)，或者改下源碼的setContentView運(yùn)行)：
[html]?view plaincopy
<android.support.v4.widget.DrawerLayout?xmlns:android="http://schemas.android.com/apk/res/android"??????xmlns:tools="http://schemas.android.com/tools"??????android:id="@+id/drawer"??????android:layout_width="match_parent"??????android:layout_height="match_parent"??????android:fitsSystemWindows="true"?>????????<LinearLayout??????????android:layout_width="match_parent"??????????android:layout_height="match_parent"??????????android:orientation="vertical"??????????tools:context="com.example.toolbar.MainActivity"?>????????????<include?layout="@layout/toolbar"?/>????????????????????<LinearLayout??????????????android:layout_width="match_parent"??????????????android:layout_height="match_parent"??????????????android:background="@drawable/content"??????????????android:orientation="vertical"?>????????????????<com.example.toolbar.widget.PagerSlidingTabStrip??????????????????android:id="@+id/tabs"??????????????????android:layout_width="match_parent"??????????????????android:layout_height="48dip"??????????????????android:visibility="invisible"?>??????????????</com.example.toolbar.widget.PagerSlidingTabStrip>????????????????<android.support.v4.view.ViewPager??????????????????android:id="@+id/pager"??????????????????android:layout_width="match_parent"??????????????????android:layout_height="match_parent"??????????????????android:visibility="invisible"?>??????????????</android.support.v4.view.ViewPager>??????????</LinearLayout>??????</LinearLayout>????????????<LinearLayout??????????android:id="@+id/drawer_view"??????????android:layout_width="match_parent"??????????android:layout_height="match_parent"??????????android:layout_gravity="start"??????????android:background="@drawable/drawer"??????????android:orientation="vertical"??????????android:clickable="true"??????????android:padding="8dp"?>????????????<TextView??????????????android:layout_width="match_parent"??????????????android:layout_height="match_parent"?/>??????</LinearLayout>????</android.support.v4.widget.DrawerLayout>?? [html]?view plaincopy
<android.support.v4.widget.DrawerLayout?xmlns:android="http://schemas.android.com/apk/res/android"??????xmlns:tools="http://schemas.android.com/tools"??????android:id="@+id/drawer"??????android:layout_width="match_parent"??????android:layout_height="match_parent"??????android:fitsSystemWindows="true"?>????????<LinearLayout??????????android:layout_width="match_parent"??????????android:layout_height="match_parent"??????????android:orientation="vertical"??????????tools:context="com.example.toolbar.MainActivity"?>????????????<include?layout="@layout/toolbar"?/>????????????????????<LinearLayout??????????????android:layout_width="match_parent"??????????????android:layout_height="match_parent"??????????????android:background="@drawable/content"??????????????android:orientation="vertical"?>????????????????<com.example.toolbar.widget.PagerSlidingTabStrip??????????????????android:id="@+id/tabs"??????????????????android:layout_width="match_parent"??????????????????android:layout_height="48dip"??????????????????android:visibility="invisible"?>??????????????</com.example.toolbar.widget.PagerSlidingTabStrip>????????????????<android.support.v4.view.ViewPager??????????????????android:id="@+id/pager"??????????????????android:layout_width="match_parent"??????????????????android:layout_height="match_parent"??????????????????android:visibility="invisible"?>??????????????</android.support.v4.view.ViewPager>??????????</LinearLayout>??????</LinearLayout>????????????<LinearLayout??????????android:id="@+id/drawer_view"??????????android:layout_width="match_parent"??????????android:layout_height="match_parent"??????????android:layout_gravity="start"??????????android:background="@drawable/drawer"??????????android:orientation="vertical"??????????android:clickable="true"??????????android:padding="8dp"?>????????????<TextView??????????????android:layout_width="match_parent"??????????????android:layout_height="match_parent"?/>??????</LinearLayout>????</android.support.v4.widget.DrawerLayout>?? 做這里時發(fā)現(xiàn)拉出菜單后還是可以點(diǎn)擊Toggle按鈕的，解決方法時把側(cè)滑的布局設(shè)置為clickable="true"。關(guān)于側(cè)滑菜單需不需要的覆蓋Toolbar的問題好像從Google提供的例子來看兩者都有。我想既然它做出這個Toggle按鈕的動畫來的話如果覆蓋了不就沒有意義了？或者還有其它考慮？暫時我們看著Google Play來就行，新版Play的是沒有覆蓋上去的。
?
?
?
Palette
說Palette之前先說下前面提到的Pager。ViewPager是什么大家應(yīng)該都是知道的了，一般ViewPager、xxxTabStrip、Fragment三個好基友是一起出現(xiàn)的。這里的xxxTabStrip是使用Github上的PagerSlidingTabStrip。當(dāng)我們的Pager切換時伴隨著Fragment的變化，而Fragment里的內(nèi)容一般是不同的，所以每個Fragment里的一般視覺效果也是不同的，所以我們可以用Palette來去提取Fragment中的主色調(diào)，那Fragment中的拿什么給Palatte去提取顏色呢，這就需要自己根據(jù)自己的情況來決定的。比如我這個demo里，Fragment就一個TextView和給Fragment設(shè)了背景，那么我就可以把背景的圖片給Palette去提取顏色了。
說了上面一段你也基本知道Palatte是用來干么的了，它就是用來從Bitmap中提取顏色的，然后把顏色設(shè)置給title啊content啊等等。
先貼上Pager部分的代碼：
?
[java]?view plaincopy
private?void?initViews()?{??????mToolbar?=?(Toolbar)?findViewById(R.id.toolbar);??????????mToolbar.setTitle("Rocko");????????setSupportActionBar(mToolbar);????????????????????????????????mToolbar.setOnMenuItemClickListener(new?Toolbar.OnMenuItemClickListener()?{??????????@Override??????????public?boolean?onMenuItemClick(MenuItem?item)?{??????????????switch?(item.getItemId())?{??????????????case?R.id.action_settings:??????????????????Toast.makeText(MainActivity.this,?"action_settings",?0).show();??????????????????break;??????????????case?R.id.action_share:??????????????????Toast.makeText(MainActivity.this,?"action_share",?0).show();??????????????????break;??????????????default:??????????????????break;??????????????}??????????????return?true;??????????}??????});??????getSupportActionBar().setDisplayHomeAsUpEnabled(true);??????????mDrawerLayout?=?(DrawerLayout)?findViewById(R.id.drawer);??????mDrawerToggle?=?new?ActionBarDrawerToggle(this,?mDrawerLayout,?mToolbar,?R.string.drawer_open,??????????????R.string.drawer_close);??????mDrawerToggle.syncState();??????mDrawerLayout.setDrawerListener(mDrawerToggle);????????mPagerSlidingTabStrip?=?(PagerSlidingTabStrip)?findViewById(R.id.tabs);??????mViewPager?=?(ViewPager)?findViewById(R.id.pager);??????mViewPager.setAdapter(new?MyPagerAdapter(getSupportFragmentManager()));??????mPagerSlidingTabStrip.setViewPager(mViewPager);??????mPagerSlidingTabStrip.setOnPageChangeListener(new?OnPageChangeListener()?{????????????@Override??????????public?void?onPageSelected(int?arg0)?{??????????????colorChange(arg0);??????????}????????????@Override??????????public?void?onPageScrolled(int?arg0,?float?arg1,?int?arg2)?{??????????}????????????@Override??????????public?void?onPageScrollStateChanged(int?arg0)?{??????????}??????});??????initTabsValue();??}????private?void?initTabsValue()?{??????????mPagerSlidingTabStrip.setIndicatorColor(Color.BLUE);??????????mPagerSlidingTabStrip.setDividerColor(Color.TRANSPARENT);??????????mPagerSlidingTabStrip.setBackgroundColor(Color.parseColor("#4876FF"));??????????mPagerSlidingTabStrip.setUnderlineHeight((int)?TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,??????????????1,?getResources().getDisplayMetrics()));??????????mPagerSlidingTabStrip.setIndicatorHeight((int)?TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,??????????????5,?getResources().getDisplayMetrics()));??????????mPagerSlidingTabStrip.setSelectedTextColor(Color.WHITE);??????????mPagerSlidingTabStrip.setTextColor(Color.BLACK);??}?? [java]?view plaincopy
private?void?initViews()?{??????mToolbar?=?(Toolbar)?findViewById(R.id.toolbar);??????????mToolbar.setTitle("Rocko");????????setSupportActionBar(mToolbar);????????????????????????????????mToolbar.setOnMenuItemClickListener(new?Toolbar.OnMenuItemClickListener()?{??????????@Override??????????public?boolean?onMenuItemClick(MenuItem?item)?{??????????????switch?(item.getItemId())?{??????????????case?R.id.action_settings:??????????????????Toast.makeText(MainActivity.this,?"action_settings",?0).show();??????????????????break;??????????????case?R.id.action_share:??????????????????Toast.makeText(MainActivity.this,?"action_share",?0).show();??????????????????break;??????????????default:??????????????????break;??????????????}??????????????return?true;??????????}??????});??????getSupportActionBar().setDisplayHomeAsUpEnabled(true);??????????mDrawerLayout?=?(DrawerLayout)?findViewById(R.id.drawer);??????mDrawerToggle?=?new?ActionBarDrawerToggle(this,?mDrawerLayout,?mToolbar,?R.string.drawer_open,??????????????R.string.drawer_close);??????mDrawerToggle.syncState();??????mDrawerLayout.setDrawerListener(mDrawerToggle);????????mPagerSlidingTabStrip?=?(PagerSlidingTabStrip)?findViewById(R.id.tabs);??????mViewPager?=?(ViewPager)?findViewById(R.id.pager);??????mViewPager.setAdapter(new?MyPagerAdapter(getSupportFragmentManager()));??????mPagerSlidingTabStrip.setViewPager(mViewPager);??????mPagerSlidingTabStrip.setOnPageChangeListener(new?OnPageChangeListener()?{????????????@Override??????????public?void?onPageSelected(int?arg0)?{??????????????colorChange(arg0);??????????}????????????@Override??????????public?void?onPageScrolled(int?arg0,?float?arg1,?int?arg2)?{??????????}????????????@Override??????????public?void?onPageScrollStateChanged(int?arg0)?{??????????}??????});??????initTabsValue();??}????private?void?initTabsValue()?{??????????mPagerSlidingTabStrip.setIndicatorColor(Color.BLUE);??????????mPagerSlidingTabStrip.setDividerColor(Color.TRANSPARENT);??????????mPagerSlidingTabStrip.setBackgroundColor(Color.parseColor("#4876FF"));??????????mPagerSlidingTabStrip.setUnderlineHeight((int)?TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,??????????????1,?getResources().getDisplayMetrics()));??????????mPagerSlidingTabStrip.setIndicatorHeight((int)?TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,??????????????5,?getResources().getDisplayMetrics()));??????????mPagerSlidingTabStrip.setSelectedTextColor(Color.WHITE);??????????mPagerSlidingTabStrip.setTextColor(Color.BLACK);??}?? 這些都是一些基本設(shè)置，然后Palette在哪里開始工作呢，就是在tab切換時了。在onPagerSelect方法里即上面代碼的45行。他是這么干的：
?
[java]?view plaincopy
@SuppressLint("NewApi")??private?void?colorChange(int?position)?{??????????Bitmap?bitmap?=?BitmapFactory.decodeResource(getResources(),??????????????SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));??????????Palette.generateAsync(bitmap,?new?Palette.PaletteAsyncListener()?{??????????????????@Override??????????public?void?onGenerated(Palette?palette)?{??????????????Palette.Swatch?vibrant?=?palette.getVibrantSwatch();??????????????????????????mPagerSlidingTabStrip.setBackgroundColor(vibrant.getRgb());??????????????mPagerSlidingTabStrip.setTextColor(vibrant.getTitleTextColor());??????????????????????????mPagerSlidingTabStrip.setIndicatorColor(colorBurn(vibrant.getRgb()));????????????????mToolbar.setBackgroundColor(vibrant.getRgb());??????????????if?(android.os.Build.VERSION.SDK_INT?>=?21)?{??????????????????Window?window?=?getWindow();??????????????????????????????????window.setStatusBarColor(colorBurn(vibrant.getRgb()));??????????????????window.setNavigationBarColor(colorBurn(vibrant.getRgb()));??????????????}??????????}??????});??}????private?int?colorBurn(int?RGBValues)?{??????int?alpha?=?RGBValues?>>?24;??????int?red?=?RGBValues?>>?16?&?0xFF;??????int?green?=?RGBValues?>>?8?&?0xFF;??????int?blue?=?RGBValues?&?0xFF;??????red?=?(int)?Math.floor(red?*?(1?-?0.1));??????green?=?(int)?Math.floor(green?*?(1?-?0.1));??????blue?=?(int)?Math.floor(blue?*?(1?-?0.1));??????return?Color.rgb(red,?green,?blue);??}?? [java]?view plaincopy
@SuppressLint("NewApi")??private?void?colorChange(int?position)?{??????????Bitmap?bitmap?=?BitmapFactory.decodeResource(getResources(),??????????????SuperAwesomeCardFragment.getBackgroundBitmapPosition(position));??????????Palette.generateAsync(bitmap,?new?Palette.PaletteAsyncListener()?{??????????????????@Override??????????public?void?onGenerated(Palette?palette)?{??????????????Palette.Swatch?vibrant?=?palette.getVibrantSwatch();??????????????????????????mPagerSlidingTabStrip.setBackgroundColor(vibrant.getRgb());??????????????mPagerSlidingTabStrip.setTextColor(vibrant.getTitleTextColor());??????????????????????????mPagerSlidingTabStrip.setIndicatorColor(colorBurn(vibrant.getRgb()));????????????????mToolbar.setBackgroundColor(vibrant.getRgb());??????????????if?(android.os.Build.VERSION.SDK_INT?>=?21)?{??????????????????Window?window?=?getWindow();??????????????????????????????????window.setStatusBarColor(colorBurn(vibrant.getRgb()));??????????????????window.setNavigationBarColor(colorBurn(vibrant.getRgb()));??????????????}??????????}??????});??}????private?int?colorBurn(int?RGBValues)?{??????int?alpha?=?RGBValues?>>?24;??????int?red?=?RGBValues?>>?16?&?0xFF;??????int?green?=?RGBValues?>>?8?&?0xFF;??????int?blue?=?RGBValues?&?0xFF;??????red?=?(int)?Math.floor(red?*?(1?-?0.1));??????green?=?(int)?Math.floor(green?*?(1?-?0.1));??????blue?=?(int)?Math.floor(blue?*?(1?-?0.1));??????return?Color.rgb(red,?green,?blue);??}?? Palette需要你自己寫的東西還是比較少的，你只需在它提取完成的回調(diào)方法了獲取各種提取到的顏色設(shè)置給相應(yīng)的view就行了。圖片的顏色比較鮮艷突出，方便直觀的了解。提取到的顏色怎么很好的搭配，如果你有UI設(shè)計(jì)師的話就最好了，像我這種的話看著它順眼就行。上面的顏色處理：像如果有把Toolbar當(dāng)成了ActionBar來使用而且有一些明顯的ActionBar即視感的ActionButton的話，我覺得狀態(tài)欄的顏色應(yīng)該比ToolBar顏色深一點(diǎn)比較好，看起來有一點(diǎn)界限分隔。在Android中RGB顏色Color加深減淡的處理：可以看到我采用的加深顏色的方法就是先得到RGB顏色的red、green、blue的值，然后把每個顏色的值減小，floor函數(shù)是向下取整的功能，如果看不懂的可以先看下RGB顏色的構(gòu)成再看就會很好理解了。設(shè)置成一樣時的情況更多的是沒有ActionButton這些明顯的東西或沒有三個點(diǎn)的更多ActionButton時，看起來更平面一點(diǎn)，更渾然一體。
?
說了這么多，Palette呢就是一把利器，方便我們對UI界面色調(diào)的處理，所以可以說他是Material Design必不可少的一部分。
?
?
?
END
demo效果：
?
? ? ? ? ? ? ??
demo源碼下載地址：http://download.csdn.net/detail/bbld_/8191251
總結(jié)
以上是生活随笔為你收集整理的Android Material Design之Toolbar与Palette的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
