Tips for using coordinatorlayout in Android 5.0

Coordinatorlayout implements a variety of rolling effects mentioned in material design. At present, this framework provides several methods to work without writing animation code. These effects include:

*Let the floating operation button slide up and down to make room for the snackBar* Expand or shrink the toolbar or header to make more space in the main content area* Controls which view should be expanded or contracted, and its display size scale, including parallax scrolling effect animation.

Floating operation button and snackBar

Coordinatorlayout can be used to coordinate with the layout of floating operation buttons_ Anchor and layout_ The gravity attribute creates a floating effect. When the snackBar is displayed, it often appears at the bottom of the screen. In order to make room for the snackBar, the float operation button needs to move upward.

As long as the coordinatorlayout is used as the basic layout, the upward movement animation will be generated automatically. The floating operation button has a default behavior to detect the addition of snackBar and make the button move up and equal to the height of snackBar.

Expansion and contraction of toolbar

First of all, you need to make sure that you don't use the outdated actionbar and use the toolbar as the actionbar. Similarly, you also need coordinatorlayout as the main layout container. We must use a container layout: appbarlayout to have the toolbar respond to scrolling events. Respond to scrolling events

Then, we need to define the relationship between appbarlayout and scrolling view. Add app: layout on recyclerview or any view that supports nested scrolling, such as nestedscrollview_ behavior。 The support library contains a special string resource @ string / AppBar_ scrolling_ view_ Behavior, which is similar to appbarlayout Scrollingviewbehavior is matched to inform appbarlayout when a scrolling event occurs in this special view. This behavior needs to be set on the view that triggers the event (scrolling). Note: according to the official Google document, appbarlayout must be the first child view nested in coordinatorlayout.

For the view defined in appbarlayout, as long as app: layout is set_ The scrollflags property can be triggered when the recyclerview scrolling event occurs: when the coordinatorlayout finds that this property is defined in the recyclerview, it will search other views it contains to see if any views are associated with this behavior. AppBarLayout. Scrollingviewbehavior describes the dependency between recyclerview and appbarlayout. Any scrolling event of recyclerview will trigger the change of view in appbarlayout or appbarlayout.

app:layout_ Scrollflags is a very important attribute. There are five main values in it. I will explain them respectively below:

1. Scroll indicates that collapsingtoolbarlayout can be scrolled (if it is not set, the ImageView of the head cannot be folded). If you want to scroll all views out of the screen, you must set a flag. If you do not set a flag view, it will be fixed at the top of the screen. 2 Enteralways means that the scroll control at the bottom will display the head as long as it scrolls down. When setting this flag, the downward scrolling will make the view visible. When Scrollview scrolls down, the view will scroll down directly. Regardless of whether the Scrollview is scrolling. 3. Enteralwaysclapsed means that when the bottom scroll control scrolls to the top, the head will be displayed. When Scrollview slides up, the view first "takes away" the sliding event, and the view will perform the sliding until the minimum sliding height, and then "return" the sliding event to make the Scrollview slide up. 4. Exituntilcollapsed means that when the head is folded to the minimum height (the height of the toolbar), it will not be folded. It is an additional option of enterways. It is generally used together with enterways. It means that when the view "appears" down, the first is the enterways 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 and no longer slides, the view continues to slide down until it ends at the top of the view. 5. Snap means that if the sliding stops during the sliding process, the head will be folded nearby (either return to the original state or fold into a toolbar). Remember, put the view with scroll flag in front, so that the retracted view can exit normally, and the fixed view will remain on the top.

Create folding effect

If we want to create the folding effect of toolbar, we must put the toolbar in collapsingtoolbarlayout:

Now the effect is:

Usually, we set the title of the toolbar, but now we need to set the title on the collapsing toolbar layout instead of the toolbar.

