[Material Design] - android-design-support-library

翻译： android-design-support-library

一、概述

向后兼容。 借助新的Android设计支持库的一些帮助，我们为所有开发人员和所有Android 2.1或更高版本的设备带来了一些重要的材料设计组件。 你会发现一个导航抽屉视图（navigation drawer view），用于编辑文本的浮动标签（floating labels for editing text,），一个浮动操作按钮（a floating action button），快餐栏（snackbar），标签（tabs），以及一个动作和滚动框架将它们绑在一起。

二、Navigation View - 导航抽屉视图

您使用NavigationView作为DrawerLayout的抽屉内容视图，其布局如：

<android.support.v4.widget.DrawerLayout
    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">

<!-- your content layout -->

<android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

你会注意到NavigationView的两个属性：app：headerLayout控制用于头的（可选）布局。 app：menu是导航项目的菜单资源（也可以在运行时更新）。 NavigationView为您处理状态栏的scrim保护，确保您的NavigationView与API21 +设备上的状态栏正确交互。

最简单的抽屉菜单将是可勾选菜单项的集合：

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

选中的项目将突出显示在导航抽屉中，确保用户知道当前选择的导航项目。

您也可以使用菜单中的子标题来分隔项目组：

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

您将通过使用setNavigationItemSelectedListener（）设置OnNavigationItemSelectedListener来获取选定项目的回调。 这为您提供了被点击的MenuItem，允许您处理选择事件，更改检查状态，加载新内容，以编程方式关闭抽屉或任何其他您可能想要的操作。

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {

            switch (item.getItemId()){
                case R.id.nav_home:
                    Logger.d("nav_home");
                    Logger.d("nav_home2");
            }
            item.setChecked(true);
            drawerLayout.closeDrawers();
            return true;
        }
    });

三、Floating labels for editing text - 用于编辑文本的浮动标签

即使是谦虚的EditText也有改进材料设计的空间。 虽然EditText单独会在输入第一个字符后隐藏提示文本，但现在可以将其封装在TextInputLayout中，从而使提示文本成为EditText上方的浮动标签，确保用户在输入时不会丢失上下文。

除了显示提示之外，您还可以通过调用setError（）在EditText下面显示错误消息。

四、 Floating Action Button - 浮动操作按钮

浮动操作按钮是表示您的界面上的主要操作的圆形按钮。 设计库的FloatingActionButton为您提供了一个一致的实现，默认情况下使用您的主题中的colorAccent进行着色。

除了正常尺寸的浮动操作按钮，它还支持迷你尺寸（fabSize =“迷你”），当与其他元素的视觉连续性至关重要。 作为FloatingActionButton扩展ImageView，你将使用android：src或任何方法，如setImageDrawable（）来控制FloatingActionButton中显示的图标。

五、Snackbar - 便捷栏

提供关于操作的轻量，快速反馈是使用Snackbar的完美机会。 Snackbars显示在屏幕底部，包含带有可选单个操作的文本。 他们在给定的时间长度后，通过屏幕的动画自动超时。 此外，用户可以在超时前刷新它们。

通过包括通过滑动或者动作（Action）与Snackbar交互的能力，会发现比另一个轻量级反馈机制 - 吐司强许多。 而且，您会发现API非常熟悉：

Snackbar
.make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG)
.setAction(R.string.snackbar_action, myOnClickListener)
.show(); // Don’t forget to show!

你会注意到使用视图View作为第一个参数make（） - Snackbar将尝试找到一个适当的Snackbar的父视图，以确保它锚定到底部。

六、 Tabs - 标签

通过标签在应用程序中切换不同的视图不是一个新的材料设计概念，它们同样作为顶级导航模式在家里，或者在应用程序中组织不同的内容分组（例如，不同类型的音乐）。

设计库的TabLayout实现了两个固定的选项卡，其中视图的宽度在所有选项卡之间平均分配，以及可滚动选项卡，其中选项卡不是统一的大小，可以水平滚动。 可以通过编程添加标签：

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));

但是，如果您使用ViewPager在选项卡之间进行水平分页，则可以直接从PagerAdapter的getPageTitle（）创建选项卡，然后使用setupWithViewPager（）将它们连接在一起。 这确保选项卡选择事件更新ViewPager，并且页面更改更新选定的选项卡。

七、CoordinatorLayout, motion, and scrolling - 协调布局，运动和滚动

独特的视觉效果只是材料设计的一部分：运动也是一个伟大的材料设计的应用程序的重要组成部分。 尽管在材料设计中有许多运动部分，包括触摸波纹（touch ripples）和有意义的过渡，Design库引入了CoordinatorLayout，它提供了对子视图之间的触摸事件的额外级别的控制，这是设计库中许多组件利用的东西。

八、CoordinatorLayout and floating action buttons - 协调布局和浮动操作按钮

一个很好的例子是，当你添加一个FloatingActionButton作为CoordinatorLayout的子节点，然后将该CoordinatorLayout传给你的Snackbar.make（）调用，与在浮动操作按钮上覆盖显示Snackbar相比，FloatingActionButton利用额外的回调 通过CoordinatorLayout自动向上移动跟随Snackbar动画，并返回到其原始位置时，Snackbar动画在Android 3.0和更高的设备上 - 不需要额外的代码。

