Android Development Notes (134) Coordinating layout coordinatorlayout

Coordinated layout coordinatorlayoutandroid the UI has been significantly improved since 5.0, and a major improvement has been the introduction of the Materialdesign Library, which is based on a coordinated layout coordinatorlayout, and almost all design controls rely on the fabric Council. The meaning of the coordination layout is that the internal controls are associated with each other's actions, such as when the position of a view changes, and the position of B view changes according to a certain rule, as if the piano has a concerto in general.

When using Coordinatorlayout, pay attention to the following points:
1, import the design library;
2, the root layout adopts android.support.design.widget.CoordinatorLayout;
3. Coordinatorlayout node to add namespace declaration xmlns:app= "Http://schemas.android.com/apk/res-auto";

Coordinatorlayout inherits from ViewGroup, and the implementation effect is similar to relativelayout, in order to specify the location of the child view throughout the page, there are several options:
1. Use the Layout_gravity property to specify how the child view is aligned inside the coordinatorlayout.
2. Use the App:layout_anchor and App:layout_anchorgravity properties to specify the position of the child view relative to the other child views. Where App:layout_anchor indicates which view is currently being referenced, app:layout_anchorgravity represents the alignment of this view relative to the reference.
3. Using the App:layout_behavior property, specify the behavior of the sub-view relative to the other view, and the position of the view will change accordingly when the other person's position changes.

The following is the use of anchor to define the child view orientation, where the red squares are located at the top right of the entire page:


Here is an example of a layout file that demonstrates the anchor way:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android"    xmlns:app= "Http://schemas.android.com/apk/res-auto"    android:id= "@+id/cl_main"    android:layout_ Width= "Match_parent"    android:layout_height= "match_parent" >    <linearlayout android:id=        "@+id/ll _main "        android:layout_width=" match_parent "        android:layout_height=" match_parent "        android:background = "#00ffff"        android:orientation= "vertical" >    </LinearLayout>    <textview        android: Layout_width= "100DP"        android:layout_height= "100DP"        android:layout_margin= "50DP"        app:layout_ Anchor= "@id/ll_main"        app:layout_anchorgravity= "top|right"        android:background= "#ff0000"/>    </android.support.design.widget.CoordinatorLayout>

The hover button Floatingactionbuttonfloatingactionbutton is a cool button from the design library that inherits from ImageButton, and provides the following additional features in addition to all the features of the image button:
1. Floatingactionbutton will hover over other views, even if other views are located behind Floatingactionbutton in the layout file;
2. The animation is played when the button is hidden and displayed, and the hide operation is to call the Hide method, and the display operation is to invoke the Show method;
3, Floatingactionbutton By default will be with the emergence or disappearance of snackbar dynamically adjust the position, the description of the Snackbar refer to the "Android Development note (127) To utilize the prompt window toast and snackbar";

Here is the animated effect of the hover button since it is hidden and displayed:


Here is the effect of the hover button moving up and down following the cue bar:


Here is an example of a layout file that demonstrates the hover button:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:app= "Http://schemas.android.com/apk/res-auto" android:id= "@+id/cl_main" android:layout_width= "match_parent "android:layout_height=" match_parent "> <linearlayout android:id=" @+id/ll_main "Android:layout_ Width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" > <but ton android:id= "@+id/btn_snackbar" android:layout_width= "Wrap_content" Android:layout_hei ght= "wrap_content" android:layout_gravity= "center" android:layout_margintop= "30DP" Androi            D:text= "Show simple cue Bar" android:textcolor= "@color/black" android:textsize= "17SP"/> <button Android:id= "@+id/btn_floating" android:layout_width= "Wrap_content" android:layout_height= "W Rap_content "Android:layout_gravity= "center" android:layout_margintop= "30DP" android:text= "Hide hover button" Android:textcol Or= "@color/black" android:textsize= "17sp"/> </LinearLayout> <android.support.design.widget.f Loatingactionbutton android:id= "@+id/fab_btn" android:layout_width= "80DP" android:layout_height= "80DP "Android:layout_margin=" 20DP "app:layout_anchor=" @id/ll_main "app:layout_anchorgravity=" bottom|right "Android:background=" @drawable/float_btn "/></android.support.design.widget.coordinatorlayout>

