Android CollapsingToolbarLayout，android中framelayout

Android CollapsingToolbarLayout，android中framelayout

第一次看到這種使用者體驗是在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大圖的色調形成強對比.