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

先看看效果，如图：

 

1.因为TabLayout是Android Design Support Library官方库的一个控件，所以使用TabLayout时候需要先添加对该库的依赖

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

2.下面是TabLayout和ViewPager配合使用的布局

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<?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下面添加如下代码）

?

1 2 3

<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">  <item name="android:textSize">16sp</item> </style>

 3.下面是TabLayout和ViewPager配合使用的JAVA代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

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这个方法，不然标题显示不出来。

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