Android Coordinatorlayout Introduction

Android Coordinatorlayout Introduction

• • Coordinatorlayout
  • View knows how to behave

At the 2015 developer Conference of the Year I/O , Google a new library was introduced to Android Design Support Library help developers use the app meterial design . It contains a number of important meterial design building blocks, and it supports API 7 the above versions. If you miss the conference, please open the Google Developer site to see the information about it: the portal.

Coordinatorlayout

Among all the good things in the library, what looks really interesting is CoordinatorLayout that it's a FrameLayout . From its name, you may have guessed that the power of this layout is to reconcile dependencies between child elements.

All you need to do is to include in the View CoordinatorLayout . Let's go straight into the code. The following example is very simple and it contains the Floating Action Button one that will trigger when clicked Snackbar .

First, introduce the library in the gradle file meterial design :

compile ‘com.android.support:design:22.2.0‘

Next, to Activity create a simple layout file:

　　

<?xml version= "1.0" encoding= "Utf-8"?> <android.support.design.widget.coordinatorlayout     xmlns: Android= "http://schemas.android.com/apk/res/android"     android:layout_width= "Match_parent"     android: layout_height= "Match_parent" >      <android.support.design.widget.floatingactionbutton         android:id= "@+ Id/fab "         android:layout_width=" wrap_content "         android:layout_height=" wrap_content "         android:layout_ Gravity= "End|bottom"         android:layout_margin= "16DP"         android:src= "@drawable/ic_done"/>  

　　

　　also need to add MainActivity :

　　

public class Mainactivity extends Appcompatactivity {    @Override     protected void OnCreate (Bundle Savedinstancestate) {     super.oncreate (savedinstancestate);     Setcontentview (r.layout.activity_main);     Findviewbyid (R.id.fab). Setonclicklistener (New View.onclicklistener () {       @Override public       void OnClick (View View) {         Snackbar.make (view, "Hello Snackbar", Snackbar.length_long). Show ();       }     );   

　　

Effect display

Very cool, isn't it?

But what if you want to use other FAB implementations? Since Support Library there are FAB no menu options in the implementation, let's try out Base the open Source Library implemented by the developer FAB .

compile ‘com.getbase:floatingactionbutton:1.9.1‘

　　

<?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" >      < Com.getbase.floatingactionbutton.FloatingActionButton         android:id= "@+id/fab"         android:layout_width= "wrap _content "         android:layout_height=" wrap_content "         android:layout_gravity=" End|bottom "         android:layout _margin= "16DP"         app:fab_icon= "@drawable/ic_done"/>  

　　

Open Source Gallery Effect display

, in which case it CoordinatorLayout does not work correctly. This is because View there is no default CoordinatorLayout.Behavior implementation. The existing solution is to wait for someone to refine it.

Or, we can write a custom behavior implementation for this component. :D

View knows how to behave

This framework is really powerful and view you don't need to get this when you want to customize the behavior view . You can also change any view of the default behaviors.

First, you need to inherit the Behavior class:

public class FloatingActionButtonBehavior extends CoordinatorLayout.Behavior<FloatingActionButton>

In order for this class to populate xml the contents, we need to set a constructor method with two parameters: Context and AttributeSet .

public FloatingActionButtonBehavior(Context context, AttributeSet attrs) {}

The next step is to override the layoutDependsOn() method, and if we want to listen for changes, let the method return true . In the example, we just want to listen Snackbar for changes to the object.

@Override public Boolean Layoutdependson (coordinatorlayout parent, Floatingactionbutton Child, View dependency) {   

　

now, let's inherit the realization of real behavior. WhenCoordinatorLayoutin thevieweach time a change occurs,onDependentViewChangedmethod will be called. In this method, we are going to read the currentSnackbarthe state. WhenSnackbarShow when we want to putFABalso moved up. To achieve such a goal, we need toFABof theYcoordinates are set toSnackbarthe height. To get the correct value of the conversion, we need to transform theYSubtract from ValueSnackbarthe height.

@Override public Boolean ondependentviewchanged (coordinatorlayout parent, Floatingactionbutton Child, View dependency) {   Float translationy = math.min (0, Dependency.gettranslationy ()-dependency.getheight ());   Child.settranslationy (Translationy);   

　　

The last step is to tell CoordinatorLayout Use FloatingActionButtonBeahvior :

<?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" >      < Com.getbase.floatingactionbutton.FloatingActionButton         android:id= "@+id/fab"         android:layout_width= "wrap _content "         android:layout_height=" wrap_content "         android:layout_gravity=" End|bottom "         android:layout_ Margin= "16DP"         app:layout_behavior= "Com.getbase.coordinatorlayoutdemo.FloatingActionButtonBehavior"         app:fab_icon= "@drawable/ic_done"/>  

　　

In the end, the problem was fixed:

Effect display after problem correction

If you want to view define the default behavior, just add the annotations on your Behavior class DefaultBehavior .

The address of the above code GitHub is:https://github.com/ggajews/coordinatorlayoutwithfabdemo .

I wish you a happy coding!

Android Coordinatorlayout Introduction