Android Design Support Library使用

1. 添加依赖

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

2. Snackbar介绍

SnackBar通过在屏幕底部展示简洁的信息，为一个操作提供了一个轻量级的反馈，
并且在Snackbar中还可以包含一个操作，在同一时间内，仅且只能显示一个 Snackbar，
它的显示依赖于UI，不像Toast那样可以脱离应用显示。它的用法和Toast很相似，
唯一不同的就是它的第一个参数不是传入Context而是传入它所依附的父视图，但是他比Toast更强大
fab.setOnClickListener(this);

Snackbar.make(view, "I'am a Snackbar", Snackbar.LENGTH_LONG)
                       .setAction("Action", null)
                       .setActionTextColor(Color.RED).show();

3. TextInputLayout

    使用过EditText的同学肯定知道，有一个叫hint的属性，它可以提示用户此处应该输入什么内容，然而当用户输入
    真实内容之后，hint的提示内容就消失了，用户的体验效果是十分不好的，TextInputLayout的出现解决了这个问题
    当用户在输入的时候hint的内容就会跑到输入内容的上边去，其中TextInputLayout中字体的颜色是style文件中的colorAccent。

    使用

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="#85c9f4"
            android:textColor="#333333"
            android:textSize="16sp"
            android:text="文字输入"
            android:gravity="center"/>

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp">

            <EditText
                android:id="@+id/edit_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="用户名"
                android:textSize="14sp"
                android:textColorHint="#666666"
                />

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

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="10dp">

            <EditText
                android:id="@+id/edit_pwd"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="密码"
                android:inputType="textPassword"
                android:textSize="14sp"
                android:textColorHint="#666666"/>

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

    </LinearLayout>

4. FloatingActionButton使用

FloatingActionButton是一个浮动的按钮，它是一个带有阴影的圆形按钮，可以通过fabSize来改变其大小，主要负责界面的基本操作，这个按钮总体来说还是比较简单的。

    1. 默认FloatingActionButton 的背景色是应用主题的 colorAccent的颜色，
    可以通过app:backgroundTint 属性或者setBackgroundTintList (ColorStateList tint)方法去改变背景颜色
    注意用app:backgroundTint="@color/green" 不要使用android:backgroundTint 否则报错

    2. 可以用过app:fabSize 属性设置按钮大小 auto / normal / mini

    3. android:src 属性改变 drawable

    4. app:rippleColor设置点击 button 时候的颜色（水波纹效果）

    5. app:borderWidth设置 button 的边框宽度

    6. app:elevation设置普通状态阴影的深度（默认是 6dp）

    7. app:pressedTranslationZ设置点击状态的阴影深度（默认是 12dp）

5. TabLayout使用

    和ViewPager搭配使用  和第三方库ViewPagerIndicator是很类似的

    <android.support.design.widget.TabLayout
            android:id="@+id/id_tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#000000"
            app:tabMode="fixed" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    代码中使用

    MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager());
    myAdapter.addFragment(new TabFragment(),"Tab one");
    myAdapter.addFragment(new TabFragment(),"Tab two");
    myAdapter.addFragment(new TabFragment(),"Tab three");
    id_viewPager.setAdapter(myAdapter);

    //通过setupWithViewPager与ViewPager关联起来
    id_tabLayout.setupWithViewPager(id_viewPager,false);


    ViewPager的适配器复写下面的方法

     @Override
    public CharSequence getPageTitle(int position) {
        return titles!=null && titles.size()>0 ? titles.get(position) : null;
    }


    TabLayout常用属性介绍

    1. tabMode 模式 fixed / scrollable  
       fixed填充屏幕宽度 无论几个 然后文字会水平居中
       scrollable支持左右滑动 如果有很多个标签指示器 但是如果指示器就两三个的话 会靠左对齐 不会填充整个屏幕

    2. tabIndicatorColor
       设置指示器下划线的颜色

    3. tabIndicatorHeight
       设置指示器线的高度

    4. app:tabGravity
       设置指示器是否居中对齐 貌似只对tabMode为fixed时候有用

    5. tabTextColor 与 tabSelectedTextColor
       tabTextColor设置指示器标题颜色
       tabSelectedTextColor设置指示器标题选中的颜色

6. DrawerLayout与NavigationView 构建侧滑菜单

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/id_drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:fitsSystemWindows="true"
        tools:openDrawer="start">


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


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

    NavigationView属性

    1. app:headerLayout  - 控制头部的布局
    2. app:menu - 导航菜单的资源文件

    nav_header布局

    <?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="192dp"
        android:background="#85c9f4"
        android:padding="16dp"
        android:orientation="vertical"
        android:gravity="bottom">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="小成"
            android:textColor="#ffffff"
            android:textSize="16sp"/>

    </LinearLayout>

    nav_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:icon="@drawable/iconfont_home"
                android:title="首页" />
            <item
                android:id="@+id/nav_blog"
                android:icon="@drawable/iconfont_blog"
                android:title="我的博客" />
            <item
                android:id="@+id/id_textInput"
                android:icon="@drawable/iconfont_cate"
                android:title="文字输入" />
            <item
                android:id="@+id/nav_about"
                android:icon="@drawable/iconfont_about"
                android:title="关于" />
        </group>

    </menu>

    代码中编写

    设置菜单选择按钮监听事件
    id_navview.setNavigationItemSelectedListener(this);

    //侧滑菜单按钮选择事件
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        int itemId = item.getItemId();
        switch (itemId){
            case R.id.nav_home:
                Log.e("ItemSelected","首页");
                break;
            case R.id.nav_blog:
                Log.e("ItemSelected","我的博客");
                break;
            case R.id.nav_about:
                Log.e("ItemSelected","关于");
                break;
            case R.id.id_textInput:
                Intent intent = new Intent(MainActivity.this,TextInputActivity.class);
                startActivity(intent);
                break;
        }
        id_drawerlayout.closeDrawers();
        return true;
    }

