TabLayout+ViewPager+Fragment使用

Paste_Image.png

实现图中效果，使用TabLayout+ViewPager+Fragment

一、布局

二、Activity实现

    ArrayList titleDatas=new ArrayList<>();
    titleDatas.add("体验券");
    titleDatas.add("优惠券");
    ArrayList fragmentList = new ArrayList();
    fragmentList.add(new ExperienceFragment());
    fragmentList.add(new DiscountFragment());
    MyViewPageAdapter myViewPageAdapter = new MyViewPageAdapter(getSupportFragmentManager(), titleDatas,        fragmentList);
    vpCoupon.setAdapter(myViewPageAdapter);
    tlCoupon.setupWithViewPager(vpCoupon);
    tlCoupon.setTabsFromPagerAdapter(myViewPageAdapter);

三、MyViewPageAdapter实现（Fragment创建省略）

 public class MyViewPageAdapter extends FragmentPagerAdapter {
private ArrayList titleList;
private ArrayList fragmentList;
public MyViewPageAdapter(FragmentManager fm, ArrayList titleList, ArrayList fragmentList) {
    super(fm);
    this.titleList = titleList;
    this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
    return fragmentList.get(position);
}
@Override
public int getCount() {
    return fragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
    return titleList.get(position);
}
}

TabLayout+ViewPager 也可以实现布局

一、Activity实现（布局同上）

  private ArrayList viewList = new ArrayList<>();
  private TabLayout tlMain;
private ViewPager vpMain;
private MyAdapter adapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
ArrayList titleDatas=new ArrayList<>();
    titleDatas.add("体验券");
    titleDatas.add("优惠券");
    View view1 = getLayoutInflater().inflate(R.layout.view1, null);
    View view2 = getLayoutInflater().inflate(R.layout.view2, null);
    viewList.add(view1);
    viewList.add(view2);
    initView();
}

private void initView() {
    tlMain = (TabLayout) findViewById(R.id.tlMain);
    tlMain.setTabMode(TabLayout.MODE_FIXED);
    tlMain.addTab(tlMain.newTab().setText(titleDatas.get(0)));
    tlMain.addTab(tlMain.newTab().setText(titleDatas.get(1)))；
    vpMain = (ViewPager) findViewById(R.id.vpMain);
    adapter = new MyAdapter(titleList, viewList);
    tlMain.setTabsFromPagerAdapter(adapter);
    vpMain.setAdapter(adapter);
    tlMain.setupWithViewPager(vpMain, true);
}

二、MyAdapter实现

 public class MyAdapter extends PagerAdapter {
private ArrayList titleList;
private ArrayList viewList;
public MyAdapter(ArrayList titleList, ArrayList viewList) {
    this.titleList = titleList;
    this.viewList = viewList;
}
@Override
public int getCount() {
    return viewList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
    return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
    container.addView(viewList.get(position));
    return viewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView(viewList.get(position));
}
@Override
public CharSequence getPageTitle(int position) {
    return titleList.get(position);
}

}