用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 实现排序界面的页面布局
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">
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="商品列表">
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:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="30dp"
android:gravity="center_vertical"
android:padding="5dp"
android:background="@color/goldyellow">
android:id="@+id/txt_summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/gray"/>
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:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
③顶部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
pager.request();
}
监听器如下：
Pager.OnPageListener
@Override
public void load(List
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
mWaresAdapter.refreshData(datas);
mRecyclerview_wares.scrollToPosition(0);
}
@Override
public void loadMore(List
mWaresAdapter.loadMoreData(datas);
}
适配器如下：
public class HWAdatper extends SimpleAdapter
CartProvider provider ;
public HWAdatper(Context context, List
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);
}
}