這篇文章主要是方便以后我去查找材料特性的使用方式澜驮，并不會作過多的分析忿晕。如果想了解更多材料特性的使用方式請參考https://developer.android.com/design/。
這是我實(shí)現(xiàn)的效果圖获雕，需要完整demo的朋友可以私我
ToolBar作用
用來替換ActionBar，單獨(dú)使用的情況較少;我個人更喜歡搭配android:fitsSsystemWindows （背景圖和系統(tǒng)狀態(tài)欄融合）使用。
舉例：
<!--android:theme:設(shè)置toolbar上各種元素的顏色-->
<!--app:popupTheme:彈出的菜單項(xiàng)指定顏色-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!--toolbar整體顏色-->
<item name="colorPrimary">@color/colorPrimary</item>
<!--導(dǎo)航欄顏色-->
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<!--FloatingButton和按鈕的顏色-->
<item name="colorAccent">@color/colorAccent</item>
<!--App文本顏色-->
<item name="android:textColorPrimary">@android:color/black</item>
<!--主體背景顏色-->
<item name="android:windowBackground">@android:color/white</item>
<!--底部導(dǎo)航欄顏色-->
<item name="android:navigationBarColor">@android:color/holo_red_light</item>
</style>
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//設(shè)置側(cè)滑菜單圖標(biāo)
if (getSupportActionBar() != null) {
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.menu);
}
DrawerLayout+NavigationView使用
DrawerLayout作為Material側(cè)滑菜單蒲犬，必須作為頂層布局；NavigationView包含兩個布局的引用岸啡，一個是導(dǎo)航里面的頭部原叮，另一個是菜單項(xiàng)；
舉例：
<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/drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.p00746.googlemapdemo.materialDemo.MaterialActivity">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include layout="@layout/page_start" />
<!--側(cè)滑菜單項(xiàng)-->
<!--android:layout_gravity="start"必須指定-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="none">
<item
android:id="@+id/nav_recycler_and_swipe_refresh"
android:icon="@drawable/ic_format_list_bulleted_black_24dp"
android:title="@string/nav_recycler_view" />
<item
android:id="@+id/nav_scrolling"
android:icon="@drawable/ic_file_download_black_24dp"
android:title="@string/nav_scrolling" />
<item
android:id="@+id/nav_full_screen"
android:icon="@drawable/ic_fullscreen_black_24dp"
android:title="@string/nav_fullscreen" />
<item
android:id="@+id/nav_bottom_navigation"
android:icon="@drawable/ic_more_horiz_black_24dp"
android:title="@string/nav_bottom_navigation" />
<item
android:id="@+id/nav_settings"
android:icon="@drawable/ic_settings_black_24dp"
android:title="@string/nav_settings" />
</group>
<group android:id="@+id/group_about">
<item
android:id="@+id/nav_about"
android:icon="@drawable/ic_info_black_24dp"
android:title="@string/nav_about" />
<item
android:id="@+id/nav_donate"
android:icon="@drawable/ic_monetization_on_black_24dp"
android:title="@string/nav_donate" />
<item
android:id="@+id/nav_my_apps"
android:icon="@drawable/ic_apps_black_24dp"
android:title="@string/nav_my_apps" />
</group>
</menu>
drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
//DrawerLayout相關(guān)設(shè)置
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,
drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();
navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
//更改菜單icon和title顏色變化效果
navigationView.setItemIconTintList(null);
View headerView = navigationView.getHeaderView(0);
nav_header = (LinearLayout) headerView.findViewById(R.id.nav_header);
nav_header.setOnClickListener(this);
CoordinatorLayout+AppBarLayout的使用
CoordinatorLayout加強(qiáng)版的FrameLayout巡蘸，用來協(xié)調(diào)Material各種控件奋隶。AppBarLayout加強(qiáng)版的LinearLayout,內(nèi)部阻力很多滾動事件封裝≡没模可以設(shè)置layout_scrollFlags屬性讓控件具有一些炫酷效果唯欣；
- scroll:View會隨著滾動事件一起移動
- enterAlways:View向下滾動時(shí)，該View會直接往下滾動
- exitUntilCollapsed:View向上逐漸消失時(shí)逾冬，會一直往上滑動黍聂，直到剩下的高度達(dá)到它最小高度后躺苦，在響應(yīng)內(nèi)部事件
- enterAlwaysCollapsed:一般跟enterAlways一起使用，它是指产还，View在往下“出現(xiàn)”的時(shí)候匹厘，首先是enterAlways效果，當(dāng)View的高度達(dá)到最小高度時(shí)脐区，View就暫時(shí)不去往下滾動愈诚，直到ScrollView滑動到頂部不再滑動時(shí)，View再繼續(xù)往下滑動牛隅，直到滑到View的頂部結(jié)束
<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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<!--android:theme:設(shè)置toolbar上各種元素的顏色-->
<!--app:popupTheme:彈出的菜單項(xiàng)指定顏色-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="@color/colorAccent" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_add_white_24dp"
android:visibility="gone"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarLayout的作用
加強(qiáng)版的ToolBar炕柔，只能作為AppBarlayout的直接布局來使用,AppBarLayout又必須是CoordinatorLayout的子布局；
<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:id="@+id/activity_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.p00746.googlemapdemo.materialDemo.ScrollViewActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_scrolling"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height_image_view"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<!--app:contentScrim="?attr/colorPrimary" 趨于折疊時(shí)的顏色-->
<!--layout_collapseMode-->
<!--pin:折疊的過程中位置始終保持不變-->
<!--parallax：折疊過程中產(chǎn)生一定的錯位偏移-->
<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:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/image_scrolling_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_scrolling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/big_activity_fab_margin"
android:src="@drawable/ic_share_white_24dp"
app:layout_anchor="@id/app_bar_scrolling"
app:layout_anchorGravity="bottom|end" />
<include layout="@layout/content_scrolling" />
</android.support.design.widget.CoordinatorLayout>
TextInputLayout的使用
TextInputLayout 控件表現(xiàn)得就像LinearLayout 一樣媒佣，它是一個容器匕累。TextInputLayout 中只能放一個子元素，和ScrollView有點(diǎn)類似默伍，并且子元素必須是EditText欢嘿；
TextInputLayout 實(shí)現(xiàn)的功能就是當(dāng)EditText中輸入第一個字母要隱藏hint的時(shí)候，TextInputLayout中會出現(xiàn)一個懸浮的標(biāo)簽來顯示這個hint也糊，還負(fù)責(zé)一個炫酷的的material 動畫
<android.support.design.widget.TextInputLayout
android:id="@+id/input_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="@+id/tv_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_user_name_hint"
android:imeOptions="actionNext"
android:maxLength="20"
android:maxLines="1"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
底部導(dǎo)航欄的另一種實(shí)現(xiàn)方式（3-5之間使用）
<LinearLayout 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/activity_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".materialDemo.BottomNavigationActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/white"
app:itemIconTint="@color/nav_color_select"
app:itemTextColor="@color/nav_color_select"
app:menu="@menu/bottom_navigation" />
</LinearLayout>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/bottom_navigation_blue"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="Blue" />
<item
android:id="@+id/bottom_navigation_green"
android:icon="@drawable/ic_photo_black_24dp"
android:title="Green" />
<item
android:id="@+id/bottom_navigation_yellow"
android:icon="@drawable/ic_music_note_black_24dp"
android:title="Yellow" />
<item
android:id="@+id/bottom_navigation_red"
android:icon="@drawable/ic_movie_black_24dp"
android:title="Red" />
</menu>
// If BottomNavigationView has more than 3 items, using reflection to disable shift mode
BottomNavigationViewHelper.disableShiftMode(navigation);
CardView 的使用
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_main_1_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/main_card_margin_vertical"
android:layout_marginEnd="@dimen/main_card_margin_horizontal"
android:layout_marginStart="@dimen/main_card_margin_horizontal"
android:layout_marginTop="@dimen/main_card_margin_vertical"
android:background="?attr/selectableItemBackgroundBorderless"
card_view:cardCornerRadius="@dimen/card_recycler_corner_radius"
card_view:cardElevation="@dimen/card_recycler_elevation">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/img_main_card_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="@drawable/material_design_2"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/tv_card_main_1_title"
style="@style/TextAppearance.AppCompat.Large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/img_main_card_1"
android:layout_marginEnd="@dimen/card_title_margin"
android:layout_marginStart="@dimen/card_title_margin"
android:layout_marginTop="@dimen/card_title_margin_top"
android:text="@string/main_card_title"
android:textColor="@color/black" />
<TextView
android:id="@+id/tv_card_main1_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_card_main_1_title"
android:layout_marginBottom="@dimen/card_subtitle_margin"
android:layout_marginEnd="@dimen/card_subtitle_margin"
android:layout_marginStart="@dimen/card_subtitle_margin"
android:layout_marginTop="@dimen/card_button_margin"
android:text="@string/main_card_subtitle" />
<Button
android:id="@+id/btn_card_main1_action1"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_card_main1_subtitle"
android:layout_margin="@dimen/card_button_margin"
android:text="@string/main_card_button_1"
android:textColor="@color/colorAccent" />
<Button
android:id="@+id/btn_card_main1_action2"
style="@style/Widget.AppCompat.Button.Borderless"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tv_card_main1_subtitle"
android:layout_marginBottom="@dimen/card_button_margin"
android:layout_marginTop="@dimen/card_button_margin"
android:layout_toEndOf="@id/btn_card_main1_action1"
android:text="@string/main_card_button_2"
android:textColor="@color/colorAccent" />
</RelativeLayout>
</android.support.v7.widget.CardView>
