Android中TabLayout结合ViewPager实现页面切换效果

先看看效果，如图：

1.因为tablayout是android design support library官方库的一个控件，所以使用tablayout时候需要先添加对该库的依赖

 compile 'com.android.support:design:22.2.0'

2.下面是tablayout和viewpager配合使用的布局

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.cxk.myapplication.mainactivity">

 <android.support.design.widget.tablayout
  android:id="@+id/tablayout"
  android:layout_width="match_parent"
  android:layout_height="48dp"
  android:background="#1fbcd2"
  app:tabtextappearance="@style/mytablayouttextappearance"
  app:tabindicatorcolor="@color/white"
  app:tabselectedtextcolor="@color/white"
  app:tabtextcolor="@color/ripple_material_dark"
  app:tabindicatorheight="2dp" />

 <android.support.v4.view.viewpager
  android:id="@+id/viewpager"
  android:layout_width="fill_parent"
  android:layout_height="match_parent"
  android:layout_below="@+id/tablayout"
  android:layout_weight="1" />

</relativelayout>

注：

a.必须在根布局下写上 xmlns:app="http://schemas.android.com/apk/res-auto"这句代码，不然无法设置在布局中设置tablayout的一些属性。

b.以下是tablayout一些常用属性

app:tabindicatorcolor="@color/white"指示器颜色
app:tabindicatorheight="2dp"指示器的宽带
app:tabselectedtextcolor="@color/white"被选中时字体的颜色

app:tabtextcolor="@color/ripple_material_dark"未被选中时字体的颜色
app:tabtextappearance="@style/mytablayouttextappearance"改变字体的大小（在style.xml下面添加如下代码）

 <style name="mytablayouttextappearance" parent="textappearance.appcompat.widget.actionbar.title">
  <item name="android:textsize">16sp</item>
 </style>

 3.下面是tablayout和viewpager配合使用的java代码

public class mainactivity extends fragmentactivity {
 private tablayout tablayout;
 private viewpager viewpager;
 private list<fragment> list;
 private fragmentmanager manager;
 private fragmenttransaction transtion;
 private myfragmentpageadapter adapter;
 private list<string> titles;

 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  //先findid
  tablayout = (tablayout) this.findviewbyid(r.id.tablayout);
  viewpager = (viewpager) this.findviewbyid(r.id.viewpager);
  //将各个标题装在titles里面
  titles = new arraylist<string>();
  titles.add("第一个");
  titles.add("第二个");
  //将两个fragment装进集合中
  list = new arraylist<fragment>();
  fragment1 f1 = new fragment1();
  fragment2 f2 = new fragment2();
  list.add(f1);
  list.add(f2);
  //使用manager和transtion提交事务后为viewpager设置一个适配器
  manager = getsupportfragmentmanager();
  adapter = new myfragmentpageadapter(manager);
  transtion = manager.begintransaction();
  transtion.commit();
  viewpager.setadapter(adapter);
  // tablayout.addtab可以将标题添加进tab里面，true表示默认选中
  tablayout.addtab(tablayout.newtab().settext(titles.get(0)), true);
  tablayout.addtab(tablayout.newtab().settext(titles.get(1)), false);
  //这两个方法是将tablayout和viewpager联合起来
  tablayout.setupwithviewpager(viewpager);
  tablayout.settabsfrompageradapter(adapter);
 }

 // 定义一个适配器给viewpager
 class myfragmentpageadapter extends fragmentpageradapter {

  public myfragmentpageadapter(fragmentmanager fm) {
   super(fm);
   // todo auto-generated constructor stub
  }

  @override
  public android.support.v4.app.fragment getitem(int arg0) {
   // todo auto-generated method stub
   return list.get(arg0);
  }

  @override
  public charsequence getpagetitle(int position) {
   return titles.get(position);
  }

  @override
  public int getcount() {
   // todo auto-generated method stub
   return list.size();
  }

  @override
  public void destroyitem(viewgroup container, int position, object object) {
   // todo auto-generated method stub
    super.destroyitem(container, position, object);
  }

 }
}

注：

1.getsupportmanager使用该方法需要你继承fragmentactivity。
2.定义的新适配器需要重写getpagertitle这个方法，不然标题显示不出来。

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