Android Material Design(4) CoordinatorLayout,AppBarLayout,Toolbar以及TabLayout的使用

效果圖:

項目依賴:

compile 'com.android.support:design:23.2.0'
compile 'com.android.support:recyclerview-v7:23.2.0'

首先看一下我們的佈局代碼:

<?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="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"

            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:background="@color/colorPrimary"
            app:tabTextColor="@android:color/black"
            app:tabSelectedTextColor="@android:color/holo_green_dark"
            app:tabIndicatorColor="@android:color/holo_orange_dark"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </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.CoordinatorLayout>

效果顯示，視圖滾動時，Toolbar會隱藏，這個效果是Android Support Library裏面,新增的CoordinatorLayout, AppBarLayout實現的。

通過AppBarLayout的子視圖的屬性控制。觀察AppBarLayout的子佈局，Toobar有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裏面是放了RecylerView的,即是可以滾動的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屬性

Activity代碼:

package com.example.imgod.md_3;

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabs;
    private ViewPager viewpager;

    private List<Fragment> fragments;
    private List<String> titles;

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

    private void initView() {
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        tabs = (TabLayout) findViewById(R.id.tabs);
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        toolbar.setTitle("ToolBar");
        setSupportActionBar(toolbar);

        fragments = new ArrayList<>();
        titles = new ArrayList<>();
        fragments.add(TabFragment.newInstance("Tab1"));
        fragments.add(TabFragment.newInstance("Tab2"));
        fragments.add(TabFragment.newInstance("Tab3"));
        titles.add("Tab1");
        titles.add("Tab2");
        titles.add("Tab3");
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), fragments, titles);
        viewpager.setAdapter(viewPagerAdapter);

        tabs.setupWithViewPager(viewpager);//這行代碼位置一定要在viewpager設置了adapter之後
    }
}

項目重點:

1.在TabLayout和ViewPager關聯的時候,一定要在ViewPager已經設置了Adapter之後

2.Tablayout的 標題選中顏色 正常顏色 以及下標的顏色通過下面三個屬性控制

 <span style="white-space:pre">	</span>    app:tabTextColor="@android:color/black"
            app:tabSelectedTextColor="@android:color/holo_green_dark"
            app:tabIndicatorColor="@android:color/holo_orange_dark"

也可以通過代碼來設置

tabs.setTabTextColors(normalColor,selectColor);

項目源碼:https://github.com/imgod1/Md_3

that's all, thank you,have a nice day