商城之商品列表

最新推荐文章于 2024-07-31 09:56:25 发布
最新推荐文章于 2024-07-31 09:56:25 发布
阅读量821 收藏 2
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012360634/article/details/52743358
版权



1.商品排序功能实现(TabLayout)

1.   compile 'com.android.support:design:23.0.1'

2. Tips :首页点击图片反转动画 
 //点击图片反转效果
          private  void anim(final View v){

              ObjectAnimator animator =  ObjectAnimator.ofFloat(v, "rotationX", 0.0F, 360.0F)
                      .setDuration(200);
              animator.addListener(new AnimatorListenerAdapter() {
                  @Override
                  public void onAnimationEnd(Animator animation) {

                      HomeCampaign campaign = mDatas.get(getLayoutPosition());

                      switch (v.getId()){

                          case  R.id.imgview_big:
                              mListener.onClick(v, campaign.getCpOne());
                              break;

                          case  R.id.imgview_small_top:
                              mListener.onClick(v, campaign.getCpTwo());
                              break;

                          case R.id.imgview_small_bottom:
                              mListener.onClick(v,campaign.getCpThree());
                              break;

                      }

                  }
              });
              animator.start();
          }
    }
3.布局 
<?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"
    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>

4.样式，通过复写Tab的样式style 
  <style name="customTabLayout" parent="Widget.Design.TabLayout">
        <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->
        <item name="tabIndicatorColor">#eb4f38</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabPaddingStart">12dp</item>
        <item name="tabPaddingEnd">12dp</item>
        <item name="tabBackground">@color/white</item>
        <item name="tabTextAppearance">@style/customTabTextAppearance</item>
        <item name="tabSelectedTextColor">#eb4f38</item>
    </style>


5.WareListActivity 
package cniao5.com.cniao5shop;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

import com.cjj.MaterialRefreshLayout;
import com.google.gson.reflect.TypeToken;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;

import java.util.List;

import cniao5.com.cniao5shop.adapter.HWAdatper;
import cniao5.com.cniao5shop.adapter.decoration.DividerItemDecoration;
import cniao5.com.cniao5shop.bean.Page;
import cniao5.com.cniao5shop.bean.Wares;
import cniao5.com.cniao5shop.utils.Pager;
import cniao5.com.cniao5shop.widget.CNiaoToolBar;


/**
 * 商品列表
 */
public class WareListActivity extends AppCompatActivity  implements Pager.OnPageListener<Wares>,TabLayout.OnTabSelectedListener,View.OnClickListener {

    private static final String TAG = "WareListActivity";

    public static final int TAG_DEFAULT=0;
    public static final int TAG_SALE=1;
    public static final int TAG_PRICE=2;

    public static final int ACTION_LIST=1;
    public static final int ACTION_GIRD=2;




    @ViewInject(R.id.tab_layout)
    private TabLayout mTablayout;

    @ViewInject(R.id.txt_summary)
    private TextView mTxtSummary;


    @ViewInject(R.id.recycler_view)
    private RecyclerView mRecyclerview_wares;

    @ViewInject(R.id.refresh_layout)
    private MaterialRefreshLayout mRefreshLayout;

    @ViewInject(R.id.toolbar)
    private CNiaoToolBar mToolbar;


    private int orderBy = 0;
    private long campaignId = 0;


    private HWAdatper mWaresAdapter;


    private   Pager pager;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_warelist);
        ViewUtils.inject(this);

        initToolBar();

        campaignId=getIntent().getLongExtra(Contants.COMPAINGAIN_ID,0);

        initTab();

        getData();


    }


    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);


    }


    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();

    }


    //初始化Tab
    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);


    }


    @Override
    public void load(List<Wares> datas, int totalPage, int totalCount) {

        mTxtSummary.setText("共有"+totalCount+"件商品");

        if (mWaresAdapter == null) {
            mWaresAdapter = new HWAdatper(this, datas);
            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);
    }


    @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) {

    }

    @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));

        }
        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));
        }

    }
}





2.商品列表list和grid模式切换实现

1.Adapter 
package cniao5.com.cniao5shop.adapter;

import android.content.Context;
import android.net.Uri;
import android.view.View;
import android.widget.Button;

import com.facebook.drawee.view.SimpleDraweeView;

import java.util.List;

