文章目錄
-
- 布局
- 監聽
- CoordinatorLayout 屬性
- AppbarLayout
- CollapsingToolbarLayout
- 效果圖
布局
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:ignore="ResourceName">
<data>
<variable
name="listener"
type="android.view.View.OnClickListener" />
</data>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/cl_car_binding_yes"
android:background="@android:color/holo_red_light">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/apl_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent">
<!--collapsedTitleGravity:在折疊的時候指定标題的位置 expandedTitleGravity:布局沒有折疊的時候标題欄的位置-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/ctl_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="200dp"
app:collapsedTitleGravity="center"
app:collapsedTitleTextAppearance="@style/ToolbarCollapsedText"
app:expandedTitleGravity="start|top"
app:expandedTitleMarginTop="80dp"
app:expandedTitleTextAppearance="@style/ToolbarExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="@color/transparent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_tool_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="@color/transparent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<TextView
android:id="@+id/tv_car_about"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="16sp"
android:gravity="center"
android:layout_marginRight="10dp"
android:layout_marginTop="54dp"
android:text="更多"
android:layout_alignParentRight="true"
android:background="@drawable/ve_vector_more_horiz"
android:onClick="@{listener}"
android:visibility="invisible"/>
<RelativeLayout
android:id="@+id/rl_car_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_car_about"
android:layout_marginTop="20dp">
<TextView
android:id="@+id/tv_car_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标題"
android:textColor="@color/white"
android:textSize="20sp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="30dp"/>
</RelativeLayout>
<LinearLayout
android:id="@+id/ll_car_refresh"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:layout_below="@+id/rl_car_info">
<TextView
android:id="@+id/tv_refresh_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:text="咔咔咔咔咔咔擴擴擴擴擴擴"
android:textColor="@color/white"
android:textSize="12sp"/>
</LinearLayout>
</RelativeLayout>
<androidx.appcompat.widget.Toolbar
android:id="@+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="@android:color/holo_blue_light"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/Toolbar.TitleText">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginTop="50dp">
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="标題"
android:textColor="@color/white"
android:textSize="18sp"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/tv_car_about_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/ve_vector_more_horiz"
android:onClick="@{listener}"/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
監聽
private fun initToolbar() {
(this as AppCompatActivity).setSupportActionBar(mBinding.tbToolbar) //設定toolbar
mBinding.ctlToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT)//設定展開後标題的顔色
mBinding.ctlToolbarLayout.setCollapsedTitleTextColor(Color.BLACK)//設定收縮後标題的顔色
mBinding.aplAppBar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, i ->
val percent = abs(i).toFloat() / appBarLayout.totalScrollRange
mBinding.tbToolbar.setBackgroundColor(Color.parseColor("#FFFFFF"))
if (percent > 0.75f) {
if (isEx) {
isEx = false
mBinding.toolbarTitle.setTextColor(resources.getColor(R.color.color_333333))
mBinding.tvCarAboutAgain.setBackgroundResource(R.drawable.ve_vector_more_horiz_black)
mBinding.toolbarTitle.text = "标題"
}
} else {
if (!isEx) {
isEx = true
mBinding.toolbarTitle.setTextColor(Color.WHITE)
mBinding.tvCarAboutAgain.setBackgroundResource(R.drawable.ve_vector_more_horiz)
mBinding.toolbarTitle.text = ""
}
}
})
}
CoordinatorLayout 屬性
CoordinatorLayout繼承自FrameLayout，有兩個主要用途：
1、作為APP的頂層布局
2、作為一個容器與一個或者多個子View進行互動
CoordinatorLayout可以協調子View，而這些子View 的具體響應動作是通過 behavior 來指定的。
一般需要和AppBarLayout、CollapsingToolbarLayout結合使用，才能實作炫酷的互動效果。
AppbarLayout
AppbarLayout繼承于LinearLayout,是一個垂直的LinearLayout,它實作了Material Design的許多功能和特性,即滾動手勢。
AppbarLayout 嚴重依賴于CoordinatorLayout，必須用于CoordinatorLayout 的直接子View，如果你将AppbarLayout 放在其他的ViewGroup 裡面，那麼它的這些功能是無效的。
其子View可以通過setScrollFlags()或在xml布局中通過app:layout_scrollFlags屬性設定想要的滾動行為。
app:layout_scrollFlags屬性介紹
scroll
View伴随着滾動事件而滾出或滾進螢幕。
1、如果使用了其他值，必定要使用這個值才能起作用
2、如果在這個View前面的任何其他View沒有設定這個值，那麼這個View的設定将失去作用。
enterAlways
快速傳回模式。
其實就是向下滾動時Scrolling View和Child View之間的滾動優先級問題。
對比scroll和scroll | enterAlways設定，發生向下滾動事件時，前者優先滾動Scrolling View，後者優先滾動Child View，當優先滾動的一方已經全部滾進螢幕之後，另一方才開始滾動。
enterAlwaysCollapsed
enterAlways的附加值。這裡涉及到Child View的高度和最小高度，向下滾動時，Child View先向下滾動最小高度值，然後Scrolling View開始滾動，到達邊界時，Child View再向下滾動，直至顯示完全。
exitUntilCollapsed
這裡也涉及到最小高度。發生向上滾動事件時，Child View向上滾動退出直至最小高度，然後Scrolling View開始滾動。也就是，Child View不會完全退出螢幕。
snap
簡單了解，就是Child View滾動比例的一個吸附效果。也就是說，Child View不會存在局部顯示的情況，滾動Child View的部分高度，當我們松開手指時，Child View要麼向上全部滾出螢幕，要麼向下全部滾進螢幕，有點類似ViewPager的左右滑動。
enterAlways、enterAlwaysCollapsed、exitUntilCollapsed、snap這幾個屬性需要配合scroll屬性使用才有效果，單獨使用沒有任何效果。
addOnOffsetChangedListener 當AppbarLayout 的豎直方向偏移量發生改變的時候回調
removeOnOffsetChangedListener 移除offsetChanged監聽器
setExpanded (boolean expanded) 設定AppbarLayout 是展開狀态還是折疊狀态,預設有動畫
setExpanded (boolean expanded, boolean animate) 設定AppbarLayout 是展開狀态還是折疊狀态,animate 參數控制切換到新的狀态時是否需要動畫
setOrientation 設定AppbarLayout裡的子View排列方向
getTotalScrollRange 傳回AppbarLayout 裡的所有子View的滑動範圍
CollapsingToolbarLayout
1、這是一個可折疊的Toolbar
2、它的使用必須在AppBarLayout的基礎之上，它必須作為AppBarLayout的直接子類元素使用，否則起不到應用的效果。
3、CollapsingToolbarLayout的子布局有3種折疊模式（Toolbar中設定的app:layout_collapseMode）
off：這個是預設屬性，布局将正常顯示，沒有折疊的行為。
pin：CollapsingToolbarLayout折疊後，此布局将固定在頂部。
parallax：CollapsingToolbarLayout折疊時，此布局也會有視差折疊效果。
當CollapsingToolbarLayout的子布局設定了parallax模式時，我們還可以通過app:layout_collapseParallaxMultiplier設定視差滾動因子，值為：0~1
屬性
app:collapsedTitleGravity=””屬性
在折疊的時候指定标題的位置，提供值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizental、center、start、end
app:collapsedTitleTextAppearance=””屬性
設定折疊的時候标題欄文字外觀
app:contentScrim=””屬性
設定當被滾出螢幕時候CollapsingToolbarLayout的樣式，需要是一個顔色值
app:expandedTitleGravity=””屬性
布局沒有折疊的時候标題欄的位置，提供的值與app:collapsedTitleGravity=””屬性一樣，設定多個值得時候用“|”分割
app:statusBarScrim=”#123456”屬性
在折疊的時候狀态欄的背景顔色
效果圖
使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout打造折疊狀态欄 
使用CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout打造折疊狀态欄 
