1、如何監聽CollapsingToolbarLayout的展開與折疊
使用官方提供的 AppBarLayout.OnOffsetChangedListener就能實作了,不過要封裝一下才好用。
自定義一個繼承了 AppBarLayout.OnOffsetChangedListener的類,這裡命名為AppBarStateChangeListener:
[html] view plain copy
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5Gcu82Yp9VRE90Qvw1c0V2czF2LcRXZu5ibkN3YuUGZvN2Lc9CX6MHc0RHaiojIsJye.png)
- public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
- public enum State {
- EXPANDED,
- COLLAPSED,
- IDLE
- }
- private State mCurrentState = State.IDLE;
- @Override
- public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
- if (i == 0) {
- if (mCurrentState != State.EXPANDED) {
- onStateChanged(appBarLayout, State.EXPANDED);
- }
- mCurrentState = State.EXPANDED;
- } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
- if (mCurrentState != State.COLLAPSED) {
- onStateChanged(appBarLayout, State.COLLAPSED);
- }
- mCurrentState = State.COLLAPSED;
- } else {
- if (mCurrentState != State.IDLE) {
- onStateChanged(appBarLayout, State.IDLE);
- }
- mCurrentState = State.IDLE;
- }
- }
- public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
- }
然後這樣使用它:
[html] view plain copy
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5Gcu82Yp9VRE90Qvw1c0V2czF2LcRXZu5ibkN3YuUGZvN2Lc9CX6MHc0RHaiojIsJye.png)
- mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
- @Override
- public void onStateChanged(AppBarLayout appBarLayout, State state) {
- Log.d("STATE", state.name());
- if( state == State.EXPANDED ) {
- //展開狀态
- }else if(state == State.COLLAPSED){
- //折疊狀态
- }else {
- //中間狀态
- }
- }
- });
2、常用屬性
Android:fitsSystemWindows="true"
是一個boolean值的内部屬性,讓view可以根據系統視窗(如status bar)來調整自己的布局,如果值為true,就會調整view的paingding屬性來給system windows留出空間...
用于實作狀态欄,即 沉浸式狀态欄!
Toolbar
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" (CoordinatorLayout屬性,子布局通過設定該屬性确定是否可滑動)
說明:
app:popupTheme,這個屬性就是用來自定義我們彈出的菜單的樣式,在之前的Actionbar的溢出菜單,我們是不能自定義他的樣式的,隻能根據你的theme來選擇黑白兩種,不能自己定義,現在我們可以定義彈出菜單的樣式。
CoordinatorLayout
app:layout_scrollFlags (子布局設定是否可滑動)
android:layout_gravity 屬性控制元件在布局中的位置
app:layout_behavior="@string/appbar_scrolling_view_behavior" 通知布局中包含滑動元件!
子布局通過app:layout_scrollFlags确定是否可滑動.給需要滑動的元件設定 app:layout_scrollFlags="scroll|enterAlways" 屬性。
設定的layout_scrollFlags有如下幾種選項: scroll: 所有想滾動出螢幕的view都需要設定這個flag- 沒有設定這個flag的view将被固定在螢幕頂部。
enterAlways:
這個flag讓任意向下的滾動都會導緻該view變為可見,啟用快速“傳回模式”。 enterAlwaysCollapsed:
當你的視圖已經設定minHeight屬性又使用此标志時,你的視圖隻能已最小高度進入,隻有當滾動視圖到達頂部時才擴大到完整高度。
exitUntilCollapsed: 滾動退出螢幕,最後折疊在頂端。
CollapsingToolbarLayout
app:collapsedTitleGravity 指定折疊狀态的标題如何放置,可選值:top、bottom等
app:collapsedTitleTextAppearance="@style/TextAppearance.CollapsedTitle"
指定折疊狀态标題文字的樣貌
app:expandedTitleTextAppearance="@style/TextAppearance.ExpandedTitle"
指定展開狀态标題文字的樣貌
app:contentScrim="?attr/colorPrimaryDark"
指定CollapsingToolbarLayout完全被滾出到螢幕外時的ColorDrawable
app:expandedTitleGravity 展開狀态的标題如何放置
app:titleEnabled指定是否顯示标題文本
app:toolbarId指定與之關聯的ToolBar,如果未指定則預設使用第一個被發現的ToolBar子View
app:expandedTitleMarginStart="10dp"
app:expandedTitleMargin
app:expandedTitleMarginBottom
app:expandedTitleMarginEnd
展開狀态改變标題文字的位置,通過margin設定
app:layout_collapseParallaxMultiplier="0.7"
設定視差的系數,介于0.0-1.0之間。
app:layout_collapseMode="pin"(子布局設定折疊模式)
有兩種“pin”:固定模式,在折疊的時候最後固定在頂端;“parallax”:視差模式,在折疊的時候會有個視差折疊的效果。
CollapsingToolbarLayout主要是提供一個可折疊的Toolbar容器,對容器中的不同View設定layout_collapseMode折疊模式,來達到不同的折疊效果。
Floating Action Button (FAB)
app:fabSize="normal" 是用來定義 FAB 的大小的,normal 的意思是在大多數情況下标準尺寸為 56dp 的按鈕,但是萬一你想使用較小的一個, mini 是另一個選擇,它的大小将變成 40dp。
app:elevation 為空閑狀态下的陰影深度,
app:pressedTranslationZ 為按下狀态的。
app:backgroundTint 是指定預設的背景顔色
app:rippleColor 是指定點選時的背景顔色
app:border Width border的寬度
app:fabSize 是指FloatingActionButton的大小,可選normal|mini
app:pressedTranslationZ 按下去時的z軸的便宜
TabLayout
app:tabIndicatorColor tab的訓示符顔色
app:tabSelectedTextColor 選擇tab的文本顔色
app:tabTextColor 普通tab字型顔色
app:tabMode 模式,可選fixed和scrollable fixed是指固定個數,scrollable是可以橫行滾動app:tabGravity 對齊方式,可選fill和center
來源: tablle