Appbarlayout of material design component

Appbarlayout is a vertical LinearLayout, which implements many functions that the status bar in accordance with the material design specification should have, such as scrolling gesture.

Appbarlayout is generally directly used as the direct sub object of coordinatorlayout. If appbarlayout is used in other layouts, most of its functions will fail. Appbarlayout needs a sign to know when the scrolling view scrolls. This sign process is completed by binding appbarlayout.scrollingviewbehavior class, This means that the behavior of scrolling view should be set as an instance of appbarlayout.scrollingviewbehavior. Here, set the string resource containing the full class name, as follows:

//设置layout_behavior属性
<android.support.v4.widget.NestedScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <!-- Your scrolling content -->
</android.support.v4.widget.NestedScrollView>

A scrollable behavior should be set for the child view of appbarlayout, which can be set through code and XML attributes, as follows:

//代码
setScrollFlags(int)
//xml attribute
app:layout_scrollFlags

layout_ The scrollflags property is mainly used to specify what action the child view of appbarlayout will perform when the sliding gesture changes_ The scrollflags attribute has five values: 1. Scroll 2. Enteralways 3. Enteralwaysclapsed 4. Exituntilcollapsed 5. Snap

Before introducing these attribute values, the effect of these attribute values will take the following layout effect as an example, and the layout is as follows:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.manu.materialdesignsamples.samples.SampleCoordinatorAppBarActivity">
    <!--AppBarLayout——>子View设置layout_scrollFlags属性-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/ablBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll">
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <!--NestedScrollView——>设置layout_behavior属性-->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rvAppBarData"
            android:clipToPadding="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Scroll: when setting layout_ When the attributes of scrollflags are as follows:

app:layout_scrollFlags="scroll"

At this time, when sliding up, first hide appbarlayout, and then start scrolling. When sliding down, appbarlayout does not start to display until it appears at the top of the scrolling view. The effect is as follows:

Enterways: enterways must be used in conjunction with scroll when layout is set_ When the scrollflags property is as follows:

app:layout_scrollFlags="scroll|enterAlways"

At this time, when sliding up, first hide appbarlayout and then start scrolling. When sliding down, display appbarlayout and then start scrolling. The effects are as follows:

Enteralwaysclapsed: when using the value of the enteralwaysclapsed property, it must be used in conjunction with scroll and enteralways. In addition, it is necessary to set a minimum height of the child view (here is the toolbar) of appbarlayout to provide functional support for enteralwaysclapsed. When setting layout_ When the attributes of scrollflags are as follows:

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

At this time, when sliding up, hide appbarlayout first, and then start scrolling. When sliding down, appbarlayout first displays the minimum height of the sub view, and then displays all appbarlayout until it appears at the top of the scrolling view. The effect is as follows:

Exituntilcollapsed: when using the exituntilcollapsed property value, it must be used in conjunction with scroll. In addition, it is necessary to set a minimum height of the child view (here is the toolbar) of appbarlayout to provide exituntilcollapsed function support. When setting layout_ When the attributes of scrollflags are as follows:

app:layout_scrollFlags="scroll|exitUntilCollapsed"

At this time, when sliding up, first hide the appbarlayout to the minimum height, and then start scrolling. When sliding down, the appbarlayout does not start to display until it appears at the top of the scrolling view. The effect is as follows:

Snap: when using the snap attribute value, it must be used in conjunction with scroll. The main function is that at the end of scrolling, if the telescopic view is only partially visible, it will automatically scroll to the nearest edge when layout is set_ When the scrollflags property is as follows:

app:layout_scrollFlags="scroll|snap"

At this time, if the telescopic view (here is the toolbar) is partially visible, the telescopic view will automatically scroll to the nearest edge, that is, either hide or display. The effect is as follows:

About layout_ The scrollflags attribute has been introduced. Of course, the above is only to illustrate the effect of the attribute value. It can also be combined with collapsingtoolbarlayout and other material designs to achieve cool effects. The above is the layout in the layout file_ The setting of the scrollflags property. By the way, how to set the layout in the code_ The details of scrollflags are as follows:

AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) appBarLayout
                .getChildAt(0).getLayoutParams();
//上滑时先隐藏AppBarLayout,然后再开始滚动,下滑时先显示AppBarLayout,然后再开始滚动
params.setScrollFlags(
        AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL |
        AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);
//...

The use of appbarlayout and its important properties have been introduced. The actual development must be much more complex. I hope the above contents can be helpful to you. You can choose to focus on the WeChat official account: jzman-blog get the latest updates, and learn together!

The content of this article comes from the network collection of netizens. It is used as a learning reference. The copyright belongs to the original author.
THE END
分享
二维码
< <上一篇
下一篇>>