Android CollapsingToolbarLayout

第一次看到這種用戶體驗是在Google Play Store App的應用詳情的Activity中.

大的Banner圖,能第一時間吸引用戶的眼球,用不同的Banner大圖更具個性化的展現內容.圖老是比文字要吸引人.

當向下滾動時,Banner大圖會跟隨滾動手勢而Collapse.最後收折成一個普通的ActionBar(實際是個Toolbar,Android官方在最新的Support Library都推薦把ActionBar替換成Toolbar).

經過屬性Flag的組合,也能實現把ActionBar直接推出屏幕,讓其消失.

Android Support Library中提供的CollapseToolbar實現這效果.

<?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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:scaleType="centerCrop"
                android:src="@drawable/mu"
                android:transitionName="mu"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/MyToolbarTheme"/>

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

這是Layout佈局.CoordinatorLayout和AppBarLayout的組合在這篇隨筆中有介紹,實現了滾動隱藏Toolbar的效果,這裏就不在重複了.

CollapsingToolbarLayout是實現GIF效果的關鍵.

CollapsingToolbarLayout有兩個Children.ImageView用來顯示Banner大圖,即Gif中曼聯隊徽的大圖.而Toolbar就是摺疊後看到的頂欄Toolbar.

app:contentScrim="?attr/colorPrimary",CollapsingToolbarLayout這個屬性是設置摺疊後Toolbar的顏色.

app:layout_scrollFlags="scroll|exitUntilCollapsed",這是兩個Flag控制滾動時候CollapsingToolbarLayout的表現.

     1) Scroll, 表示向下滾動列表時候,CollapsingToolbarLayout會滾出屏幕而且消失(原文解釋:this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen)

     2) exitUntilCollapsed, 表示這個layout會一直滾動離開屏幕範圍,直到它收折成它的最小高度.(原文解釋:this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting)

app:layout_collapseMode="parallax",這是控制滾出屏幕範圍的效果的

     1) parallax,表示滾動過程當中,會一直保持可見區域在正中間.

     2) pin,表示不會被滾出屏幕範圍.

 

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

        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
        }

        final CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(
                R.id.collapsing_toolbar);
        collapsingToolbar.setTitle(getString(R.string.fourth_activity));

        final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setAdapter(new MyAdapter(this));

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.mu);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(final Palette palette) {
                int defaultColor = getResources().getColor(R.color.medium_blue);
                int defaultTitleColor = getResources().getColor(R.color.white);
                int bgColor = palette.getDarkVibrantColor(defaultColor);
                int titleColor = palette.getLightVibrantColor(defaultTitleColor);

                collapsingToolbar.setContentScrimColor(bgColor);
                collapsingToolbar.setCollapsedTitleTextColor(titleColor);
                collapsingToolbar.setExpandedTitleColor(titleColor);
            }
        });
    }

這是Activity的onCreate方法,有兩處地方須要關注的

1. setSupportActionBar()方法,告訴AppCompatActivity哪個是ActionBar(實際是Toolbar).否則的話,作透明Status Bar(電池,手機信號那一區域)效果時候,ActionBar會位置不正確.

2. Palette,調色板的意思,也是Android Support Library提供的.用來抓取Bitmap的顏色.在此處的用處是,當ActionBar被收折後,背景顏色能保持和Banner大圖的色調一致,而Title文字的顏色保證和Banner大圖的色調造成強對比.

 

Demo 代碼地址:  http://pan.baidu.com/s/1pKbRWzL