Android 折叠toolbar CollapsingToolbarLayout

女爷i 2021-09-26 03:04 398阅读 0赞

展开时如图  
![这里写图片描述][SouthEast]  
上滑时  
![这里写图片描述][SouthEast 1]  
折叠后  
![这里写图片描述][SouthEast 2]  
Android Support Library 中提供的CollapseToolbar实现这效果.  
需要gradle引用包即可`compile 'com.android.support:design:25.0.0'`

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.example.tmgg.collasingtoolbarlayout.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/id_appbar_main"
        android:layout_width="match_parent"
        android:layout_height="230dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/id_collapsingToolbar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/colorPrimary"
            app:statusBarScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
    
            >
            <ImageView
                android:id="@+id/id_img_main"
                android:src="@mipmap/testimg"
                app:layout_collapseMode="parallax"
                android:scaleType="centerCrop"
    app:layout_collapseParallaxMultiplier="0.6"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/id_toolbar_main"
                app:layout_collapseMode="pin"
                android:layout_width="match_parent"
                android:background="@android:color/transparent"
                android:layout_height="?attr/actionBarSize">
    
            </android.support.v7.widget.Toolbar>
    
        </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">
            <TextView
                android:text="费德勒十分难得斯科拉菲尼德斯卡拉夫"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    
        </android.support.v4.widget.NestedScrollView>
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_input_add"
            app:backgroundTintMode="multiply"
            app:layout_anchor="@id/id_collapsingToolbar_main"
            app:layout_anchorGravity="bottom|end|right"
            android:layout_marginBottom="18dp"
            android:layout_marginRight="18dp"
            />
    
    </android.support.design.widget.CoordinatorLayout>

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, 表示不会被滚出屏幕范围.

public class MainActivity extends AppCompatActivity { 
        @BindView(R.id.id_collapsingToolbar_main) CollapsingToolbarLayout mCollapsingToolbar ;
        @BindView(R.id.id_toolbar_main) Toolbar mToolbar ;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            ButterKnife.bind(this);
            initView();
        }
    
        private void initView() {
            mCollapsingToolbar.setTitle("collapsing Toolbar");
            setSupportActionBar(mToolbar);
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            //展开时的颜色
            mCollapsingToolbar.setExpandedTitleColor(Color.WHITE);
            //折叠后的颜色
            mCollapsingToolbar.setCollapsedTitleTextColor(Color.GREEN);
    
        }
    
        @Override
        protected void onDestroy() {
            super.onDestroy();
    
        }
    }

不要忘记在清单文件里设置主题为` <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">`  
基础功能已经实现

[SouthEast]: /images/20210923/6d0a7200df334b599d36fe39d0a9fc96.png
[SouthEast 1]: /images/20210923/889882e68613487aa8c2239a28371bd9.png
[SouthEast 2]: /images/20210923/c9958b3772544137b3d7cfc86a09e541.png