Material Design

Material Design 是在2014年Google I/O大會(huì)上推出的一套全新的界面設(shè)計(jì)語(yǔ)言识埋。

意在解決Android平臺(tái)界面風(fēng)格不統(tǒng)一調(diào)的問(wèn)題隔披。

1.下拉刷新

SwipeRefreshLayout 用來(lái)實(shí)現(xiàn)下拉刷新

把要實(shí)現(xiàn)下拉刷新的控件放置到 SwipeRefreshLayout 中祟偷，eg:

       <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/activity_main_swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ListView
                android:id="@+id/activity_main_lv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </android.support.v4.widget.SwipeRefreshLayout>

刷新事件：

    private SwipeRefreshLayout swipeRefresh; //下拉刷新布局

    //下拉刷新
        swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.activity_main_swipe_refresh);
        swipeRefresh.setColorSchemeResources(R.color.colorPrimaryDark); //設(shè)置進(jìn)度條顏色
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {

                /**
                 * 更新操作
                */
              
                //當(dāng)執(zhí)行完更新操作后寄猩，結(jié)束刷新事件甥材，隱藏進(jìn)度條
                //一般寫(xiě)在加載數(shù)據(jù)方法內(nèi)
                swipeRefresh.setRefreshing(false);
            }
        });

SwipeRefreshLayout 的 set Refreshing() 方法傳入 false拉盾，用于表示刷新事件結(jié)束姊途，并隱藏刷新進(jìn)度條

2.Toolbar

優(yōu)點(diǎn)：繼承了ActionBar的所有功能钉疫，而且靈活性很高硼讽。

Android studio 創(chuàng)建的項(xiàng)目默認(rèn)是帶ActionBar的，我們需要修改 res>values>styles.xml 文件牲阁，來(lái)不使用ActionBar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

布局文件中添加Toolbar：

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    android:layout_height="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

?attr/actionBarSize :》》 固阁？attr 表示使用當(dāng)前樣式(主題)中定義的對(duì)應(yīng)屬性值，默認(rèn)值是56dp, 可以點(diǎn)進(jìn)去看看

android :theme : 》》 toolbar 使用深色主題

app:popupTheme :》》 menu菜單設(shè)置為淡色主題 城菊；app 目的是為了兼容低版本手機(jī)

獲取實(shí)例傳入實(shí)例 ： <u>setSupportActionBar(toolbar) 很重要要不然不顯示</u>

        Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
        toolbar.setTitle("Title");
        setSupportActionBar(toolbar);

Toolbar 來(lái)顯示更多內(nèi)容:

右擊res目錄 ->New->Directory, 創(chuàng)建一個(gè)menu 菜單备燃。右擊menu文件夾->New->Menu resource file, 創(chuàng)建一個(gè)toolbar.xml文件，并寫(xiě)入如下代碼：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/item_back"
        android:icon="@drawable/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>
    <item
        android:id="@+id/item_delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/item_setting"
        android:icon="@drawable/ic_settings"
        android:title="Setting"
        app:showAsAction="never"/>
</menu>

showAsAction 有以下幾種值可以選則：

always表示永遠(yuǎn)顯示在Toolbar中凌唬，如果屏幕空間不夠則不顯示并齐；

if Room表示屏幕空間足夠的話顯示在Toolbar中，不夠的話就顯示在菜單當(dāng)中；

never 則表示永遠(yuǎn)顯示在菜單當(dāng)中冀膝。默認(rèn)是never唁奢。

注意：Toolbar 中的action按鈕只會(huì)顯示圖標(biāo)，菜單中的action按鈕只會(huì)顯示文字

重寫(xiě) onCreateOptionsMenu 和 onOptionsItemSelected 方法來(lái)實(shí)現(xiàn)創(chuàng)建菜單和菜單點(diǎn)擊事件：

 @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //MenuInflater 菜單填充器
        getMenuInflater().inflate(R.menu.main,menu);
        return true; //表示是否顯示菜單
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //根據(jù)不同的 itemId 執(zhí)行不同操作
        switch (item.getItemId()){
            case R.id.item_delete:
                toast("You clicked delete!");
                break;
            case R.id.item_setting:
                toast("You clicked setting!");
                break;
        }
        return true;
    }

效果圖：

menu菜單.gif

另外還有一個(gè)就是Home箭頭顯示 和 Icon 顯示

       //顯示Home箭頭(返回箭頭)
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        
        //設(shè)置圖標(biāo)
        getSupportActionBar().setIcon(R.mipmap.ic_launcher);

點(diǎn)擊事件：

  @Override
    public boolean onSupportNavigateUp() {
        toast("Back!");
        return super.onSupportNavigateUp();
    }

效果圖：

toolbar.png

3.滑動(dòng)菜單

通過(guò) DrawerLayout 來(lái)實(shí)現(xiàn)滑動(dòng)菜單 窝剖，這個(gè)控件由 support-v4庫(kù)提供麻掸。

這個(gè)布局允許放入兩個(gè)直接子控件(布局),第一個(gè)是主屏幕中顯示的內(nèi)容，第二個(gè)是滑動(dòng)菜單中的顯示內(nèi)容赐纱。

eg:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main_drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tiger.materialdesigntest.MainActivity">

  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:titleTextColor="@color/myWhite"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

  </RelativeLayout>

  <LinearLayout
      android:layout_gravity="left"
      android:orientation="vertical"
      android:background="#fff"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
    <TextView
        android:text="Text1"
        android:textSize="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <TextView
        android:text="Text2"
        android:textSize="30dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
  </LinearLayout>

</android.support.v4.widget.DrawerLayout>

效果圖：

側(cè)滑菜單.gif

需要注意：

