Integrate the effect of collapsingtoolbarlayout + smartrefreshlayout

The address of GitHub is also provided:https://github.com/KennyChaos7/SmartRefreshLayout-CoordinatorLayout-AppBarLayout.git

Android smartrefreshlayout + coordinatorlayout + appbarlayout can refresh / pull down and fold

device-2021-06-08-104734.png

device-2021-06-08-104753.png

device-2021-06-08-104824.png

device-2021-06-08-104941.png

Of course, in accordance with international practice, the last renderings

CoordinatorLayout AppBarLayout CollapsingToolbarLayout Toolbar

The above four layouts are actually in addition toToolbarBesides, it may not be a common layout of the scene, so I will post some of my own understanding and some reference articles here
- CoordinatorLayout

     <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true"
      android:orientation="vertical">
        <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/ic_launcher_background">
          <TextView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:text="header"
          android:gravity="center"/>
        </FrameLayout>
        <com.scwang.smart.refresh.layout.SmartRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:srlEnableRefresh="true"
        app:srlEnableLoadMore="true"
        android:id="@+id/smartrefreshlayout"
        tools:context=".ScrollingActivity">
      <com.scwang.smart.refresh.header.ClassicsHeader
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
      <androidx.coordinatorlayout.widget.CoordinatorLayout
      android:id="@+id/coordinatorlayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="true">
      <com.google.android.material.appbar.AppBarLayout
      android:id="@+id/app_bar"
      android:layout_width="match_parent"
      android:layout_height="250dp"
      android:fitsSystemWindows="true"
      android:theme="@style/Theme.MyApplication.AppBarOverlay">
     
      <com.google.android.material.appbar.CollapsingToolbarLayout
      android:id="@+id/toolbar_layout"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:fitsSystemWindows="true"
      app:contentScrim="?attr/colorPrimary"
      app:layout_scrollFlags="scroll|exitUntilCollapsed"
      app:toolbarId="@+id/toolbar">
      <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      app:layout_collapseMode="parallax">
      <TextView
      android:layout_width="match_parent"
      android:layout_height="150dp"
      android:text="CENTER"
      android:gravity="center"
      android:textSize="22sp"
      android:textColor="@color/black"/>
      </LinearLayout>
      <androidx.appcompat.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_collapseMode="pin"
      app:popupTheme="@style/Theme.MyApplication.PopupOverlay"
      android:layout_gravity="bottom">
      <TextView
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:textColor="@color/white"
      android:layout_gravity="bottom"
      android:gravity="center"
      android:text="1"
      android:textSize="18sp"/>
      </androidx.appcompat.widget.Toolbar>
      </com.google.android.material.appbar.CollapsingToolbarLayout>
      <TextView
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:textColor="@color/white"
      android:layout_gravity="bottom"
      android:gravity="center"
      android:text="2"
      android:textSize="18sp"/>
      </com.google.android.material.appbar.AppBarLayout>
      <include layout="@layout/content_scrolling" />
      </androidx.coordinatorlayout.widget.CoordinatorLayout>
      <com.scwang.smart.refresh.footer.ClassicsFooter
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
      </com.scwang.smart.refresh.layout.SmartRefreshLayout>
     </LinearLayout>

>There is no activity posted here, because there is not all the effect implementation, and the participation of activity is not required

If you do this step, you will find that the effect here is inconsistent with the effect of the actual effect drawing, or it should be said that there is no desired effect at all.
This is because the following two lines of code

      <androidx.appcompat.widget.Toolbar
      android:layout_height="wrap_content"
      ...
      android:layout_gravity="bottom">
      ...
      </androidx.appcompat.widget.Toolbar>
     ...

Here we putToolbarSet to be located inCollapsingToolbarLayoutThe bottom of the sub layout, and because there is no limit on the height, it is adaptive with the expansion of the sub layoutwrap_contentSo that when slidingAppBarLayoutcalculationCollapsingToolbarLayoutThe height from the top edge is 0, so there is no folding distance, so that the whole folding effect does not exist

The solution is also very simple. Choose one of three:

Removeandroid:layout_gravity=”bottom”, use insteadandroid:layout_marginTop=”xx”To indirectly set the collapsible distance
givenToolbarA fixed height
toToolbarSet the height of 1px and put the layout to be displayed after folding on theCollapsingToolbarLayoutwithinToolbarSibling (it’s best to use this method if you don’t want your layout to be collapsed during drop-down loading)

Finally, give a normal and effective XML to see

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/ic_launcher_background">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="header"
            android:gravity="center"/>
    </FrameLayout>
    <com.scwang.smart.refresh.layout.SmartRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:srlEnableRefresh="true"
        app:srlEnableLoadMore="true"
        android:id="@+id/smartrefreshlayout"
        tools:context=".ScrollingActivity">
        <com.scwang.smart.refresh.header.ClassicsHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/coordinatorlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true">
            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:fitsSystemWindows="true"
                android:theme="@style/Theme.MyApplication.AppBarOverlay">

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:id="@+id/toolbar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:fitsSystemWindows="true"
                    app:contentScrim="?attr/colorPrimary"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:toolbarId="@+id/toolbar">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:orientation="vertical"
                        app:layout_collapseMode="parallax">
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="150dp"
                            android:text="CENTER"
                            android:gravity="center"
                            android:textSize="22sp"
                            android:textColor="@color/black"/>
                    </LinearLayout>
                    <androidx.appcompat.widget.Toolbar
                        android:id="@+id/toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="50dp"
                        app:layout_collapseMode="pin"
                        android:layout_gravity="bottom"
                        app:popupTheme="@style/Theme.MyApplication.PopupOverlay">
                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="50dp"
                            android:textColor="@color/white"
                            android:layout_gravity="center"
                            android:gravity="center"
                            android:text="1"
                            android:textSize="18sp"/>
                    </androidx.appcompat.widget.Toolbar>
                </com.google.android.material.appbar.CollapsingToolbarLayout>
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:textColor="@color/white"
                    android:layout_gravity="bottom"
                    android:gravity="center"
                    android:text="2"
                    android:textSize="18sp"/>
            </com.google.android.material.appbar.AppBarLayout>
            <include layout="@layout/content_scrolling" />
        </androidx.coordinatorlayout.widget.CoordinatorLayout>
        <com.scwang.smart.refresh.footer.ClassicsFooter
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </com.scwang.smart.refresh.layout.SmartRefreshLayout>
</LinearLayout>

Android smartrefreshlayout + coordinatorlayout + appbarlayout can refresh / pull down and fold

Integrate the effect of collapsingtoolbarlayout + smartrefreshlayout

Recommended Today

JS generate guid method