Material Design(四)Support Design

作者: 前世小书童 | 来源:发表于2016-03-26 19:31 被阅读4728次

写在前面的几句话

最近准备写独立App的打算，那么思考了下作为一个独立App开发者角度的选择问题，很自然的就把Material Design作为视觉方面的选择了，那么这篇文章呢，就对Support Design包的使用进行简单的分析，其实之前也有学习过，但是鉴于之前的项目中没有选择Material Design作为设计选择，也忘却了许多，这次刚好也把学习的东西记录下来

简介

在Material Design推出之初，想要实现这种设计风格，对于开发者来说是一件很困难的事情，只能通过GitHub上开发者贡献出来的开源库来实现这一风格的Android开发，在Google在2015的IO大会上，谷歌给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。

对于开发者来说这是一个福音，所以这篇文章就对Android Design Support Library进行分析。

想要使用Android Design Support Library首先得在gradle添加依赖

compile 'com.android.support:design:23.2.0'

一.CoordinatorLayout

CoordinatorLayout是Support Design中新添加的一个增强型的FrameLayout。在CoordinatorLayout中，我们可以在FrameLayout的基础上完成很多新的操作。

CoordinatorLayout 是一个让子 Views 协调工作的布局。每个 View 中肯定是设计和实现了和 CoordinatorLayout 协同工作的，很多子View与CoordinatorLayout配合使用会发生美妙的化学反应，这就是为什么要把CoordinatorLayout作为第一个来介绍

CoordinatorLayout使用如下

<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:fitsSystemWindows="true">

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

二.Floating Action Button

FAB(Floating Action Button)其实在之前有介绍过,是一个有一些阴影的圆形按钮,这个其实是在Material Design的世界中一个很重要的组成部分。

FAB使用如下

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

运行如下

图1 Floating Action Button

三.Snackbar

Snackbar是在屏幕的地步一个微小的黑色条显示着一条简短的消息，与Toast 有着相同的概念，但是不同于 Toast，它的表现是作为 UI 的一部分而不是覆盖在屏幕上。

Snackbar使用如下

Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();

运行如下

图2 Snackbar

FAB 与 Snackbar在CoordinatorLayout下产生的化学反应

当我们使用普通的layout包裹FAB，我们会发现

图3 不使用CoordinatorLayout

但是使用CoordinatorLayout包裹FAB就可以发现如下的效果

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true">

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

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

图4 使用CoordinatorLayout

四.Toolbar

Toolbar其实是用来替代ActionBar的，因为在这个Support Design中，很多组件都是设计为与Toolbar协同使用，从而达到Material Design设计中的一些效果

要使用Toolbar需要如下的工作

1.在AppTheme的style属性中隐藏Action Bar

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
      <item name="windowActionBar">false</item> 
      <item name="windowNoTitle">true</item>
</style>

2.在CoordinatorLayout里面放入AppBarLayout与Toolbar

<android.support.design.widget.CoordinatorLayout
    ...>
   <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
    </android.support.design.widget.AppBarLayout>
    <android.support.design.widget.FloatingActionButton
        ...>
    </android.support.design.widget.FloatingActionButton>
</android.support.design.widget.CoordinatorLayout>

3.代码设置将Toolbar作为ActionBar

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

运行如下

图5 Toolbar

注意事项

1.内容区域

内容区域放置于AppBarLayout与FloatingActionButton之间

并且一些古老的原因，LinearLayout 没有被设计成与 CoordinatorLayout 协同工作。在这样的情况下，没有任何布局用来包裹 LinearLayout，使它像 Toolbar 的做法那样。但它是更加容易的，你只需要在 LinearLayout 添加一个属性告诉它的滚动行为

如下

<LinearLayout
    ...
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    ...>

2.当随着内容滚动，让AppBarLayout退出屏幕

怎么让内容滚动，有几种方式，RecycleView,ListView,ScrollView,但是ListView与ScrollView并没有设计为与CoordinatorLayout协同工作，所以Support Design提供了一个新的ScrollView为NestedScrollView，所以RecycleView与NestedScrollView可以用来随着内容滚动，让AppBarLayout退出屏幕。

