google 2015I/O大會推出了8個新的控件，繼續推進了android5.0之后的Materia Design風格，個人覺得MD風格還是相當好看的，最近做項目用到了一部分控件，現在把幾個控件用到同一個Demo中，結合demo來講解它們，先看看效果圖：  其中列表內容是通過xmlpull讀取xml文件來顯示的。限于篇幅，本次只講幾個。了解東西總是要從簡單到復雜，那么我們就從簡單的開始講起。 ### 一，snackBar 使用這些控件前先導入相關包，在android studio的build.gradle中添加 ~~~ compile 'com.android.support:appcompat-v7:22.1.1' ~~~ Toast大家是再熟悉不過。那么如果會使用Toast，那么snackBar自然也會使用。那么snackBar長什么樣呢，看下圖 snackBar比Toast重量級一點，但又比Dialog輕。先看下snackBar的使用方法： ~~~ Snackbar snackbar = Snackbar.make(v, "彈出snackbar", Snackbar.LENGTH_LONG); snackbar.show(); snackbar.setAction("取消", new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "SnackBar action", Toast.LENGTH_SHORT).show(); } }); ~~~ 其實跟Toast使用沒什么兩樣，只是多也一個按鈕的觸發。其中取消是按鈕的名稱。注意Snackbar.make（）第一個參數不是context而是view，表示snackbar畫在哪個view之上，所以第一個參數不能是scrollview，因為scrollview能滑動，snackbar不知放于哪個位置。 ### 二.floatingActionButton 看以下圖片就知道這是什么了。 這種懸浮按鈕在Materia Design風格的app中很常見。可觸發，可隱藏，用法也很簡單，定義布局 ~~~ <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_discuss" app:backgroundTintMode="multiply" app:layout_anchorGravity="bottom|end|right"></android.support.design.widget.FloatingActionButton> ~~~ 可以通過backgroundTint來改變改變背景顏色。anchorGravity確定button的放置位置。調用如下： ~~~ fab = (FloatingActionButton)findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); ~~~ 至此FloatingActionButton就完成了。 ### 三、toolbar 個人覺得toolbar是一個非常實用的控件。之前使用ActionBar總會發現它自定義相當不方便，toolbar完美的解決了這個缺點，來看看toolbar的使用方法。 首先，將style文件中的AppTheme刪除，不使用ActionBar風格，添加以下代碼： ~~~ <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <!-- Customize your theme here. --> <!--導航欄底色--> <item name="colorPrimary">@color/material_primary_color</item> <!--狀態欄底色--> <item name="colorPrimaryDark">@color/material_primary_color_dark</item> <!--導航欄上的標題顏色--> <item name="android:textColorPrimary">@android:color/black</item> <!--Activity窗口的顏色--> <item name="android:windowBackground">@android:color/white</item> <!--按鈕選中或者點擊獲得焦點后的顏色--> <item name="colorAccent">@color/accent_material_light</item> <!--和 colorAccent相反，正常狀態下按鈕的顏色--> <item name="colorControlNormal">@color/material_blue_grey_950</item> <!--Button按鈕正常狀態顏色--> <item name="colorButtonNormal">@color/button_material_light</item> <!--EditText 輸入框中字體的顏色--> <item name="editTextColor">@android:color/white</item> <item name="android:textColorHint">@color/hint_foreground_material_dark</item> </style> ~~~ 這些樣式文件的值是可以修改的，改成你自己想要的顏色。 接下來添加toolbar的配置文件 ~~~ <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" /> ~~~ 在activity中通過如下代碼調用： ~~~ toolbar = (Toolbar) findViewById(R.id.toolbar); //setActionBar(toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayShowTitleEnabled(false); toolbar.setTitle("圖書管理系統"); toolbar.setSubtitle("CSDC"); toolbar.setNavigationIcon(R.drawable.ic_list_black_24dp); toolbar.setOnMenuItemClickListener(this); ~~~ setTitle設置主標題，setSubtitle設置次標題。setNavigationIcon設置Navigation點擊的圖標。toolbar還可以調用按鈕，在menu_main文件中添加如下item: ~~~ <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/action_edit" android:icon="@drawable/abc_ic_search_api_mtrl_alpha" android:orderInCategory="80" android:title="查找" app:showAsAction="always" /> <item android:id="@+id/action_share" android:icon="@drawable/abc_ic_menu_share_mtrl_alpha" android:orderInCategory="90" android:title="分享" app:showAsAction="always" /> <item android:id="@+id/action_settings" android:orderInCategory="100" android:title="@string/action_settings" app:showAsAction="never" /> </menu> ~~~ 與Action一樣，orderInCategory設置優先級，showAsAction設置是否顯示在標題欄中。有四個屬性，ifRoom,never,always,collapseActionView。 在Activity中復寫onCreateOptionsMenu就可以顯示菜單，可自行試試效果。 ~~~ @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } ~~~ 那么Toolbar如何自定義呢，不多說，貼出配置代碼就知道了 ~~~ <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center_vertical" android:text="標題" android:textSize="18sp" /> </android.support.v7.widget.Toolbar> ~~~ 就是把toolbar當成父布局來使用，其中的標題樣式可自行擺放。 關于toolbar的用法就說這些，接下來看看CollaspingToolbarLayout的用法。 ### 四、CollaspingToolbarLayout 這個可以理解為是一個用來包裹toolbar并在toolbar折疊時提供另一個切換視圖。效果如下圖： 這里切換視圖實現了一個輪播效果，實現代碼如下： ~~~ <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:statusBarScrim="?attr/colorPrimary" > <LinearLayout android:id="@+id/show_gallery" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.6" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="198dp" /> --></LinearLayout> <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> ~~~ CollaspingToolbarLayout使用很簡單，以上layout_collapseMode設置有兩種模式： 1.pin:固定模式，折疊后最后固定在頂部。 ? 2.parallax:折疊時有一個視差。 ?collapseParallxMultiplier設置的是視角差程度。 輪播（圖片的左右切換）效果的實現如下： ~~~ mRecommendPager = (ViewPager)findViewById(R.id.pager); mRecommendPager.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { PointF downP = new PointF(); PointF curP = new PointF(); int act = event.getAction(); if (act == MotionEvent.ACTION_DOWN || act == MotionEvent.ACTION_MOVE || act == MotionEvent.ACTION_UP) { ((ViewGroup) v).requestDisallowInterceptTouchEvent(true); if (downP.x == curP.x && downP.y == curP.y) { return false; } } return false; } }); mRecommendPager.setAdapter(mRecommendAdapter); LayoutInflater mLayoutInflater=LayoutInflater.from(this); View view1=mLayoutInflater.inflate(R.layout.guide_one, null); View view2=mLayoutInflater.inflate(R.layout.guide_two, null); View view3=mLayoutInflater.inflate(R.layout.guide_end, null); final ArrayList<View> views =new ArrayList<View>(); views.add(view1); views.add(view2); views.add(view3); mRecommendAdapter = new RecommendAdapter(views,this); mRecommendPager.setAdapter(mRecommendAdapter); ~~~ 以上實現有一個小細節，就是為了ViewPager能監聽到手勢，用requestDiasllowInterceptTouchEvent(true)來防止手勢被上層捕獲。 這個不是本文的重點。 最后提供app源碼的下載地址，通過完整的代碼相信會了解的更快。 [ ](https://github.com/reallin/MateriaDesignDemo) [下載地載](https://github.com/reallin/MateriaDesignDemo)