按照惯例, 先上一下效果图
,
上面就是效果图,布局估计大佬们已经看出来了,就一个tablayout+viewepager。我们看一下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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="www.tablayout.com.tablayoutdemo.MainActivity">
<!--
app:tabIndicatorColor="@color/white" // 下方滚动的下划线颜色
app:tabSelectedTextColor="@color/gray" // tab被选中后,文字的颜色
app:tabTextColor="@color/white" // tab默认的文字颜色
app:tabMode="scrollable" //设置标题滑动模式
-->
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light"
app:tabIndicatorColor="@android:color/holo_red_dark"
app:tabSelectedTextColor="@android:color/holo_red_dark"
app:tabTextColor="@android:color/background_dark"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
,代码中注释的 tabMode=“scrollable”是设置tablayoput可以自由地左右滑动~,上面注释都说明了,就不说了~我们看一下Mainactivity,
public class MainActivity extends FragmentActivity {
private List<Fragment> fragmentList = new ArrayList<>();
private ViewPager viewPager;
private TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
//第一步:初始化ViewPager并设置adapter
viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(), fragmentList));
//第二步:初始化Tablayout,给ViewPager设置标题(选项卡)
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.addTab(tabLayout.newTab().setText("UFC"));//添加tab选项卡
tabLayout.addTab(tabLayout.newTab().setText("武林风"));
tabLayout.addTab(tabLayout.newTab().setText("昆仑决"));
//第三步:关联ViewPager
tabLayout.setupWithViewPager(viewPager);
//在关联ViewPager之后添加如下代码,前三步不用更改
tabLayout.getTabAt(0).setText("UFC");
tabLayout.getTabAt(1).setText("武林风");
tabLayout.getTabAt(2).setText("昆仑决");
}
private void initData() {
fragmentList.add(new PagerFragment1());
fragmentList.add(new PagerFragment2());
fragmentList.add(new PagerFragment3());
}
}
代码都有注释,,,就不说了,我们看一下 适配器的代码,
public class MyViewPagerAdapter extends FragmentPagerAdapter{
private final List<Fragment> fragmentList;
public MyViewPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
super(fm);
this.fragmentList=fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
看下其中一个fragment的代码:
public class PagerFragment1 extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = View.inflate(getActivity(), R.layout.layout_fragment, null);
TextView tv= (TextView) view.findViewById(R.id.textView);
tv.setText("UFC");
return view;
}
}
源码(tablauyoutdemo)