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

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側拉面板:<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;">
**注意:**我們看到NavigationView有兩個屬性,`app:headerLayout`接受的是一個layout文件,作為導航頁的頭布局,可選項;`app:menu`接受一個menu,作為導航欄的菜單頁,這個是必選項; headerLayout為一個普通的layout文件,我們就不在贅述,我們現在來看一下menu文件怎麼寫,在`res`目錄下新建一個`menu`文件夾,然後新建xml文件:

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

使用subheader來為菜單分組：

最後,就是我們要寫的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中,谷歌又給我們提供了一個TextInputLayout來優化我們的用戶體驗,當獲取焦點輸入時,hint的值會自動縮小並跑到輸入欄的上方,具體效果看圖示:

當然,使用也非常簡單:

 

注意: 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)

用法:

實現效果如下:

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