fragment+viewpager+tab(PagerSlidingTabStrip)

首先，我们来看一下效果图片

我先说一下大体思路：根据动态tab的个数来动态增加不同的fragment的数目，实现它们的联动。总体布局就是在PagerSlidingTabStrip下面是viewpager ，下面我们直接上代码看。

一、主Activity

/*
 * 商品配件
 *
 * */
public class GoodsPartsActivity extends FragmentActivity implements View.OnClickListener {
    @BindView(R.id.common_back_img)
    ImageView commonBackImg;
    @BindView(R.id.common_left_tv)
    TextView commonLeftTv;
    @BindView(R.id.common_right_img)
    ImageView commonRightImg;
    @BindView(R.id.goods_parts_viewPager)
    ViewPager goodsPartsViewPager;
    @BindView(R.id.parts_tabs)
    PagerSlidingTabStrip partsTabs;
    private List<GoodsTypeBean> listType;
    private List<Fragment> listFragment;
    private GoodsPartsFramentAdapter framentAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_goods_parts);
        ButterKnife.bind(this);
        initView();
        getData();
    }

    public void initView() {
        commonLeftTv.setText("专用配件");
        commonBackImg.setOnClickListener(this);
        commonRightImg.setImageResource(R.mipmap.goods_detail);
        listType = new ArrayList<>();
        listFragment = new ArrayList<>();
    }

    /**
     * 给fragment传递数据
     */
    public void getData() {
        //模拟数据类型
        listType = SelectDataManager.getGoodsTypeCatogrey();
        for (int i = 0; i < listType.size(); i++) {
            Fragment fragment = new GoodsPartsFrament();
            //bundle之前传递的数据
            Bundle bundle = new Bundle();
            bundle.putInt("categoryId", listType.get(i).getId());
            fragment.setArguments(bundle);
            listFragment.add(fragment);
        }
        framentAdapter = new GoodsPartsFramentAdapter(getSupportFragmentManager(), listFragment, listType);
        goodsPartsViewPager.setAdapter(framentAdapter);
        //将viewPager绑定于tabLayout
        partsTabs.setViewPager(goodsPartsViewPager);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.common_back_img:
                finish();
                break;
        }

    }
}

(1)定义GoodsTypeBean商品的类型，包含两个属性：int型的id，String型的goodsName，这里listType我是静态数据，一般情况下会网络获取。

/**
     * 得到配件类型
     */
    public static List<GoodsTypeBean> getGoodsTypeCatogrey() {
        List<GoodsTypeBean> list = new ArrayList<>();
        list.add(new GoodsTypeBean("保护壳", 1));
        list.add(new GoodsTypeBean("保护膜", 2));
        list.add(new GoodsTypeBean("耳机", 3));
        list.add(new GoodsTypeBean("数据线", 4));
        return list;
    }

(2) 在不同的fragment之间传递数据，我们用bundle来传递类型的id。

二、下面我们来看GoodsPartsFrament里的内容了

/****
 * 配件fragment
 *****/
public class GoodsPartsFrament extends BaseFrament implements View.OnClickListener, XListView.IXListViewListener, GoodsPartsAdapter.buyGoodsPartsNumberListener {
    @BindView(R.id.fragment_goods_parts_list_view)
    XListView goodsPartsListView;
    private List<GoodsPartsItemBean> mData;
    private GoodsPartsAdapter adapter;
    private int buyTotalNumber;//购买的总数量
    private float buyAccount;//购买的总价格

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_goods_parts, null);
        ButterKnife.bind(this, view);
        initView();
        requestData();
        return view;
    }

    public void initView() {
        mData = new ArrayList<>();
        adapter = new GoodsPartsAdapter(mData, getActivity());
        goodsPartsListView.setAdapter(adapter);
        adapter.setOnBuyGoodsPartsNumberListener(this);
        goodsPartsListView.setXListViewListener(this);
        goodsPartsListView.setPullLoadEnable(false);
        goodsPartsListView.setFooterDividersEnabled(false);
        goodsPartsListView.setHeaderDividersEnabled(false);
    }

    /**
     *
     */
    public void requestData() {
        int categoryId = getArguments().getInt("categoryId");
        //模拟数据
        List<GoodsPartsItemBean> partsList = new ArrayList<>();
        partsList.add(new GoodsPartsItemBean("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484186902&di=563094f98761632b0dc44659d00af648&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F26%2F51%2F68bOOOPIC83_1024.jpg",
                "￥199", "手机壳", 1, 1));

        partsList.add(new GoodsPartsItemBean("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484187020&di=ac4912ed59621aa43092547b9556e602&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F23%2F41%2F80bOOOPIC57_1024.jpg",
                "￥199", "手机壳", 1, 2));
        mData.addAll(SelectDataManager.getGoodsPartsByCategory(partsList, categoryId));
        adapter.notifyAdapter(mData);
    }

    //上拉刷新
    @Override
    public void onRefresh() {

    }

    @Override
    public void onLoadMore() {

    }
}

