Material Design with the Android Design Support Library

Material Design with the Android Design Support Library

原文http://www.sitepoint.com/material-design-android-design-support-library/

Material Design，Android 5.0发布时为android app 和其他平台app引入的一门新的设计语言。

它带来了一些新的UI组件，如“Floating Action Button”。实施这些新组件，同时确保向后兼容性是通常一个繁琐的过程。第三方库通常会需要简化过程。

在今年的谷歌IO大会上，谷歌推出了Android设计支持库带来了一些重要的Material Design组件的开发。该组件是向后兼容，向后兼容到Android 2.1，并实现他们的是比以前更容易。该库包括一个抽屉式导航视图，浮动编辑文本，浮动操作按钮，Snackbar，标签和motion和滚动框架绑在一起的标签。在本教程中，我们将创建一个应用程序，展示了这些组件。

Getting Started

工程源码：Github https://github.com/sitepoint-editors/Design-Demo

在开始使用这些组件之前，我们将建立项目，并设置一些样式。采用Android Studio中创建一个新的Android项目。将它命名为“Material Design”并保留其他设置为默认值，保证了最低的SDK版本是在API级别15。

在 build.gradle(module:app)文件添加库依赖：

compile ‘com.android.support:design:22.2.1‘

compile ‘com.android.support:cardview-v7:22.2.1‘

第一个声明添加 design support library，第二个声音添加 CardView 库，稍候我们将用到。接下来同步更新一下project。它可能会下载一些其他的支持库。

创建文件夹 res/values下资源文件 colors.xml,内容更改如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#3F51B5</color>
    <color name="primary_dark">#303F9F</color>
    <color name="accent">#FF4081</color>
</resources>

在res/values/strings.xml修改如下，我们在工程需要用到的字符串：

<resources>
    <string name="app_name">Design Demo</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="nav_item_attachment">Attachment</string>
    <string name="nav_item_images">Images</string>
    <string name="nav_item_location">My Location</string>
    <string name="nav_sub_menu">Sub Menu</string>
    <string name="nav_sub_menu_item01">Sub Menu Item 1</string>
    <string name="nav_sub_menu_item02">Sub Menu Item 2</string>
    <string name="drawer_header_text">Drawer Header</string>
    <string name="second_activity_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur diam id aliquam scelerisque. Donec ultrices lacus vel dignissim pharetra. Vivamus pharetra augue quis rhoncus placerat. Sed ultricies at risus non cursus. Nam rutrum leo nec placerat consectetur. Vestibulum feugiat eleifend diam, nec interdum augue tincidunt sit amet. Praesent feugiat est auctor lacus consectetur, vitae pellentesque dolor laoreet.</string>
    <string name="title_activity_second">SecondActivity</string>
</resources>

修改 res/values/styles.xml 文件：

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
    </style>
 
</resources>

在上面代码中，我们根据Material Design指南自定义了app的primary, primary-dark and accent color颜色

可定制其它主题设置如下图所示。

注意 item 名称不包含android: 前缀（如android:colorPrimaryDark），这是为了向后兼容。android: 注解需要将最低的API级别设置为 21。我们需要NoActionBar主题。

因为我们将使用一个 Toolbar作为 Action Bar(或者称为 AppBar).

(SOURCE: https://developer.android.com/training/material/theme.html)

添加 Toolbar, res/layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark" />
</RelativeLayout>

上面代码中，我们删除了RelativeLayout 默认的 padding，然后添加支持库的 Toolbar。如果你只支持API级别21以上的设备，那么你可以使用默认的 Toolbar组件，而不需要支持库。

修改 MainActivity.java 的 onCreate(Bundle)方法：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
    actionBar.setDisplayHomeAsUpEnabled(true);
}

Download the project resources from gitHub 包含drawable文件夹。你需要复制res目录到你的工程，上面的代码才不会显示错误信息。

上面代码，我们引用了 Toolbar 作为 Action Bar，然后为 Action Bar设置 Home 图标。

运行代码，你会看一个设置了 Toolbar的AppBar.

