2.CollapsingToolbarLayout詳解和應用

原創 黄振飞 2020-06-17 05:46

一、AppBarLayout嵌套CollapsingToolbarLayout
    
    佈局activity_mian.xml代碼如下：
<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">

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

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

            <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>


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

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

    <android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">

            <android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">

                <LinearLayout
android:padding="@dimen/activity_horizontal_margin"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CardView"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="card_string" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">

                <LinearLayout
android:padding="@dimen/activity_horizontal_margin"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CardView"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="card_string" />

                </LinearLayout>

            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp">

                <LinearLayout
android:padding="@dimen/activity_horizontal_margin"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CardView"
android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="card_string" />

                </LinearLayout>

            </android.support.v7.widget.CardView>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@android:drawable/ic_dialog_email"
android:layout_margin="10dp"
android:clickable="true"/>

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


MainActivity代碼：
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

import static com.example.zhenfei.myapplication.R.id;
import static com.example.zhenfei.myapplication.R.layout;

public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(layout.activity_main);
Toolbar mToolbar = (Toolbar) findViewById(id.toolbar);
mToolbar.setTitleTextColor(Color.BLACK);//設置ToolBar的titl顏色
setSupportActionBar(mToolbar);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(id.collapsing_toolbar);
collapsingToolbarLayout.setTitle("ceshi");

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}
好了，接下來，我們來學習下CollaspingToolbarLayout， 順便學習下上面出現的新的屬性。

1.1 fitSystemWindows 屬性
  首先看到AppBarLayout的fitsSystemWindows屬性，官方文檔描述：
Boolean internal attribute to adjust view layout based on system windows such as the status bar. If true, adjusts the padding of this view to leave space for the system windows. Will only take effect if this view is in a non-embedded activity.
意思就是：會根據系統的版本，調整PaddingTop的值，使得我們的視圖不會遮擋到系統的狀態欄。4.4以下的話，paddingTop爲0.4.4的話 paddingTop就爲StatusBar的高度。下面用2張截圖介紹。
這個是沒設置fitsSystemWindows屬性的截圖：

這個是設置fitsSystemWindows屬性的截圖：

可以看到，設置了以後，我們就不會影響到statusBar的背景顏色了。（4.4以下的設置不設置效果一樣）。

2.2 app:layout_collapseMode

app:layout_collapseMode屬性在CollapsingToolbarLayout中定義,在CollapsingToolbarLayout的子視圖中使用。
  collapseMode有三個值：
1.COLLAPSE_MODE_OFF：The view will act as normal with no collapsing behavior.這個很好理解，對滾動什麼的事件都不處理。
2.COLLAPSE_MODE_PIN：The view will pin in place until it reaches the bottom of the CollapseToolbarLayout.意思是，設置了這個屬性的視圖，直到他到CollapseToolbarLayout都會固定在一個位置。但是，這個不是
    3.COLLAPSE_MODE_PARALLAX : The view will scroll in a parallax fashion. See  setParallaxMultiplier(float)  to change the multiplier used.意思就是設置了這個值以後，可以讓你的View一起滾動，同時可以結合setParallaxMultiplier這個方法（XML中設置app:layout_collapseParallaxMultiplier）來控制滾動視覺差。這裏的滾動視覺差，意思就是，你設置了0那麼就會圖片一起滾動，你設置了1那麼，圖片是不會滾動的。
        好了，下面我們來做實驗，首先測試Toolbar的pin效果。
        首先我們修改佈局文件如下： 
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
>

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

    <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:background="@android:color/black"
android:layout_height="?attr/actionBarSize"
/>


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

        
運行效果圖。
下面，我們加上pin
Toolbar的代碼更正如下：
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:background="@android:color/black"
android:layout_height="?attr/actionBarSize"
/>

運行效果圖：

上面對比一下就可以看出pin的效果是如何的。其中上面的標題，即：文字“ceshi"是CoollpasingToolbarLayout中設置的。

接下來，介紹COLLAPSE_MODE_PARALLAX 這個屬性
首先，佈局文件爲：
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
>

    
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/header"
app:layout_collapseParallaxMultiplier="0.6"
/>
</pre></div><div style="font-size:13.6364px; font-family:微軟雅黑; line-height:19.0909px; widows:auto">在這裏，我們去掉了ImageView的 layout_collapseMode屬性，改成如下</div><div style="font-size:13.6364px; font-family:微軟雅黑; line-height:19.0909px; widows:auto"><span style="white-space:pre"></span><pre name="code" class="html">    <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:background="@android:color/black"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>


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

運行後可以看到，背景圖片是不會滾動的。
加上去以後，背景圖片纔會滾動。


接下里我們來嘗試下app:layout_collapseParallaxMultiplier這個屬性的作用。
首先，更改佈局文件爲：

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

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

    <android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
/>


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



可以看到，運行效果圖如下，這個貓的背景圖片是會隨着滾動的，
而我們如果只設置了0.7呢？
我們就會發現，整個圖片的滾動只有30%而已，而設置0.9，整個圖片的滾動大小，就只剩下10%，設置爲0，那麼整個圖片就沒有了滾動的效果。
下面貼出幾個運行的效果圖  
   
    設置爲0.2
  app:layout_collapseParallaxMultiplier="0.2"
    效果：
    

   設置爲0.6 
     效果：

    設置爲0.9
    效果：
    

1.3 題外話：CoordinatorLayout的layout_anchor

    在上面的UI種，我們可以看到有一個FloatingActionButton，可以隨着CollapseToolbarLayout一起滾動。這個是通過CoordinatorLayout 的layout_anchor來實現的。懸浮視圖使用它以後，CoordinatorLayout會把懸浮視圖和設置的視圖綁定在一起。可以通過layout_anchorGravity來來控制所在的位置。（margin和padding無效）
    比如：
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@android:drawable/ic_dialog_email"
android:layout_margin="10dp"
android:clickable="true"/>
使用CollapsingToolbarLayout實現摺疊效果，需要注意3點
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子視圖設置layout_collapseMode屬性，如果想要Toolbar固定，那麼一定要設置Toolbar爲pin模式，但是parallax其實不需要，因爲滾動這個效果，是CollaspingToolbarLayout實現的。子View設置，只是讓子View跟着滾動而已。
3. 關聯懸浮視圖設置app:layout_anchor，app:layout_anchorGravity屬性
4.另外標題內容是在CollapseToolbarLayout實現的，而不是Toolbar，滑動以後，標題內容固定在頂部是 CollapseToolbarLayout內部實現的，這個和是否設置了layout_collapseMode。

    上面就是對CollapseToolbarLayout的介紹了。
    上面還有用到了NetScrollView和CarView這些View，這些在之後的文章會詳細介紹。
    
項目源碼：
http://download.csdn.net/detail/savelove911/9504295 
歡迎下載。
        在這裏感謝上述的文章的作者。
也歡迎各位指出本文的錯誤之處。
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

1.CoordinatorLayout應用筆記

黄振飞 2020-02-21 12:42:00

1.CoordinatorLayout應用筆記

黄振飞 2020-02-21 12:42:00