Android Advanced--material Design new control tablayout (i)

Introduction

The Android Design Support library launched by Google I/O 2015 is exciting. The launch of Material design is really inspiring a lot of Android developers as well as the user's heart. The way Google used to feel about me was that he didn't care much about their UI (or the difference in aesthetics, Gmail couldn't bear to spit), but when material Design accompanying Android5.0 release, everything seems to have changed a kind of, Google seems to realize the importance of design and its past shortcomings, decided to catch up, not just to launch a set of material Design language also introduces a lot of new controls, and then we'll learn all the new controls under the Androiddesign Support Library, first from Android.support.design.widget.TabLayout begins.

I. Overview of Tablayout

tablayout, Slide indicator tab, inherited from Horizontalscrollview(note: It has nothing to do with Tablelayout), provides a horizontal scrollable layout to show Tabs. So with it, we don't have to go on our own. Define a tab bar that implements similar Actionbar (Tablayout provides a horizontal layout to display Tabs) is more compatible with previous early Tabhost Tablayout, uses simpler and more effective, and also comes with a small slider animation effect. If you are familiar with Tabpageindicator on GitHub, they are similar in principle. In the development of combining viewpager and fragment use, we can quickly build a tabs switch main interface, such as, know, NetEase news, Sina and so on.

Common properties and methods of Tablayout

Tablayout In addition to the properties common to Android controls (in the case of Android: namespace), there are unique properties defined (in the "app:" namespace, as in the form of App:tabmode), where only a subset of attributes and some methods (getter, The setter and the property are one by one corresponding).

Properties	Description
App:tabmode	tab layout mode, value constants, fixed,scrollable, default fixed: Labels are often squeezed and cannot be slid.
App:tabselectedtextcolor	Color of font When selected
App:tabtextcolor	Color of font when not selected
App:tabindicatorcolor	The color of sliding
App:tabbackground	The background of the entire tab layout
App:tabtextappearance	Title Text Size on tab
App:tabindicatorheight	The height of the sliding
App:tabpadding	Padding of content inside tab
App:paddingend	The inner margin of the entire tablayout
App:tabgravity	Layout of content in tab, Center,fill
App:tabmaxwidth	The maximum width of the tab
App:tabcontentstart	Margin of Tablayout
Method	Description
Tablayout (Context context)	Construct method, we can get the Tablayout object by constructing the method.
Tablayout (context context, AttributeSet attrs)
Tablayout (context context, AttributeSet Attrs,int defstyleattr)
Tab NewTab ()	Constructs a tab object that is a level two container in the Tablayout
int Gettabcount ()	Get the number of tabs
Tab gettabat (int index)	The tab is obtained according to the index value of the tab, and when we initialize, the system automatically adds an index value to our tab, which starts at 0 and increments by 1.
int Getselectedtabposition ()	Gets the index of the currently selected tab and returns 1 if it is empty
void AddTab (@NonNull tab tab)	Add tab to Tablayout (can also be added to the specified index, ADDTAB (@NonNull tab tab,int position)
void RemoveTab (Tab tab)	Removes the specified tab (also available via removetabat (int position))
void Removealltabs ()	Remove all Tabs
void Setupwithviewpager (@NonNull viewpager Viewpager)	Settings are associated with Viewpager, note: Empty Viewpager is not allowed, otherwise it will be abnormal
void Settabsfrompageradapter (@NonNull pageradapter adapter)	Set Tablayout Adapter, note: Pass empty pageradapter is not allowed, otherwise it will be abnormal
Ontabselectedlistener	Tab event callback interface, including Ontabselected,ontabunselected,ontabreselected callback method
void Setontabselectedlistener (Ontabselectedlistener ontabselectedlistener)	Listen on when tab is selected, not selected as unchecked to Released

Iii. tablayout Use Step 1, construct the Tablayout object

There are two ways to construct a Tablayout object, like other controls, to use the first to get the object: code and XML layout .

• Static construction of XML mode

<!--note the prefix app for Tabmode these properties: Why? Because xmlns:app= "Http://schemas.android.com/apk/res-auto" --<?xml version= "1.0" encoding= "Utf-8"?><linearlayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  android:layout_width  =" match_parent " android:layout_height  =" match_parent " xmlns:app  =" Http://schemas.android.com/apk/res-auto " Span class= "Hljs-attribute" >android:orientation  = "vertical" ;     <android.support.design.widget.TabLayoutandroid:id="@+id/id_tablayout"  Android:layout_width="Match_parent"android:layout_height="Wrap_content"app : Tabmode="scrollable"app:tabgravity="center" />                                        </linearlayout>

• Java code Dynamic construction
  The first is to get the Tablayout object through its constructor function

TabLayout tabLayout=new TabLayout(MainActivity.this);

Then set its series of properties

 tabLayout.setTabMode(TabLayout.MODE_FIXED); tabLayout.setBackgroundColor(Color.parseColor("#2b2b2b")); tabLayout.setSelectedTabIndicatorHeight(4); tabLayout.setTabTextColors(Color.parseColor("#236f28"), Color.parseColor("#bc6e1c"));

Remember, Tablayout is essentially a viewgroup, just a container for other view, where we store the view is tab, so we have to add tab to the Tablayout

Tablayout. AddTab(Tablayout. NewTab(). SetText("TAB1"). SetIcon(Android. R. drawable. IC_menu_search));Tablayout. AddTab(Tablayout. NewTab(). SetText("TAB2"). SetIcon(Android. R. drawable. IC_menu_agenda));Tablayout. AddTab(Tablayout. NewTab(). SetText("TAB3"). SetIcon(Android. R. drawable. IC_menu_camera));

Finally, although we have added the tab to Tablayout, the bottom line is that Tablayout is also a viewgroup, so it needs to be set to the current layout to display.

 mFrameLayout.addView(tabLayout);

At this point, I believe you should learn to use this brand-new space, the next one combined with Viewpager+fragment's mainstream architecture to explain the application of attention and common mistakes to solve.

Android Advanced--material Design new control tablayout (i)