<u>第二個(gè)子控件(布局) 必須指定 layout_gravity 屬性脊奋，來(lái)設(shè)置側(cè)滑菜單實(shí)在屏幕的那邊顯示。</u>

側(cè)滑菜單自定義大小疙描、顯示的內(nèi)容和樣式

另外可以通過(guò)代碼調(diào)出側(cè)滑菜單和隱藏側(cè)滑菜單

        final DrawerLayout  mDrawerLayout=(DrawerLayout)findViewById(R.id.activity_main_drawerLayout);
        //顯示側(cè)滑菜單
        mDrawerLayout.openDrawer(Gravity.LEFT);
        //隱藏側(cè)滑菜單
        mDrawerLayout.closeDrawer(Gravity.LEFT);

4.NavigationView

5.SwitchCompat

switch.gif

常用屬性：

關(guān)于主題：

在styles.xml 添加新的style 诚隙，再通過(guò) app:theme="@style/MySwitch"，指定主題

    <style name="MySwitch" parent="Theme.AppCompat.Light">
        <!--開(kāi)啟時(shí)的顏色-->
        <item name="colorControlActivated">@color/colorPrimary</item>
        <!--關(guān)閉時(shí)的顏色-->
        <item name="colorSwitchThumbNormal">@color/switch_color</item>
        <!--關(guān)閉時(shí)的軌跡顏色取30%的顏色-->
        <item name="android:colorForeground">@color/switch_color</item>
    </style>

注意：有些 屬性不能正常顯示起胰，需要使用 app:attribute 的形式來(lái)賦值

6.懸浮按鈕

FloatingActionButton 看起來(lái)有立體效果的按鈕 ,

<android.support.design.widget.FloatingActionButton
    android:id="@+id/faBtn"
    android:src="@drawable/ic_done"
    app:elevation="8dp"
    android:layout_margin="20dp"
    android:layout_gravity="bottom|end"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

關(guān)于 layout_gravity="bottom|end" 作用嗡载，指定顯示位置

關(guān)于 app:elevation="8dp" ： 陰影大小

指定一個(gè)高度值，高度值越大帕涌，投影范圍也越大囊颅，但是投影效果越淡，高度值越小畏妖，投影范圍也越小脉执，但是投影效果越濃。其實(shí)看起來(lái)差別也不大戒劫。

7.Snackbar

更好的提示工具-----Snackbar

首先Snackbar并不是Toast 的替代品半夷，他們兩者之間各有個(gè)的特點(diǎn)。

Toast更多的是提示信息迅细，告訴用戶發(fā)生了什么巫橄。

而Snackbar則擴(kuò)展了更多的功能，它允許在提示當(dāng)中加入一個(gè)可交互的按鈕疯攒，以便執(zhí)行一些額外的邏輯操作嗦随。

設(shè)想這樣一個(gè)場(chǎng)景，當(dāng)刪除一條記錄后敬尺，直接提示用戶刪除成功枚尼。當(dāng)用戶想要撤銷(xiāo)，那怎么辦砂吞，那這個(gè)時(shí)候就用到了Snackbar署恍。

snackbar.gif

          Snackbar.make(view,"Data deleted!",Snackbar.LENGTH_LONG).setAction("Undo", new View.OnClickListener() {
               @Override
               public void onClick(View view) {
                    //點(diǎn)擊Undo 后的操作
                Toast.makeText(MainActivity.this, "Data restored!", Toast.LENGTH_SHORT).show();
              }
          }).show() ;

一般都寫(xiě)在Button 的點(diǎn)擊事件中； view : view指的是 onClick方法的參數(shù)

8.CoordinatorLayout

CoordinatorLayout 是一個(gè)加強(qiáng)版的FrameLayout蜻直，由Design Support 提供盯质。

實(shí)現(xiàn)了多種Material Design中提到的滾動(dòng)效果

CoordinatorLayout 會(huì)自動(dòng)監(jiān)聽(tīng)所有子控件的各種事件袁串，然后自動(dòng)幫助我們做出最為合理的相應(yīng)。

eg: 只需要改變外部布局為CoordinatorLayout

coordinatorLayout.gif

注意到效果了吧呼巷，懸浮按鈕自動(dòng)向上偏移了Snackbar的同等高度囱修，從而保證不會(huì)被遮擋住。當(dāng)Snackbar消失時(shí)王悍，懸浮按鈕會(huì)回到原先位置破镰。

更多請(qǐng)參考：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0717/3196.html

9.CardView

CardView是實(shí)現(xiàn)卡片式布局的重要控件，由appcompat-v7庫(kù)提供压储。

實(shí)際上CardView也是一個(gè)FrameLayout 鲜漩，知識(shí)額外提供了圓角和陰影等效果，看上去會(huì)有立體的感覺(jué)集惋。

添加依賴引用 compile 'com.android.support:cardview-v7:25.3.1'

<android.support.v7.widget.CardView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"
    app:cardCornerRadius="4dp"
    app:cardElevation="5dp">
    <TextView
        android:text="TextView"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</android.support.v7.widget.CardView>

app:cardCornerRadius="4dp" 圓角弧度孕似，數(shù)值越大哦，弧度越大

app:cardElevation="5dp" 陰影大小刮刑，數(shù)值越大喉祭，陰影越大

cardview.png

10.TextInputLayout

使用：直接將EdieText放到 TextInputLayout 中就可以，

注意一個(gè)TextInputLayout 下只能放置一個(gè) EditTExt

<android.support.design.widget.TextInputLayout
    android:id="@+id/activity_test_textinputlayoutusername"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/activity_test_scrollView">
    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username"/>
</android.support.design.widget.TextInputLayout>

效果圖：

TextInputLayout.gif