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