轉載請標明出處：https://rayzhangweb.wordpress.com/
本文出自：Ray_wordpress
前言：
大家好我是Ray，這次一樣繼續Material Design的元件介紹，而我們就來談談AppBarLayout & CollapsingToolbarLayout，這2個控件的使用。相信大家都看過以下的場景畫面。也就是向上滑動時圖片會跟著滑動並且逐漸透明，向下滑動時，圖片會慢慢出現，這樣的方式。
介紹：
AppBarLayout：是一個垂直的LinearLayout，它實現了材料設計應用欄概念的許多功能，即滾動手勢。子View應該通過setScrollFlags和相關的佈局xml屬性：app：layout_scrollFlags提供他們想要的滾動行為。
CollapsingToolbarLayout：是一個ToolBar的包裝器，它實現了一個折疊應用程序欄。 它被設計為用作AppBarLayout的子View。
也就是說如果想實現摺疊效果的動畫，可以透過這2個元件搭配使用。接下會為大家講解CollapsingToolbarLayout常用的屬性以及該注意的地方。而AppBarLayout只是單純的作為根布局使用就好，並不用設置任何屬性。
AppBarLayout 子View滾動屬性(app:layout_scrollFlags)：
-
scroll：視圖將以滾動事件的直接關係滾動。 如果此前的任何同級視圖沒有此標誌，則此值不起作用。
- enterAlways：當進入（在屏幕上滾動）時，視圖將在任何向下滾動事件上滾動，而不管滾動視圖是否也滾動。 這通常被稱為“快速返回”模式。
- enterAlwaysCollapsed："enterAlways"的附加標誌，它將返回視圖修改為僅初始回滾到其折疊高度。 一旦滾動視圖到達它的滾動範圍的末端，此視圖的剩餘部分將被滾動到視圖。 折疊高度由視圖的最小高度定義。
- exitUntilCollapsed：退出時（滾動屏幕），視圖將滾動，直到它“折疊”。 折疊高度由視圖的最小高度定義。
- snap：當滾動結束時，如果視圖只是部分可見，那麼它將被捕捉並滾動到它最接近的邊緣。 例如，如果視圖只顯示底部25％，則它將完全滾動到屏幕外。 相反，如果它的底部75％是可見的，那麼它將被完全滾動到視圖。
CollapsingToolbarLayout 子View 摺疊屬性(app:layout_collapseMode)：
- none：該視圖將作為正常，沒有摺疊行為。
- parallax：視圖將以視差方式滾動。 並搭配setParallaxMultiplier（float）方法使用。
- pin：視圖將固定到位，直到它到達CollapsingToolbarLayout的底部。
CollapsingToolbarLayout 常用屬性：
- setTitle：設定標題文字。與toolbar使用則toolbar並不用設置。
-
setContentScrimColor：設置折疊後的背景顏色。
- setStatusBarScrimColor：設置狀態檔的顏色。
- setCollapsedTitleTextColor：設置折疊後的文字顏色。
- setExpandedTitleColor：設置展開後的文字顏色。
- setCollapsedTitleGravity：設置折疊後的文字位置。
- setExpandedTitleGravity：設置展開後的文字位置。
還有其它的屬性可以參閱官方API CollapsingToolbarLayout使用說明
實作範例：
- 設置NoActionBar的Theme。
- 在AndroidManifest.xml裡，將相對應的Activity改為剛設置好的NoActionBar Theme。
- 在xml佈局裡，加入AppBarLayout & CollapsingToolbarLayout。
- 在Activity裡，設置相關屬性。
<1. 設置NoActionBar Theme>
<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="AppNoActionBarTheme" parent="AppTheme">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<2. 將Activity設定為NoActionBar Theme>
<activity
android:name=".CollapsingActivity"
android:theme="@style/AppNoActionBarTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<3. 將AppBarLayout & CollapsingToolbarLayout 加入佈局>
<?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="com.rayzhang.android.materialdesign.CollapsingActivity">
<!-- fitsSystemWindows設置為true 表示將佈局延伸至statusBar-->
<android.support.design.widget.AppBarLayout
android:id="@+id/mAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<!--layout_scrollFlags 5種方式
1.scroll
2.enterAlways
3.enterAlwaysCollapsed
4.exitUntilCollapsed
5.snap -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/mCollaspLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@android:color/holo_orange_light"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:statusBarScrim="@android:color/transparent">
<!-- collapseMode 3種方式
1.none
2.parallax 搭配layout_collapseParallaxMultiplier使用 值介於0~1之間
3.pin -->
<ImageView
android:id="@+id/mImgView"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="@drawable/twice_1"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5" />
<!-- ToolBar高度要設定 不然標題不會顯示 -->
<android.support.v7.widget.Toolbar
android:id="@+id/mToolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/mRecyView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
<4. 在Activity中 設定相關屬性>
public class CollapsingActivity extends AppCompatActivity {
/**
* CollapsingToolbarLayout use
*/
private CollapsingToolbarLayout mCollapsLayout;
private Toolbar mToolBar;
private RecyclerView mRecyView;
@Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_collapsing);
mCollapsLayout = (CollapsingToolbarLayout) findViewById(R.id.mCollaspLayout);
mToolBar = (Toolbar) findViewById(R.id.mToolBar);
setSupportActionBar(mToolBar);
mCollapsLayout.setTitle("Collapsing");
mCollapsLayout.setCollapsedTitleTypeface(Typeface.SERIF);
mCollapsLayout.setCollapsedTitleTextColor(Color.WHITE);
mCollapsLayout.setExpandedTitleTypeface(Typeface.SERIF);
mCollapsLayout.setExpandedTitleColor(Color.TRANSPARENT);
mRecyView = (RecyclerView) findViewById(R.id.mRecyView);
mRecyView.setItemAnimator(new DefaultItemAnimator());
mRecyView.setHasFixedSize(true);
RecyclerView.LayoutManager manager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
mRecyView.setLayoutManager(manager);
/**
* 設置RecyclerView的Adapter
*/
List list = new ArrayList<>();
for (int i = 1, j = 100; i <= j; i++) {
list.add("item:" + i);
}
DemoAdapter adapter = new DemoAdapter(list);
mRecyView.setAdapter(adapter);
}
}
最後代碼所顯示效果圖示如下：
Finally
- 以上就是針對AppBarLayout & CollapsingToolbarLayout 2個元件，做個介紹如有任何疑問歡迎底下留言，或是mail給我也行，謝謝 !
- 若有需要project的同學們，可至我的 github 下載。
Do it 