Android folding toolbar uses full parsing (collapsingtoolbarlayout)

brief introduction

In various applications, you may often see such an effect: the toolbar is transparent, with a background picture and title. As the page slides upward, the title gradually scales to the toolbar, and the background picture changes to the color of the toolbar after sliding to a certain extent. This effect is also a folding effect. In fact, many open source libraries have implemented this effect on GitHub, but Google also gives this control in its design library, which makes it easy for us to achieve this effect. This control is collapsingtoolbarlayout, which is an enhanced FrameLayout. Then, this article will give you a detailed introduction to the use of the control and precautions.

effect

This article combines a demo to demonstrate. The following is the final display effect, that is, the effect of the folding toolbar:

introduce

To use this control, we need to introduce the Android design library library. At the same time, we need to modify the theme of the app to adapt to this control, so we also need the appcompat library. Then we introduce the following in the build.gradle file:

The content of this article is based on the official documents. Interested readers can go to the official documents for further review (provide their own ladder).

Knowledge reserve

Next, the author introduces the usage of the control step by step. First, let's understand the common XML properties of this control.

1、 Introduction to common XML attributes

1) Contentscrim: the main color displayed when the toolbar shrinks to a certain extent. The color of the toolbar. 2) Title: when titleenable is set to true, the headline will be displayed when the toolbar is expanded, and the subtitle above the toolbar will be displayed when the toolbar is contracted. 3) Scriptanimationduration: this attribute controls the animation duration of the color change when the toolbar shrinks. That is, the time required for animation when the color changes to the color specified by contentscrim. 4) Expandedtitlegravity: Specifies the location of the title when the toolbar is expanded. Similar properties include expandedtitlemagin and collapsedtitlegravity. 5) Collapsedtitletextappearance: Specifies the style of the title font when the toolbar shrinks. Similarly, expandedtitletextappearance.

2、 Common flag bits

In general development, collapsingtoolbarlayout does not appear in the layout file alone, but as a child element of another control coordinatorlayout. What is coordinatorlayout? In fact, the coordinatorlayout control is very powerful and can realize many different functions for its child elements. A common usage is to set a layout for its child element a_ The attribute of scrollflags, and then set a layout for another child element B_ behavior=”@string/appbar_ scrolling_ view_ For the attribute of "behavior", this child element B is generally a sliding control, such as recyclerview, nestedscrollview, etc. when child element B slides, child element a will be arranged according to its layout_ Different changes are made according to the property value of scrollflags, so we need to set the layout for collapsingtoolbarlayout_ Scrollflags property.

layout_ scrollFlags

Let's take a look at layout_ Which attributes of scrollflags can be selected: * scroll: this flag should be set for all controls that want to slide. If this flag bit is not set, the view will be fixed* Enterways: after setting this flag, if the view has slid out of the screen, the finger will slide down and the view will appear immediately. This is another use scenario* Enteralwaysclapsed: if minheight is set and this flag bit is set, the view will progress the screen with the minimum height. When the sliding control slides to the top, it will expand to the full height* Exituntilcollapsed: shrinks the current view when sliding up. But the view can be fixed at the top. It may be too abstract to describe it directly in language. The following will show you the specific functions of these flag bits with practical effects.

layout_ collapseMode

As mentioned above, collapsingtoolbarlayout is a FrameLayout. It can have multiple child elements, and the child elements will have different expressions. For example, in the GIF diagram above, the toolbar is fixed at the top after zooming, while the ImageView scrolls with the layout, that is, there is a relative scrolling process. So these child elements can add layout_ The collapsemode flag bit then produces different behavior. In fact, there are only two flag bits here, namely: * pin: the view with this flag bit will always stay at the top during page scrolling. For example, the toolbar can be fixed at the top * Parallax: the view with this flag bit means that it can scroll with the page at the same time. An attribute associated with this flag phase is: layout_ Collapseparallaxmultiplier, which is a parallax factor, indicating that there is a difference between the view and the page scrolling speed, resulting in a relative scrolling effect.

