Floatingactionbutton,textinputlayout,snackbar,tablayout use of new Android m controls

"Reprint Please specify Source: http://blog.csdn.net/feiduclear_up/article/details/46500865 csdn Ruins of the tree"

In the recent Google I/O conference, released a new version of Android M, seemingly starting from this version of Android is not in the digital name version.

At this I/O conference, Google has not changed much about Android, mainly modified before the Android L version. But at Google launch

Material design style, but also do a lot of style compatibility, such as V7 package of Recyclerview,cardview,palette, etc.

The I/O Conference also continued to improve the MD Design Support library, this time Google launched the Android design supporting library, full support

MD Design-style UI effect. The Design support library absorbs 8 new material design Components! Minimum support for Android

2.1, in fact, many components are on GitHub on the comparison of fire, just Google it officially, easy for developers to use. Today we will study

Floatingactionbutton,textinputlayout,snackbar,tablayout four kinds of controls.

Premise

To be able to use these material design components, you need to update the Extras support library in the latest SDK, such as:

PS: In the Kingdom of China, this update is required to turn over the wall or use agents, we have to find a way.

After the update, the following packages are introduced under the Build.gralde file:

‘com.android.support:design:22.2.0‘

Now we can start using the material design component! Come and see what's special about the new components!

Floatingactionbutton

As the name implies: This is a floating button. Let's Go! PS: There is no UI blog that hurts.

These are the Floatingactionbutton of three different effects. The XML layout code is as follows:

  <android.support.design.widget.FloatingActionButton            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/ic_discuss"             />

Since Floatingactionbutton is overriding ImageView, all Floatingactionbutton have all the properties of ImageView. In order to

Control the size of the Floatingactionbutton, background color, shadow depth, etc., we can control these effects by the following properties:

1. The size of the App:fabSize:FloatingActionButton, there are two assignments are "mini" and "normal", the default is "normal".
2. App:backgroundTint:FloatingActionButton background color, the default background color is the theme theme

<itemname="colorAccent">#ff0000</item>

Color, do not understand the children's shoes can refer to the android5.x new features of the toolbar and theme use: http://blog.csdn.net/feiduclear_up/article/details/46457433.
3. App:elevation:FloatingActionButton Shadow Depth, the default is shaded, if you think the default shadow depth is a bit large, you can change this property to modify the shadow depth.

The above three XML layout codes are as follows:

<linearlayout android:layout_width="Match_parent"android:layout_height="Wrap_content"android:orientation="Horizontal"> <android. Support. Design. Widgets. FloatingactionbuttonAndroid:id="@+id/btn"Android:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:src="@drawable/ic_discuss"App:fabsize="Mini"/> <android. Support. Design. Widgets. FloatingactionbuttonAndroid:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:src="@drawable/ic_discuss"/> <android. Support. Design. Widgets. FloatingactionbuttonAndroid:layout_width="Wrap_content"android:layout_height="Wrap_content"Android:src="@drawable/ic_discuss"App:backgroundtint="#000af4"App:fabsize="Normal"app:elevation="1DP"/> </LinearLayout>

Watch out.

1. You cannot change the background color of Floatingactionbutton by Android:background property, only by App:backgroundtint property Because Floatingactionbutton is inherited from the ImageView.

Textinputlayout

The control is used to editview the input box, and the main solution before EditView is to get the focus edit hint the property prompt disappears, which on one page

It is not good to have more than one editview input box, because it is likely that the user will not know the current editview after entering multiple EditView

What to enter. In order to solve this problem, Textinputlayout was born. Textinputlayout is inherited from the linearlayout capacity

EditView, so we need to include it within textinputlayout to be used, with the implication: Textinputlayout cannot single

Use it alone. Don't say much nonsense, first on AH:

The XML layout code is as follows:

 <android.support  .design  .widget   android:id= "@+id/textinput"  android:layout_width=
     
       "match_parent" 
      android:layout_height= "wrap_content"             > <edittext android:layout_width= "match_parent"  Android:layout_height= "wrap_content"  android:textcolor=" @android: Color/black "/> </android.support  .design  .widget  ;  

The code can also see Textinputlayout wrapped around EditView.

