Android MarginDesign控件TabLayout导航栏使用详解

tablayout的使用简单介绍

比如在平常的项目中实现这样的效果，一般都是都会使用viewpageindicate等几个开源框架直接实现，或者使用自定义的horizontalscroll再配合viewpage+fragment实现。在谷歌推出margindesign之后，实现这种效果可以直接使用tablayout实现。另外tablayout可以通过自定义view自定义导航栏的效果。这样使用的时候更加灵活多变。

首先需要导入design包

在app的build.gradle下添加design的包

dependencies {
  compile 'com.android.support:design:25.0.1'
 }

然后就开始撸起袖子，开始如何使用

在xml文件里面写布局：

<?xml version="1.0" encoding="utf-8"?>
 <linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.tablayout
  android:id="@+id/tablayout"
  android:layout_width="match_parent"
  style="@style/mycustomtablayout"
  android:layout_height="wrap_content" />

<android.support.v4.view.viewpager
  android:id="@+id/viewpager"
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:layout_weight="1"
  />
</linearlayout>

既然使用到了fragment，就免不了要添加下简单的布局：

 <relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<textview
  android:id="@+id/textview"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerinparent="true"
  android:text="默认" />
 </relativelayout>

然后是fragment和fragmentpageradapter的代码。写过的人应该对这个很熟了，就直接粘下代码

public class framentadapter extends fragmentpageradapter {
private string[] titles;

public framentadapter(fragmentmanager fm, string[] titles) {
  super(fm);
  this.titles = titles;
}

@override
public fragment getitem(int position) {
  return pagefragment.newinstace(position,titles);
}

@override
public int getcount() {
  return titles.length;
}

@override
public charsequence getpagetitle(int position) {
  return titles[position];
}
}

fragment的代码：

public class pagefragment extends fragment {
private int position;
private string[] titles;
private context context;
public static pagefragment newinstace(int position, string[] titles) {
  bundle bundle = new bundle();
  bundle.putint("position", position);
  bundle.putstringarray("array", titles);
  pagefragment pagefragment = new pagefragment();
  pagefragment.setarguments(bundle);
  return pagefragment;
}

@override
public void onattach(context context) {
  super.onattach(context);
  this.context=context;
}

@override
public void oncreate(@nullable bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  position = getarguments().getint("position");
  titles = getarguments().getstringarray("array");
}

@nullable
@override
public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
  view view =inflater.inflate(r.layout.item_layout,null);
  textview textview = (textview) view.findviewbyid(r.id.textview);
  textview.settext(titles[position]);
  return view;
}
}

写好这些之后最后在mainactivity中看下如何使用：

public class mainactivity extends fragmentactivity {
private tablayout tablayout;
private viewpager viewpager;
private string[] titles = {"黄蓉", "郭靖", "杨过", "小龙女", "尹志平", "金轮法王", "收到货就收到货圣诞节"};
private textview textview;

@override
protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  tablayout = (tablayout) findviewbyid(r.id.tablayout);
  viewpager = (viewpager) findviewbyid(r.id.viewpager);
  framentadapter framentadapter = new framentadapter(getsupportfragmentmanager(), titles);
  viewpager.setadapter(framentadapter);
  tablayout.setupwithviewpager(viewpager);
  tablayout.settabmode(tablayout.mode_scrollable);}
  }

viewpager.setadapter(framentadapter);这行代码必须在下面这行代码之前。有兴趣的可以看下源码。 tablayout.setupwithviewpager(viewpager);

另外 tablayout.settabmode(tablayout.mode_scrollable);给tablayout设置了这种模式，mode有两种，这种模式大概的意思是，我内容很多的时候，可以使tab平铺滑动。
很多时候我们需要自己自定义样式或者要自定义我们的tab。

自定义样式：
需要在style文件下添加自己的样式，然后应用就好了，例如；

<style name="mycustomtablayout" parent="widget.design.tablayout">
  <item name="tabindicatorcolor">?attr/coloraccent</item>
  <item name="tabindicatorheight">2dp</item>
  <item name="tabpaddingstart">12dp</item>
  <item name="tabpaddingend">12dp</item>
  <item name="tabbackground">?attr/selectableitembackground</item>
  <item name="tabtextappearance">@style/mycustomtabtextappearance</item>
  <item name="tabselectedtextcolor">?android:textcolorprimary</item>
</style>
<style name="mycustomtabtextappearance" parent="textappearance.design.tab">
  <item name="android:textsize">14sp</item>
  <item name="android:textcolor">?android:textcolorsecondary</item>
  <item name="textallcaps">true</item>
</style>

另外一种就是需要添加我们自定义的view：
首先写要定义的布局文件；

 <linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<textview
  android:id="@id/textview"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:gravity="center"
  />

<textview
  android:layout_width="10dp"
  android:layout_height="10dp"
  android:background="@drawable/bg_text" />
</linearlayout>

然后稍微修改下fragmentpageradapter的代码

 public class framentadapter extends fragmentpageradapter {
private string[] titles;

public framentadapter(fragmentmanager fm, string[] titles) {
  super(fm);
  this.titles = titles;
}

@override
public fragment getitem(int position) {
  return pagefragment.newinstace(position,titles);
}

@override
public int getcount() {
  return titles.length;
}

@override
public charsequence getpagetitle(int position) {
  return null;
}
}

最后看下怎么在mainactivity中使用。

public class mainactivity extends fragmentactivity {
private tablayout tablayout;
private viewpager viewpager;
private string[] titles = {"黄蓉", "郭靖", "杨过", "小龙女", "尹志平", "金轮法王", "收到货就收到货圣诞节"};
private textview textview;

@override
protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  tablayout = (tablayout) findviewbyid(r.id.tablayout);
  viewpager = (viewpager) findviewbyid(r.id.viewpager);
  framentadapter framentadapter = new framentadapter(getsupportfragmentmanager(), titles);
  viewpager.setadapter(framentadapter);
  tablayout.setupwithviewpager(viewpager);
  tablayout.settabmode(tablayout.mode_scrollable);
  for (int i = 0; i < tablayout.gettabcount(); i++) {
    tablayout.tab tab = tablayout.gettabat(i);
    tab.setcustomview(gettabview(i));
  }
}

private view gettabview(int position) {
  view view = view.inflate(this, r.layout.item_tab_view, null);
  textview = (textview) view.findviewbyid(r.id.textview);
  textview.settext(titles[position]);
  return view;
}
}

到这里就结束了tablayout的使用。放下源码：tablayout的使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。