import cniao5.com.cniao5shop.R;
import cniao5.com.cniao5shop.bean.ShoppingCart;
import cniao5.com.cniao5shop.bean.Wares;
import cniao5.com.cniao5shop.utils.CartProvider;
import cniao5.com.cniao5shop.utils.ToastUtils;

/**
 * Created by <a href="http://www.cniao5.com">菜鸟窝</a>
 * 一个专业的Android开发在线教育平台
 */
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(convertData(wares));

                    ToastUtils.show(context, "已添加到购物车");
                }
            });
        }

    }


    public ShoppingCart convertData(Wares item){

        ShoppingCart cart = new ShoppingCart();

        cart.setId(item.getId());
        cart.setDescription(item.getDescription());
        cart.setImgUrl(item.getImgUrl());
        cart.setName(item.getName());
        cart.setPrice(item.getPrice());

        return cart;
    }


    public void  resetLayout(int layoutId){


        this.layoutResId  = layoutId;

        notifyItemRangeChanged(0,getDatas().size());


    }



}



切换 
package cniao5.com.cniao5shop;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

import com.cjj.MaterialRefreshLayout;
import com.google.gson.reflect.TypeToken;
import com.lidroid.xutils.ViewUtils;
import com.lidroid.xutils.view.annotation.ViewInject;

import java.util.List;

import cniao5.com.cniao5shop.adapter.HWAdatper;
import cniao5.com.cniao5shop.adapter.decoration.DividerItemDecoration;
import cniao5.com.cniao5shop.bean.Page;
import cniao5.com.cniao5shop.bean.Wares;
import cniao5.com.cniao5shop.utils.Pager;
import cniao5.com.cniao5shop.widget.CNiaoToolBar;


/**
 * 商品列表
 */
public class WareListActivity extends AppCompatActivity  implements Pager.OnPageListener<Wares>,TabLayout.OnTabSelectedListener,View.OnClickListener {

    private static final String TAG = "WareListActivity";

    public static final int TAG_DEFAULT=0;
    public static final int TAG_SALE=1;
    public static final int TAG_PRICE=2;

    public static final int ACTION_LIST=1;
    public static final int ACTION_GIRD=2;




    @ViewInject(R.id.tab_layout)
    private TabLayout mTablayout;

    @ViewInject(R.id.txt_summary)
    private TextView mTxtSummary;


    @ViewInject(R.id.recycler_view)
    private RecyclerView mRecyclerview_wares;

    @ViewInject(R.id.refresh_layout)
    private MaterialRefreshLayout mRefreshLayout;

    @ViewInject(R.id.toolbar)
    private CNiaoToolBar mToolbar;


    private int orderBy = 0;
    private long campaignId = 0;


    private HWAdatper mWaresAdapter;


    private   Pager pager;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_warelist);
        ViewUtils.inject(this);

        initToolBar();

        campaignId=getIntent().getLongExtra(Contants.COMPAINGAIN_ID,0);

        initTab();

        getData();


    }


    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);

        //切换Grid  list
        mToolbar.setRightButtonOnClickListener(this);


    }


    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();

    }


    //初始化Tab
    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);


    }


    @Override
    public void load(List<Wares> datas, int totalPage, int totalCount) {

        mTxtSummary.setText("共有"+totalCount+"件商品");

        if (mWaresAdapter == null) {
            mWaresAdapter = new HWAdatper(this, datas);
            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);
    }


    @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) {

    }

	
	//切换Grid和List
    @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));

        }
        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));
        }

    }
}


