design support library八大模块

引用这个库：在 build.gradle 文件中加上这段代码： compile 'com.android.support:design:22.2.0'

他所涉及的控件有下列：

TextInputLayout；

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#ff9900">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="用户登录"
            android:textColor="#fff"
            android:textSize="30sp" />
    </RelativeLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tlName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp">

        <EditText
            android:id="@+id/etName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入用户名" />

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

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tlPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp">

        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            android:inputType="textPassword"/>

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

    <Button
        android:id="@+id/btn_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="登录" />
</LinearLayout>

代码实现如下：

mUserName = (TextInputLayout) findViewById(R.id.tlName);
        mPassword = (TextInputLayout) findViewById(R.id.tlPassword);
        etName = (EditText) findViewById(R.id.etName);
        etPassword = (EditText) findViewById(R.id.etPassword);
        mUserName.setHint("请输入用户名");
        mUserName.setCounterMaxLength(4);
        mUserName.setCounterEnabled(true);
        mPassword.setHint("请输入密码");
        etName.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if (s.toString().length() == 4) {
                    mUserName.setCounterEnabled(false);
                }
            }
        });

        mButton = (Button) findViewById(R.id.btn_login);
        mButton.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_login:
                String name = etName.getText().toString().trim();
                String pwd = etPassword.getText().toString();
                if (TextUtils.isEmpty(name)){
                    mUserName.setError("用户名不能为空");
                }else{
                    mUserName.setErrorEnabled(false);
                }
                if (TextUtils.isEmpty(pwd)){
                    mPassword.setError("密码不能为空");
                }else{
                    mPassword.setErrorEnabled(false);
                }
                break;
        }
    }

FloatingActionButton + Snackbar：

页面显示如下：

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/layoutRoot"
        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="bottom|right"
            android:src="@drawable/ic_class"
            app:backgroundTint="#ff87ff"
            app:borderWidth="0dp"
            app:fabSize="normal" />

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

代码实现如下：

 <pre name="code" class="java">findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(v, "有数据", Snackbar.LENGTH_SHORT)
                        .setAction("取消", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {

                            }
                        }).show();
            }
        });

和toast基本相同

TabLayout：

<android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        android:layout_alignParentBottom="true"
        app:tabSelectedTextColor="@color/title_red"
        app:tabTextColor="@color/black">
    </android.support.design.widget.TabLayout>

配上viewpager 效果更佳哦

 tab = (TabLayout) findViewById(R.id.tab);
        tab.addTab(tab.newTab().setText("tab1"));
        tab.addTab(tab.newTab().setText("tab2"));
        tab.addTab(tab.newTab().setText("tab3"));

NavigationView:

他的布局文件需要放在DrawLayout里面，DrawLayout是android5.0提出的抽屉样式，在这调用实现抽屉效果，布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+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">

        <android.support.v7.widget.Toolbar
            android:id="@+id/id_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <TextView
            android:id="@+id/id_tv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="HelloWorld"
            android:textSize="30sp"/>
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/id_nv_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/header_just_username"
        app:menu="@menu/menu_drawer"
        />

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

注意这个view的两个属性 app:headerLayout="@layout/header_just_username" 和 app:menu="@menu/menu_drawer" ，分别代表drawer布局中的header和menu  item区域。
接下来看看作画菜单中头布局header和 配置文件menu：

header

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="#ffabcd"
    android:orientation="vertical"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">


    <TextView
        android:id="@+id/id_link"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="16dp"
        android:text="http://blog.csdn.net/lmj623565791"/>

    <TextView
        android:id="@+id/id_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/id_link"
        android:text="Feng Xinzi"/>

    <ImageView
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_above="@id/id_username"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_class"/>


</RelativeLayout>

menu   配置文件

