Android tablayout+fragment

 按照惯例, 先上一下效果图

,

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