CollapsingToolbarLayout的使用

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。

今天要实现的效果如下:

CollapsingToolbarLayout依然是design扩展包中的控件,先来看看布局文件:

最外层依然是CoordinatorLayout ,然后里面包裹了AppBarLayout和NestedScrollView,
AppBarLayout的好处是可以将其内部包含的所有子控件都当做一个整体.
AppBarLayout里面继续包裹CollapsingToolbarLayout和TabLayout.
CollapsingToolbarLayout则包裹了ImageView和Toolbar作为伸缩的区域.
通过layout_collapseMode属性来指定其内部的子控件谁可以折叠,谁可以固定在屏幕上方.

<?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:background="#ffffff"
     android:fitsSystemWindows="true"
    >
    <!-- android:fitsSystemWindows="true"
    表示整个布局展示在屏幕时的可用空间是去除了actionbar,title,底部虚拟按键后的剩余区域-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <!-- 
         app:expandedTitleMarginStart="10dp" 
        设置扩张时候(还没有收缩时)title离屏幕左边的距离

         app:contentScrim="?attr/colorPrimary" 
        设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色
        -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctb"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="10dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- layout_collapseMode(折叠模式)-有两个值:
            1.parallax:在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，
            实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
            2.pin - 当CollapsingToolbarLayout完全收缩后，Toolbar还可以固定在屏幕上。
           -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/title_bg"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                />
            <!--标题-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="Toolbar">

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

        </android.support.design.widget.CollapsingToolbarLayout>
        <!--选项卡-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@android:color/black"/>

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

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

代码如下:
主要是设置Toolbar,CollapsingToolbarLayout,TabLayout和ViewPager

package blog.youkuaiyun.com.mchenys.appbarlayoutdemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by mChenys on 2016/5/30.
 */
public class Main4Activity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main4);
        //设置Toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setNavigationIcon(R.drawable.arrow_back);
        toolbar.setTitle("标题");
        setSupportActionBar(toolbar);
        //显示返回按钮图标
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //设置CollapsingToolbarLayout
        CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.ctb);
        // collapsingToolbarLayout.setTitle("标题");也可以在这里设置标题
        //设置CollapsingToolbarLayout扩张时的标题颜色
        collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);
        //设置CollapsingToolbarLayout收缩时的标题颜色
        collapsingToolbarLayout.setCollapsedTitleTextColor(Color.BLACK);

        //设置TabLayout+ViewPager
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setAdapter(mPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
    //ViewPager的Adapter
    private PagerAdapter mPagerAdapter = new PagerAdapter() {
        @Override
        public CharSequence getPageTitle(int position) {
            return "TAB" + (position + 1);
        }

        @Override
        public int getCount() {
            return 5;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            TextView textView = new TextView(Main4Activity.this);
            textView.setTextColor(Color.BLACK);
            textView.setGravity(Gravity.CENTER);
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 30);
            textView.setText("pager " + (position + 1));
            container.addView(textView);
            return textView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    };
}