Android Design Support Library概覽

尊重勞動成果,轉載請注明出處:http://blog.csdn.net/growth58/article/details/47972467
關注新浪微博:@于衛國
郵箱:yuweiguocn@gmail.com

簡介

Google I/O 2015大會中,Google為Android開發者介紹了Design Support Library。這個library可以讓開發者很容易地實現更多Material Design概念到他們的應用中,因為很多關鍵元素是不可用的在原來的框架外。首先就是很易于使用,Design Support Library向下兼容到API 7。Design Support Library可以引入到你的Android工程中通過導入Gradle依賴。

compile 'com.android.support:design:22.2.0' 
  • 1

視覺組件
在Design支持庫中有兩個主要類別的工具:

  • 視覺組件
  • 動作組件

我們先看看有哪些新的視覺組件可以應用到你的App上。

Material Text Input

EditText自從最開始就已經在Android中了,并且使用很簡單,他們一直沒有什么改變。使用Design Support Library,Google已經介紹了新的包含容器叫作TextInputLayout。這個新的view添加功能到標準的EditText上,例如支持讓你的用戶界面彈出錯誤消息和動畫提示。

正如下面的代碼所示,TextInputLayout 可以包含在你的布局文件中包裹一個標準的EditText

<android.support.design.widget.TextInputLayout
    android:id="@+id/textinput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="What is your name?" />

</android.support.design.widget.TextInputLayout>

Gianluca Segato 會帶著你學習TextInputLayout 組件的使用在教程中。

Floating Action Buttons

在Material Design 應用中最占優勢的用戶界面組件之一就是Floating Action Buttons。自從他們的介紹后,開發者不得不從頭開始創建這些按鈕或者是從很多第三方設計的類庫特別是這些按鈕相關的選擇一個。

使用Design 支持庫,floating action buttons可以包含在一個布局中并且掛靠在屏幕的一部分用簡單幾行代碼。每個按鈕都可以用icons和colors很容易地進行自定義。可以使用兩個sizes ,standard (56dp) 和 mini (40dp)。最大的優勢之一是Google已經支持這些按鈕作為他們的設計演變。

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:src="@drawable/ic_fab" />

導航組件

ViewPagerDrawerLayout 組件通過v4 support library可用時,Google已經對其進行了擴展通過提供兩個新的相關的部件。第一個是官方版本常用的ViewPagerIndicator libraryJake Wharton開發稱為TabLayout。第二個是NavigationView,提供drawer header的支持。

TabLayout

TabLayout組件可以用代碼使用addTab方法手動添加內容。看看下面的例子。

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

另外,你可以將TabLayoutViewPager組件進行關聯。通過調用setupWithViewPager()可以完成,使用ViewPager作為參數。這是另一種方式切換ViewPager的頁面。應該注意的是getPageTitle()需要被重寫當使用TabLayoutViewPager時給每個Tab一個合適的名稱。

這里寫圖片描述

NavigationView

NavigationView是一個新的部件繼承了DrawerLayout的功能。開發者使用這個組件能很容易地添加頭布局到drawer 和標記已選擇的部分。

除此之外,它現在可以通過菜單資源文件非常簡單地創建sections和subsections在drawer 中。一個NavigationView需要和一個DrawerLayout進行關聯在XML文件中。

<android.support.v4.widget.DrawerLayout      xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/content"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view"/>

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

這里寫圖片描述

增強的Toasts

Toast消息成為Android中主要的功能已經多年,一個新的用戶界面部件叫作Snackbar可用于提供相似功能但改善了外觀。Snackbar 不僅能給用戶提示短時間的信息,它還支持一個動作添加到上下文中基于你的應用的功能并且可以使用手勢滑掉使其消失。

SnackbarToast功能有所增強,使用它需要注意的是需要創建一個可以被用來找到應用顯示的最底部的View。

Snackbar.make( view, "Action", Snackbar.LENGTH_LONG )
    .setAction("Action!", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Log.e("App", "Action!");
        }
    } )
    .show();

這里寫圖片描述

動作組件

一個用戶界面特效和動畫在Material Design中是非常重要的。為了促進這個,Googlen已經發布了多個常見用例的組件在Design支持庫中。Kerry Perez-Huanca將會在教程中帶著大家學習Design支持庫中的這方面的組件。

Reactive Views

你可能已經注意到了在之前例子中的FloatingActionButton會在Snackbar出現的時候向上移動。這是用一個新的部件叫作CoordinatorLayout完成的,用它包裹的view應該給其它view留出空間。

改善Quick Return and Toolbars

很多開發者詢問用最簡單的方式顯示一個視差圖片作用于快速返回設計模式,隨著用戶上下滑動而出現或消失。你可以在Play Store的應用列表看到這個效果。為了讓開發者實現這個功能不用寫大量冗余代碼,Google發布了CollapsingToolBarLayoutAppBarLayout views。在這些部件里使用不同的選項,開發者能固定views在屏幕的頂部或特定的位置當這些views應該隨著用戶滑動顯示時。

這里寫圖片描述

總結

Design 支持庫帶來了大量期待已久的工具在Android上。當它和AppCompat 庫配合使用時,它變得很容易地添加Material Design到應用上并且保持向下兼容。

可以在Google官方相關的應用上找到這些新組件是怎樣工作的很多例子,CheeseSquare,Tuts+將會繼續提供深入教程在怎樣實現這些新特征上。

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!