CollapsingToolbarLayout+TabLayout+ViewPager

這次來寫一下CollapsingToolbarLayout+TabLayout的搭配使用，展開顯示圖片，設置文字陰影，收起隱藏圖片。

添加依賴

compile 'com.android.support:design:25.2.0'

佈局

 <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginStart="20dp"
            app:contentScrim="@color/colorPrimary"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            </android.support.design.widget.CollapsingToolbarLayout>

設置CollapsingToolbarLayout收起時顯示的顏色。

app:contentScrim="@color/colorPrimary" 

CollapsingToolbarLayout默認的title會跟着CollapsingToolbarLayout展開收起，由於這裏要固定title，所以需要將CollapsingToolbarLayout的title取消掉，在toolBar裏面重新寫一個title。

app:titleEnabled="false"

設置CollapsingToolbarLayout的scrollFlags：

 app:layout_scrollFlags="scroll|exitUntilCollapsed"

layout_scrollFlags還有另外3個參數，有興趣的可以自己試試看。
另外CollapsingToolbarLayout需要嵌套在AppBarLayout裏，嵌套順序爲CoordinatorLayout —— AppBarLayout —— CollapsingToolbarLayout —— Toolbar。
下面貼上完整的佈局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.ckz.mydemo.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bars"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginStart="20dp"
            app:contentScrim="@color/colorPrimary"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="pin"
                app:layout_collapseParallaxMultiplier="0.6"
                android:background="#fff">
                <ImageView
                    android:id="@+id/user_bg"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/bg" />
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#fff"
                    android:orientation="vertical"
                    android:layout_below="@id/user_bg">
                    <android.support.design.widget.TabLayout
                        android:id="@+id/user_tab"
                        android:layout_width="match_parent"
                        android:layout_height="35dp"
                        android:background="#fff"
                        app:tabIndicatorColor="@color/colorPrimary"
                        app:tabSelectedTextColor="@color/colorPrimary"
                        app:tabTextColor="#000">
                    </android.support.design.widget.TabLayout>
                </LinearLayout>
            </RelativeLayout>
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <TextView
                        android:id="@+id/user_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="NAME"
                        android:textSize="19sp"
                        android:textColor="#fff"
                        android:gravity="center"
                        android:layout_centerInParent="true"/>
                </RelativeLayout>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v4.view.ViewPager
            android:id="@+id/user_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v4.view.ViewPager>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

PS：一定要記住添加app:layout_behavior，否則viewpager的內容會全屏顯示。

監聽展開狀態，顯示文字陰影

佈局寫好了，CollapsingToolbarLayout的展開收起就有效果了。接下來就需要對展開狀態進行監聽，來設置文字是否設置陰影。
ps：這裏的監聽是對AppBarLayout進行監聽的！

appbars.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (verticalOffset == 0) {
                    if (state != CollapsingToolbarLayoutState.EXPANDED) {
                        userName.setShadowLayer(10,5,5, Color.BLACK);//展開設置陰影
                        state = CollapsingToolbarLayoutState.EXPANDED;//修改狀態標記爲展開
                    }
                } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
                    if (state != CollapsingToolbarLayoutState.COLLAPSED) {
                        userName.setShadowLayer(0,0,0,Color.BLACK);//摺疊取消陰影
                        state = CollapsingToolbarLayoutState.COLLAPSED;//修改狀態標記爲摺疊
                    }
                } else {
                    if (state != CollapsingToolbarLayoutState.INTERNEDIATE) {
                        if(state == CollapsingToolbarLayoutState.COLLAPSED){
                            userName.setShadowLayer(0,0,0,Color.BLACK);//中間到展開取消陰影
                        }else {
                            userName.setShadowLayer(10,5,5,Color.BLACK);//摺疊到中間設置陰影
                        }

                        state = CollapsingToolbarLayoutState.INTERNEDIATE;//修改狀態標記爲中間
                    }
                }
            }
        });

