Android Tablayout use method detailed _android

At the 2015 IO Conference, Google brought us a more detailed design specification for material, and also brought us a brand new Android Support Library, in this Support Google provides us with a more standardized MD design-style control. Most importantly, the Android design Support Library is more compatible and can be directly backward-compatible to Android 2.2.

These two days need to do a imitation of jingdong details of the page, the above tab switch, previously written viewpager+fragment, or indicator depth customization, has been trying to tablayout, so there is the pit below.

And then below is my simple implementation (I feel like a pit, and I'm not as customized as myself)

Add Reference Library

dependencies {
  Compile filetree (dir: ' Libs ', include: [' *.jar '])
  compile ' com.android.support:appcompat-v7 : 24.2.0 '
  compile ' com.android.support:design:24.2.0 '
  compile ' com.android.support:recyclerview-v7 : 24.2.0 '
  compile ' com.android.support:cardview-v7:24.2.0 '
}

Toolbar and Tablayout

Let's take a look at the layout of the implementation:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "xmlns:app=" Http://schemas.android.com/apk/res-auto "android:layout_width=" Match_parent "Android:layout_ height= "match_parent" android:orientation= "vertical" > <android.support.v7.widget.toolbar android:id= "@+id/t"
    Oolbar "android:layout_width=" match_parent "android:layout_height=" 48DP "android:gravity=" center_vertical " app:navigationicon= "@drawable/back_icon" > <linearlayout android:layout_width= "match_parent" an droid:layout_height= "wrap_content" android:gravity= "center" android:orientation= "Horizontal" > <an
        Droid.support.design.widget.TabLayout android:id= "@+id/tablayout" android:layout_width= "Match_parent"

    android:layout_height= "Match_parent" style= "@style/style_c7_s20"/> </LinearLayout> <textview Android:layout_wiDth= "Wrap_content" android:layout_height= "wrap_content" android:layout_gravity= "right" Android:backgroun d= "@drawable/more_icon"/> </android.support.v7.widget.Toolbar> <view style= "@style/horizontal_line"/&

  Gt <android.support.v4.view.viewpager android:id= "@+id/viewpager" android:layout_width= "Match_parent" Android:

 layout_height= "Match_parent"/> </LinearLayout>

The key point of this layout file is the app:tabmode= "scrollable" in the Android.support.design.widget.TabLayout tab, which he sets the TAB mode to "sliding".

Other uses are similar to the indicator usage, all need to set up the adapter, and then through the data to achieve the adaptation of the page. Directly on the code

Adapter

public class Productdetailpageradapter extends Fragmentpageradapter {

  private list<string> mtitles;

  Public Productdetailpageradapter (Fragmentmanager FM, list<string> mtitles) {
    super (FM);
    This.mtitles = Mtitles;
  }

  @Override public
  Fragment getitem (int position) {
    if (position = = 0) {return
      new productfragment ();
    } E LSE if (position = 1) {return
      new productdetailfragment ();
    }
    return new Productfragment ();
  }

  @Override public
  int GetCount () {return
    mtitles.size ();
  }

  @Override public
  charsequence getpagetitle (int position) {return
    mtitles.get (position);
  }
}

The main page of the relevant logic, the fragment here is a simple fragment.

public class Productdetailsactivity extends Baseactivity {@BindView (r.id.viewpager) Viewpager Viewpager;
  @BindView (r.id.tablayout) tablayout tablayout;

  @BindView (r.id.toolbar) toolbar toolbar;
  Private TextView tabproduct;

  Private TextView Tabdetail;
  Private list<string> mtitles = null;

  Private Productdetailpageradapter productpageradapter = null;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (r.layout.activity_product_details);
    Butterknife.bind (this);
  Init ();
    private void Init () {Inittoolbar ();
  Initviewpager ();
    private void Inittoolbar () {Settitle ("");
        Toolbar.setnavigationonclicklistener (New View.onclicklistener () {@Override public void OnClick (view view) {
      Finish ();
    }
    });
    InitTab ();
  Inittabchange (); private void Inittabchange () {Tablayout.addontabselectedlistener () (New Tablayout.ontabselEctedlistener () {@Override public void ontabselected (Tablayout.tab Tab) {Viewpager.setcurrentitem (Ta
        B.getposition ());
            Switch (tab.getposition ()) {Case 0:tabproduct.settextcolor (getresources (). GetColor (R.COLOR.C8));
            Tabproduct.settextsize (18);

          Break
            Case 1:tabdetail.settextcolor (Getresources (). GetColor (R.COLOR.C8));
            Tabdetail.settextsize (18);
        Break @Override public void ontabunselected (Tablayout.tab Tab) {Tabproduct.settextcolor (Getresou
        RCEs (). GetColor (R.COLOR.C7));
      Tabdetail.settextcolor (Getresources (). GetColor (R.COLOR.C7));
  @Override public void ontabreselected (Tablayout.tab Tab) {}});
    private void InitTab () {Tablayout.setselectedtabindicatorcolor (Getresources (). GetColor (R.COLOR.C8));
    Tablayout.setselectedtabindicatorheight (uiutils.dp2px (this, 2)); Tablayout.sEttabtextcolors (R.color.c7, R.COLOR.C8);
    Tablayout.addtab (Tablayout.newtab (). Setcustomview (R.layout.item_detail_tab_product_layout));
    tabproduct= (TextView) Findviewbyid (r.id.tab_product);

    Tabproduct.settextcolor (Getresources (). GetColor (R.COLOR.C8));
    Tablayout.addtab (Tablayout.newtab (). Setcustomview (R.layout.item_detail_tab_detail_layout));
    Tabdetail= (TextView) Findviewbyid (R.id.tab_detail);
    
  Tabproduct.settextcolor (Getresources (). GetColor (R.COLOR.C7));
    private void Initviewpager () {mtitles = new arraylist<> ();
    Mtitles.add ("commodity");
    Mtitles.add ("particulars");
    Productpageradapter = new Productdetailpageradapter (Getsupportfragmentmanager (), mtitles);
    Viewpager.setadapter (Productpageradapter); Viewpager.addonpagechangelistener (New Viewpager.simpleonpagechangelistener () {@Override public void Onpagesel
      ected (int position) {Tablayout.gettabat (position). Select ();
  }
    }); public static void Open (ConText context) {Intent Intent = new Intent (context, productdetailsactivity.class);
  Context.startactivity (Intent);

 }
}

I believe many people look at the above code will feel very troublesome, in fact, I also think, although this can be customized high, but relative to the previous wording, the code has not decreased, I still recommend the use of custom controls, there is an Android universal indicator, we can learn from.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.