NavigationView

Navigation Drawer是一个Android应用公用组件。它是建立Android导航层次结构的方式之一， Tabs和 Spinners。实现一个从来就不是一个很快的过程，但现在随着设计支持库，它的实现要简单得多。

接着，改修 activity_main.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_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark" />
    </RelativeLayout>
    <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/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

上面代码，我们在DrawerLayout布局添加了一个NavigationView,这里你会注意到两个属性：app:heanderLaytout 用来控制 header 部分的布局；app:menu 指定了菜单资源，这两个资源我们将在下面创建。

创建 res/layout/drawer_header.xml文件，内容为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:gravity="bottom">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/drawer_header_text"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
</LinearLayout>

这里我们创建了NavigationView的头部视图，然后设置视图背景颜色，高度和显示的文本。

接下来在 res/menu目录下创建 drawer.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/navigation_item_attachment"
            android:checked="true"
            android:icon="@drawable/ic_attachment"
            android:title="@string/nav_item_attachment" />
        <item
            android:id="@+id/navigation_item_images"
            android:icon="@drawable/ic_image"
            android:title="@string/nav_item_images" />
        <item
            android:id="@+id/navigation_item_location"
            android:icon="@drawable/ic_place"
            android:title="@string/nav_item_location" />
    </group>
    <item android:title="@string/nav_sub_menu">
        <menu>
            <item
                android:icon="@drawable/ic_emoticon"
                android:title="@string/nav_sub_menu_item01" />
            <item
                android:icon="@drawable/ic_emoticon"
                android:title="@string/nav_sub_menu_item02" />
        </menu>
    </item>
</menu>

在上文中，我们创建了drawer里的菜单项。第一部分显示了菜单项的集合。选中的项目将在导航抽屉突出显示，确保用户知道哪些导航项目当前选择。在第二部分中，我们使用一个subheader以区别第一部分。

在MainActivity.java 添加以下成员变量：

private DrawerLayout mDrawerLayout;

然后再 onCreate(Bundle)函数添加以下代码：

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

修改onOptionsItemSelected(MenuItem) 函数:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    switch (id) {
        case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            return true;
        case R.id.action_settings:
            return true;
    }
    return super.onOptionsItemSelected(item);
}

当按钮屏幕的 home 按钮，drawer将从左边滑出。运行代码看看效果。

我们还需要为NavigationView设置 OnNavigationItemSelectedListener监听捕获菜单选择点击事件，在onCreate(Bundle)添加代码：

NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem menuItem) {
            menuItem.setChecked(true);
            mDrawerLayout.closeDrawers();
            Toast.makeText(MainActivity.this, menuItem.getTitle(), Toast.LENGTH_LONG).show();
            return true;
        }
    });

上面的代码设置在导航视图中的监听器，这样当一个抽屉菜单项被选中，菜单项设置为选中状态（这只会影响到标记为可检查的菜单项），抽屉被关闭，并Toast显示选定菜单项的标题。

Floating Action Button (FAB)

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

添加一个正常大小（56dp）浮动动作按钮，它支持最低大小（40dp）,当与其他元件视觉连续性是至关重要的。

修改 activity_main.xml添加 FAB:

<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">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark" />
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:src="@drawable/ic_done" />
    </RelativeLayout>
    <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/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

在上面，我们添加FloatingActionButton在布局的右下角。android:src设置按钮中显示的图标。在代码中，你可以使用setImageDrawable()。

运行代码，显示结果

下一节我们会为 FAB设置onClickListener

Snackbar

以前如果你想快速反馈信息给用户，你可以用 Toast，现在你有另一个选择了，那就是 Snackbar

Snackbar显示在屏幕的底部，并包含文字与可选的单个动作。超时会自动滑出屏幕。用户也可以在超时前手动将其滑出。

它的API与Toast类似，但是功能却被Toast强大

在 MainActivity.java的onCreate(Bundle):添加以下代码

FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Snackbar.make(findViewById(R.id.drawer_layout), "I‘m a Snackbar", Snackbar.LENGTH_LONG).setAction("Action", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "Snackbar Action", Toast.LENGTH_LONG).show();
                }
            }).show();
        }
    });

在上面代码中，我们为FAB设置一个onClickListener 监听对象，然后显示Snackbar,当用户触发 Action 按钮时，显示一个 Toast信息。

注意函数make()的第一个参数，它将作为Snackbar父视图，以确实Snackbar显示在父视图底部的锚点。

运行程序：

注意到Snackbar与FAB重叠，我们将在下一节通过CoordinatorLayout修复这个问题。

TabLayout

在Android里通过标签来切换两个不同的视图已经不是新概念了。但是通过支持库 TabLayout可以简化添加标签的操作。实现了固定 tab（所有 tab 平分秋色，宽度固定）和滚动 tab（宽度根据标题长度自适应，可以水平滑动）两种形式

添加 TabLayout 到应用中，修改 res/layout/activity_main.xml：

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark" />
            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                app:tabGravity="fill"
                android:theme="@style/ThemeOverlay.AppCompat.Dark" />
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
        </LinearLayout>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:src="@drawable/ic_done"/>
    </RelativeLayout>
    <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/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

在上文中，我们添加一个TabLayout以及一个ViewPager。该ViewPager将用于使标签水平切换。

在 MainActivity.java文件下添加以下类：

public static class DesignDemoFragment extends Fragment {
    private static final String TAB_POSITION = "tab_position";
    public DesignDemoFragment() {
    }
    public static DesignDemoFragment newInstance(int tabPosition) {
        DesignDemoFragment fragment = new DesignDemoFragment();
        Bundle args = new Bundle();
        args.putInt(TAB_POSITION, tabPosition);
        fragment.setArguments(args);
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Bundle args = getArguments();
        int tabPosition = args.getInt(TAB_POSITION);
        TextView tv = new TextView(getActivity());
        tv.setGravity(Gravity.CENTER);
        tv.setText("Text in Tab #" + tabPosition);
        return tv;
    }
}
static class DesignDemoPagerAdapter extends FragmentStatePagerAdapter {
    public DesignDemoPagerAdapter(FragmentManager fm) {
        super(fm);
    }
    @Override
    public Fragment getItem(int position) {
        return DesignDemoFragment.newInstance(position);
    }
    @Override
    public int getCount() {
        return 3;
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return "Tab " + position;
    }
}

然后在onCreate(Bundle)方法添加以下代码：

DesignDemoPagerAdapter adapter = new DesignDemoPagerAdapter(getSupportFragmentManager());
ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);
viewPager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout)findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewPager);

上面代码中，我们创建一个简单的Fragment，并包含一个TextView视图，然后创建一个FragmentStatePagerAdapter 作为ViewPager的适配器，适配器的getCount()函数返回了 标签总数，getItem(int) 返回了当前标签页的fragment, getPageTitle(int) 则设置了标签title，要让它工作，我们使用了 TabLayout的setupWithViewPager()函数，更保标签更新时，viewpager跟着一起更新。

运行程序：

CoordinatorLayout

CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。

将FloatingActionButton 作为CoordinatorLayout  的子视图，然后将Snackbar.make() 函数的第一个参数指定为CoordinatorLayout

大概意思也就是说：当Snackbar向上移出时，FAB会跟着往上移动，就是同步。就解决了重叠的问题了。（自已的英语水平真差出新高度了）

修改 activity_main.xml文件：

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
 
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark" />
 
            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                app:tabGravity="fill"
                android:theme="@style/ThemeOverlay.AppCompat.Dark" />
 
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>
 
        </LinearLayout>
 
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:src="@drawable/ic_done"/>
 
    </android.support.design.widget.CoordinatorLayout>
 
    <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/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

以上代码中，FAB作为CoordinatorLayout的子视图，就是将RelativeLayout布局更改成CoordinatorLayout,注意设置FAB的位置

android:layout_gravity="bottom|right".

