Android Material Design新UI控件使用大全 一

序言

自從谷歌在2014年的IO大會上推出了Material Design新的設計規範後,安卓應用的整體美觀程度提升了很大的一個層次, 安卓再也不是又黑又醜的界面,取而代之的是擁有豐富的顏色,美觀的按鈕,好的用戶體驗;但是剛開始的話這種設計規範只能在Android 5.0以上的手機上運行,導致開發者也只是自己去體驗,在國內並沒有大範圍的推廣,App的質量並不能大幅度的提升,但是作爲改變世界的Google公司不久就推出了兼容庫Android Material Design,這絕對是業界良心了,我們也看到了越來越多的App開始使用這個兼容庫,來提升UI效果及用戶體驗,由於之前只是偶爾體驗了一下,並沒有認真的去了解使用,導致對這個庫的使用懵懵懂懂,現在寫下這個總結,也算是對自己的一個交代,也算是對知識的一個總結,如果能幫到其他人,讓別人少走彎路,那就更好了;

我們先看一下印象筆記的截圖,有個大致的瞭解

 

---

 

如何使用

這個兼容庫如果使用的話只需要將其添加到項目依賴中即可:

compile ‘com.android.support:design:23.2.1’

這樣的話,Android Studio 就會自動去同步這個庫,然後我們就可以愉快的使用了,相信一些老司機用這個簡直太簡單;

1 側滑NavigationView

在Materil Design中,NavigationView作爲一個抽屜導航來實現app內部的交互,讓實現更簡單,同時還能直接通過菜單資源元素直接生成導航元素;

它的一般用法是需要配合之前v4包中的DrawLayout,並作爲其中的Darwer部分,也就是劃出的導航部分,它提供了可選的Header,默認樣式,選中項高亮,分組單選,分組子標題等,如圖示,左側即爲NavigationView: 

我們現在來看一下是怎麼用的,外層是一個DrawerLayout，第一個child將作爲主頁content，第二個child則作爲Drawer側拉麪板:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_laout"
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".NavigationViewActivity">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <include layout="@layout/toolbar_actionbar"/>
    <TextView
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:textSize="25sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is home content"/>
</LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navi_all"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/head_layout"
        app:menu="@menu/navigation_menu">

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

注意: 我們看到NavigationView有兩個屬性,`app:headerLayout`接受的是一個layout文件,作爲導航頁的頭佈局,可選項;`app:menu`接受一個menu,作爲導航欄的菜單頁,這個是必選項; headerLayout爲一個普通的layout文件,我們就不在贅述,我們現在來看一下menu文件怎麼寫,在`res`目錄下新建一個`menu`文件夾,然後新建xml文件:

<pre class="java" name="code"><?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navi_home"
            android:icon="@mipmap/home"
            android:checked="true"
            android:title="首頁" />
        <item
            android:id="@+id/navi_notify"
            android:icon="@mipmap/notify"
            android:title="通知" >
        </item>
        <item
            android:id="@+id/navi_blog"
            android:icon="@mipmap/blog"
            android:title="我的博客" />
    </group>
</menu></pre>
<br>
<br>

注意:其中checked=”true”的item將會高亮顯示，這可以讓用戶知道當前選中的菜單項是哪個。當然,item的選中狀態可以在代碼中設置;

使用subheader來爲菜單分組：

<item
    android:id="@+id/navigation_subheader"
    android:title="@string/navigation_subheader">
    <menu>
        <item
            android:id="@+id/navigation_sub_item_1"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_1"/>
        <item
            android:id="@+id/navigation_sub_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_2"/>
    </menu>
</item>

最後,就是我們要寫的menu菜單中的點擊事件了,NavigationView給我們提供了setNavigationItemSelectedListener方法來設置當有菜單項被點擊時的回調,OnNavigationItemSelectedListener也會給我們提供被點擊的MenuItem,我們可以在這裏處理點擊事件,改變item的狀態,更新界面狀態,關閉導航欄等操作;

 mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.navi_blog:
                Toast.makeText(NavigationViewActivity.this,"Blog",Toast.LENGTH_SHORT).show();
                break;
            case R.id.navi_home:
                Toast.makeText(NavigationViewActivity.this,"Home",Toast.LENGTH_SHORT).show();
                break;
            case R.id.navi_notify:
                Toast.makeText(NavigationViewActivity.this,"Notify",Toast.LENGTH_SHORT).show();
                break;
        }
        item.setChecked(true);
        mDrawerLayout.closeDrawer(Gravity.LEFT);//外層的DrawerLayout
        return false;
    }
});