3、 Common hierarchical relationships

As mentioned above, collapsingtoolbarlayout generally appears as a child element of coordinatorlayout. In fact, if you want to achieve the above effect, you need another control: appbarlayout. This control is also a control of the design library. Its function is to use all its child elements as an AppBar. In general, the following hierarchical relationships can be used to implement the folding toolbar:

From the above hierarchical relationship, the outermost layer is coordinatorlayout, which has two child elements, appbarlayout and recyclerview (sliding control), while appbarlayout is wrapped with collapsingtoolbarlayout. The child elements of collapsingtoolbarlayout are folded view (which can be a picture or a layout) and our toolbar.

Example ①

With the above knowledge, we can start to write code. Our goal is to achieve the effect of the GIF diagram above. 1. In activity_ In the main.xml file (Note: the following comments are for convenience only):

The item associated with it_ Card.xml layout file:

2. Do some more processing in the mainactivity.java file:

Above, we set the title for collapsingtoolbarlayout, and the color of the title when shrinking and expanding. After the above simple example, the effect of the folding toolbar shown in the GIF figure above can be realized.

Here is a summary: set a layout for the sliding control when the coordinatorlayout is the parent layout_ behavior=”@string/appbar_ scrolling_ view_ The "behavior" flag bit (the behavior system and help us implement it), then when the control with this flag bit slides, it will trigger the control with scroll_ The flags flag is used to slide another control. At this time, the layout of ImageView_ Collapsemode is parallax, so it will slide relatively with parallax, and the toolbar sets the flag bit of pin, so it will be fixed at the top of the screen after shrinking.

Example ②

In example ①, we set the scroll for collapsingtoolbarlayout_ The flags are "scroll | exituntilcollapsed", so what is the different effect if we change the flag bit to something else? In activity_ In main.xml, make the following modifications:

Then nothing else is changed, and the effect is as follows:

Obviously, the effect has changed. Here, the toolbar is not uniformly fixed on the top, but slides out of the screen with the sliding. At the same time, if the finger slides down, the toolbar will gradually appear and maintain the minimum height. When it returns to the top, the toolbar will open as it was. Then, based on the above example, what happens if the flag "enter always collapsed" is missing? The function of this flag bit has also been explained above. It controls the toolbar to enter the screen at the minimum height, and then expands to the full height when the sliding control slides to the top. Without this flag bit, the toolbar will gradually appear when our fingers slide down, but unlike the GIF figure above, the toolbar will continue to expand and become the same, that is, ImageView. The figure will not be displayed here. Readers can verify it by themselves~

Through the above two small examples, we have a certain understanding of collapsingtoolbarlayout and learned how to use it. Using it can make our application more beautiful. Finally, let's talk about the precautions, that is, the pit encountered by the author in the development process.

matters needing attention

1. The use of Android design support library needs to be matched with specific themes. Generally, you can use the themes under appcompat or customize the themes, which are inherited from the themes of appcompat, otherwise an error will be reported. In addition, if you use Android studio, the relevant code of the theme needs to be modified in the styles.xml (v21) file, otherwise an error will be reported if you use a machine above Android 5.0 for testing. 2. Since the theme of appcompat is used, our activity should inherit from appcompatactivity. 3. The version number of the design support library used by the author is 23.1.0. In this version, the collapsedtitletextappearance property is not set in collapsedtoolbarlayout, and the title can be displayed normally. However, in version 24.1.0, that is, the version used above, if the collapsedtitletextappearance property is not set, when the toolbar shrinks, Its title text becomes very small. Therefore, we need to set the attribute collapsedtitletextappearance = "@ style / textappearance. Appcompat. Title" to become normal. 4. If a title is not set for collapsingtoolbarlayout, the application name will be displayed using the title provided by the actionbar. This is because the setsupportactionbar (toolbar) function is called.

Finally, attach the address of the code: designsupportlibrarysample

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.