接下来就是在 MainActivity.java创建Snackbar时，CoordinatorLayout为作Snackbar的视图参数（第一个参数）：

Snackbar.make(findViewById(R.id.coordinator), "I‘m a Snackbar", Snackbar.LENGTH_LONG).setAction("Action", new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "Snackbar Action", Toast.LENGTH_LONG).show();
                }
            }).show();

运行程序，现在当你点击FAB按钮时，Snackbar会往向滑进界面，但是不会与FAB按钮重叠，FAB按钮会跟着往上移动，但Snackbar移出屏幕时，FAB按钮会跟着回到原来的位置。

另一个主要用例CoordinatorLayout涉及应用栏和滚动技术。设计库提供了AppBarLayout允许工具栏和其他视图（如由TabLayout提供选项卡）反应以在标有ScrollingViewBehavior同级视图滚动事件。

实现这个功能之前，让我们先创建一些东西，我们可以滚动。我们将使用一个RecyclerView创建，我们可以滚动项目列表。

(作者使用 ListView, GridView和 ScrollViews不能让CoordinatorLayout正常工作)

build.gradle (Module: app) 文件添加如下内容：

compile ‘com.android.support:recyclerview-v7:22.2.1‘

创建 res/layout/ fragment_list_view.xml文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

接着创建另一个布局文件 res/layout/list_row.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:orientation="vertical"
          android:padding="16dp"
          android:layout_width="match_parent"
          android:layout_height="56dp">
    <TextView
        android:id="@+id/list_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

创建一个java文件DesignDemoRecyclerAdapter.java

package com.echessa.designdemo; // Rename as Appropriate
 
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
 
import java.util.List;
 
/**
 * Created by echessa on 7/24/15.
 */
public class DesignDemoRecyclerAdapter extends RecyclerView.Adapter<DesignDemoRecyclerAdapter.ViewHolder> {
    private List<String> mItems;
    DesignDemoRecyclerAdapter(List<String> items) {
        mItems = items;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_row, viewGroup, false);
        return new ViewHolder(v);
    }
    @Override
    public void onBindViewHolder(ViewHolder viewHolder, int i) {
        String item = mItems.get(i);
        viewHolder.mTextView.setText(item);
    }
    @Override
    public int getItemCount() {
        return mItems.size();
    }
    public class ViewHolder extends RecyclerView.ViewHolder {
        private final TextView mTextView;
        ViewHolder(View v) {
            super(v);
            mTextView = (TextView)v.findViewById(R.id.list_item);
        }
    }
}

修改DesignDemoFragment.onCreateView() 函数的代码：

@Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Bundle args = getArguments();
        int tabPosition = args.getInt(TAB_POSITION);
        ArrayList<String> items = new ArrayList<String>();
        for (int i = 0; i < 50; i++) {
            items.add("Tab #" + tabPosition + " item #" + i);
        }
        View v =  inflater.inflate(R.layout.fragment_list_view, container, false);
        RecyclerView recyclerView = (RecyclerView)v.findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
        recyclerView.setAdapter(new DesignDemoRecyclerAdapter(items));
        return v;
    }

使用创建的 fragment_list_view.xml布局来填充视图，现在fragment视图将会包含一个列表项。运行程序：

修改 activity_main.xml文件：

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    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
        android:id="@+id/coordinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark">
 
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"/>
 
            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                app:tabGravity="fill"/>
 
        </android.support.design.widget.AppBarLayout>
 
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:src="@drawable/ic_done"/>
 
    </android.support.design.widget.CoordinatorLayout>
 
    <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/drawer_header"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

在上面代码中，我们将 Toolbar和TabLayout嵌入到 AppbarLayout中, AppBarLayout允许Toolbar及标志为ScrollingViewBehavior的其他视图响应滚动事件。当通过RecyclerView用户滚动时，AppBarLayout响应通过其子的滚动标志来控制他们是如何进入（滚动在屏幕上）和出口（滚动关闭屏幕）。也就是所有标志为ScrollingViewBehavior 的子视图都会被推入和拉出。

