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) {
            }
        });

    }
}