liguangjiehao
关注
专栏目录
商城商品列表展示的完整代码
02-21
、初始化表格请求的url：/item/list 2、Datagrid默认请求参数： 1、page：当前的页码，从1开始。 2、rows：每页显示的记录数。 3、响应的数据：json数据。EasyUIDataGridResult
商品列表功能实现——淘淘商城（四）
qq_40369829的博客
03-11 2077
页面控制器 商品功能列表 分析 需求 PageHelper插件 Service层 Controller层 页面控制器 由jsp/index.jsp的data-options标签属性可知各个页面的url。 需要在taotao-manager-web中开发PageController，处理页面跳转。路径名为对应jsp的名称。 @Controller public ...
Androidstudio开发，购物商城app实现商品分类列表（五）
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
07-31 865
相关视频教程在某站上面(🔍浩宇软件开发)
商城-分类列表
weixin_39820924的博客
08-07 245
以thinkphp6 为例 public function index(Request $request) { $params = $request->only(['pid']); $pid = !empty($params['pid']) ? $params['pid'] : 0; $data = CategoryModel::field([ 'cat_id', 'cat_nam..
Android开发，使用RecyclerView实现商品列表
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
10-16 3251
【代码】Android开发，使用RecyclerView实现商品列表。
商城首页分类列表的实现
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
08-24 498
方案一：一次性查询三级分类 优点只需一查询 缺点：数据库查询效率较低，页面首次加载的速度较慢 方案二： 先只查询一级分类，用户点击/鼠标移动到一级分类，动态加载二级分类 缺点：需要多次连接数据库 一次性查询出来的sql语句：inner join 和left join 的区别 left join 左边没有关联的数据也会全部显示 select c1.category_id 'category_id1', c1.category_name 'category_name', c1.category_.
html5+css3响应式购物商城商品列表布局特效.zip
09-25
在这个购物商城商品列表布局中，jQuery的运用增强了交互性。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。通过jQuery，开发者可以轻松地实现页面元素的动态更新、淡入...
简单的商城商品抢购倒计时列表页面手机
07-13
在构建一个简单的商城商品抢购倒计时列表页面的手机应用时，我们需要关注以下几个关键知识点： 1. **前端框架选择**： 在开发移动端页面时，可以选择使用React、Vue或Angular等主流前端框架。这些框架提供了组件化...
jquery代码制作商城商品列表商品筛选功能
10-31
本教程将详细讲解如何利用jQuery来创建一个商城商品列表的筛选功能。 首先，我们需要理解商品筛选的基本逻辑。通常，筛选功能包括价格范围、品牌、类别、销量、评价等多个维度。用户可以根据这些条件进行组合筛选，...
jquery带商品分类侧边栏列表的商城导航菜单.zip
07-11
这是一款使用jquery制作的带商品分类侧边栏列表的商城导航菜单。该商城菜单兼容ie8浏览器。用户可以通过点击左侧的下拉菜单来查看各种商品的列表，非常实用和方便。 使用方法 在页面中引入样式文件style.css和...
vue+jq实现商城商品属性的添加以及生成表格并还原到前端展示sku列表
05-17
在本文中，我们将深入探讨如何使用Vue.js和jQuery来实现一个商城商品属性的添加功能，以及如何生成表格并在前端展示SKU列表。这个功能对于电商网站来说至关重要，因为它允许用户选择不同商品属性组合，并实时查看...
andriod 商城左侧固定菜单,右侧内容两个list实现
11-21
andriod 商城左侧固定菜单,右侧内容两个list实现
Android仿京东商品列表布局切换
12-17
高仿淘宝京东商品列表布局切换；使用RecyclerView实现商品列表布局切换效果； Android studio项目。下载下来能运行。原来那列表是通过布局管理器GridLayoutManager和LinearLayoutManager 来动态切换的。
商城列表与购物车展示(配套代码)
05-30
Android毕设项目功能：商城列表与购物车展示(配套代码) 内容讲解地址: https://blog.csdn.net/u012156341/article/details/90677043
Android实现淘宝商品列表切换效果
08-26
主要为大家详细介绍了Android实现淘宝商品列表切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android listview列表实现倒计时,类似商品抢购列表
11-27
实现listview 列表倒计时,类似商品抢购列表,,不会因为复用产生错位,以及数据的错乱,解决了图片每次刷新时闪烁问题
android 显示商品列表,Android 菜商品列表展示
weixin_31848413的博客
05-31 1817
该楼层疑似违规已被系统折叠隐藏此楼查看此楼如上图所示右边也是一个数据列表，但它里面包含图片、文本框等等，并且每列都会有与之对应的餐类。Android部分获取右侧商品listview的控件private ListView rightListView = (ListView) view.findViewById(R.id.menu_lvmenu);通过Http请求服务器，设置方法名参数到后台查询成功...
仿android商城商品列表,商品列表 · 人人商城 IOS、Android API · 看云
weixin_34061121的博客
05-30 292
### WeEngine Android、IOS goods api> #### 所有参数都是选填~~~[api]POST:https://127.0.0.1/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=apply.goodsstring:pagesize=10#每页数量string:page=1#页...
Android 中 简单商品列表 的运用
qq_45969735的博客
03-13 4516
完成效果如图所示： GoodActivity package com.example.sqlitedemo; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.text.TextUtils; import android.view.View; import android.widget.Adapter; import and...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值