Android Support Library CoordinatorLayout Framework Introduction and Tutorial

Android Support Library CoordinatorLayout Framework Introduction and Tutorial 1. Introduction CoordinatorLayout is a layout container in Android Support Library, which is mainly used to achieve complex user interface interaction effects.It can contain various kinds of views as a parent container. By setting the dependency relationship and coordination behavior between each sub -view, it can achieve a user interface with collaborative effects. Tutorial 1. Import SUPPORT LIBRARY First, add dependencies to the project's Build.gradle file and import the support library.Add the following code to Dependencies: implementation 'com.android.support:design:28.0.0' 2. Create layout documents In the XML layout file, use COORDINATORLAYOUT as the root layout.Other sub -views can be added according to actual needs, such as AppBarlayout, NestedScrollView, etc.The following is a simple example: <?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"> <!-Add other sub-view-> </android.support.design.widget.CoordinatorLayout> 3. Set up dependence and coordination behavior Using the layout characteristics of CoordinatorLayout, you can set the dependent relationship and coordinated behavior between sub -views.Here are some commonly used attributes: -Layout_anchor: Set the anchor point view dependent on the sub -view.For example, a floating button can be set to an anchor point of a text input box. When the text input box is obtained, the floating button will hide or change the position. -Layout_anchorgravity: Set the gravity attribute of the anchor view.It is used to specify a position relative to anchor points, such as upper left and lower right. -Layout_Behavior: Set the coordinated behavior of the sub -view.CoordinatorLayout supports many built -in Behavior, such as AppBarlayout's rolling behavior.You can also customize Behavior to achieve specific effects. The following is an example. Setting a dependency between TOOLBAR and a FloatingActionButton: <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_plus" app:layout_anchor="@id/toolbar" app:layout_anchorGravity="bottom|right|end" /> 4. Custom Behavior If you want to implement specific effects that are not provided in CoordinatorLayout, you can customize Behavior.Custom Behavior needs to inherit the necessary methods from coordinatorLayout.behavior.The following is a simple example that realizes the effect of a sub -view with the rolling of NestedScrollView and the effect of gradient: public class ScrollFadeBehavior extends CoordinatorLayout.Behavior<View> { @Override public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) { return dependency instanceof NestedScrollView; } @Override public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) { // Based on the rolling changes of NestedScrollView, the transparency of the calculatory view float translateY = Math.abs(dependency.getTranslationY()); float alpha = 1 - translateY / dependency.getHeight(); // Set transparency child.setAlpha(alpha); return true; } } Apply the custom Behavior into the sub -view: <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="200dp" android:src="@drawable/bg_image" app:layout_behavior="com.example.ScrollFadeBehavior" /> The above is the introduction and use tutorial of CoordinatorLayout.By setting up dependence and coordination behaviors, a variety of complex user interface interaction effects can be achieved.