Android Design Support Library兼容库的使用(八个新控件)

兼容5.0以下的系统；主要用于学习新的控件,基本使用方法
使用Design Support Library的条件是什么?
符合MD设计的菜单控件
具有过渡动画效果的布局layout

material Design几个特点：用户体验方面
1)扁平化、简洁
2)水波反馈(点击按钮出现水波效果)
3)良好体验的过渡动画
4)材料空间位置的直观变化(Z轴)

使用条件:
compile 'com.android.support:appcompat-v7:23.0.0'
compile 'com.android.support:design:23.0.0'

悬浮按钮的使用:android.support.design.widget.FloatingActionButton
首先要引入命名空间:xmlns:app="http://schemas.android.com/apk/res-auto"

总共有哪些特殊的属性？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <!--悬浮按钮   设置背景颜色、fabSize属性按钮大小、高度阴影效果,0扁平化无阴影、点击时颜色变化-->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:src="@mipmap/ic_launcher"
        app:backgroundTint="#e83d40"
        app:elevation="5dp"
        app:fabSize="normal"
        app:rippleColor="#00ff00" />

    <!--TextInputLayout控件 用于优化EditText，让EditText提示更加人性化-->
    <android.support.design.widget.TextInputLayout
        android:id="@+id/til"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>

    <!--Snackbar控件 用于替换toast提示，可交互的提示框-->
    <!--TabLayout 便捷实现标签；主界面的布局  最下面的tab按钮   自定义显示的样式 四个  未选中字体颜色、选中、指示器颜色、指示器高度、设置背景色-->
    <!-- 如果tab比较多的话，还支持横向的滑动， app:tabMode="fixed"  全屏显示和横向滑动模式-->
    <!--如何与Viewpager结合使用-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="#ffffff"
        app:tabIndicatorColor="#00ff00"
        app:tabIndicatorHeight="2dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#FF0000"
        app:tabTextColor="#000000" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

    <!--Navigation View能够给我们提供方便美观的侧滑视图-->

</LinearLayout>

侧滑的布局文件:

<?xml version="1.0" encoding="utf-8"?>
<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/drawLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include layout="@layout/activity_design" />

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"

        app:headerLayout="@layout/layout_head" />


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

activity中的代码:

package com.example.tuhuadmin.truekeystore.ui;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.design.widget.TabLayout;
import android.support.design.widget.TextInputLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;

import com.example.tuhuadmin.truekeystore.R;
import com.example.tuhuadmin.truekeystore.adapter.SelfFragmentAdapter;
import com.example.tuhuadmin.truekeystore.fragments.TabFirstFragment;

import java.util.ArrayList;

/**
 * Created by on 2016/7/6.
 * PackageName:com.example.tuhuadmin.truekeystore.ui
 * Author:crs
 */

public class DesignActivity extends FragmentActivity {

    private TabLayout tabLayout;
    private ViewPager vp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_design);

        initTextInputLayout();
        initFloatingActionButton();
        initTabLayoutAndViewPager();
    }

    private void initTabLayoutAndViewPager() {
        //TabLayout与ViewPager结合使用
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        vp = (ViewPager) findViewById(R.id.vp);
        ArrayList<String> list = new ArrayList<>();
        list.add("首页");
        list.add("新闻");
        list.add("社会");
        list.add("个人");
        ArrayList<Fragment> fragmentsList = new ArrayList<>();
        for (int i = 0; i < list.size(); i++) {
            //为tab设置title
            tabLayout.addTab(tabLayout.newTab().setText(list.get(i)));
            Fragment fragment = new TabFirstFragment(list.get(i));
            fragmentsList.add(fragment);
        }
        FragmentManager fm = getSupportFragmentManager();
        SelfFragmentAdapter selfFragmentAdapter = new SelfFragmentAdapter(fm, list, fragmentsList);
        vp.setAdapter(selfFragmentAdapter);
        //如何把tab与ViewPager联系起来
        tabLayout.setupWithViewPager(vp);
        tabLayout.setTabsFromPagerAdapter(selfFragmentAdapter);

    }

    private void initTabLayout() {

    }

    private void initFloatingActionButton() {
        //Snackbar的使用
        final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //创建Snackbar，传入一个view
                final Snackbar sb = Snackbar.make(fab, "当前时间是123", Snackbar.LENGTH_LONG);
                sb.show();
                //为Snackbar设置点击事件;如果用户不点击Snackbar,过几秒钟会自动隐藏
                sb.setAction("知道了", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        //隐藏Snackbar
                        sb.dismiss();
                    }
                });
            }
        });
    }

    private void initTextInputLayout() {
        final TextInputLayout til = (TextInputLayout) findViewById(R.id.til);
        //设置提示语（用户输入内容后，提示语仍然存在）
        til.setHint("请输入用户名:");
        //获取包装的EditText
        EditText editText = til.getEditText();
        //设置输入监听
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                //charSequence表示用户输入的字符串
                if (charSequence.length() > 5) {
                    til.setError("用户名不正确");
                    //设置错误是否可见
                    til.setErrorEnabled(true);
                } else {
                    til.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {
            }
        });

    }
}