To achieve these results, we also need to add the following code:

FinalTextinputlayout inputlayout = Findview (r.id.textinput); Inputlayout.sethint ("Please enter your name:");        EditText EditText = Inputlayout.getedittext (); Edittext.addtextchangedlistener (NewTextwatcher () {@Override             Public void beforetextchanged(Charsequence S,intStartintCountintAfter) {}@Override             Public void ontextchanged(Charsequence S,intStartintBefore,intCount) {if(S.length () >4) {inputlayout.seterrorenabled (true); Inputlayout.seterror ("No more than 4 names in length"); }Else{inputlayout.seterrorenabled (false); }            }@Override             Public void aftertextchanged(Editable s) {            }        });

Textinputlayout not only allows EditView's cue to be displayed on the EditView, but also displays the error message under EditView.

The common methods of Textinputlayout are as follows:

1. Sethint (): Sets the prompt.
2. Getedittext (): Gets the EditView control in the Textinputlayout.
3. Seterrorenabled (): Sets whether an error message can be displayed.
4. SetError (): Sets the error message that pops up when the user enters an error.

Watch out.

1. Textinputlayout cannot be used alone, it needs to wrap EditView components.

"Reprint Please specify Source: http://blog.csdn.net/feiduclear_up/article/details/46500865 csdn Ruins of the tree"

Use of Snackbar

Snackbar provides a lightweight control between toast and Alertdialog, which makes it easy to provide prompt and action feedback for messages.

A lot of nonsense said, sister,:

The use of Snackbar is similar to a toast, and the calling code is as follows:

final Snackbar snackbar = Snackbar.make(inputLayout,"测试弹出提示",Snackbar.LENGTH_LONG);                snackbar.show();                snackbar.setAction("取消",new View.OnClickListener() {                    @Override                    publicvoidonClick(View v) {                        snackbar.dismiss();                    }                });

The first argument view can be any one of the view objects in the current parent layout. The following parameters are the same as the toast parameters. Snackbar can

Set the action behavior event, using the public Snackbar setaction (charsequence text, View.onclicklistener listener); You can also set multiple action behavior events for Snackbar. The font color of the action uses the following colors in the system theme by default

<itemname="colorAccent">#ff0000</item>

Of course you can change the action's font Color by code: Snackbar setactiontextcolor (int color);

Attention

1. Snackbar can set multiple action behavior events at the same time
2. Snackbar is ejected from the bottom of the entire interface.

Tablayout

Tabs tab, the effect is similar to the NetEase News client tab. In fact, there are many ways to achieve the effect of tabs tab, there are many good on GitHub

With the open source control, but this time Google officially, so that developers do not need to reference third-party libraries, it can be easily used. ：

The XML layout is as follows:

 <android.support.design.widget.TabLayout        android:id="@+id/tabs"    <!--Tab被选中字体的颜色-->        app:tabSelectedTextColor="@android:color/holo_blue_bright"    <!--Tab未被选中字体的颜色-->        app:tabTextColor="@android:color/black"    <!--Tab指示器下标的颜色-->        app:tabIndicatorColor="@android:color/holo_blue_bright"        android:layout_width="match_parent"        android:layout_height="wrap_content" />

There are three commonly used properties:

1. App:tabSelectedTextColor:Tab the color of the selected font
2. App:tabTextColor:Tab Color of unselected fonts
3. Color of the APP:TABINDICATORCOLOR:TAB indicator subscript

Tablayout common methods are as follows:
-AddTab (tablayout.tab tab, int position, Boolean setselected) Add tab to layout
-AddTab (Tablayout.tab Tab, Boolean setselected) ibid.
-AddTab (Tablayout.tab Tab) Ibid.
-Gettabat (int index) Get tab
-Gettabcount () Gets the total number of tabs
-gettabgravity () Get tab Gravity
-Gettabmode () Get tab mode
-Gettabtextcolors () Gets the color of the tab text
-NewTab () Create a new tab
-Removealltabs () Remove All tab
-RemoveTab (Tablayout.tab tab) removes the specified tab
-Removetabat (int position) Remove tab at the specified position
-Setontabselectedlistener (Tablayout.ontabselectedlistener ontabselectedlistener) Add Selection listener for each tab
-Setscrollposition (int position, float positionoffset, Boolean updateselectedtext) set scroll position
-settabgravity (int gravity) settings gravity
-Settabmode (int mode) set mode, there are two values: tablayout.mode_scrollable and tablayout.mode_fixed indicate when the tab content exceeds the width of the screen to support horizontal horizontal sliding, The first one supports sliding, the second is not supported, and horizontal swipe is not supported by default.
-Settabtextcolors (colorstatelist textcolor) sets the color of the tab text
-Settabtextcolors (int normalcolor, int selectedcolor) Set tab text color default selected
-Settabsfrompageradapter (Pageradapter adapter) settings Pageradapter
-Setupwithviewpager (Viewpager viewpager) and Viewpager linkage

