Android 仿京东、拼多多商品分类页的示例代码

标签: Android 仿京东分类 商品分类 listview实现商品分类
23人阅读 评论(0) 收藏 举报
分类:

最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个demo,需要的同学可以自取。

先放一个写完之后的样子:

这里写图片描述

写这个需求的思路也很清晰,首先左边肯定是一个listView,右边也是一个listView,这两个listView要达到一个联动的效果。右边的listView再嵌套一个GridView即可。如下图所示。

这里写图片描述

所以,我们需要的数据结构也就确定了,应该是数组套数组,也就说护肤大分类下又有子分类商品,类似于这个样子:

这里写图片描述

ok,数据和UI结构确定了,就可以编写代码了

1、先确定主体结构,即两个listView

先不用管上面那个Hello World,那块儿只是想做一个吸顶的效果

这里写图片描述

2、将左侧数据和右侧数据分别渲染

2.1渲染左侧数据,即:

menuAdapter = new MenuAdapter(this, menuList);
lv_menu.setAdapter(menuAdapter);

很简单就不赘述了,底部会附上完整代码链接

2.2渲染右侧数据

 homeAdapter = new HomeAdapter(this, homeList);  lv_home.setAdapter(homeAdapter);

在HomeAdapter还需要在嵌套gridView,如下:

 @Override   public View getView(int position, View convertView, ViewGroup parent) {
    CategoryBean.DataBean dataBean = foodDatas.get(position);
    List<CategoryBean.DataBean.DataListBean> dataList = dataBean.getDataList();
    ViewHold viewHold = null;
    if (convertView == null) {
      convertView = View.inflate(context, R.layout.item_home, null);
      viewHold = new ViewHold();
      viewHold.gridView = (GridViewForScrollView) convertView.findViewById(R.id.gridView);
      viewHold.blank = (TextView) convertView.findViewById(R.id.blank);
      convertView.setTag(viewHold);
    } else {
      viewHold = (ViewHold) convertView.getTag();
    }
    HomeItemAdapter adapter = new HomeItemAdapter(context, dataList);
    viewHold.blank.setText(dataBean.getModuleTitle());
    viewHold.gridView.setAdapter(adapter);
    return convertView;   }

  private static class ViewHold {
    private GridViewForScrollView gridView;
    private TextView blank;   }

这里需要说明两点,第一:由于listView嵌套gridView会有众所周知的问题,计算高度,所以这边需要重新测量高度,也就重写了gridView;第二:代码中的textView是每个子标题中主标题的名字,也就是需要吸在顶部的。

以上,就将数据已经可以渲染完成了,现在就是联动的问题

3、让两部分数据动起来

3.1 主数据联动子数据

只需要调用主数据的onItemClick()方法,右侧数据在复写方法中调用setSelection()方法即可

 lv_menu.setOnItemClickListener(new AdapterView.OnItemClickListener() {
      @Override
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        menuAdapter.setSelectItem(position);
        menuAdapter.notifyDataSetInvalidated();
        tv_title.setText(menuList.get(position));
        lv_home.setSelection(showTitle.get(position));
      }
    });

3.2 子数据联动主数据

在onScroll中处理数据即可,在将主数据的adapter更新一下即可。如代码所示

lv_home.setOnScrollListener(new AbsListView.OnScrollListener() {
      private int scrollState;

      @Override
      public void onScrollStateChanged(AbsListView view, int scrollState) {
        this.scrollState = scrollState;
      }

      @Override
      public void onScroll(AbsListView view, int firstVisibleItem,
                 int visibleItemCount, int totalItemCount) {
        if (scrollState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {
          return;
        }
        int current = showTitle.indexOf(firstVisibleItem);
        if (currentItem != current && current >= 0) {
          currentItem = current;
          tv_title.setText(menuList.get(currentItem));
          menuAdapter.setSelectItem(currentItem);
          menuAdapter.notifyDataSetInvalidated();
        }
      }
    });

4、吸顶效果

这边有几种方法都可以实现类似的效果,我这边是上面一直有一条,我再将子数据都加一个type,当type不同时,更换上面那一条的问题即可。

最后,附上git链接点击下载demo

查看评论

仿京东App分类页面的实现

今天群里有人问了关于仿京东App分类页面的实现,而我之前正好查过这方面的资料,手上正好有一个demo,正好分享给大家看看,个人觉得效果棒棒哒!首先来看效果图吧是不是很6呢,来分析这个demo的主体构成...
  • qq_16131393
  • qq_16131393
  • 2016-03-16 11:16:29
  • 9767

高仿拼多多应用源码

本项目是用swift仿拼多多完整项目的APP。拼多多,用户通过发起和朋友,家人,邻居等的拼团,以更低的价格,拼团购买商品。拼多多凝聚更多人的力量,用更低的价格买到更好的东西。 纯代码完成,自动布...
  • niuzen15
  • niuzen15
  • 2016-05-25 10:02:47
  • 5319

Android 之仿京东分类(原理listview+fragment)

1.写一个fragmentimport android.os.Bundle; import android.support.v4.app.Fragment; import android.view.L...
  • jky_yihuangxing
  • jky_yihuangxing
  • 2016-08-16 13:35:25
  • 3893

拼多多面临阿里的“围剿”

近日,有媒体报道称,阿里淘宝推出了淘宝特价版App全面对标拼多多的特价购买平台。根据笔者从App Store下载的这款产品显示,“这是一款赚红包的购物神器,提供更为低价、性价比高的产品推荐,邀请新手还...
  • jiaolinxi7738
  • jiaolinxi7738
  • 2018-03-21 03:11:19
  • 345

Html+Css新手简单快速仿京东商品分类导航

看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果,学会了之后,会发现大多数电商都是用这样的效果的。我们先从把结构写好:一个nav包含上面一个div(全部商品分类),一...
  • sunyuan_software
  • sunyuan_software
  • 2015-06-09 13:00:16
  • 8674

Android仿京东左右分类

  • 2015年03月15日 19:47
  • 1.51MB
  • 下载

安卓仿京东分类页面(1-3级)

效果图: 先谈实现,再考虑优化,go –> 思路:左边一个listview,右边是一个填充页面的容器,之前考虑用fragment的replace方式管理fragment的添加,后来采用了vie...
  • weixin_37389474
  • weixin_37389474
  • 2017-08-25 14:26:34
  • 1068

[Android]仿京东手机端类别页

[Android]仿京东手机端类别页京东手机端的类别标签页, 是一个左侧滑动可选择类别, 右侧一个类别明细的列表联动页面. 当用户选择左侧选项, 可在右侧显示更多选项来选择. 实现方式也不少. 最常见...
  • stzy00
  • stzy00
  • 2015-08-24 21:51:42
  • 2657

android 仿京东商品三级分类简单实例

  • 2013年11月28日 13:59
  • 1.41MB
  • 下载

Android仿拼多多拼团堆叠头像

序言做电商的都知道,作为商品的一种售卖方式,拼团是是提供商品售卖的一种及时有效的方式,而在拼团市场中,拼多多无疑是做的最好的一家。于是,研究拼多多的售卖方式之后,我们的产品也开始了这方面的开发。本文将...
  • xiangzhihong8
  • xiangzhihong8
  • 2017-10-19 11:16:06
  • 1607
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 646
    排名: 7万+
    文章分类