用TabLayout实现商品排序界面，并实现线性/网格式布局切换

 

①在HotFragment的热门活动中加上点击事件，点击后进入排序界面

mAdatper.setOnCampaignClickListener(new HomeCatgoryAdapter.OnCampaignClickListener() {
    @Override
    public void onClick(View view, Campaign campaign) {
        Intent intent = new Intent(getActivity(), WareListActivity.class);
        intent.putExtra(Contants.COMPAINGAIN_ID,campaign.getId());
        startActivity(intent);
    }
});
 

②用TabLayout + RecyclerView 实现排序界面的页面布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bg_color">
    
    <cniao5.com.cniao5shop.widget.CNiaoToolBar
        android:id="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:isShowSearchView="false"
        app:navigationIcon="@drawable/icon_back_32px"
        app:contentInsetEnd="56dp"
        app:title="商品列表">

    </cniao5.com.cniao5shop.widget.CNiaoToolBar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/customTabLayout"
        app:tabGravity="fill"
        app:tabMode="fixed"
        >

    </android.support.design.widget.TabLayout>
    
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:minHeight="30dp"
        android:gravity="center_vertical"
        android:padding="5dp"
        android:background="@color/goldyellow">
        <TextView
            android:id="@+id/txt_summary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/gray"/>
    </LinearLayout>
    
    <com.cjj.MaterialRefreshLayout
        android:id="@+id/refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:overlay="false"
        app:wave_show="false"
        app:wave_color="#90ffffff"
        app:progress_colors="@array/material_colors"
        app:wave_height_type="higher"
        >
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>
    </com.cjj.MaterialRefreshLayout>
</LinearLayout>
 

③顶部TabLayout的实现

private void initTab(){
   TabLayout.Tab tab= mTablayout.newTab();
    tab.setText("默认");
    tab.setTag(TAG_DEFAULT);
    mTablayout.addTab(tab);
    
    tab= mTablayout.newTab();
    tab.setText("价格");
    tab.setTag(TAG_PRICE);
    mTablayout.addTab(tab);

    tab= mTablayout.newTab();
    tab.setText("销量");
    tab.setTag(TAG_SALE);
    mTablayout.addTab(tab);
    
    mTablayout.setOnTabSelectedListener(this);
}
 

监听器如下：监听到在那个Tab中，然后传入分页器中

TabLayout.OnTabSelectedListener
 
@Override
public void onTabSelected(TabLayout.Tab tab) {

    orderBy = (int) tab.getTag();
    pager.putParam("orderBy",orderBy);
    pager.request();
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
 

④按照排序方式来加载数据

首先，得到活动ID：

campaignId=getIntent().getLongExtra(Contants.COMPAINGAIN_ID,0);
然后，按照活动ID来加载数据：

private void getData(){
   pager= Pager.newBuilder().setUrl(Contants.API.WARES_CAMPAIN_LIST)
            .putParam("campaignId",campaignId)
            .putParam("orderBy",orderBy)
            .setRefreshLayout(mRefreshLayout)
            .setLoadMore(true)
            .setOnPageListener(this)
            .build(this,new TypeToken<Page<Wares>>(){}.getType());
    pager.request();
}
 

监听器如下：

Pager.OnPageListener<Wares>
@Override
public void load(List<Wares> datas, int totalPage, int totalCount) {
    mTxtSummary.setText("共有"+totalCount+"件商品");

    if (mWaresAdapter == null) {
        mWaresAdapter = new HWAdatper(this, datas);
        mWaresAdapter.setOnItemClickListener(new BaseAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                Wares wares = mWaresAdapter.getItem(position);
                Intent intent = new Intent(WareListActivity.this, WareDetailActivity.class);
                intent.putExtra(Contants.WARE,wares);
                startActivity(intent);
            }
        });
        mRecyclerview_wares.setAdapter(mWaresAdapter);
        mRecyclerview_wares.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerview_wares.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL_LIST));
        mRecyclerview_wares.setItemAnimator(new DefaultItemAnimator());
    } else {
        mWaresAdapter.refreshData(datas);
    }
}

@Override
public void refresh(List<Wares> datas, int totalPage, int totalCount) {
    mWaresAdapter.refreshData(datas);
    mRecyclerview_wares.scrollToPosition(0);
}

@Override
public void loadMore(List<Wares> datas, int totalPage, int totalCount) {
    mWaresAdapter.loadMoreData(datas);
}
 

适配器如下：

public class HWAdatper extends SimpleAdapter<Wares> {

    CartProvider provider ;

    public HWAdatper(Context context, List<Wares> datas) {
        super(context, R.layout.template_hot_wares, datas);
        provider = new CartProvider(context);
    }

    @Override
    protected void convert(BaseViewHolder viewHolder, final Wares wares) {
        SimpleDraweeView draweeView = (SimpleDraweeView) viewHolder.getView(R.id.drawee_view);
        draweeView.setImageURI(Uri.parse(wares.getImgUrl()));
        viewHolder.getTextView(R.id.text_title).setText(wares.getName());
        viewHolder.getTextView(R.id.text_price).setText("￥ "+wares.getPrice());

        Button button =viewHolder.getButton(R.id.btn_add);
        if(button !=null) {
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    provider.put(wares);
                    ToastUtils.show(context, "已添加到购物车");
                }
            });
        }
    }
    
    public void  resetLayout(int layoutId){
        this.layoutResId  = layoutId;
        notifyItemRangeChanged(0,getDatas().size());
    }
}
 

⑤初始化Toolbar，添加切换按钮

private void initToolBar(){
    mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            WareListActivity.this.finish();
        }
    });
    mToolbar.setRightButtonIcon(R.drawable.icon_grid_32);
    mToolbar.getRightButton().setTag(ACTION_LIST);
    mToolbar.setRightButtonOnClickListener(this);
}
 

然后，添加监听器:

@Override
public void onClick(View v) {
    int action = (int) v.getTag();
    if(ACTION_LIST == action){
        mToolbar.setRightButtonIcon(R.drawable.icon_list_32);
        mToolbar.getRightButton().setTag(ACTION_GIRD);
        mWaresAdapter.resetLayout(R.layout.template_grid_wares);
        mRecyclerview_wares.setLayoutManager(new GridLayoutManager(this,2));
        mRecyclerview_wares.setAdapter(mWaresAdapter);
    }
    else if(ACTION_GIRD == action){
        mToolbar.setRightButtonIcon(R.drawable.icon_grid_32);
        mToolbar.getRightButton().setTag(ACTION_LIST);
        mWaresAdapter.resetLayout(R.layout.template_hot_wares);
        mRecyclerview_wares.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerview_wares.setAdapter(mWaresAdapter);
    }
}