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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.