7.CoordinatorLayout、AppBarLayout、TabLayout使用实现标签指示器悬浮

    AppBarLayout：继承于LinearLayout，使用AppBarLayout可以让包含在其中的子控件能响应被标记了ScrollingViewBehavior的的滚动事件（
要与CoordinatorLayout 一起使用），利用它我们可以很容易的去实现视差滚动效果。

    CoordinatorLayout ：它是一个增强版的FrameLayout，他可以协调其子View的交互，控制手势机滚动技巧。这个控件
十分的强大，用处也十分的广泛，与AppBarLayout，TabLayout和ViewPager实现标签指示器TabLayout悬浮效果。

    如果你想要 TabLayout 同样从屏幕上消失，只需要给 TabLayout 定义相同的属性就可以了
    app:layout_scrollFlags="scroll|enterAlways"

    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:id="@+id/id_root_cl"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/id_appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#85c9F4"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:orientation="vertical">

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

            <android.support.design.widget.TabLayout
                android:id="@+id/id_tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="#000000"
                app:tabIndicatorHeight="2dp"
                app:tabTextColor="#ff0000"
                app:tabSelectedTextColor="#0000ff"
                app:tabMode="fixed"
                app:tabGravity="center" />

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

        <android.support.v4.view.ViewPager
            android:id="@+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/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"
            app:backgroundTint="@color/green"
            app:fabSize="auto"
            app:rippleColor="#ff0000"
            app:borderWidth="10px"
            app:elevation="6dp"/>

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

    几个知识点

    app:layout_scrollFlags
    1. scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。
    2. enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，当向上滑的时候Toolbar就隐藏，下滑的时候显示。
    3. enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）
同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
    4. exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。


    滑动控件必须加这个属性 才能保证滑动正常  用来使滑动控件与AppBarLayout互动
    app:layout_behavior="@string/appbar_scrolling_view_behavior"

    代码中

    设置actionBar
    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
    actionBar.setDisplayHomeAsUpEnabled(true);

    设置ViewPager和TabLayout同上第5点

8. CoordinatorLayout与AppBarLayout与CollapsingToolbarLayout实现视差效果

    CollapsingToolbarLayout ：让Toolbar可伸缩，在伸缩的时候决定ToolBar是移除屏幕和固定在最上面，
由于Toolbar 只能固定到屏幕顶端并且不能做出好的动画效果，所以才有了这个Layout的出现。

    Toolbar中有一个app:layout_collapseMode="pin" 这个确保Toolbar在AppBarLayout折叠的时候仍然被固定在屏幕的顶部

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

    2. 从 Toolbar 中删除 layout_scrollFlags

    3. 为 CollapsingToolbarLayout 声明 layout_scrollFlags，并且将 layout_scrollFlags 设置成  scroll|exitUntilCollapsed

    4. 改变 AppBarLayout 扩张状态时的布局高度大小 在这个例子中，我用 256dp

    5. 需要固定的View设置app:layout_collapseMode="parallax"实现视差效果

    6. app:layout_collapseParallaxMultiplier="0.7"来设置视差因子

    7. CollapsingToolbarLayout设置app:contentScrim="?attr/colorPrimary"属性更加完美


    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:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

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

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                android:fitsSystemWindows="true"
                app:contentScrim="#85c9f4"
                app:expandedTitleMarginStart="48dp"
                app:expandedTitleMarginEnd="64dp">

                <ImageView
                    android:id="@+id/backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:fitsSystemWindows="true"
                    app:layout_collapseMode="parallax" />

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

            </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:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:paddingTop="24dp">

                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="16dp">

                    <LinearLayout
                        style="@style/Widget.CardContent"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Info"
                            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="@string/cheese_ipsum" />

                    </LinearLayout>

                </android.support.v7.widget.CardView>

                <android.support.v7.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="16dp"
                    android:layout_marginLeft="16dp"
                    android:layout_marginRight="16dp">

                    <LinearLayout
                        style="@style/Widget.CardContent"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="Friends"
                            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="@string/cheese_ipsum" />

                    </LinearLayout>

                </android.support.v7.widget.CardView>

            </LinearLayout>

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

        <android.support.design.widget.FloatingActionButton
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|right|end"
            android:src="@drawable/ic_discuss"
            android:layout_margin="16dp"
            android:clickable="true"/>

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


    代码中使用

    setSupportActionBar(toolbar);
    ActionBar actionBar = getSupportActionBar();
    actionBar.setHomeButtonEnabled(true);      //决定左上角的图标是否可以点击
    actionBar.setDisplayHomeAsUpEnabled(true); //决定左上角图标的右侧是否有向左的小箭头

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
    });

9. 联系方式

qq：1509815887@qq.com 
email : zlc921022@163.com 
phone : 18684732678