一个例子如：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<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_done" />

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

And the main activity class:

public class MainActivity extends AppCompatActivity {

  @Override  
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        Snackbar.make(view, "Hello Snackbar", Snackbar.LENGTH_LONG).show();
      }
    });
  }
}

效果如：

但如果你想使用其他FAB实现会发生什么？
CoordinatorLayout可以协调子视图之间的依赖关系，但是在这种情况下CoordinatorLayout不工作。 这是因为我们的视图没有默认的CoordinatorLayout.Behavior实现。

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

    <com.getbase.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        app:fab_icon="@drawable/ic_done" />

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

效果：

CoordinatorLayout还提供了一个layout_anchor属性，它与layout_anchorGravity一起使用，用于放置相对于其他视图的浮动视图，例如FloatingActionButton。

九、CoordinatorLayout and the app bar

CoordinatorLayout的另一个主要用例涉及应用程序栏-app bar（以前的操作栏- action bar）和滚动技术。 您可能已在布局中使用工具栏（Toolbar），使您可以更轻松地自定义应用程序的标志部分与其余布局的外观和集成。 设计库将此提升到一个新的水平：使用AppBarLayout允许您的工具栏或者其他视图（例如TabLayout提供的选项卡）对标记为ScrollingViewBehavior的兄弟视图中的滚动事件做出反应。 因此，您可以创建如下布局：

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

 <! -- Your Scrollable View -->
<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
              ...
              app:layout_scrollFlags="scroll|enterAlways">
 </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

现在，当用户滚动RecyclerView时，AppBarLayout可以通过使用孩子的滚动标志（scroll flags）来控制它们如何进入（在屏幕上滚动）和退出（滚动离开屏幕）来响应这些事件。 标志包括：

• scroll：对于想要滚动屏幕的所有视图，应该设置此标志 - 对于不使用此标志的视图，它们将保持固定在屏幕顶部
• enterAlways：此标志确保任何向下滚动将导致此视图变为可见，启用“快速返回”模式
• enterAlwaysCollapsed：当您的视图声明了一个minHeight，并且您使用此标志时，您的视图将只输入其最小高度（即“折叠”），只有当滚动视图到达顶部时才重新展开到其完整高度。
• exitUntilCollapsed：此标志导致视图向下滚动，直到它在退出之前被“折叠”（它的minHeight）

Note：使用滚动标志的所有视图必须在不使用标志的视图之前声明。 这确保所有视图从顶部退出，留下固定元素。

十、Collapsing Toolbars - 折叠工具栏

直接向AppBarLayout添加Toolbar可以访问enterAlwaysCollapsed和exitUntilCollapsed滚动标志，但不是对不同元素如何对折叠进行反应的详细控制。 为此，您可以使用CollapsingToolbarLayout：

<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的app：layout_collapseMode =“pin”，以确保Toolbar本身保持固定在屏幕的顶部，当视图折叠的时候。 更好的是，当您同时使用CollapsingToolbarLayout和Toolbar时，当布局完全可见时，标题会自动显示得更大，然后在折叠时转换到默认尺寸。 请注意，在这些情况下，您应该在CollapsingToolbarLayout上调用setTitle（），而不是在Toolbar上调用setTitle（）。

除了固定视图之外，您还可以使用app：layout_collapseMode =“parallax”（可选地，应用：layout_collapseParallaxMultiplier =“0.7”设置视差乘数）来实现视差滚动（例如在CollapsingToolbarLayout中的同级ImageView）。 此用例与应用程序完美匹配：CollapseingToolbarLayout的contentScrim =“？attr / colorPrimary”属性，当视图合拢时添加完整的Scrim。

十一、CoordinatorLayout and custom views - CoordinatorLayout和自定义视图

需要注意的一点是，CoordinatorLayout对FloatingActionButton或AppBarLayout工作没有任何固有的理解 - 它只是以Coordinator.Behavior的形式提供了一个额外的API，允许子视图更好地控制触摸事件和手势 以及声明彼此之间的依赖性并通过onDependentViewChanged（）接收回调。

视图可以通过使用CoordinatorLayout.DefaultBehavior（YourView.Behavior.class）注释来声明默认行为，或者通过应用程序：layout_behavior =“com.example.app.YourView $ Behavior”属性在布局文件中设置它。 这个框架使任何视图都可以与CoordinatorLayout集成。

如下布局中，FloatingActionButton本身没有实现CoordinatorLayout.Behavior

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

<com.getbase.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    app:layout_behavior="com.getbase.coordinatorlayoutdemo.FloatingActionButtonBehavior"
    app:fab_icon="@drawable/ic_done" />

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

Custome Behavior

public class FloatingActionButtonBehavior extends CoordinatorLayout.Behavior<FloatingActionButton>{
    public FloatingActionButtonBehavior(Context context, AttributeSet attrs) {}

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
      return dependency instanceof SnackbarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
      float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight());
      child.setTranslationY(translationY);
      return true;
    }
}

最后

start using the Design library with a single new dependency:

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

Note：由于Design库依赖于Support v4和AppCompat支持库，当您添加Design库依赖关系时，这些库将自动包含。 我们还注意到这些新的小部件可以在Android Studio布局编辑器的设计视图中使用（在CustomView下找到它们），为您提供了更简便的方法来预览这些新组件。