Android Material Design新UI控制項使用大全 一

標籤：

序言

自從Google在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檔案:

<?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>

注意:其中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;    }});

2.TextInputLayout 提升使用者體驗的EditText

我們之前使用EditText的時候,會使用一個hint屬性,但是當使用者輸入的時候,hint屬性值就會被清空,但是在Material Design中,Google又給我們提供了一個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的邊框寬度
• app:elevation 設定平常陰影狀態的深度(預設6dp)
• app:pressedTranslationZ 設定點擊狀態的陰影深度(預設12dp)

用法:

<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="3dp"    app:fabSize="normal"    />

實現效果如下:

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 的使用,願大家都有一個美好的生活….

Android Material Design新UI控制項使用大全 一