按照惯例, 先上一下效果图
,
上面就是效果图,布局估计大佬们已经看出来了,就一个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)
