手把手教你用CoordinatorLayout實(shí)現(xiàn)折疊效果

其實(shí)在很早之前有用到過(guò)CoordinatorLayout，因?yàn)樽约阂部催^(guò)相關(guān)的源碼，主要是利用了behavior來(lái)通過(guò)下面的view來(lái)滑動(dòng)上面的view，很大程度上方便了開(kāi)發(fā)者來(lái)實(shí)現(xiàn)折疊的效果，廢話不多說(shuō)，咱們今天拿實(shí)際項(xiàng)目的案例，打造一個(gè)折疊的效果:

simple.gif

書(shū)架里面的簽到部分是受下面一部分拖拽控制的，這也是CoordinatorLayout的特性，通過(guò)下面能滑動(dòng)的view來(lái)實(shí)現(xiàn)上面一部分的view滑動(dòng)。咱們看看該效果是怎么實(shí)現(xiàn)的：
將項(xiàng)目的style設(shè)置如下:

 <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>
     <item name="windowActionBar">false</item>
     <item name="windowNoTitle">true</item>
 </style>

將activity設(shè)置如下模式，用到了statusbar庫(kù)

StatusBarUtil.setTranslucentForImageViewInFragment(MainActivity.this, 0, null);

主要看看BookShelfFragment代碼

  • 布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/AppFragment_AppBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:elevation="0dp">

            <!--需要折疊的CollapsingToolbarLayout部分-->
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="@color/white"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <RelativeLayout
                    android:id="@+id/linear"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_154"
                    android:background="@mipmap/shelf_back"
                    android:orientation="horizontal"
                    app:layout_collapseMode="parallax"
                    app:layout_constraintTop_toTopOf="parent">

                    <RelativeLayout
                        android:id="@+id/shelf_content"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_centerVertical="true"
                            android:layout_marginLeft="@dimen/dp_24"
                            android:orientation="vertical">

                            <TextView
                                android:id="@+id/readTime"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:shadowDx="5"
                                android:shadowDy="5"
                                android:shadowRadius="5"
                                android:text="12"
                                android:textColor="@color/color0B192D"
                                android:textSize="@dimen/text_35" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="@string/read_tips"
                                android:textColor="#ff5d636f"
                                android:textSize="@dimen/text_13" />
                        </LinearLayout>

                        <TextView
                            android:id="@+id/signin"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_alignParentRight="true"
                            android:layout_centerVertical="true"
                            android:layout_marginRight="@dimen/dp_24"
                            android:background="@drawable/sign_back"
                            android:drawableLeft="@mipmap/signin"
                            android:drawablePadding="@dimen/dp_5"
                            android:gravity="center_vertical"
                            android:paddingLeft="@dimen/dp_3"
                            android:paddingTop="@dimen/dp_3"
                            android:paddingRight="@dimen/dp_12"
                            android:paddingBottom="@dimen/dp_3"
                            android:text="@string/check_in"
                            android:textColor="@color/colorFF448BFF" />
                    </RelativeLayout>
                </RelativeLayout>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/t_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="@dimen/dp_45"
                    app:contentInsetLeft="0dp"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="pin" />

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

            <View
                android:id="@+id/line"
                android:layout_width="match_parent"
                android:layout_height="0.05dp"
                android:background="@color/colorCCCCCC" />

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

        <!--appbar_scrolling_view_behavior:該屬性其實(shí)用的是appbarLayout中的behavior:AppBarLayout$ScrollingViewBehavior-->
        <android.support.v7.widget.RecyclerView
            android:id="@+id/show_shelf"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="@dimen/dp_12"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_centerInParent="true" />
</RelativeLayout>

主要注意下面recyclerview用到的app:layout_behavior屬性，需要折疊的部分放到android.support.design.widget.CollapsingToolbarLayout中，
android.support.v7.widget.Toolbar用到了一個(gè)app:layout_collapseMode="pin"屬性，表示不讓一起整體滑動(dòng)。
在fragment中主要有如下設(shè)置的代碼:

/**
     * 設(shè)置CoordinatorLayout部分
     */
    private void initCoordinator() {
        //不采用系統(tǒng)的toolbar，將自己的toolbar放到其中
        toolbar.removeAllViews();
        Toolbar.LayoutParams lps = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        View view = getLayoutInflater().inflate(R.layout.toolbar_book_shelf, null);
        toolbar.addView(view, ops);
        //由于咱們用了statusbarUtils中狀態(tài)欄沉浸式，因此下面的toolbar需要下移，距離是statusBar的高度
        CollapsingToolbarLayout.LayoutParams layoutParams = (CollapsingToolbarLayout.LayoutParams) toolbar.getLayoutParams();
        layoutParams.topMargin = StatusBarUtil.getStatusBarHeight(getContext());
        toolbar.setLayoutParams(layoutParams);

        //shelfContent是咋們的簽到部分，移動(dòng)距離是toolbar的高度+statusbar的高度
        RelativeLayout.LayoutParams shelfContentLp = (RelativeLayout.LayoutParams) shelfContent.getLayoutParams();
        shelfContentLp.topMargin = (int) (getResources().getDimension(R.dimen.dp_45) + StatusBarUtil.getStatusBarHeight(getContext()));
        shelfContent.setLayoutParams(shelfContentLp);

        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                //設(shè)置toolbar漸變的效果，主要是監(jiān)聽(tīng)appbarlayout滑動(dòng)的距離,getTotalScrollRange:是appbarLayout可滑動(dòng)的最大距離
                toolbar.setBackgroundColor(CoordinatorUtils.changeAlpha(getResources().getColor(R.color.white), Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange()));
                //分割線也采用漸變效果，在折疊的時(shí)候，完全顯示分割線
                line.setAlpha(Math.abs(verticalOffset * 1.0f) / appBarLayout.getTotalScrollRange());
            }
        });
    }

里面用到了一個(gè)InContentAnim動(dòng)畫庫(kù)，該動(dòng)畫一般都是放在base...類里面去設(shè)置的。最后再看下整理出來(lái)的效果:

simple1.gif

想要看完整的代碼，點(diǎn)這里

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容