Android Design Support 介绍

简介

Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。利用库中提供的新组件，我们能够方便快速的开发符合Material Design设计规范的应用。

概述

本文主要介绍一下android design support 介绍的几个新组件，比如：Snackbar，Floating Action Button(FAB)，TextInputLayout, NavigationView, TabLayout, CoordinatorLayout。最后会给出一个示例集合及代码。

Snackbar

Snackbar滑入滑出
类似于Toast组件，Snackbar是一个新的组件用来快速的从屏幕底部弹出一条消息给用户。用户可以与Snackbar交互，也可以直接滑出屏幕。如果没有操作，Snackbar会在设置的timeout后自动消失。

可以在Snackbar上添加事件

对于开发者来说，只需要几行代码就可以实现以上功能：

Snackbar.make(mDrawerLayout, "Your message", Snackbar.LENGTH_SHORT)
    .setAction(getString(R.string.text_undo), this)
    .show();

注意：你只能同时展示一个Snackbar。

Floating Action Button

Floating Action Button(FAB)是一个标准的用于交互的组件，例如:向列表添加新的项。现在不需要第三方库我们就可以在自己应用中实现此功能。

这个按钮有两种不同的大小：

Normal(56dp) --大多数情况应该使用此尺寸.

Mini(40dp) -- 只有在屏幕上显示的其他组件需要视觉连续性时才使用

Normal(左)Mini(右)FAB按钮

默认情况，FAB使用应用主题的accent colour作为其背景色。当然，我们也能通过属性设置轻松的改变背景色，下面介绍一些基本的属性：

fabSize - 用来设置按钮大小(normal, mini)
backgroundTint - 用来设置背景色
borderWidth - 用来给按钮设置一个边框
rippleColor - 用来设置按下时的波浪效果颜色
src - 用来设置FAB中的图标

<android.support.design.widget.FloatingActionButton
     android:id=”@+id/fab_normal”
     android:layout_width=”wrap_content”
     android:layout_height=”wrap_content”
     android:src=”@drawable/ic_plus”
     app:fabSize=”normal” />

TextInputLayout

新的TextInputLayout运行我们包装EditText，当EditText获得焦点时，EditText中指定的hint就会悬浮在EditText上。这样非常有帮助，用户在输入的同时也能看到哪些是合法输入的提示。

也支持错误信息提示，可以通过简单添加语句显示错误信息：

setErrorEnabled(true);
setError(getString(R.string.text_error_message));

NavigationView

NavigationDrawer在现在的App中应用非常普遍，直到现在，终于有了一种快速的方式来实现此功能。在DrawerLayout中添加NavigationView组件就可以显示导航菜单。

<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_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/main_content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer" />

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

这个组件有两个关键属性：

HeaderLayout

headerLayout属性是可选项，用来在抽屉顶部声明一个布局。通常用来展示用户头像等信息。

Menu

menu属性用来声明抽屉中的菜单选项，也可以编码通过inflateMenu()方法实现：

上图显示了两种NavigationView菜单。

右边使用标准的一组可点击菜单：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"    
    tools:context=".MainActivity">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_1"
            android:checked="true"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_item_1" />
        <item
            android:id="@+id/navigation_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_item_2" />
    </group>
</menu>

上面所有菜单都显示在一个列表中，没有分组。

左图类似于右图，只是我们使用了菜单分组，下面是资源文件：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"                       
    tools:context=".MainActivity">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_subheader"
            android:title="@string/nav_header">
            <menu>
                <!-- Menu items go here -->
            </menu>
         </item>
    </group>
</menu>

我们可以通过代码动态添加菜单选项，通过getMenu()方法获取所有的菜单项，然后可以添加菜单到此实例中。

下面介绍几个在实际使用中可能要用到的重要的属性：

itemBackground -- 用来设置菜单项的背景资源
itemIconTint -- 用来设置icon的颜色
itemTextColor -- 用来设置菜单项的文字颜色

