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

本文实例为大家分享了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这个方法，不然标题显示不出来。