欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-12-10 19:39:16
最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个demo,需要的同学可以自取。 先放一个写完之后的样子: 写这...

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

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

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

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

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

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

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

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

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

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

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

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链接直达链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。