General tablayout are common use with Viewpager to play its advantage, now we look at the code to see the use of the above methods.

Viewpager = Findview (R. ID. Viewpager);Tablayout = Findview (R. ID. Tabs);list<string> tabList = new Arraylist<> ();TabList. Add("TAB1");TabList. Add("TAB2");TabList. Add("TAB3");Tablayout. Settabmode(Tablayout. MODE_fixed);//Set tab mode, current system default modeTablayout. AddTab(Tablayout. NewTab(). SetText(tabList. Get(0)));//Add Tab tabTablayout. AddTab(Tablayout. NewTab(). SetText(tabList. Get(1)));Tablayout. AddTab(Tablayout. NewTab(). SetText(tabList. Get(2)));list<fragment> fragmentlist = new Arraylist<> ();for (int i =0; i < tablist.size (); i++) {Fragment f1 = new Tabfragment ();Bundle bundle = new Bundle ();Bundle. putstring("Content","http://blog.csdn.net/feiduclear_up \ Csdn The ruins of the tree.");F1. Setarguments(bundle);Fragmentlist. Add(F1);} tabfragmentadapter Fragmentadapter = new Tabfragmentadapter (Getsupportfragmentmanager (), FragmentList, TabList);Viewpager. Setadapter(Fragmentadapter);//set adapter for ViewpagerTablayout. Setupwithviewpager(Viewpager);//Associate tablayout with Viewpager. Tablayout. Settabsfrompageradapter(Fragmentadapter);//set Adapter for tabs

Do not explain, there are comments, to see the above code Tabfragmentadapter and tabfragment implementation is as follows:

Tabfragmentadapter

 Public  class tabfragmentadapter extends fragmentstatepageradapter {    PrivateList<fragment> mfragments;PrivateList<string> Mtitles; Public Tabfragmentadapter(Fragmentmanager FM, list<fragment> fragments, list<string> titles) {Super(FM);        Mfragments = fragments;    Mtitles = titles; }@Override     PublicFragmentGetItem(intPosition) {returnMfragments.get (position); }@Override     Public int GetCount() {returnMfragments.size (); }@Override     PublicCharsequenceGetpagetitle(intPosition) {returnMtitles.get (position); }}

Tabfragment

 Public  class tabfragment extends Fragment {    PrivateString content;PrivateView view;@Override     PublicViewOncreateview(Layoutinflater inflater, @Nullable viewgroup container, @Nullable Bundle savedinstancestate) {view = Inflater.inflate (R.layout.item, container,false);returnView }@Override     Public void onactivitycreated(@Nullable Bundle savedinstancestate) {Super. onactivitycreated (Savedinstancestate); Content = Getarguments (). GetString ("Content");        TextView tvcontent = (TextView) View.findviewbyid (r.id.tv_tab_content); Tvcontent.settext (content +""); }}

Note : In this case, when the content in tabs exceeds the width of the phone screen, why does the tab in the Tabs tab not support horizontal swipe? In fact, Tablayout is to support horizontal sliding, just need you to add the following line in the code:

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置tab模式

Confined to a bit of length, the next coordinatorlayout, Collapsingtoolbarlayout and Appbarlayout,navigationview will

Learn in the next blog post. The above code, if in doubt, welcome to discuss together.

Source Address Https://github.com/xujinping/AndroidDesignLibrary/tree/master

Floatingactionbutton,textinputlayout,snackbar,tablayout use of new Android m controls