AppBarLayout可以这样响应滚动事件：根据子view的滚动标志（scroll flag）来控制它们如何进入（滚入屏幕）与退出（滚出屏幕）。

Flag包括：

scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。

app:layout_scrollFlags="scroll|enterAlways"

图6 enterAlways

enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
android:minHeight="?attr/actionBarSize"

图7 enterAlwaysCollapsed

exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:minHeight="?attr/actionBarSize"

图8 exitUntilCollapsed

五.CollapsingToolbarLayout

图9

其实在Material Design的设计中上面这张图的效果是挺典范的一种设计，那么这样的效果怎么实现的呢？其实上面的Toolbar也可以展开折叠，但是不够完美，这里介绍下CollapsingToolbarLayout

使用步骤如下

1.用 CollapsingToolbarLayout 包裹 Toolbar，但仍然在 AppBarLayout 中

2.从 Toolbar 中删除 layout_scrollFlags,为 CollapsingToolbarLayout 声明 layout_scrollFlags，并且将 layout_scrollFlags 设置成 scroll|exitUntilCollapsed

3.改变 AppBarLayout 扩张状态时的布局高度大小

最终代码如下

 <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                />

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

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

图10 CollapsingToolbarLayout

可以通过一些属性修改展开状态改变标题文字的位置，以及文本的显示

app:expandedTitleMargin 展开状态的边距
app:expandedTitleMarginBottom 展开状态距下的边距
app:expandedTitleMarginEnd 展开状态结束的边距
app:expandedTitleMarginStart 展开状态开始的边距
app:collapsedTitleTextAppearance 折叠状态的文本显示
app:expandedTitleTextAppearance 展开状态的文本显示

我们可以看到Toolbar icons 仍然滚出了屏幕。我们可以声明这个属性给 Toolbar 来固定住它，让它总是在屏幕的顶部。

<android.support.v7.widget.Toolbar 
    ...
   app:layout_collapseMode="pin"/>

怎么实现图片中的效果呢，步骤如下

1.添加一个ImageView作为Toolbar的背景图层

2.添加视差模式与视差系数来使视觉上看起来效果更好

3.为CollapsingToolbarLayout添加属性可以让收缩的时候自动的变化到普通的颜色

最后的代码如下

 <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/header"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                />

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

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

最后效果如下

图11 CollapsingToolbarLayout

六.TabLayout

依据Android 应用程序用户体验指导原则，Tab 应该放在屏幕的顶部而不是在底部，所以TabLayout放置于AppBarLayout内，Toolbar下面

代码如下

xml中

<android.support.design.widget.AppBarLayout ...>
    <android.support.v7.widget.Toolbar ... />
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>

java代码中添加tabs

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

运行如下

图12 TabLayout

可以通过设置属性来设置Tab的样式

app:tabMode 当tabMode设置为fixed,tabGravity才生效，设置为scrollable则是满足于多个tab,可以滑动

app:tabMode="scrollable"

图12 tabMode scrollable

app:tabGravity tabGravity设置fill,表示所有tab都是等分居中，设置为center,则所有tab都居中显示

app:tabMode="fixed"
app:tabGravity="center"

图13 tabGravity center

app:tabMode="fixed"
app:tabGravity="fill"

图14 tabGravity fill

七.TetInputLayout

在material design中，即便是简单的 EditText ，也有提升的余地。通常，单独的EditText会在用户输入第一个字母之后隐藏提示信息，但是现在你可以使用TextInputLayout 来将EditText封装起来，提示信息会变成一个显示在EditText之上的floating label，这样用户就始终知道他们现在输入的是什么。

要做到这一点，只需要简单的用 TextInputLayout 包裹住一个 EditText就可以了

如下

<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="input2" />
</android.support.design.widget.TextInputLayout>

运行如下

图15 TetInputLayout

还可以通过调用setError()在EditText下面显示一条错误信息

显示如下

图16 TetInputLayout error

八.Navigation Drawer

Material Design(四)Support Design

写在前面的几句话

简介

一.CoordinatorLayout

二.Floating Action Button

三.Snackbar

FAB 与 Snackbar在CoordinatorLayout下产生的化学反应

四.Toolbar

五.CollapsingToolbarLayout

六.TabLayout

七.TetInputLayout

八.Navigation Drawer

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读