Play appbarlayout to achieve a more cool top bar

The previous article "how to use coordinatelayout is so simple" explained the use of coordinatelayout. Today, we will talk about several views that are often used together: appbarlayout, collapsing toolbar layout and toolbar. Do you feel very flustered when three strange views appear all at once ~, many people have written about the use of these layouts, but they have not explained the role and how to use each view separately. Many articles I read have written appbarlayout, collapsing toolbarlayout and toolbar into one layout, Then, you can talk about the layout attributes one by one. It feels chaotic all of a sudden. This article starts with the toolbar and finally lets you master these three views thoroughly!

In fact, these three views are aimed at the actionbar we used to use, that is, playing various tricks on the bar at the top of our app ~ let's look down and see what tricks they play on the "top bar" of our app!

1 Toolbar

Toobar is mainly used to replace the actionbar. In other words, the toolbar can do whatever the actionbar can do. If you are familiar with the use of actionbar, you will find that the toolbar is very simple to use. OK, since it's a replacement, of course, you have to hide the action bar when using the toolbar~

There are many ways to hide the actionbar, either through code or configuration files. We mainly hide it through configuration files. In our styles Add the following two lines to the apptheme tag in the XML file:

<item name="windowActionBar">false</item> <item name="windowNoTitle">true</item>

Of course, you can also create a new < style > tag, add the above two lines of code, and use the new tag as the theme of < Application >. You can also choose to set the parent of apptheme to theme AppCompat. Light. Noactionbar. There are many ways to choose.

