Android Tablayout to realize the effect of Beijing-East details _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" > <linearlayout android:layout_width= "match_parent" Andr oid:layout_height= "Wrap_content" android:background= "@color/c12" android:gravity= "Center_vertical" Android: minheight= "45DP" android:orientation= "horizontal" android:paddingleft= "15DP" android:paddingright= "15DP" > < ImageView android:id= "@+id/back" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Andr oid:background= "@drawable/back_icon"/> <linearlayout android:layout_width= "0DP" android:layout_height= "Mat" Ch_parent "android:layout_weight=" 1 "android:orientation=" Horizontal "> <android.support.design.widget.tabl Ayout android:id= "@+id/tablayout" Android: layout_width= "match_parent" android:layout_height= "match_parent" app:tabtextappearance= "@style Tablayouttextstyle "app:tabgravity=" center "app:tabmode=" fixed "app:tabtextcolor=" @color/c7 "App:tabselect Edtextcolor= "@color/c8"/> </LinearLayout> <imageview android:id= "@+id/toolbar_more" android:layout _width= "Wrap_content" android:layout_height= "wrap_content" android:layout_marginleft= "10DP" android:background= "@ Drawable/more_icon "/> </LinearLayout> <view style=" @style/horizontal_line "/> <android.support.v4 . View. Viewpager android:id= "@+id/viewpager" android:layout_width= "match_parent" android:layout_height= "0DP" Android:layo ut_weight= "1"/> <view style= "@style/horizontal_line"/> <linearlayout android:layout_width= "Match_pare NT "android:layout_height=" 48DP "android:background=" "@color/c12" android:orientation= "Horizontal" > <LinearL
 Ayout android:layout_width= "0DP"  android:layout_height= "Match_parent" android:layout_weight= "1" > <textview android:layout_width= "0DP"
    android:layout_height= "Match_parent" android:layout_weight= "1" android:gravity= "Center" android:text= "collection" Android:textsize= "10sp"/> <view style= "@style/vertical_line"/> <textview "0DP" android:layout_height= "Match_parent" android:layout_weight= "1" android:gravity= "center" Android:text = "Shopping Cart" android:textsize= "10sp"/> </LinearLayout> <linearlayout android:layout_width= "0DP" Andr oid:layout_height= "Match_parent" android:layout_weight= "1.5" android:background= "@color/c8" android:gravity= "cent Er "> <textview style=" "@style/style_c12_s16" android:gravity= "center" android:text= "Add Shopping cart"/>

 T;/linearlayout> </LinearLayout> </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<fragment> mfragments= null;
 Private list<string> mtitles=null;

 Public Productdetailpageradapter (Fragmentmanager FM, list<fragment> mfragments,list<string> mTitles) {
  super (FM);
  This.mfragments =mfragments;
  this.mtitles=mtitles;
 }

 Public Productdetailpageradapter (Fragmentmanager FM, Fragment ... fragments) {
  super (FM);
  this.mfragments = Arrays.aslist (fragments);
 }

 @Override public
 Fragment getitem (int position) {return
  mfragments.get (position);
 }

 @Override public
 int GetCount () {return
  mfragments.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.toolbar_more) ImageView Toolbarmore;

 @BindView (r.id.tablayout) tablayout tablayout;
 Private list<fragment> mfragments;
 Private string[] titles = new string[]{"Commodity", "details"};
 Private Productdetailpageradapter productpageradapter = null;

 Private Morepopupwindow Popupwindow = null;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
  Setcontentview (r.layout.activity_product_details);
  Butterknife.bind (this);
 Init ();
 private void Init () {Initviewpager ();
  private void Initviewpager () {mfragments = new arraylist<> ();
  Mfragments.add (New Productfragment ());

  Mfragments.add (New Productdetailfragment ()); Productpageradapter = new Productdetailpageradapter (Getsupportfragmentmanager (), mfragments, Arrays.asList (titles))
  ;
  Viewpager.setoffscreenpagelimit (2); Viewpager.setadapter(Productpageradapter);
  Viewpager.setcurrentitem (1);
 Tablayout.setupwithviewpager (Viewpager);
 @OnClick (r.id.back) public void Backclick () {finish (); @OnClick (r.id.toolbar_more) public void Moreclick () {} private Adapterview.onitemclicklistener Onitemclicklist Ener = new Adapterview.onitemclicklistener () {@Override public void Onitemclick (adapterview<?> parent, View vie
  W, int position, long id) {Popupwindow.dismiss ();


 }
 };
  public static void open (context context) {Intent Intent = new Intent (context, productdetailsactivity.class);
 Context.startactivity (Intent);
 }
}

The above code is relatively simple do not do too much explanation, when using tablayout need to pay attention to a point:
Tabmode has two property values:

mode_fixed:fixed tabs Display all tabs concurrently and are best used with content this benefits from quick pivots between Tabs.
mode_scrollable:scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larg ER number of tabs.
Mode_scrollable suitable for a lot of tabs situation, is able to scroll, if you want to achieve the kind of the Beijing-East squeeze together the effect of the need for mode_fixed.

To better meet development needs, Tablayout implements a custom tablayout style, and then introduces

App:tabtextappearance= ""

Customize icon Add to tab

The current tablayout has no way to add icon, we can use spannablestring combine Imagespan to realize

Private int[] Imageresid = {
  R.drawable.ic_one,
  r.drawable.ic_two,
  r.drawable.ic_three
};
 
// ...
 
@Override public
charsequence getpagetitle (int position) {
 //Generate title based on item position
 //return Tabtitles[position];
 drawable image = Context.getresources (). getdrawable (Imageresid[position]);
 Image.setbounds (0, 0, image.getintrinsicwidth (), Image.getintrinsicheight ());
 spannablestring sb = new Spannablestring ("");
 Imagespan Imagespan = new Imagespan (image, Imagespan.align_bottom);
 Sb.setspan (Imagespan, 0, 1, spannable.span_exclusive_exclusive);
 return SB;
}

Run, the discovery does not appear because Tablayout creates a tab default setting of Textallcaps property to True, which prevents Imagespan from being rendered and can be changed by the following style file definition:

<style name= "Mycustomtablayout" parent= "Widget.Design.TabLayout" >
  <item name= "Tabtextappearance" > @style/mycustomtextappearance</item>
</style>
 
<style name= "Mycustomtextappearance" Parent = "TextAppearance.Design.Tab" >
  <item name= "textallcaps" >false</item>
</style>

Then set the Caption tab on the Getpagetitle method

@Override public
charsequence getpagetitle (int position) {
 //Generate title based on item position
 drawable image = Context.getresources (). getdrawable (Imageresid[position]);
 Image.setbounds (0, 0, image.getintrinsicwidth (), Image.getintrinsicheight ());
 Replace blank spaces with image icon
 spannablestring sb = new Spannablestring ("" + tabtitles[position]);
 Imagespan Imagespan = new Imagespan (image, Imagespan.align_bottom);
 Sb.setspan (Imagespan, 0, 1, spannable.span_exclusive_exclusive);
 return SB;
}

Tablayout also supports custom view, set by Gettabview, here is not how to achieve, interested in can study.

Part of code: HTTPS://GITHUB.COM/XIANGZHIHONG/JINGDONGAPP

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.