Play Appbarlayout to achieve a cooler top bar _android

The last article, "The use of coordinatelayout so simple," to explain the use of coordinatelayout, today we will explain often with the use of several view:appbarlayout, Collapsingtoolbarlayout and toolbar. Suddenly appeared 3 unfamiliar view, is not feel very flustered ~, many people have written the use of these several layouts, but they did not have a targeted alone to explain the role of each view and how to use, I read a lot of articles are a appbarlayout, Collapsingtoolbarlayout and toolbar write to a layout inside go, and then a layout attribute to say, suddenly feel good confusion, this article is from toolbar start, finally let you take these 3 view thoroughly grasp down!

In fact, these three view are for our usual actionbar, is for the top of our app bar playing a variety of tricks ~ we look down and see how they put our app's "Top bar" to play a pattern!

1 Toolbar

Toobar is mainly used to replace Actionbar, in other words, Actionbar can do, toolbar can do. If you are familiar with the use of Actionbar, you will find that toolbar is very easy to use. OK, since it is the replacement, of course, with the toolbar when you have to go to the Actionbar to hide away ~

There are many ways to hide actionbar, which can be hidden by the way of code, or by the way of configuration files, which are mainly hidden by the way of configuration files. Add the following two lines to the apptheme tag in our Styles.xml file:

<item name= "Windowactionbar" >false</item>
<item name= "Windownotitle" >true</item>

Of course, you can also create a new <style> tag, add the two lines of code, and add the new label as a <application> theme. You can also choose how to set the Apptheme parent to Theme.AppCompat.Light.NoActionBar. A lot of ways, you can choose their own random.

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

 <android.support.v7.widget.toolbar
 android:id= "@+id/toolbar"
 android:layout_width= "Match_parent"
 android:background= "attr/colorprimary"
 android:layout_height= "Android:attr/actionbarsize"/>

Finally, Toobar is used as "Actionbar".

 Toolbar Toolbar = (Toolbar) Findviewbyid (R.id.toolbar);
 Toolbar.settitle ("Here is title");
 Toolbar.setsubtitle ("Here is the sub-title");
 Toolbar.setlogo (R.drawable.icon); 
 Setsupportactionbar (toolbar);

You can set the logo, title, toolbar, etc. ~ There are many other settings, to play their own slowly, here do not mention ~. Of course, you can also set these in the layout file, in the layout file settings do not write, Hongyang great God has a blog to write a very good "Android 5.x Theme and ToolBar combat" can be referred to.

Look at the effect:

If toolbar is only used to make a replacement for the actionbar of the past, it is too creative! There is no need to replace them, because they are all the same, and do not make us feel more convenient to use than Actionbar. Why to replace it, there should always be his reasons: Actionbar is fixed at the top, and can not move, I think this is the biggest bad, and our toolbar can let us casually placed, it can bring a lot of flexibility and effect!

As you can see, toolbar is not enough to look at at all, it's not complicated at all. Next we continue to learn to toolbar a layer of parent view to make toolbar more interactive.

2 Appbarlayout

Appbarlayout inherits from LinearLayout, and the layout direction is vertical. So you can use it as a linearlayout for vertical layouts. Appbarlayout is the concept of material design added to the linearlayou, which allows you to customize what the inner view implements when a scrolling gesture of a scrollable view is changed.

note that one of the scrollable view mentioned above can be understood as a scrollview. How do you understand the above words? That is, when a scrollview occurs, you can customize what actions your "top bar" should perform (such as scrolling along, staying still, and so on). So what is a removable view? This is your own designation! How to specify, we said later.

2.1 Appbarlayout The action of the Child view

What actions can app:layout_scrollflags set in an internal view by adding app:layout_scrollflags to the layout? were as follows:

(1) Scroll: The view with the value set to scroll will follow the scrolling event to move together.
What does that mean? Simply put, when the specified ScrollView is scrolling, the view follows along as if the view belonged to the ScrollView.

A GIF is enough to illustrate:

The corresponding layout file

<android.support.design.widget.appbarlayout
 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="? android:attr/actionbarsize "
 android:background="? Attr/colorprimary "
 app:layout_scrollflags=" scroll "/>
</ Android.support.design.widget.appbarlayout>

(2) Enteralways: The value is set to Enteralways view, when ScrollView scroll 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|enteralways"):

(3) Exituntilcollapsed: The value is set to Exituntilcollapsed view, when the view to gradually "fade", will continue to slide up until the remaining height reached its minimum height, Then respond to the internal sliding events of the ScrollView.

How do you understand it? Simple explanation: In the ScrollView to slide, first of all is view the sliding event "take", from view to perform sliding, until the minimum height of sliding, the sliding event "return" back, let ScrollView inside to slip. Look at an GIF. (The larger height is set in the figure: 200DP, and the minimum height is set to? android:attr/actionbarsize,app:layout_scrollflags= "scroll| Exituntilcollapsed "):

(4) Enteralwayscollapsed: Is the enteralways of additional options, commonly used with enteralways, it refers to, view in the downward "appearance", the first is the enteralways effect, When the view is at a minimum height, view is not scrolled down until the scrollview slides to the top and no longer slides, and the view continues to slide until the top of view is finished.

Let's have a gif. (The larger height is set in the figure: 200DP, and the minimum height is set to? android:attr/actionbarsize,app:layout_scrollflags= "scroll|eneralways| Enteralwayscollapsed "):