The next step is to put the toolbar into the layout file (there's nothing to explain):

Finally, use toobar as "actionbar"

You can set logo, title, sub title, etc. on the toolbar ~ there are many other settings. Go and play slowly by yourself, not mentioned here ~. Of course, you can also set these in the layout file. Don't write them in the layout file. Hongyang God has a blog that writes a good "actual battle between Android 5. X theme and Toolbar" for reference.

See the effect:

If the toolbar is only used to replace the previous actionbar, it is too creative! There is no need to replace them, because they all show the same, and they don't make us feel more convenient to use than actionbar. Why should we replace it? There should always be his reason: the actionbar is fixed on the top and cannot be moved. I think this is the biggest disadvantage, and our toolbar can be placed casually, which can bring a lot of flexibility and effects!

As you can see, the toolbar is not enough. It is not complicated at all. Next, let's continue to learn to set another layer of parent view on the toolbar to make the toolbar more interactive.

2 AppBarLayout

Appbarlayout inherits from LinearLayout, and the layout direction is vertical. So you can use it as a linear layout of vertical layout. Appbarlayout adds some material design concepts to linearlayou. It allows you to customize the actions of the internal sub view when the scrolling gesture of a scrollable view changes.

Please note: a scrollable view mentioned above can be understood as a Scrollview. How do you understand the above words? That is, when a Scrollview scrolls, you can customize what actions your "top bar" should perform (such as scrolling together, holding still, etc.). Which movable view is a movable view? It's up to you! How to specify, we'll talk about later.

2.1 action of appbarlayout subview

The internal sub view is created by adding app: layout to the layout_ Scrollflags sets the action to be performed, then app: Layout_ What actions can scrollflags set? They are as follows:

(1) Scroll: the view whose value is set to scroll will move along with the scroll event. What do you mean? In short, when the specified Scrollview scrolls, the view will also scroll together, as if the view also belongs to the Scrollview.

A GIF is sufficient to illustrate:

Corresponding layout file

(2) Enterways: the view whose value is set to enterways. When Scrollview scrolls down, the view will scroll down directly. Regardless of whether the Scrollview is scrolling.

Watch a cartoon (Y (^ o ^) y) (toolbar height is set to? Android: attr / actionbarsize, app: layout_scrollflags = "scroll|enterways"):

(3) Exituntilcollapsed: a view whose value is set to exituntilcollapsed. When the view is going to "disappear" upward, it will slide upward until the remaining height reaches its minimum height, and then respond to the internal sliding event of Scrollview.

How to understand? Simple explanation: when Scrollview slides upward, the first thing is to "take away" the sliding event. The view performs the sliding until the minimum sliding height, and then "return" the sliding event to make the Scrollview slide upward. Take a GIF look and feel it (the height in the figure is set to be relatively large: 200dp, and the minimum height is set to "Android: attr / actionbarsize, app: layout_scrollflags =" scroll|exituntilcollapsed "):

(4) Enteralwaysclapsed: it is an additional option of enteralways. It is generally used with enteralways. It means that when the view "appears" down, the first is the enteralways effect. When the height of the view reaches the minimum height, the view will not scroll down temporarily until the Scrollview slides to the top, Until it slides to the top of the view.

Take a GIF and feel it (the height in the figure is set to be relatively large: 200dp, and the minimum height is set to "Android: attr / actionbarsize, app: layout_scrollflags =" scroll|eneralways|enteralwaysclapsed "):

2.2 associate appbarlayout with Scrollview

As mentioned above, it has been repeatedly said that "when Scrollview scrolls", so how to associate appbarlayout with Scrollview? We noticed that the actions between appbarlayout and Scrollview are "interdependent". Isn't that what we learned in the last article "how to use coordinatelayout is so simple"? Take Scrollview and appbarlayout as sub views of coordinatelayout, and then write a behavior. In this behavior, judge whether the current operation should keep the Scrollview under appbarlayout at all times (that is, you can slide together as long as you change the position of appbarlayout), Or should we let the Scrollview scroll internally without changing the appbarlayout position? These requirements can be handled in behavior. You can write behavior for your Scrollview. However, we see that our appbarlayout has complex functions in advance. If we define such effects ourselves, the code is very complex and many aspects need to be considered. Fortunately, Android has written it for us and we can use it directly. This Scrollview is nestedscrollview. Please note that it does not inherit Scrollview, but FrameLayout, However, the effect of its implementation can be regarded as Scrollview.

Put nestedscrollview into our layout file ~ ~, which is very convenient~

Have you noticed a property: app: layout_ Behavior = "@ string / appbar_scrolling_view_behavior", which specifies the behavior, AppBar_ scrolling_ view_ The name of the class corresponding to behavior is: Android support. design. widget. Appbarlayout $scrollingviewbehavior can analyze the source code if you are interested.

Well, we will now use appbarlayout ~ do you find it so easy to use! Next, let's "digest" the remaining collapsingtoolbarlayout!

3 CollapsingToolbarLayout

Collapsingtoolbarlayout is a ViewGroup used to repackage the toolbar. It is mainly used to achieve the effect of folding (in fact, it looks like stretching ~) app bar. It needs to be placed in the appbarlayout layout and used as a direct child view of appbarlayout. Collapsingtoolbarlayout mainly includes several functions (refer to the content on the official website and explain it with your own understanding):

(1) Collapsing Title: when all the layout contents are displayed, the title is the largest, but as the view gradually moves out of the top of the screen, the title becomes smaller and smaller. You can set the title by calling the settitle function.

(2) Content scrim: determine whether to "cover the view" according to whether the rolling position reaches a threshold. You can set the picture of gauze through setcontent scrim (drawable)

(3) Status bar scrim: determine whether to "cover the status bar with gauze" according to whether the rolling position reaches a threshold value. You can set the gauze picture through setstatusbarscrim (drawable), but it can only work on the lollipop device.

(4) Parallax scrolling children: the subview can select whether to follow the scrolling in the way of "parallax" in the current layout. (PS: in fact, it is to make the scrolling speed of this view slightly slower than that of other normal scrolling views). The layout parameter app: Layout_ Collapsemode is set to parallax

(5) Pinned position children: the child view can choose whether to fix the position in the global space, which is very useful for the toolbar, because when the layout is moving, the toolbar can be fixed without being affected by the movement. Add app: Layout_ Collapsemode is set to pin.

After understanding these concepts, let's take a look at the layout~

You can understand all the above. Every strange attribute has been mentioned. If you forget, look back and explain a little. The picture is set to slide with parallax, and the toolbar is set to fixed. In addition, the collapsing toolbar layout will enlarge and reduce the title. Let's see the effect~

If you want the status bar to be transparent during dragging, you can add app:statusBarScrim= "@android:color/transparent" in CollapsingToolbarLayout and call getWindow () in onCreate. Addflags (WindowManager. Layoutparams. Flag_transition_status) just set the status bar to transparent~

Please accept the source code: http://xiazai.jb51.net/201609/yuanma/CoordinateLayout (jb51.net). rar

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.