这里我就不多做解释，就是一般的listView加载数据，写好它对应的adapter就好，有一点需要注意的就是加载数据的时候，要根据不同的商品类别来存储。

/**
     * 根据类别返回信息列表
     */
    public static List<GoodsPartsItemBean> getGoodsPartsByCategory(List<GoodsPartsItemBean> list, int categoryId) {
        List<GoodsPartsItemBean> tmp = new ArrayList<>();
        for (GoodsPartsItemBean item : list) {
            if (item.getCategoryId() == categoryId) {
                tmp.add(item);
            }
        }
        return tmp;
    }

在adapter里设置图片大小的方法

 private RelativeLayout.LayoutParams imagParams = null;

 public GoodsPartsAdapter(List<GoodsPartsItemBean> mData, Context mContext) {
        this.mData = mData;
        this.mContext = mContext;
        //设置图片大小，这是我写的一个方法，根据屏幕大小，来获取图片大小
        int imageWidth = ImageSizeUtil.setImageWidth(mContext, 3);
        imagParams = new RelativeLayout.LayoutParams(imageWidth, ImageSizeUtil.setImageHightSampleWidth(imageWidth));
        imagParams.setMargins(20, 20, 20, 20);
    }

vHolder.goodsPartsImg.setLayoutParams(imagParams);

自己写的一个：设置图片大小的类

public class ImageSizeUtil {
    public static SharePreferenceUtil spUtil;

    public static void getScreenSize(Context context) {
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        int width = windowManager.getDefaultDisplay().getWidth();
        int height = windowManager.getDefaultDisplay().getHeight();
        if (spUtil == null) {
            spUtil = new SharePreferenceUtil(context);
        }
        spUtil.put(ConfigConts.ScreenWidth, width);
        spUtil.put(ConfigConts.ScreenHight, height);
    }

    /**
     * @param context
     * @return 图片的宽是屏幕宽的三分之一
     */
    public static int setImageWidth(Context context, int i) {
        if (spUtil == null) {
            getScreenSize(context);
        }
        int imageWidth = spUtil.getInt(ConfigConts.ScreenWidth, 0);
        return imageWidth / i;
    }

    /**
     * @param
     * @return 根据图片的高是图片的宽的2/3
     */
    public static int setImageHight(int width) {
        return (width * 2) / 3;
    }

    /**
     * @param
     * @return 根据图片的宽和高一致
     */
    public static int setImageHightSampleWidth(int width) {
        return width;
    }
}

三、我们再来看GoodsPartsFramentAdapter

/****
 * 配件fragment的adapter
 *****/
public class GoodsPartsFramentAdapter extends FragmentPagerAdapter {
    private List<Fragment> fragments;
    private List<GoodsTypeBean> goodsParts;

    public GoodsPartsFramentAdapter(FragmentManager fm, List<Fragment> fragments, List<GoodsTypeBean> goodsParts) {
        super(fm);
        this.fragments = fragments;
        this.goodsParts = goodsParts;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return this.goodsParts.get(position).getGoodsTitle();
    }
}

最后将viewpager和tabs连起来就可以了！

四、PagerSlidingTabStrip在studio里引用library就好，自定义一些属性就好

<com.astuetz.PagerSlidingTabStrip
        android:id="@+id/parts_tabs"
        android:layout_width="match_parent"
        android:layout_height="@dimen/space_60"
        android:layout_below="@id/goods_parts_title"
        android:background="@color/colorWhite"
        app:pstsIndicatorColor="@color/colorLightRed"
        app:pstsIndicatorHeight="@dimen/space_5" />

但直接引用的话，选择的字体颜色我还不会该，有时间在研究，希望大家可以互相交流