为了捕获菜单的点击事件，我们只需要设置一个OnNavigationItemSelectedListener，这样我们就可以对所有菜单的点击事件作出反应。

TabLayout

固定tabs

可滑动tabs

为实现上面的效果，我们先要添加TabLayout到我们的布局中：

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill" />

完成上面代码后，我们可以通过几个主要的属性来改变我们TabLayout的展示方式：

tabMode - 用来设置TabLayout的显示模式。可以是fixed(所有tabs都固定不变)或者scrollable(显示一部分tab，另外一部分滑动显示)
tabGravity - 设置tabs的Gravity，可以是fill或者centre
setText() - 设置tab中显示的文本
setIcon() - 设置tab中显示的图标

在使用TabLayout视图时，我们可以设置几个不同的事件监听器：

OnTabSelectedListener - 可以设置用来监听tabs的选择状态变化
TabLayoutOnPageChangeListener - 包含对应TabLayout的回调，它处理标签选择状态的同步。
ViewPagerOnTabSelectedListener - 包含对应ViewPager的回调，它也处理标签选择状态的同步

完成布局文件的添加，只需要通过setupWithViewPager()方法把TabLayout关联上你的viewpager即可：

ViewPager pager = (ViewPager)
rootView.findViewById(R.id.viewPager);
pager.setAdapter(new MyPagerAdapter(getActivity().getSupportFragmentManager()));

TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.sliding_tabs);
tabLayout.addTab(tabLayout.newTab().setText("Tab One"));
tabLayout.addTab(tabLayout.newTab().setText("Tab Two"));
tabLayout.addTab(tabLayout.newTab().setText("Tab Three"));
tabLayout.setupWithViewPager(pager);

CoordinatorLayout

CoordinatorLayout是android design support library中提供的一个最主要的组件，它主要用来控制，协调其子视图的协助。比如可通过滑动控制可伸缩的Toolbar，可通过上下滑动隐藏FAB等。

在CoordinatorLayout需要一个子视图来触发滚动事件，例如RecyclerView，NestedScrollView。如果你使用的ListView或者 ScrollView，必须用前面两种视图替换才能工作，因为前者实现了NestedScrollingChild 接口。

CoordinatorLayout和AppBar

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
     
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior=
        "@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
        <android.support.v7.widget.Toolbar
            ...
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            ...
            />
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

为了使RecyclerView与Coordinator协作，我们在RecyclerView中添加layout_behavior属性。这样，CoordinatorLayout就可以对RecyclerView的滚动作出反应。TooBar中设置了layout_scrollFlags属性，这个用来表明在滚动式，TooBar应该如何变化。

enterAlways - 当下滑时，TooBar马上可见。

enterAlwaysCollapsed - 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。

exitUntilCollapsed - 上滑开始时就开始折叠

CoordinatorLayout与Toobars

你现在可以使用新的CollapsingToolbarLayout视图来包装Toolbar组件，在用户滑动屏幕时可以折叠此视图。

<android.support.design.widget.AppBarLayout
        android:layout_height="192dp"
        android:layout_width="match_parent">
    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

当使用CollapsingToolbarLayout时，layout_collapseMode属性必须设置，有两个选项：

Pin - 当CollapsingToolbarLayout张开时Toolbar会显示在顶部
Parallax - 当设置为此属性时，在CollapsingToolbatLayout添加ImageView就可以实现渐变效果。

参考由于时间有限，无法把每个组件都在Demo中实现，所以在网上找了一个比较全面的sample，大家有兴趣又可以下载下来学习一下。 sample中包含了下面多个组件的实现：

AppCompatActivity
CoordinatorLayout
AppBarLayout & Toolbar
RecyclerView (with ItemDecorators)
Snackbar
TabLayout
AppCompat Tinting
NavigationView
Snackbar
SwitchCompat
AlertDialog
CardView
FloatingActionButton
TextInputLayout
TextAppearance.AppCompat

效果图：

github地址 https://github.com/mwolfson/android-historian

Android Design Support 介绍

猜你喜欢