注意:我們上面實現的是menu菜單的點擊事件,我們如果要回調headerLayout的點擊事件該怎麼寫呢,NavigationView並沒有提供一個類似於menu的點擊監聽,而是提供了一個getHeaderView(int index)的api,所以頭佈局的點擊事件應該這麼寫:

mNavigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              Toast.makeText(NavigationViewActivity.this,"Pic",Toast.LENGTH_SHORT).show();
          }
      });

• 小貼士:NavigationView還提供了一個getHeaderCount()的api返回頭佈局一共有多少個子view,可以實現任一控件的監聽;

2.TextInputLayout 提升用戶體驗的EditText

我們之前使用EditText的時候,會使用一個hint屬性,但是當用戶輸入的時候,hint屬性值就會被清空,但是在Material Design中,谷歌又給我們提供了一個TextInputLayout來優化我們的用戶體驗,當獲取焦點輸入時,hint的值會自動縮小並跑到輸入欄的上方,具體效果看圖示:

 

當然,使用也非常簡單:

<?xml version="1.0" encoding="utf-8"?>
<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.suericze.myapplication.TestInput">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="用戶名/手機號"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="密碼"/>
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

注意: TextInputLayout的顏色來自style中的colorAccent的顏色,除了顯示提示信息，還可以通過調用setError()在EditText下面顯示一條錯誤信息。

3.懸浮操作按鈕 FloatingActionButton

看字面意思就是懸浮按鈕,是一個負責顯示界面基本操作的圓形按鈕,它實現了一個默認顏色爲主題中colorAccent的懸浮操作按鈕，它是一個帶有陰影的圓形按鈕，可以通過fabSize來改變其大小;有以下屬性:

• 默認顏色爲colorAccent的顏色值,可以通過app:backgroundTint 屬性或者setBackgroundTintList (ColorStateList tint)方法去改變背景顏色。
• 改變尺寸:通過設置 app:fabSize 屬性(mini or normal)
• android:src 改變drawable
• app:rippleColor 設置點擊時候的顏色(水波紋效果)
• app:borderWidth 設置button的邊框寬度,該屬性尤爲重要，如果不設置0dp，那麼在4.1的sdk上FAB會顯示爲正方形，而且在5.0以後的sdk沒有陰影效果。所以設置爲borderWidth=”0dp”
• app:elevation 設置平常陰影狀態的深度(默認6dp)
• app:pressedTranslationZ 設置點擊狀態的陰影深度(默認12dp)
• app:layout_anchor - 設置FAB的錨點，即以哪個控件爲參照點設置位置
• app:layout_anchorGravity - 設置FAB相對錨點的位置，值有 bottom、center、right、left、top等

用法,放在屏幕右下角:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:src="@mipmap/add"
    app:rippleColor="#ff0000"
    app:borderWidth="0dp"
    app:fabSize="normal"
    app:layout_anchor="@id/coordinator_layout"
    app:layout_anchorGravity="bottom|right"
    />

實現效果如下:

4 底部Snackbar

SnackBar通過在屏幕底部展示一個簡潔的信息,爲用戶提供一個友好的反饋,用法類似於Toast,區別在於第一個參數不需要上下文而是所依附的父view,而且在同一時間內只能顯示一個Snackbar,同時可以爲用戶提供一個動作操作,用戶可以在它消失之前滑動刪除; 最簡單用法:


Snackbar.make(mParentView, "SnackbarClicked", Snackbar.LENGTH_LONG).show(); 


我們來看效果圖: 

OK,我們現在來看一下帶有Action的SnackBar怎麼使用,

Snackbar.make(mRelativeLayout, "SnackbarClicked", Snackbar.LENGTH_SHORT).setAction("Test", new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Toast.makeText(TestInput.this,"Clicked",Toast.LENGTH_SHORT).show();
           }
       }).show();

這裏我們給SnackBar設置了一個Action,當我們點擊Test時候,就會彈出吐司,效果如下: 
 

ok,我們對部分控件的使用已經有了一定的瞭解,我們在下篇會介紹AppBarLayout、CollapsingToolbarLayout、TabLayout 的使用,願大家都有一個美好的生活….