The behavior of Material design series realizes the effect of the Payment Cipher window and commodity attribute selection _android

Today's effect in Alipay, Taobao, Beijing-east and other electric business app is very common. For example, Alipay input password bomb windows, shopping malls when the choice of commodity properties, from the following floating up a popupwindow, so today we bring you to achieve these two effects with behavior, the result you will find simply a line of code.

Summary of the current app:
1. Imitation Alipay pop-up input payment Password window.
2. Imitation Taobao/Cat pop-up product property selection box.
3. Know the top and bottom sliding hide toolbar and navigationbar.
4...

Series Blog:
1. Material Design Series, Behavior Bottomsheetbehavior and Bottomsheetdialog
2. Material Design Series, Behavior Swipedismissbehavior
3. Material Design Series, custom behavior slide Show Top button
4. Material Design Series, custom behavior for Android know home
5. Material Design Series, custom behavior support all View

Effect Preview

Citation

In my technical group there are small partners to discuss behavior, I also went to play, I also wrote a series of Behavior blog. Check behavior then Ctrol + t after found a behavior implementation class: Bottomsheetbehavior, I went to the Android official online turned down the data, a turn to find a surprise ah, the following will be introduced to the surprise to everyone.

More articles please google/Baidu search my Name: Zhangjie, ranked first is me.

Bottomsheetbehavior How to play (bottom hidden and displayed)

Play this thing, first behavior as the coordinatorlayout of the layoutparams (reason to read the explanation), so coordinatorlayout is absolutely not less, first to light the entire layout:

<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/apptheme.appbaroverlay" > < Android.support.v7.widget.Toolbar android:id= "@+id/toolbar" android:layout_width= "Match_parent" Android:layout_ height= "Attr/actionbarsize" app:popuptheme= "@style/apptheme.popupoverlay"/> </ android.support.design.widget.appbarlayout> <linearlayout android:layout_width= "Match_parent" Android: layout_height= "Match_parent" android:layout_above= "@+id/tab_layout" android:gravity= "center" android:orientation= "Vertical" app:layout_behavior= "@string/appbar_scrolling_view_behavior" > <button android:id= "@+id/btn_ Bottom_sheet_control "AndrOid:layout_width= "Match_parent" android:layout_height= "wrap_content" android:text= "sheet Show/Hide"/> </LinearLa yout> <linearlayout android:id= "@+id/tab_layout android:layout_width=" match_parent "android:layout_height=" ? actionbarsize "android:layout_alignparentbottom=" true "android:background=" @android: Color/holo_purple "app: Layout_behavior= "@string/bottom_sheet_behavior" > <button android:layout_width= "0DP" android:layout_height= " Match_parent "android:layout_weight=" 1 "android:text=" first "/> <button android:layout_width=" 0DP "Android:la 
  yout_height= "Match_parent" android:layout_weight= "1" android:text= "second"/> <button android:layout_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" android:text= "third"/> <button T_width= "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" android:text= "four"/> </LinearLay Out> </android.support.design.widgeT.coordinatorlayout>

 

The introduction, the page can only see toolbar and a Button:sheet show/hide, and then android:id= "@+id/tab_layout" This layout is horizontal, give it set up a Behavior:app:layout_ Behavior= "@string/bottom_sheet_behavior", tested and found that if Tab_layout is not set to Bottomsheetbehavior, it floats at the top of the entire page and underneath the toolbar. Set Bottomsheetbehavior it will be bottomsheetbehavior automatically moved to the bottom of the page, so on the page is not see android:id= "@+id/tab_layout" this layout.

The page draws well, does it automatically switch, how to control it's open and close? So let's take a look at the real face of the product, and after I look at the official Android API, Bottomsheetbehavior has a static method Bottomsheetbehavior.from (View), will return the bottomsheetbehavior of this view reference:

public static <v extends View> bottomsheetbehavior<v> from (V view) {
 Viewgroup.layoutparams params = view . Getlayoutparams ();
 if (!) ( params instanceof Coordinatorlayout.layoutparams)) {
 throw new Exception ("The view isn't a child of coordinatorlayout ");
 }
 Coordinatorlayout.behavior Behavior = Params.getbehavior ();
 if (!) ( Behavior instanceof Bottomsheetbehavior)) {
 throw new IllegalArgumentException ("...");
 }
 Return (bottomsheetbehavior<v>) behavior;
}

This method checks whether the view is a coordinatorlayout view, and if so, gets to the behavior of the view, So you should also understand why I started by saying behavior as the layoutparams of Coordinatorlayout view.

Let's see what we can do with the goods after we get this one:

Private Bottomsheetbehavior Mbottomsheetbehavior;

@Override
protected void onCreate (@Nullable Bundle savedinstancestate) {
 super.oncreate (savedinstancestate) ;
 Setcontentview (r.layout.bsbehavior_activity);
 Toolbar Toolbar = (Toolbar) Findviewbyid (R.id.toolbar);
 Setsupportactionbar (toolbar);
 Getsupportactionbar (). Setdisplayhomeasupenabled (true);

 Findviewbyid (R.id.btn_bottom_sheet_control). Setonclicklistener (Onclicklistener);
 Get this tab_layout corresponding bottomsheetbehavior
 mbottomsheetbehavior = Bottomsheetbehavior.from (Findviewbyid ( r.id.tab_layout));
}

Findviewbyid (R.id.btn_bottom_sheet_control). Setonclicklistener (Onclicklistener); is to set up a monitor for the button on the page that you just said, We use this button to control the display and concealment of tab_layout.

I've found a way to get to the state of the view that it's attached to: mbottomsheetbehavior.getstate (), flipping through the source and discovering that its return value has the following:

/**
 * The bottom sheet is dragging.
 * * Public
static final int state_dragging = 1;

/**
 * The bottom sheet is settling.
 * * Public
static final int state_settling = 2;

/**
 * The bottom sheet is expanded.
 * * Public
static final int state_expanded = 3;

/**
 * The bottom sheet is collapsed.
 * * Public
static final int state_collapsed = 4;

/**
 * The bottom sheet is hidden.
 * * Public
static final int state_hidden = 5;

When I see state_expanded and state_collapsed, I understand its usage, is it unfolding and hiding? So we judge this state, if it is hidden, and if it is shown, hide it:

@Override public
void OnClick (View v) {
 if (v.getid () = = R.id.btn_bottom_sheet_control) {
 if ( Mbottomsheetbehavior.getstate () = = bottomsheetbehavior.state_expanded) {
  mbottomsheetbehavior.setstate ( bottomsheetbehavior.state_collapsed);
 } else if (mbottomsheetbehavior.getstate () = = bottomsheetbehavior.state_collapsed) {
  Mbottomsheetbehavior.setstate (bottomsheetbehavior.state_expanded);}}

Here, know that the home page of the bottom hidden and display also play, and then we look at the payment treasure Taobao under the window how to achieve.

Bottomsheetdialog How to play (shopping mall under a single Commodity properties selection window)

The discovery of this class is also found in the Android website search Bottomsheetbehavior, the first to see Bottomsheetdialog heart ecstasy, and then after I verified, it shows the effect and I guess the exact same ah, since it is a dialog, Then the usage should be different from the ordinary dialog.

And then I took the new one bottomsheetdialog:

Private Bottomsheetdialog Mbottomsheetdialog;

@Override
protected void onCreate (@Nullable Bundle savedinstancestate) {
 super.oncreate (savedinstancestate) ;
 ...

 Createbottomsheetdialog ();
}

private void Createbottomsheetdialog () {
 mbottomsheetdialog = new Bottomsheetdialog (this);
 View view = Layoutinflater.from (this). Inflate (R.layout.dialog_bottom_sheet, NULL, false);
 Mbottomsheetdialog.setcontentview (view);

 Recyclerview Recyclerview = (recyclerview) View.findviewbyid (R.id.recyclerview);
 ...
 Recyclerview.setadapter (adapter);
}

View inside is a recyclerview:

<?xml version= "1.0" encoding= "Utf-8"?> <android.support.v7.widget.recyclerview xmlns:android=
"http ://schemas.android.com/apk/res/android "
 android:id=" @+id/recyclerview "
 android:layout_width=" Match_ Parent "
 android:layout_height=" Match_parent "/>

Then use the following code to control its display and hide.

if (mbottomsheetdialog.isshowing ()) {
 Mbottomsheetdialog.dismiss ();
} else {
 mbottomsheetdialog.show () ;
}

When this dialog show came out and found that it showed half, well this effect is really good, so that we have reached the initial payment of the secret bullet window and Taobao/Cat product attributes choice. When we slide, it will expanded if there is something underneath it, and if it is a normal view (not Recyclerview, Nestedscrollview) will not continue to slide up, the following content will continue to follow, but also can slide down hide, You can also call dismiss and close.

Bottomsheetdialog's Pit of God

As a feeling programmer, I'm here to share with you the pits and solutions I've stepped on.

I find that when this dilaog is turned on and closed, it cannot be opened again with Dialog.show ().

I went to read the Bottomsheetdialog source code and found the following code:

 @Override public void Setcontentview (view view, Viewgroup.layoutparams params) {Super
. Setcontentview (Wrapinbottomsheet (0, view, params)); Private View wrapinbottomsheet (int layoutresid, view view, Viewgroup.layoutparams params) {final Coordinatorlayout Co
 ordinator = View.inflate (GetContext (), r.layout ..., null);
 Framelayout Bottomsheet = (framelayout) Coordinator.findviewbyid (R.id.design_bottom_sheet);
 Bottomsheetbehavior.from (Bottomsheet). Setbottomsheetcallback (Mbottomsheetcallback);
... return coordinator; Private Bottomsheetcallback Mbottomsheetcallback = new Bottomsheetcallback () {@Override public void onstatechanged (@
 Nonnull View bottomsheet, int newstate) {if (newstate = = Bottomsheetbehavior.state_hidden) {dismiss ();

@Override public void Onslide (@NonNull View bottomsheet, float slideoffset) {}}; 

That is, the system's Bottomsheetdialog is based on the Bottomsheetbehavior package, and it's judged that when we slide hidden view in Bottomsheetbehavior, The interior is set to a bottomsheetbehavior state of State_hidden, and then it closes the dialog for us, so when we call Dialog.show again () dialog no longer has this open status as Hide dialog.

Here's a question:
Why didn't Google provide us with the interface to set up our own bottomsheetcallback?

No relationship, look at the source found very simple, we do it ourselves, and after listening to the user to slide off the Bottomsheetdialog, we set the Bottomsheetbehavior state to Bottomsheetbehavior.state_ Collapsed, that is, half open state (bottomsheetbehavior.state_expanded for all open), according to the source I set the method provided under:

private void Setbehaviorcallback () {
 View view = Mbottomsheetdialog.getdelegate (). Findviewbyid ( Android.support.design.r.id.design_bottom_sheet);
 Final Bottomsheetbehavior Bottomsheetbehavior = bottomsheetbehavior.from (view);
 Bottomsheetbehavior.setbottomsheetcallback (New Bottomsheetbehavior.bottomsheetcallback () {
 @Override
 public void onstatechanged (@NonNull View bottomsheet, int newstate) {
  if (newstate = = Bottomsheetbehavior.state_ HIDDEN) {
  Mbottomsheetdialog.dismiss ();
  Bottomsheetbehavior.setstate (bottomsheetbehavior.state_collapsed);
  }
 @Override public
 void Onslide (@NonNull View bottomsheet, float slideoffset) {
 }}
 );

This solves the problem that the Bottomsheetdialog cannot be opened again after it is closed.

SOURCE Download: Http://xiazai.jb51.net/201609/yuanma/AndroidBehavior (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.