CollapsingToolbarLayout collapsingToolbar =(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbar. setTitle("Title");

Creating parallax effects collapsingtoolbarlayout

Collapsing toolbar layout also allows us to make more advanced animation, such as putting an ImageView in it and fading out when it folds. At the same time, the height of the title will change as the user scrolls.

Collapsingtoolbarlayout is used to provide a collapsible toolbar, which inherits from FrameLayout and sets layout for it_ Scrollflags, which can control the response layout of controls (such as ImageView and toolbar) contained in collapsingtoolbarlayout_ The behavior event makes the corresponding scrollflags scroll event (remove the screen or fix it at the top of the screen).

Using collapsingtoolbarlayout:

We set up an ImageView and a toolbar in collapsingtoolbarlayout. And put the collapsingtoolbarlayout into appbarlayout as a whole.

1. In collapsingtoolbarlayout:

Some properties are also set, which are briefly described as follows:

Contentscrim - sets the background color when the collapsingtoolbarlayout is fully collapsed (collapsed).

Expandedtitlemarginstart - sets the distance that the title is filled to the left when it is expanded (when it has not been contracted).

2. In the ImageView control:

We set:

layout_ Collapsemode - has two values:

Pin - when set to this mode, the toolbar can still remain on the screen when the collapsingtoolbarlayout is fully shrunk.

Parallax - when this mode is set, the views (such as ImageView) in collapsingtoolbarlayout can also scroll at the same time to achieve parallax scrolling effect. It is usually used in combination with layout_collapseparallaxmultiplier (set parallax factor).

layout_ Collapseparallaxmultiplier - sets the parallax scrolling factor with a value of 0 ~ 1.

3. In the toolbar control:

We set the layout_ Collapsemode: pin.

To sum up, when layout is set_ The control of behavior responds to the layout in collapsingtoolbarlayout_ When the scrollflags event occurs, ImageView will scroll up and remove the screen with parallax effect. When folding starts, the background color of collapsingtoolbarlayout (that is, the background color of the toolbar) will change to the background color we set, and the toolbar will always be fixed at the top.

[note]: when using collapsingtoolbarlayout, you must set the title to collapsingtoolbarlayout, which will not be displayed on the toolbar. Namely:

mCollapsingToolbarLayout. setTitle(” “);

Change the font color of the title:

Title Color when expanding: mcollapsingtoolbarlayout setExpandedTitleColor();

The color of the title displayed on the toolbar after shrinking: mcollapsingtoolbarlayout setCollapsedTitleTextColor();

In fact, the collapsingtoolbarlayout has helped us with this excessive color change. It will automatically transition. For example, we set the contracted title color to green.

Coordinatorlayout and collapsingtoolbarlayout: collapsingtoolbarlayout provides a collapsible toolbar. The ViewGroup that repackages the toolbar inherits the fragmentlayout. It needs to be placed in the appbarlayout layout layout and serves as a direct child view of appbarlayout. Collapsingtoolbarlayout mainly includes several functions: ①: folding 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 through collapsingtoolbarlayout.

② : 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) When the toolbar is folded to the top to fix the background, you can call the setcontentscrim (drawable) method to change the background or use app: contentscrim = "? In the property? Attr / colorprimary "to change the background.

③ : 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) and call the method setstatusbarscrim (, l) Set the background of the status bar, but it can only work on lollipop devices. This can only work on systems above Android 5.0.

④ Ollapsemode: the folding mode of the sub view. There are two settings in the sub view. To see the effect clearly, you can set a background color (1) "pin" for the toolbar: fixed mode, which is finally fixed at the top when folding; (2) "Parallax": parallax mode, which will have a parallax folding effect when folding. We can use the attribute app: Layout in the layout_ Collapsemode = "parallax" to change:

(1) : 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.

(2) Parallax scrolling children: the subview can select whether to follow the scrolling in the way of "parallax" in the current layout. (: 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, and the range of values is [0.0,1.0]. The larger the value, the larger the value.

app:layout_ Collapsemode = "parallax" indicates that the folding of ImageView is out of sync with the folding of collapsingtoolbarlayout. What kind of out of sync is this out of sync? There is another parameter to set asynchronous parameters, as follows: app: Layout_ Collapseparallelaxmultiplier = "0.5" indicates the visual multiplier. The value of this value is 0 ~ 1. The larger the value, the greater the visual difference (if the value here is 0, the top of the ImageView will be hidden slowly and the bottom will not move during the head folding process. If the value here is 1, the top of the ImageView will not understand and the bottom will be hidden slowly. If the value here is between 0 and 1, the top and bottom of the ImageView will be hidden during the folding process, but the speed of the head and bottom will be different (the volume speed is related to the visual multiplier) app: layout_collapsemode has another value, which is pin. This property indicates that the control will be placed at the head of the page when the folding is completed

Final code:

Java code

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.