实现图中效果,使用TabLayout+ViewPager+Fragment
一、布局
<?xml version="1.0" encoding="utf-8"?>
<com.zhy.autolayout.AutoLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/gray_line">
<include layout="@layout/item_title_haveback"/>
<android.support.design.widget.TabLayout
android:id="@+id/tl_coupon"
android:layout_width="match_parent"
app:tabIndicatorColor="@color/golden"
app:tabSelectedTextColor="@color/golden"
app:tabTextColor="@color/txt_color_tint_"
android:layout_height="90px">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_coupon"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</com.zhy.autolayout.AutoLinearLayout>
二、Activity实现
ArrayList<String> titleDatas=new ArrayList<>();
titleDatas.add("体验券");
titleDatas.add("优惠券");
ArrayList<Fragment> fragmentList = new ArrayList<Fragment>();
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<String> titleList;
private ArrayList<Fragment> fragmentList;
public MyViewPageAdapter(FragmentManager fm, ArrayList<String> titleList, ArrayList<Fragment> 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<View> 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<String> 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<String> titleList;
private ArrayList<View> viewList;
public MyAdapter(ArrayList<String> titleList, ArrayList<View> 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);
}
}