Flags 包括：

  • scroll： 这个标志会被设置到所有希望滚出屏幕的视图上，如果不设置这一标志，则视图会被一直保留在屏幕顶部。
  • enterAlways： 这个标志会确保任何下滑滚屏都会触发视图的展现，等于开启了一种「快速返回」模式。
  • enterAlwaysCollapsed： 如果设置了 minHeight 和这个标志，你的视图通常会折叠显示，只有当滚动视图已经到达了它的顶点以后才会打开到完整高度。
  • exitUntilCollapsed： 这个标志会导致视图在退出之前，一直被锁定

注意一点：所有设置了 scroll 标志的视图必须在未设该标志的视图之前进行声明，这样可以确保所有的滚动视图都从顶部退出，而固定元素都不受影响。

CollapsingToolbarLayout

CollapsingToolbarLayout为AppBar提供了另一种滚动行为。我们将创建另一个Activity，只包含一个Toolbar.

创建一个空的 Activity，命名:SecondActivity

修改 res/layout/activity_second.xml：

<?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.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/image"
                app:layout_collapseMode="parallax"/>

            <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.v7.widget.Toolbar>

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:orientation="vertical"
            android:paddingTop="24dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.v7.widget.CardView
                android:layout_margin="16dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Lorem ipsum"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/second_activity_text"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>
            <android.support.v7.widget.CardView
                android:layout_margin="16dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Lorem ipsum"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/second_activity_text"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>
            <android.support.v7.widget.CardView
                android:layout_margin="16dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Lorem ipsum"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/second_activity_text"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>
            <android.support.v7.widget.CardView
                android:layout_margin="16dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Lorem ipsum"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/second_activity_text"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>
            <android.support.v7.widget.CardView
                android:layout_margin="16dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <LinearLayout
                    android:orientation="vertical"
                    android:padding="16dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Lorem ipsum"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/second_activity_text"/>
                </LinearLayout>
            </android.support.v7.widget.CardView>

        </LinearLayout>

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

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

在上文中，我们使用了CollapsingToolbarLayout，标志为 scroll和 exitUnitCollapsed,使它的子视图全部滚出屏幕，对于Toolbar，我们设置为：app:layout_collapseMode="pin" 可以确保当视图折叠时 Toolbar固定在顶部，在CollapsingToolbarLayout的标题将出现较大的时候，布局是完全可见，然后过渡到其默认大小，因为它是折叠的。我们在代码中设置此title。布局的其余部分是一个NestedScrollView包含几个CardView。

在SecondActivity.java中的onCreate(Bundle)函数添加代码：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_second);
 
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
 
    CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Second Activity");
}

这里我们为Toolbar添加向上符号和为 CollapsingToolbarLayout设置title

要使用向上符号工作，还需要在manifest文件中为SecondActivity添加标签

<meta-data
            android:name="android.support.PARENT_ACTIVITY"
            android:value="com.echessa.designdemo.MainActivity" />

修改DesignDemoRecyclerAdapter.java 的onBindViewHolder()方法：

 @Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
    String item = mItems.get(i);
    viewHolder.mTextView.setText(item);
 
    viewHolder.mTextView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Context context = view.getContext();
            context.startActivity(new Intent(context, SecondActivity.class));
        }
    });
}

在上文中，我们的RecyclerView的每一行上的TextView设置一个onClick监听。这不是设置RecyclerView项监听的好方式，因为如果你运行应用程序，听者的触摸目标将只包括与该行的文本的区域，而不是整个行。我这样做是在这里，因为我要的是一个方法来启动新的活动，所以我选择一个的方式来写最少的代码。

Floating Labels for EditText

最后要介绍的一个组件是支持库里改良型的EditText，譬如它在我们输入第一个字符的时候，就会自动隐藏掉提示标签。现在你该使用 TextInputLayout 了，它会在用户开始输入之后，自动将提示标签悬浮到 EditText 上方，这样用户就永远都能知道输入内容的上下文。