<?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/nav_home"
            android:checkable="true"                   //这行代表  确认你的选择项，选中当前项的时候，其他项变成未选中状态
            android:icon="@drawable/ic_class"
            android:title="Home"/>
        <item
            android:id="@+id/nav_messages"
            android:checkable="true"
            android:icon="@drawable/ic_class"
            android:title="Messages"/>
        <item
            android:id="@+id/nav_friends"
            android:checkable="true"
            android:icon="@drawable/ic_class"
            android:title="Friends"/>
        <item
            android:id="@+id/nav_discussion"
            android:checkable="true"
            android:icon="@drawable/ic_class"
            android:title="Discussion"/>
    </group>

    <item android:title="Sub items">
        <menu>
            <item
                android:checkable="true"
                android:icon="@drawable/ic_class"
                android:title="Sub item 1"/>
            <item
                android:checkable="true"
                android:icon="@drawable/ic_class"
                android:title="Sub item 2"/>
        </menu>
    </item>

</menu>

最后是activity

package com.example.myapplication;

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

/**
 * 作者： dyq
 * 日期： 2016/5/3.
 * 邮箱：twinkler_qian@163.com
 */
public class Navigation extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private NavigationView mNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.navigation);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout);
        mNavigationView = (NavigationView) findViewById(R.id.id_nv_menu);

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

        final ActionBar ab = getSupportActionBar();
        ab.setHomeAsUpIndicator(R.drawable.ic_class);
        ab.setDisplayHomeAsUpEnabled(true);

        setupDrawerContent(mNavigationView);

    }

    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(

                new NavigationView.OnNavigationItemSelectedListener() {

                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        menuItem.setChecked(true);        
                        mDrawerLayout.closeDrawers();
                        return true;
                    }
                });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_drawer, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
        if(item.getItemId() == android.R.id.home)
        {
            mDrawerLayout.openDrawer(GravityCompat.START);
            return true ;
        }
        return super.onOptionsItemSelected(item);
    }

}

coordinatorLayout + AppbarLayout + collapsingToolbarLayout 

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

coordinatorLayout + AppbarLayout实现了 Toolbar隐藏，通过AppBarLayout的子视图的属性控制。观察AppBarLayout的子布局，

Toolbar有app:layout_scrollFlags属性，这就是控制滑动时视图效果的属性。app:layout_scrollFlags有四个值：

1. scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。例如，TabLayout 没有设置这个值，将会停留在屏幕顶部。
2. enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
3. enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
4. exitUntilCollapsed: 滚动退出屏幕，最后折叠在顶端。

为了ToolBar可以滚动，CoordinatorLayout里面,放一个带有可滚动的View.如上的例子,放的是ViewPager,而ViewPager里面是放了ListView的,即是可以滚动的View。CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。例如，示例中Viewpager设置了此属性。

app:layout_behavior="@string/appbar_scrolling_view_behavior"

为了使得Toolbar有滑动效果，必须做到如下三点: 

1. CoordinatorLayout作为布局的父布局容器。 
2. 给需要滑动的组件设置 app:layout_scrollFlags=”scroll|enterAlways” 属性。 
3. 给滑动的组件设置app:layout_behavior属性

CollapsingToolbarLayout可实现Toolbar的折叠效果。

CollapsingToolbarLayout 提供以下属性和方法是用： 
1. Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。 
2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者 在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。 
3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。还没研究明白，不过这个只能在Android5.0以上系统有效果。 
4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。 
5. CollapseMode ：子视图的折叠模式，在子视图设置，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

CoordinatorLayout 还提供了一个 layout_anchor 的属性，连同 layout_anchorGravity 一起，可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）。本例中使用FloatingActionButton。

通过下面的参数设置了FloatingActionButton的位置，两个属性共同作用使得FAB 浮动按钮也能折叠消失，展现。

app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"

使用CollapsingToolbarLayout实现折叠效果，需要注意3点 
1. AppBarLayout的高度固定 
2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性 
3. 关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

自定义 behavior待研究。。。

附加各个模块的源码，在androidManifest里把每个activity逐个作为主activity，查看效果，地址如下：

http://download.csdn.net/detail/aaaaaa3334/9511196