2.2 Associating Appbarlayout with ScrollView

The previous said has repeatedly said "when the ScrollView occurs when rolling", then how to Appbarlayout and scrollview associated with it? We notice that the action between Appbarlayout and ScrollView is "interdependent", which is not what we learned in the last article, "The use of coordinatelayout is so simple"? Take ScrollView and Appbarlayout as Coordinatelayout's child view, and then write a behavior, In this behavior, the current operation is supposed to allow ScrollView to remain under appbarlayout (that is, you can slide together as long as you change the appbarlayout position). Or should let scrollview internal scrolling without letting appbarlayout position change and so on these needs, all can be handled in behavior inside. You can write behavior for your scrollview. However, we see that our appbarlayout is more complex in advance, and if we define this effect ourselves, the code is very complex and there are a lot of things to consider. This scrollview is Nestedscrollview, please note that it does not inherit ScrollView, it inherits Framelayout, but the effect it implements can be seen as ScrollView.

Put Nestedscrollview into our layout file inside can ~ ~ ~, very convenient ~

 <android.support.v4.widget.nestedscrollview

 android:layout_width= "match_parent"
 android:layout_ height= "Wrap_content"
 app:layout_behavior= "@string/appbar_scrolling_view_behavior" >

 <!-- Put your content here-->

 </android.support.v4.widget.NestedScrollView>

Have you noticed that there is an attribute: app:layout_behavior= "@string/appbar_scrolling_view_behavior", which is the designated behavior, Appbar_scrolling_view_ Behavior the name of the corresponding class is: Android.support.design.widget.appbarlayout$scrollingviewbehavior interested can go to analyze the source code.

Well, we will now use Appbarlayout ~ is not found to use up so easy! next we put the rest of the collapsingtoolbarlayout to "digest" Off!

3 Collapsingtoolbarlayout

Collapsingtoolbarlayout is the viewgroup that is used to repackage toolbar, mainly to implement the app bar effect of folding (which in fact looks like telescopic ~). It needs to be placed inside the appbarlayout layout and as a direct child view of the appbarlayout. Collapsingtoolbarlayout mainly includes several functions (refer to the content on the official web site, slightly understanding to explain):

(1) folding title (collapsing title): When the layout content is all displayed, title is the largest, but as the view moves out of the top of the screen, the title becomes smaller. You can set the title by calling the Settitle function.

(2) content scrim: Depending on whether the location of the scroll to a threshold to determine whether the view "covered with gauze." Setcontentscrim (drawable) can be used to set the picture of the gauze.

(3) The status bar gauze (status bar scrim): Depending on whether the scroll position to a threshold to determine whether the status bar "cover gauze", you can use Setstatusbarscrim (drawable) to set gauze pictures, But it only works on lollipop devices.

(4) Parallax scrolling view (Parallax scrolling children): The child view can choose whether the current layout is "parallax" in the way to follow the scrolling. PS: In fact, this view is scrolling faster than other normal scrolling view speed a little bit slower. Set the layout parameter App:layout_collapsemode to parallax

(5) fixed the Child view position (Pinned position Children): The child view can choose whether to fix position in global space, which is very useful for toolbar, because when the layout is moving, You can toolbar a fixed position without being affected by the move. Set the App:layout_collapsemode as a pin.

Once you understand these concepts, let's look at the layout.

<?xml version= "1.0" encoding= "Utf-8"?> <android.support.design.widget.coordinatorlayout 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.appbarlayout Android:layout_width= "Match_parent" android:layout_height= "wrap_content" Android:theme= "@style ThemeOverlay.AppCompat.Dark.ActionBar "> <android.support.design.widget.collapsingtoolbarlayout android: Layout_width= "Match_parent" android:layout_height= "wrap_content" app:expandedtitlemarginend= "64DP" app: Expandedtitlemarginstart= "48DP" app:layout_scrollflags= "scroll|exituntilcollapsed" > <imageview android:id= " @+id/main.backdrop "android:layout_width=" wrap_content "android:layout_height=" 300DP "android:scaletype=" Centercrop "android:src=" @drawable/material_img "app:layout_collapsemode=" parallax "/> < Android.support.v7.wiDget. Toolbar android:id= "@+id/toolbar" android:layout_width= match_parent "android:layout_height="? android:attr/
 Actionbarsize "app:layout_collapsemode=" pin "/> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.nestedscrollview android: Layout_width= "Match_parent" android:layout_height= "wrap_content" android:paddingtop= "50DP" app:layout_behavior= "@ String/appbar_scrolling_view_behavior "> <textview android:layout_width=" match_parent "android:layout_height = "Wrap_content" android:text= "@string/my_txt" android:textsize= "20sp"/> </

 Android.support.v4.widget.nestedscrollview> </android.support.design.widget.CoordinatorLayout>

Read above all understand it, each unfamiliar attribute is said Oh, forget the words look back, a little explanation, the picture is set to have parallax sliding, toolbar set to fixed, in addition, Collapsingtoolbarlayout will be enlarged and reduced title, Let's see how it works.

If you want the status bar to be transparent in the drag process, add app:statusbarscrim= "@android: Color/transparent" in the collapsingtoolbarlayout. and call GetWindow (). Addflags (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS) in OnCreate to set the status bar to Transparent.

Offer source code, please consultation fee: Http://xiazai.jb51.net/201609/yuanma/CoordinateLayout (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.