轉：http://blog.csdn.net/jdsjlzx/article/details/41441083
前言
我們都知道Marterial Design是Google推出的全新UI設計規范，如果對其不太了解的可以看下：Material design非官方中文指導手冊?，或者我的前面幾篇Material Design的譯文，相比之前Google在Android Holo風格上平平淡淡的表現不同，Material Design現在是被Google所比較重視的。在推出這門全新設計語言后，Android上自家的應用很快就使用Material Design全新設計了，如Play商店，Google Map，Google+，比較新的Inbox等；Web上的視覺體驗也是很Material的，最有幫助的當屬這個了Material Design的官方介紹（自備梯子）了；IOS方面的Google應用也在慢慢推進中。所以作為一個Android開發者怎么能不緊跟Google的步伐呢，下面就來通過Toolbar和Palette這兩個在API21后推出的東西，當然Google已經把它們放到到v7庫里了，使用Material Design來設計App當然不僅限于這兩個方面了，前面的Material Design的譯文已經清楚知道怎么去全面設計。除了Toolbar和Palette這篇文章還會介紹在Toolbar下使用Drawer，以及?Android L中的RecyclerView 、CardView 、Palette的使用。
Toolbar
Toolbar是什么？大概說一下它的官方介紹。Toolbar是應用的內容的標準工具欄，可以說是Actionbar的升級版，兩者不是獨立關系，要使用Toolbar還是得跟ActionBar扯上關系的。相比Actionbar Toolbar最明顯的一點就是變得很自由，可隨處放置，因為它是作為一個ViewGroup來定義使用的，所以單純使用ActionBar已經稍顯過時了，它的一些方法已被標注過時。
那么它怎么使用呢，首先我們一樣要用到v7的支持包，然后定義程序的主題樣式，在style里得先把Actionbar去掉，有點像欲想練功，必先自宮的感覺啊。如下：
<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> <!-- 狀態欄顏色 --> <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> <!-- 狀態欄顏色 --> <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中提供了更強的可定制性和更多的樣式可供設置，不過一般我們用默認的就行。
還有我們可以在values-v21給API21的系統版本設置默認的底部導航欄默認的顏色：
/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>?? 設置好主題的下一步工作：
在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作為一個獨立的布局xml，方便在其他布局里include進去?？梢钥吹轿覀冊谶@里是可以設置Toolbar的屬性的，初上面的外還有以下的屬性，都是見名知意的就不一一說明了。
?
?
然后在activity的布局里把它include進去就行了，當然一般把它放到最上面了，有需要你是可以把它放到中間、底部或其它位置的，可見它的自由度是很高的。在下一步呢就到代碼了，在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;??????}??});?? 上面關鍵的一點就是setSupportActionBar(mToolbar);把Toolbar當做ActionBar給設置了。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沒什么區別呢。誒，左邊的菜單圖標怎么出來的呢，其實上面還沒處理到，他就是Navigation drawer了，使用新版本的v4、v7庫的drawer明顯的一點是它帶了一個酷酷的交互動畫（請看最后的gif圖）。那么使用Toolbar之后又怎么去在Toolbar中使用drawer呢。下面當然也是跟著代碼來.
/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的東西可以先忽略，后面會說到。側滑菜單的內容為簡單起見直接先用圖片來演示了。可以看到布局的設置大同小異，不同點在代碼中：
?
?
[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);?? 先把圖標設置顯示出來，然后把ActionBarDrawerToggle作為DrawerLayout的監聽器設置進去，還是比較簡單的，效果：
要是需要把drawer覆蓋toolbar怎么辦呢？需要稍微調整一下界面的布局位置就行了，效果就不貼上來了(腦補，或者改下源碼的setContentView運行)：
[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>?? 做這里時發現拉出菜單后還是可以點擊Toggle按鈕的，解決方法時把側滑的布局設置為clickable="true"。關于側滑菜單需不需要的覆蓋Toolbar的問題好像從Google提供的例子來看兩者都有。我想既然它做出這個Toggle按鈕的動畫來的話如果覆蓋了不就沒有意義了？或者還有其它考慮？暫時我們看著Google Play來就行，新版Play的是沒有覆蓋上去的。
?
?
?
Palette
說Palette之前先說下前面提到的Pager。ViewPager是什么大家應該都是知道的了，一般ViewPager、xxxTabStrip、Fragment三個好基友是一起出現的。這里的xxxTabStrip是使用Github上的PagerSlidingTabStrip。當我們的Pager切換時伴隨著Fragment的變化，而Fragment里的內容一般是不同的，所以每個Fragment里的一般視覺效果也是不同的，所以我們可以用Palette來去提取Fragment中的主色調，那Fragment中的拿什么給Palatte去提取顏色呢，這就需要自己根據自己的情況來決定的。比如我這個demo里，Fragment就一個TextView和給Fragment設了背景，那么我就可以把背景的圖片給Palette去提取顏色了。
說了上面一段你也基本知道Palatte是用來干么的了，它就是用來從Bitmap中提取顏色的，然后把顏色設置給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);??}?? 這些都是一些基本設置，然后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需要你自己寫的東西還是比較少的，你只需在它提取完成的回調方法了獲取各種提取到的顏色設置給相應的view就行了。圖片的顏色比較鮮艷突出，方便直觀的了解。提取到的顏色怎么很好的搭配，如果你有UI設計師的話就最好了，像我這種的話看著它順眼就行。上面的顏色處理：像如果有把Toolbar當成了ActionBar來使用而且有一些明顯的ActionBar即視感的ActionButton的話，我覺得狀態欄的顏色應該比ToolBar顏色深一點比較好，看起來有一點界限分隔。在Android中RGB顏色Color加深減淡的處理：可以看到我采用的加深顏色的方法就是先得到RGB顏色的red、green、blue的值，然后把每個顏色的值減小，floor函數是向下取整的功能，如果看不懂的可以先看下RGB顏色的構成再看就會很好理解了。設置成一樣時的情況更多的是沒有ActionButton這些明顯的東西或沒有三個點的更多ActionButton時，看起來更平面一點，更渾然一體。
?
說了這么多，Palette呢就是一把利器，方便我們對UI界面色調的處理，所以可以說他是Material Design必不可少的一部分。
?
?
?
END
demo效果：
?
? ? ? ? ? ? ??
demo源碼下載地址：http://download.csdn.net/detail/bbld_/8191251
總結
以上是生活随笔為你收集整理的Android Material Design之Toolbar与Palette的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
