我們通常會使用Tablayout+Viewpager來實作非常華麗的效果，既可以滑動也可以點選進行不同的界面跳轉，下面是效果圖：
代碼實作：這裡我使用的是Android studio開發
一、使用tablayout必須要導庫:
1、選中項目右鍵-----opModuleXXX
2、會彈出下面框按步驟操作
3、導入com.android.support:design
好了，到這就導庫完成下面看實作代碼：
二、tablayout+Viewpager的實作：
1、activity_main.xml布局：
<?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"
android:layout_height="wrap_content"
android:background="#000">
<android.support.design.widget.TabLayout
android:id="@+id/tab"
app:tabSelectedTextColor="#00ff00"
app:tabTextColor="@android:color/holo_red_dark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />
</LinearLayout>
在 android.support.design.widget.TabLayout中有2個屬性其中
app:tabSelectedTextColor="#00ff00"代表的意識是選中标題的文本顔色
app:tabTextColor="@android:color/holo_red_dark"代表是文本顔色（也就是沒有選中的文本顔色，這裡我設定的紅色）
設定上面2個屬性的效果如圖（下面下滑線顔色會在代碼中設定）：
Tablayout+Viewpager的實作
2、分别建立Fragment1，Fragment2，Fragment3、咳咳這裡我就使用國小生文化123來分别
Fragment1.java：
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.activity_frament1,null);
return view;
}
}
沒有過多的操作，這裡就是找到了Fragment1的布局，Fragment2和Fragment3同樣也是.
Fragment2.java：
public class Fragment2 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.activity_frament2,null);
return view;
}
}
Fragment3.java：
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.activity_frament3,null);
return view;
}
}
上面3個Fragment分别對應了3個布局activity_fragment1，activity_fragment2，activity_fragment3，
Tablayout+Viewpager的實作
這裡也是123來分别
activity_fragment1.xml布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment1">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="電影"
android:gravity="center" />
</RelativeLayout>
activity_fragment2.xml布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.wdl.tablayout.tablayoutfragment.MainActivity">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="電視劇"
android:gravity="center" />
</RelativeLayout>
activity_fragment3.xml布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment1">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="好萊塢"
android:gravity="center" />
</RelativeLayout>
上面的Fragment都已經編寫好下面進行MainActivity
3、編寫MainActivity.java:
public class MainActivity extends FragmentActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private ArrayList<Fragment> fragmentsList = new ArrayList<>();
//添加tablayout的内容
private ArrayList<String> title = new ArrayList<>();
private Fragment1 fragment1;
private Fragment2 fragment2;
private Fragment3 fragment3;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
date();
}
private void date() {
//為tablayout添加内容
title.add("影視");
title.add("電視劇");
title.add("好萊塢");
tabLayout = (TabLayout) findViewById(R.id.tab);
viewPager = (ViewPager) findViewById(R.id.viewpager);
//tablayout中的标題下劃線的顔色
tabLayout.setSelectedTabIndicatorColor((Color.parseColor("#71CDF5")));
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 =new Fragment3();
fragmentsList.add(fragment1);
fragmentsList.add(fragment2);
fragmentsList.add(fragment3);
FragmentAdapter myPagerAdapter = new FragmentAdapter(getSupportFragmentManager(), fragmentsList, title);
tabLayout.setTabsFromPagerAdapter(myPagerAdapter);
viewPager.setAdapter(myPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
}
}
4、建立擴充卡FragmentAdapter：
public class FragmentAdapter extends FragmentPagerAdapter {
ArrayList<Fragment> list;
List<String> title;
public FragmentAdapter(FragmentManager fm,ArrayList<Fragment> fragmentsList,ArrayList<String> titles) {
super(fm);
this.list = fragmentsList;
this.title = titles;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
//tablayout的title标題内容設定
@Override
public CharSequence getPageTitle(int position)
{
return title.get(position);
}
@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
}