The bottom of the pop-up window bottomsheetbehaviordesign Library provides snackbar popup bar at the bottom of the page, but Snackbar really simple, if we want to pop up a set of menus at the bottom, Snackbar can do nothing. As a result, Android also provides bottomsheetbehavior to customize the bottom pop-up window, but it is not a new control, but to add a few new properties to the existing view, you can achieve the effect of pop-up and close.

The descriptions of these new properties are as follows:
App:behavior_hideable: Specifies whether the pop-up window is allowed to be hidden.
App:behavior_peekheight: Specifies the preview height of the pop-up window.
App:elevation: Specifies the elevation of the pop-up window.
App:layout_behavior: Specifies the behavior of the popup window, fixed the value "@string/bottom_sheet_behavior" as the bottom pop-up window.

The method that Bottomsheetbehavior uses in the code is as follows:
From: Gets the bottom popup behavior from the specified view.
GetState: Gets the state of the behavior.
SetState: Sets the state of the behavior. The value state_expanded is fully expanded, the value state_collapsed is collapsed, and the value State_hidden represents hidden.
Setpeekheight: Sets the preview height of the pop-up, which is the folding height set when the SetState value is state_collapsed.
Sethideable: Sets whether the pop-up window is allowed to be hidden.

Here is a demo of the bottom pop-up window:


Here is an example of the layout using the bottom pop-up window:

<android.support.design.widget.coordinatorlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:app= "Http://schemas.android.com/apk/res-auto" android:id= "@+id/cl_main" android:layout_width= "match_parent "android:layout_height=" match_parent "> <linearlayout android:id=" @+id/ll_main "Android:layout_ Width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" > <but ton android:id= "@+id/btn_bottomsheet" android:layout_width= "Wrap_content" Android:layout_ height= "wrap_content" android:layout_gravity= "center" android:layout_margintop= "30DP" and Roid:text= "show bottom pop-up window" android:textcolor= "@color/black" android:textsize= "17SP"/> </linearlayo ut> <linearlayout android:id= "@+id/ll_bottom" android:layout_width= "Match_parent" Android:la yout_height= "200DP" android:bAckground= "#ffaaaa" app:behavior_hideable= "true" app:behavior_peekheight= "50DP" app:elevation= "5DP"            App:layout_behavior= "@string/bottom_sheet_behavior" > <textview android:id= "@+id/tv_popup" Android:layout_width= "Match_parent" android:layout_height= "Wrap_content" android:gravity= "C    Enter "android:text=" at the bottom of the pop-up menu "android:textcolor=" #000000 "android:textsize=" 17SP "/> </LinearLayout></android.support.design.widget.CoordinatorLayout>

Here is an example code that uses the bottom pop-up window:

public class Bottomsheetactivity extends Appcompatactivity implements Onclicklistener {private Button btn_bottomsheet; Private bottomsheetbehavior behavior; @Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate ( Savedinstancestate); Setcontentview (r.layout.activity_bottomsheet); btn_bottomsheet = (Button) findViewById ( R.id.btn_bottomsheet); Btn_bottomsheet.setonclicklistener (this); View Ll_bottom = (view) Findviewbyid (r.id.ll_bottom) behavior = bottomsheetbehavior.from (ll_bottom);//if immediately setstate, Will error java.lang.NullPointerExceptionmHandler.postDelayed (Mstate, 50);} @Overridepublic void OnClick (View v) {if (V.getid () = = R.id.btn_bottomsheet) {if (behavior.getstate () = = Bottomsheetbehav Ior. State_hidden) {behavior.setstate (bottomsheetbehavior.state_collapsed); Btn_bottomsheet.settext ("Hide Bottom Popup");} else { Behavior.setstate (Bottomsheetbehavior.state_hidden); Btn_bottomsheet.settext ("Show bottom pop-up Window");}}} Private Handler Mhandler = new Handler ();p rivate Runnable mstate = new Runnable () {@Overridepublic void Run () {behavior.setstate (Bottomsheetbehavior.state_hidden);}};} 

Click here to download the project code for the coordinated layout used in this article


Click here to view the full list of Android development notes

Android Development Notes (134) Coordinating layout coordinatorlayout