Android Bottom Sheet Detailed

Recently Android updated the support library, the version to 23.2, from the official blog we can still see a few exciting features, such as the night mode, Bottomsheet. Let's introduce this bottom Sheet today. This may bring convenience to some of the effects we need to develop.

Although here we are going to use a full blog time to introduce it, but this thing is too simple to use and too convenient, this also thanks to the introduction of behavior mechanism, I remember in the blog source see Coordinatorlayout.behavior Principle said, Behavior is CoordinatorLayout actually
Core content, behavior allows us to achieve some effect without the use of custom controls, Bottom sheet is achieved through behavior.

First we look at an effect,

The implementation of this effect is very simple, and even basically do not need Java code, we only need to give us the following this sliding view of a behavior on OK, the behavior is specified as android.support.design.widget.BottomSheetBehavior can achieve this effect, is not very simple? Let's take a look at the code.

<?xml version= "1.0" encoding= "Utf-8"?><android.support.design.widget.coordinatorlayout  Span class= "Hljs-attribute" >xmlns:android  = "http://schemas.android.com/apk/res/ Android " xmlns:app  ="/http " Schemas.android.com/apk/res-auto " xmlns:tools  =     "Http://schemas.android.com/tools"  android:layout_width  = "match_parent"  android:layout_height  = "match_parent"  android:fitssystemwindows  =" true " tools:context  = " Org.loader.bottomsheetmodule.MainActivity ";     <android.support.design.widget.AppBarLayoutandroid:layout_width="Match_parent"  android:layout_height="Wrap_content">                        <android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android: Layout_width="Match_parent"android:layout_height="? attr/actionbarsize" / >                                        </android.support.design.widget.AppBarLayout>    <linearlayout  android: Layout_width  = "wrap_content"  android:o Rientation  = "vertical"  android:layout_ Gravity  = "center_vertical"  android:layout_ Height  = "wrap_content" ;         <button  android:layout_g ravity  = "center_horizontal"  android:onclick< /span>= "Intro"  android:layout_width  = "match_parent"  android:layout_height  =" wrap_content " android:text  =" Introduction "/>         <buttonandroid:layout_gravity="Center_horizontal"android:onclick= "SELECT" android:layout_width="Match_parent"android:layout_height="Wrap_content" Android:text="select"/>                                                                </linearlayout>    <android.support.v4.widget.nestedscrollview  android:id  = "@+id/scroll"  android:layout_width  =" match_parent " android:layout_height  =" wrap_content " app:layout_behavior  =" Android.support.design.widget.BottomSheetBehavior ";         <linearlayout  android:la Yout_width  = "match_parent"  android:layout_he ight  = "wrap_content"  android:orientation= "vertical" ;             <TextViewandroid:layout_width="Match_parent"android:layout_height= "Wrap_content" android:padding="50DP"android:background="@color/colorprimary"Android : Text="People do not die in desperate situation, but often planted at the crossroads"android:textcolor="@android: Color/white"/>                                                                                                         </linearlayout>    </android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

Did you see NestedScrollView the behavior? We just specified his value, and the rest of the place was nothing special.
Although we do not need any Java code can be implemented, but here we still want to be able to control it through the button, sliding from the bottom is too hidden after all, few people can guess.

publicvoidintro(View view) {    BottomSheetBehavior behavior = BottomSheetBehavior.from(findViewById(R.id.scroll));    if(behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {        behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);    }else {        behavior.setState(BottomSheetBehavior.STATE_EXPANDED);    }}

The code is also very simple, first we NestedScrollView get to his behavior from the top, because we know is BottomSheetBehavior , so here directly to the dead BottomSheetBehavior.from method to obtain, and then through the getState method to determine the current state, if it is the state of the expansion, we let it shrink up, instead, expand it.

We can also give BottomSheetBehavior a callback to listen to the state,

behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {    @Override    publicvoidonStateChangedint newState) {    }    @Override    publicvoidonSlidefloat slideOffset) {    }});

This is really simple, but have not found its users are not so wide, and then we will introduce a user relatively broad point, the BottomSheetDialog dialog can achieve what effect? For example, now we are in the mall related app, When we click on the purchase, we need to select the properties of the product to buy, we may have a pop-up at the bottom Popupwindow to achieve, now, we can take advantage BottomSheetDialog of the easy implementation of this feature. Let's go ahead and look at the effect.

Here is a list of dialog, when we click on the button display, it will appear a part, when we drag it, he will fill the screen, and now we look at how the code is implemented,

 Public void Select(View view) {Recyclerview Recyclerview = (recyclerview) layoutinflater.from ( This). Inflate (R.layout.list,NULL); Recyclerview.setitemanimator (NewDefaultitemanimator ()); Recyclerview.setlayoutmanager (NewLinearlayoutmanager ( This, Linearlayoutmanager.vertical,false)); Adapter Adapter =NewAdapter (); Recyclerview.setadapter (adapter);FinalBottomsheetdialog dialog =NewBottomsheetdialog ( This);    Dialog.setcontentview (Recyclerview);    Dialog.show (); Adapter.setonitemclicklistener (NewAdapter.onitemclicklistener () {@Override         Public void Onitemclick(intPosition, String text) {Toast.maketext (mainactivity. This, text, Toast.length_short). Show ();        Dialog.dismiss (); }    });}StaticClass Adapter extends Recyclerview.adapter<adapter.holder> {PrivateOnitemclicklistener Mitemclicklistener; Public void Setonitemclicklistener(Onitemclicklistener Li)    {Mitemclicklistener = Li; }@Override     PublicAdapter.holderOncreateviewholder(ViewGroup parent,intViewType) {View item = Layoutinflater.from (Parent.getcontext ()). Inflate (R.layout.item, parent,false);return NewHolder (item); }@Override     Public void Onbindviewholder(FinalAdapter.holder Holder,intPosition) {Holder.tv.setText ("Item"+ position);if(Mitemclicklistener! =NULL) {Holder.itemView.setOnClickListener (NewView.onclicklistener () {@Override                 Public void OnClick(View v) {Mitemclicklistener.onitemclick (Holder.getlayoutposition (), holder.tv.getTe                XT (). toString ());        }            }); }    }@Override     Public int GetItemCount() {return  -; } class Holder extends Recyclerview.viewholder {TextView TV; Public Holder(View Itemview) {Super(Itemview);        TV = (TextView) Itemview.findviewbyid (R.id.text); }} interface Onitemclicklistener {voidOnitemclick (intPosition, String text); }}

Do not look at the code is long, mainly adapter code! And it doesn't have any difficulty! Let's look at the Select method, which we've LayoutInflater loaded with a layout that's simple, that's one RecyclerView . The next few lines of code are configuration RecyclerView and it's Adapter , I believe we are already familiar with it. The key is to continue down the 3 lines of code, first we new one BottomSheetDialog , and then through setContentView the method to set the layout of our inflate into this dialog, Finally call Dialog's Show method will dialog display, this effect is so easy to implement, the dialog feature of the code we did not write a line, Android has already done it for us. Finally, we have hidden the dialog in the item's Click event.

Well, today this blog is very simple, mainly the latest support package in this bottomSheet use, after everyone in the project can be more a way to achieve dialog, try it quickly.

Android Bottom Sheet Detailed