Use of the Tablayout control for Android design package

Turn from:

Simple use of the Tablayout control of the Android design package

Google in the 2015 IO Conference, brought us more detailed material design specifications, but also brought us a new Android design support Library, in this support repository, Google provides us with a more standard MD design-style control. Most importantly, the Android Design Support Library is more compatible and can be directly backwards compatible to Android 2.2. It has to be said to be a conscience.

The way to use it is simple, just add a dependency

Compile ' com.android.support:design:24.0.0 '

The first thing to bring is tablayout.

tab swipe to switch view is not a new concept, but Google is the first time in the support library to provide complete supporting,
Furthermore, the tablayout of the Design library implements a fixed tab-the average width distribution of the view,
A scrollable tab is also implemented-the view width is not fixed and can be scrolled horizontally. tab can be added dynamically in the program,
But most of the time we will not use this, usually the sliding layout will be used in conjunction with Viewpager, so we need Viewpager to help:
By a word setupwithviewpager, we put Viewpager and tablayout together.

Layout_main.xml:

<?XML version= "1.0" encoding= "Utf-8"?><Relativelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:tools= "Http://schemas.android.com/tools"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:paddingbottom= "@dimen/activity_vertical_margin"Android:paddingleft= "@dimen/activity_horizontal_margin"Android:paddingright= "@dimen/activity_horizontal_margin"Android:paddingtop= "@dimen/activity_vertical_margin"Tools:context= "Fanggao.qf.tablelayouttest.MainActivity">   <FramelayoutAndroid:id= "@+id/fl_layout"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent">   </Framelayout></Relativelayout>

View Code

Layout_fragmentxml layout:

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns: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"android:orientation= "vertical">   <Android.support.design.widget.TabLayoutAndroid:id= "@+id/tl_title"Android:layout_height= "Wrap_content"Android:layout_width= "Match_parent"Android:background= "#ffffff"App:tabindicatorcolor= "#0000ff"App:tabtextcolor= "#000000"App:tabselectedtextcolor= "#0000ff"App:tabmode= "fixed"><!--App:tableindicatorcolor = "#0000ff" Sets the color of the underline app:tabtextcolor= "#000000" sets the text color App:tabselectedt Extcolor= "#0000ff" Setting selection text color app:tabmode= "scrollable" mode: scrollable horizontal scrolling fixed fill, cannot scroll -   </Android.support.design.widget.TabLayout>    <Android.support.v4.view.ViewPagerAndroid:id= "@+id/vp_fragment"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"></Android.support.v4.view.ViewPager></LinearLayout>

View Code

Mainactivity:

Adding fragmented files

 Public class extends fragmentactivity {    @Override    protectedvoid  onCreate (Bundle Savedinstancestate) {        super. OnCreate (savedinstancestate);        Setcontentview (R.layout.activity_main);         // Load Fragment        Getsupportfragmentmanager (). BeginTransaction (). Add (R.id.fl_layout,new  mainfragment ()). commit ();}    } 

Mainfragment:

Set the display (add Tablayout and Viewpager)

 Public classMainfragmentextendsFragment {PrivateTablayout Tbtitle; PrivateViewpager vpfragments; @Nullable @Override PublicView Oncreateview (layoutinflater inflater, @Nullable viewgroup container, @Nullable Bundle savedinstancestate) { View Inflate= Inflater.inflate (R.layout.fragment_main, container,false); Tbtitle=(tablayout) Inflate.findviewbyid (r.id.tl_title); Vpfragments=(Viewpager) Inflate.findviewbyid (r.id.vp_fragment);                Initview (); returninflate; }    Private voidInitview () {
Fragment Collection ArrayList<Fragment> fragmentlist =NewArraylist<>();
Header Collection ArrayList<String> titles =NewArraylist<>(); String[] Titleres=Newstring[]{"Recommended", "ranking", "Song List", "Radio", "MV"};  for(intj = 0; J < Titleres.length; J + +) {Titles.add (titleres[j]); }         for(inti = 0; i < titleres.length; i++) {testfragment testfragment=Newtestfragment (); Bundle Bundle=NewBundle (); Bundle.putstring ("VALUE", Titleres[i]);            Testfragment.setarguments (bundle);        Fragmentlist.add (testfragment); }//Create and set adapter Testfragmentadapter testfragmentadapter=NewTestfragmentadapter (Getactivity (). Getsupportfragmentmanager (), fragmentlist, titles);        Vpfragments.setadapter (Testfragmentadapter); //bind tablelayout with ViewpagerTbtitle.setupwithviewpager (vpfragments); }}

Testfragmentadapter:

 Public classTestfragmentadapterextendsFragmentpageradapter {PrivateList<fragment>fragmentlist; PrivateList<string>titles;  PublicTestfragmentadapter (Fragmentmanager FM, list<fragment> fragmentlist,list<string>titles) {        Super(FM);  This. fragmentlist =fragmentlist;  This. titles =titles; } @Override PublicFragment GetItem (intposition) {        returnFragmentlist.get (position); } @Override Public intGetCount () {returnfragmentlist.size (); }    /*** Bind header header to Viewpager *@paramposition *@return     */@Override PublicCharsequence Getpagetitle (intposition) {        returnTitles.get (position); }}

Testfragment (fragment added to Viewpager display content)

public class Testfragment extends Fragment {
    @Nullable
    @Override
    Public View Oncreateview (Layoutinflater inflater, @Nullable viewgroup container, @Nullable Bundle savedinstancestate) {
        View inflate = inflater.inflate (R.layout.fragment_test1, container, false);
        Bundle bundle = Getarguments ();
        String value = bundle.getstring ("value");
        LOG.I ("tag", "Oncreateview:" +value);
        TextView Tvtext = (TextView) Inflate.findviewbyid (r.id.tv_textfragment);
        Tvtext.settext (value);
        return inflate;

    }
}

Effect:

Use of the Tablayout control for Android design package