CollapsingToolbarLayout 與 TabLayout結合使用實現炫酷效果

效果

今天我們實現下面的效果

第一

Demo里面主要涉及到好多design包下的控件

在項目中先要引入下面的包

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

第二

項目中的整體布局為下面

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="coordinatorlayout.tangyc.fb.com.coordinatorlayoutdemo.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/meinv"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:layout_collapseMode="pin"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="scrollable"
                android:layout_gravity="bottom" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </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.v4.view.ViewPager>

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

樣式如下圖所示

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

里面我們就要介紹下面的幾個重要的知識點

首先是android: fitsSystemWindows 這個的用處, 就是把Activity狀態欄設置成透明模式。

然后在布局文件中，把CollapsingToolbarLayout里要實現沉浸式的控件設置上android:fitsSystemWindows="true"，

如果沒有設置(默認為false)，則子布局會位于狀態欄下方，未延伸至狀態欄。

如圖所示有個白色的空白（設置 android:fitsSystemWindows="false"或者不設置 ）

然后就是layout_scrollFlags的屬性，里面有五個參數 scroll，enterAlways，enterAlwaysCollapsed，snap，exitUntilCollapsed。

參數的具體如下

scroll:所有想滾動出屏幕的view都需要設置這個flag，沒有設置這個flag的view將被固定在屏幕頂部。比如說，TabLayout沒有設置這個值，將會停留在屏幕頂部。

enterAlways:設置時，向下的滾動會導致該view變成可見，啟用快速“返回模式”。

enterAlwaysCollapsed:當你的視圖已經設置minHeight屬性又使用此標志時，你的視圖只能已最小高度進入,只有當滾動視圖到達頂部時才擴大到完整高度。

exitUntilCollapsed:滾動退出屏幕，最后折疊在頂端。

sanp:子View的滑動效果的一個吸附效果， 子 View不會存在局部顯示的情況，滾動子View的部分高度，當松開手指時，子View要么向上全部滾出屏幕，要么向下全部滾進屏幕。

最后就是layout_collapseMode的使用， 子視圖的折疊模式，在子視圖設置，有兩種方式

“pin”：固定模式，在折疊的時候最后固定在頂端；

“parallax”：視差模式，在折疊的時候會有個視差折疊的效果。

我們現在使用屬性app:layout_collapseMode=”parallax”來改變的。

還有一個app:layout_behavior="@string/appbar_scrolling_view_behavior",

它就是指定Behavior的，appbar_scrolling_view_behavior對應的類的名稱是：android.support.design.widget.AppBarLayout$ScrollingViewBehavior

第三

代碼如下 代碼就沒有什么可以描述的的里面有詳細的注釋

private TabLayout mTabLayout;
private ViewPager mViewPager;
private LayoutInflater mInflater;

private ArrayList<String> mTitles = new ArrayList<>();//頁卡標題集合
private View view1, view2;
private ArrayList<View> mViewList = new ArrayList<>();//頁卡視圖集合
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_scrolling);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    //去掉標題
    getSupportActionBar().setDisplayShowTitleEnabled(false);


    mViewPager = (ViewPager) findViewById(R.id.viewpager);
    mTabLayout = (TabLayout) findViewById(R.id.tablayout);
    mInflater = LayoutInflater.from(this);
    view1 = mInflater.inflate(R.layout.item_view, null);
    view2 = mInflater.inflate(R.layout.item_view, null);
    //添加到View集合
    mViewList.add(view1);
    mViewList.add(view2);

    //添加標題集合
    mTitles.add("安卓開發");
    mTitles.add("混合開發");

    mTabLayout.setTabMode(TabLayout.MODE_FIXED);//設置tab模式，當前為系統默認模式
    mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(0)));//添加tab選項卡
    mTabLayout.addTab(mTabLayout.newTab().setText(mTitles.get(1)));

    MyPagerAdapter mAdapter = new MyPagerAdapter(mViewList);
    mViewPager.setAdapter(mAdapter);//給ViewPager設置適配器
    mTabLayout.setupWithViewPager(mViewPager);//將TabLayout和ViewPager關聯起來。
    //mTabLayout.setTabsFromPagerAdapter(mAdapter);//給Tabs設置適配器
}

class MyPagerAdapter extends PagerAdapter {
    private ArrayList<View> mViewList;

    public MyPagerAdapter(ArrayList<View> mViewList) {
        this.mViewList = mViewList;
    }

    @Override
    public int getCount() {
        return mViewList.size();
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mViewList.get(position));
        return mViewList.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }

}

 

 

來自：https://mp.weixin.qq.com/s/73XhzQ8t-rNDNR2A7756Lg