綁定TabLayout和ViewPager

private void bindPager() {
        titleList.add("f1");
        titleList.add("f2");
        titleList.add("f3");

        f1 = new MyFragment();
        f2 = new MyFragment();
        f3 = new MyFragment();
        viewList.add(f1);
        viewList.add(f2);
        viewList.add(f3);
        usertab.setTabMode(TabLayout.MODE_FIXED);
        usertab.addTab(usertab.newTab().setText(titleList.get(0)));
        usertab.addTab(usertab.newTab().setText(titleList.get(1)));
        usertab.addTab(usertab.newTab().setText(titleList.get(2)));
        mAdapter = new MyPagerAdapter(getSupportFragmentManager(),viewList,titleList);
        usertab.setupWithViewPager(userpager);
        userpager.setAdapter(mAdapter);

    }

下面貼上完整的代碼

MainActivity：

public class MainActivity extends AppCompatActivity {

    private ImageView userbg;
    private TabLayout usertab;
    private Toolbar toolbar;
    private AppBarLayout appbars;
    private ViewPager userpager;
    private TextView userName;

    private MyPagerAdapter mAdapter;
    private List<String> titleList = new ArrayList<>(); //頁卡標題集合
    private ArrayList<Fragment> viewList = new ArrayList<>(); //頁卡視圖集合

    private MyFragment f1,f2,f3;

    private CollapsingToolbarLayoutState state;

    private enum CollapsingToolbarLayoutState {
        EXPANDED,
        COLLAPSED,
        INTERNEDIATE
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        setExpand();
        bindPager();
    }

    private void bindPager() {
        titleList.add("f1");
        titleList.add("f2");
        titleList.add("f3");

        f1 = new MyFragment();
        f2 = new MyFragment();
        f3 = new MyFragment();
        viewList.add(f1);
        viewList.add(f2);
        viewList.add(f3);
        usertab.setTabMode(TabLayout.MODE_FIXED);
        usertab.addTab(usertab.newTab().setText(titleList.get(0)));
        usertab.addTab(usertab.newTab().setText(titleList.get(1)));
        usertab.addTab(usertab.newTab().setText(titleList.get(2)));
        mAdapter = new MyPagerAdapter(getSupportFragmentManager(),viewList,titleList);
        usertab.setupWithViewPager(userpager);
        userpager.setAdapter(mAdapter);

    }

    private void setExpand() {
        appbars.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (verticalOffset == 0) {
                    if (state != CollapsingToolbarLayoutState.EXPANDED) {
                        userName.setShadowLayer(10,5,5, Color.BLACK);//展開設置陰影
                        state = CollapsingToolbarLayoutState.EXPANDED;//修改狀態標記爲展開
                    }
                } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
                    if (state != CollapsingToolbarLayoutState.COLLAPSED) {
                        userName.setShadowLayer(0,0,0,Color.BLACK);//摺疊取消陰影
                        state = CollapsingToolbarLayoutState.COLLAPSED;//修改狀態標記爲摺疊
                    }
                } else {
                    if (state != CollapsingToolbarLayoutState.INTERNEDIATE) {
                        if(state == CollapsingToolbarLayoutState.COLLAPSED){
                            userName.setShadowLayer(0,0,0,Color.BLACK);//中間到展開取消陰影
                        }else {
                            userName.setShadowLayer(10,5,5,Color.BLACK);//摺疊到中間設置陰影
                        }

                        state = CollapsingToolbarLayoutState.INTERNEDIATE;//修改狀態標記爲中間
                    }
                }
            }
        });
    }


    private void initView() {
        userpager = (ViewPager) findViewById(R.id.user_pager);
        appbars = (AppBarLayout) findViewById(R.id.app_bars);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        usertab = (TabLayout) findViewById(R.id.user_tab);
        userbg = (ImageView) findViewById(R.id.user_bg);
        userName = (TextView) findViewById(R.id.user_name);
    }

}

詳細源碼點這裏