为了演示这个功能，我们修改 activity_second.xml布局文件的第二个CardView的第一个TextView为 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:inputType="textEmailAddress"
                        android:hint="Email" />
                </android.support.design.widget.TextInputLayout>

运行程序，提示文件将浮现在EditView的上面

你还可以通过设置EditView的setError()函数来为EditView显示一个”错误信息”。

时间： 2024-10-12 23:21:43

Material Design with the Android Design Support Library的相关文章

Android Testing Support Library

This release includes three major updates:Espresso-Web[1]: an Espresso-like API for automated UI testing of hybrid Android applications. Use Espresso-Web to test and interact with any WebView and seamlessly integrate it with your native Espresso UI t

Android Design 与 Holo Theme

转载:http://www.geekpark.net/topics/179488 [核心提示] 提到 Android Design,很多人会做出”啊,知道,就是黑色的背景和灰蓝色的平的按钮嘛”,那么到底什么是 Android Design 什么是 Holo Theme,它们的关系是什么?本质又是什么? 在国内,有个很有意思的现状.一方面,几个国内最大的公司/企业的客户端/应用依旧冥顽不灵,丝毫不愿意遵循 Android Design,以各种扯淡的理由坚持使用 iOS UI 或者 Metro UI

Material Design 开发利器：Android Design Support Library 介绍

转自:https://blog.leancloud.cn/3306/ Android 5.0 Lollipop 是迄今为止最重大的一次发布,很大程度上是因为 material design —— 这是一门新的设计语言,它刷新了整个 Android 的用户体验.但是对于开发者来说,要设计出完全符合 material design 哲学的应用,是一个很大的挑战.Android Design Support Library 对此提供了很好的支持,里面汇集了很多重要的 material design 控

Android开发学习之路-Android Design Support Library使用（CoordinatorLayout的使用）

效果图: 上面的这个图有两个效果是,一个是顶部的图片,在上滑之后会隐藏起来并且显示出一个ToolBar(ToolBar类似于ActionBar,但是只有ToolBar是兼容Material Desig的库).另一个是底部的这个按钮,这个按钮点击之后会出现一个SnackBar(比Toast要强大,因为可以设定点击的监听事件),在按钮点击之后SnackBar出现之后按钮会自动的向上移动避免被遮挡,这是CoordinatorLayout的一个功能. Android Design Support Lib

Android：加载Android Design Support Library异常解决方案

Google最新的兼容包Android Design Support Library增加了许多符合Material Design设计规范的控件,如Navigation View,Floating Action Button,SnackBar,Tabs,CoordinatorLayout,AppbarLayout,CollapsingToolbarLayout等. 笔者也及时更新了SDK,获得了Android Design Support Library支持包,但是在导入eclipse工程的过程中

Android的材料设计兼容库（Design Support Library）

编辑推荐:稀土掘金,这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识.前端.后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过! 导读:这个兼容库很容易和之前的 Android Support Library 22.1混淆,都是兼容库,区别是这个库多了个Design. Android Support Library 22.1只是支持了一些基本控件的材料设计化,但是这个库更多的是对一些特效的实现,这个库和github上的很多开源项目是有

Android Design Support Library——Navigation View

前沿 Android 从5.0开始引入了Material design元素的设计,这种新的设计语言让整个安卓的用户体验焕然一新,google在Android Design Support Library中封装了一些重要的material design控件,在这之前其实github上也已经出现了许多各种各样的material design 控件,只不过现在google把有些控件标准化了,注意这个Android Design Support Library和Android Support Libra

Android Design Support Library详解（SnackBar、NavigationView、FloatActionButton等）

Material Design 设计风格非常受欢迎,那么支持其效果的Design Support Library(Android 2.1  API  level 7及其以上)库又有哪些控件呢.主要包括SnackBar.Navigation View.FloatActionbutton.CoordinatorLayout.CollapsingToolBarLayout等.我在Git上看见一个非常炫的效果 谷歌官网介绍:http://android-developers.blogspot.com.e

Android Design Support Library使用详解

Android Design Support Library使用详解 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2.这不得不说是一个良心之作. 使用S