本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/
项目已经做完，
https://github.com/15829238397/CN5E-shop
仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车，管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）
仿京东商城系列12------商品详细信息展示（nativie与html交互）
仿京东商城系列13------商品分享（shareSDK）
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册，SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取（地址选择器）
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章
前言
本次将为大家介绍商品列表展示，排序以及布局切换的功能，老规矩，先看效果图。
商品排序.gif
Tablayout
不了解Tablayout基本使用的，请戳http://www.jianshu.com/p/6923f29a478e
内容
- 页面设计：
1.最上方是一个自定义toolbar，右端是一个布局切换按钮。
2.接下来是一个Tablayout,有默认、价格、销量、三个成员
3.在下面是一个textView计数器。
4.最后是一个MaterialRefreshLayout+RecyclerView的组合，拥有下拉刷新，上滑加载的功能。
布局代码如下：
<?xml version="1.0" encoding="utf-8"?>
<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">
<com.example.cne_shop.widget.CnToolbar
android:id="@+id/toolBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:minWidth="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:leftButtonIcon="@drawable/icon_back_32px"
app:title="商品列表"
android:titleTextColor="@color/white"
app:isShowSearchView="false"
app:rightImageButtonIcon="@drawable/icon_grid_32"
></com.example.cne_shop.widget.CnToolbar>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="@color/white"
app:tabTextColor="@color/cardview_shadow_start_color"
app:tabSelectedTextColor="@color/red"
app:tabIndicatorColor="@color/red"
app:tabGravity="fill"
android:id="@+id/show_wares_tab">
</android.support.design.widget.TabLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:background="@color/material_yellow">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/show_wares_num"
android:textColor="@color/cardview_shadow_start_color"
android:text="共有25件商品"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/show_wares_layout"
android:orientation="vertical">
<com.cjj.MaterialRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/materialRefreshLayout">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/recycleListView"></android.support.v7.widget.RecyclerView>
</com.cjj.MaterialRefreshLayout>
</LinearLayout>
</LinearLayout>
- 功能介绍：
1.通过点击tablayout的子控件，fragment从网络端获得不同的数据，重新加载显示。
2.通过点击toolbar右端的切换布局按钮，改变recyclerView的布局设置，进行重新加载显示。 - 代码分析：
package com.example.shoppingstore;
import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import com.cjj.MaterialRefreshLayout;
import com.example.shoppingstore.Bean.Page;
import com.example.shoppingstore.Bean.Ware;
import com.example.shoppingstore.adapter.BaseAdapter;
import com.example.shoppingstore.adapter.CartAdapter;
import com.example.shoppingstore.adapter.ClassifyWaresAdapter;
import com.example.shoppingstore.adapter.HotAdapter;
import com.example.shoppingstore.fragment.HotFragment;
import com.example.shoppingstore.utils.CartProvider;
import com.example.shoppingstore.utils.Pager;
import com.example.shoppingstore.widget.MyDivider;
import com.example.shoppingstore.widget.PbToolbar;
import java.util.List;
/**
* Created by 博 on 2017/7/19.
*/
public class WareListActivity extends BaseActivity{
private TabLayout showWaresTabs ;
private HotAdapter hotAdapter ;
private MaterialRefreshLayout materialRefreshLayout ;
private RecyclerView recyclerView ;
private Pager pager ;
private Intent intent ;
private PbToolbar pbToolbar ;
private TextView showWaresNum ;
private ClassifyWaresAdapter classifyWaresAdapter ;
private TabLayout.Tab tab1 ;
private TabLayout.Tab tab2 ;
private TabLayout.Tab tab3 ;
public static final int SHOW_ORDER_DEFAUT = 0 ;
public static final int SHOW_ORDER_PRICE = 2 ;
public static final int SHOW_ORDER_SALES = 1 ;
public static int orderType = SHOW_ORDER_DEFAUT ;
public static final int SHOW_TYPE_LINER = 0 ;
public static final int SHOW_TYPE_GRID = 1 ;
public static int showType = SHOW_TYPE_GRID ;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.ware_list_activity);
showWaresTabs = (TabLayout) findViewById(R.id.show_wares_tab);
recyclerView = (RecyclerView) findViewById(R.id.recycleListView) ;
materialRefreshLayout = (MaterialRefreshLayout) findViewById(R.id.materialRefreshLayout);
pbToolbar = (PbToolbar) findViewById(R.id.toolBar) ;
showWaresNum = (TextView) findViewById(R.id.show_wares_num) ;
tab1 = showWaresTabs.newTab().setText(R.string.show_type_defaut).setTag(SHOW_ORDER_DEFAUT) ;
tab2 = showWaresTabs.newTab().setText(R.string.show_type_price).setTag(SHOW_ORDER_PRICE) ;
tab3 = showWaresTabs.newTab().setText(R.string.show_type_sales).setTag(SHOW_ORDER_SALES) ;
showWaresTabs.addTab(tab1);
showWaresTabs.addTab(tab2);
showWaresTabs.addTab(tab3);
intent = this.getIntent() ;
addToobarListener() ;
addTabItemListener() ;
try {
InitShowOrder() ;
} catch (Exception e) {
e.printStackTrace();
}
addShowStyleChengeListener() ;
}
/**
* 设置商品总数展示
*/
private void initShowWaresNum (){
showWaresNum.setText( "一共有"+pager.getTotalCount()+"件商品" );
}
/**
* 点击返回按钮返回主菜单
*/
public void addToobarListener(){
pbToolbar.setLeftButtonIcOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
WareListActivity.this.finish();
}
});
}
/**
* 设置tab按钮切换排序规则
*/
private void addTabItemListener(){
showWaresTabs.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
if ((int)tab.getTag() != orderType){
orderType =(int)tab.getTag() ;
changeShowOrder(orderType);
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
private void InitShowOrder() throws Exception {
initMaterialRefrshLayoutListener() ;
}
private void changeShowOrder(int orderType){
switch (orderType){
case SHOW_ORDER_DEFAUT :
pager.changeParamsInUri("orderBy" , 0);
pager .changeParamsInUri("curPage" , 1);
pager.getData();
break;
case SHOW_ORDER_SALES :
pager.changeParamsInUri("orderBy" , 1);
pager .changeParamsInUri("curPage" , 1);
pager.getData();
break;
case SHOW_ORDER_PRICE :
pager.changeParamsInUri("orderBy" , 2);
pager .changeParamsInUri("curPage" , 1);
pager.getData();
break;
}
}
private int getCampaignId (){
return intent.getIntExtra("campaignId" , SHOW_ORDER_DEFAUT ) ;
}
/**
* 展示格式切换
*/
private void addShowStyleChengeListener(){
pbToolbar.setRightImgeButtonIcOnClickListener(new View.OnClickListener() {
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public void onClick(View v) {
Toast.makeText(WareListActivity.this , "切换格式"+showType , Toast.LENGTH_SHORT).show();
try {
changeShowType();
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private void changeShowType() throws Exception {
switch (showType){
case SHOW_TYPE_LINER :
initMaterialRefrshLayoutListener() ;
pbToolbar.setRightButtonIcon(R.drawable.icon_grid_32);
showType = SHOW_TYPE_GRID ;
break;
case SHOW_TYPE_GRID :
initGridMaterialRefrshLayoutListener() ;
pbToolbar.setRightButtonIcon(R.drawable.icon_list_32);
showType = SHOW_TYPE_LINER ;
break;
}
}
/**
* Grid布局展示商品
* @throws Exception
*/
public void initGridMaterialRefrshLayoutListener () throws Exception {
String uri = "http://112.124.22.238:8081/course_api/wares/campaign/list" ;
Pager.Builder builder = Pager.getBuilder()
.setMaterialRefreshLayout(materialRefreshLayout)
.putParams("campaignId" , getCampaignId())
.putParams("orderBy" , orderType)
.putParams("curPage" , 1)
.putParams("pageSize" , 10)
.setUri(uri)
.setOnPageListener(new Pager.OnPageListener<Ware>() {
@Override
public void loadNormal(List<Ware> mData, int totalPage, int pageSize) {
if( mData!=null && mData.size() > 0 ){
if(classifyWaresAdapter == null){
classifyWaresAdapter = new ClassifyWaresAdapter(WareListActivity.this , mData);
recyclerView.setAdapter(classifyWaresAdapter);
recyclerView.setLayoutManager(new GridLayoutManager(WareListActivity.this , 2));
recyclerView.addItemDecoration(new MyDivider());
setClassifyWaresAdapterItemlistenler() ;
}else{
classifyWaresAdapter.cleanData();
classifyWaresAdapter.addData(mData);
recyclerView.setAdapter(classifyWaresAdapter);
recyclerView.setLayoutManager(new GridLayoutManager(WareListActivity.this , 2));
}
}else {
Toast.makeText(WareListActivity.this , "该类别暂无商品" , Toast.LENGTH_SHORT) .show();
}
}
@Override
public void loadMoreData(List<Ware> mData, int totalPage, int pageSize) {
classifyWaresAdapter.addData(mData);
}
@Override
public void refData(List<Ware> mData, int totalPage, int pageSize) {
classifyWaresAdapter.cleanData();
classifyWaresAdapter.addData(mData);
recyclerView.scrollToPosition(0);
}
}) ;
pager = builder.build(WareListActivity.this , Page.class) ;
}
/**
* list布局展示商品
* @throws Exception
*/
public void initMaterialRefrshLayoutListener () throws Exception {
Log.d("----" , "-----------------" + "List") ;
String uri = "http://112.124.22.238:8081/course_api/wares/campaign/list" ;
Pager.Builder builder = Pager.getBuilder()
.setMaterialRefreshLayout(materialRefreshLayout)
.putParams("campaignId" , getCampaignId())
.putParams("orderBy" , orderType)
.putParams("curPage" , 1)
.putParams("pageSize" , 10)
.setUri(uri)
.setOnPageListener(new Pager.OnPageListener<Ware>() {
@Override
public void loadNormal(List<Ware> mData, int totalPage, int pageSize) {
if( mData!=null && mData.size() > 0 ){
if(hotAdapter == null) {
hotAdapter = new HotAdapter(WareListActivity.this, mData);
setHotAdapterItemlistenler();
recyclerView.setAdapter(hotAdapter);
recyclerView.setLayoutManager(new LinearLayoutManager(WareListActivity.this));
}else {
hotAdapter.cleanData();
hotAdapter.addData(mData);
recyclerView.setAdapter(hotAdapter);
recyclerView.setLayoutManager(new LinearLayoutManager(WareListActivity.this));
}
}else {
Toast.makeText(WareListActivity.this , "该类别暂无商品" , Toast.LENGTH_SHORT) .show();
}
initShowWaresNum();
}
@Override
public void loadMoreData(List<Ware> mData, int totalPage, int pageSize) {
hotAdapter.addData(mData);
}
@Override
public void refData(List<Ware> mData, int totalPage, int pageSize) {
hotAdapter.cleanData();
hotAdapter.addData(mData);
recyclerView.scrollToPosition(0);
}
}) ;
pager = builder.build(this , Page.class) ;
}
public void setClassifyWaresAdapterItemlistenler (){
classifyWaresAdapter.setOnItemClickListener(new BaseAdapter.onItemClickListener() {
@Override
public void onClick(View view, int position) {
Ware ware = classifyWaresAdapter.getData(position);
Intent intent = new Intent(WareListActivity.this , WareDetialActivity.class);
intent.putExtra(Contents.WARE , ware);
startActivity(intent);
}
});
}
public void setHotAdapterItemlistenler (){
hotAdapter.setOnItemClickListener(new BaseAdapter.onItemClickListener() {
@Override
public void onClick(View view, int position) {
if(view.getId() == R.id.buyButton){
addToCart(position) ;
}else {
Ware ware = hotAdapter.getData(position);
Intent intent = new Intent(WareListActivity.this , WareDetialActivity.class);
intent.putExtra(Contents.WARE , ware);
startActivity(intent);
}
}
});
}
public void addToCart( int position ){
Ware hotGoodsMsgPart = hotAdapter.getData(position) ;
CartProvider.getCartProvider(this) .put( hotGoodsMsgPart.toShoppinfCart() );
Toast.makeText( this , "已添加到购物车" , Toast.LENGTH_SHORT ).show();
}
}
1.为区别三种排序方式，定义三种状态进行区分。
2.当点击某个Tab 时，改变排序状态，再让RecyclerView按照状态加载。
3.点击切换布局时，切换布局状态，再让RecyclerView按照状态加载。
好啦此页面就介绍到这里。点击页首git地址查看源码。
网友评论