专栏首页非著名程序员Android 仿京东、拼多多商品分类页

Android 仿京东、拼多多商品分类页

最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个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不同时,更换上面那一条的问题即可。

最后,附上 github 链接 直达链接https://github.com/kevinTutu/CategoryDemo。有啥问题一起讨论学习呀。

本文分享自微信公众号 - 非著名程序员(non-famous-coder),作者:Kevin是只兔子

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 彩蛋变炸弹,圣诞节变成中国前端程序员的圣诞“劫”

    很多技术开发群里,在技术论坛以及 GitHub 社区都炸天了,彩蛋变成了炸弹,圣诞节变成了圣诞劫。原因很简单,阿里巴巴蚂蚁金服旗下的开源项目 Ant Desig...

    非著名程序员
  • 开发者必知:谷歌做了一个艰难的决定

    ? 谷歌做了一个艰难的决定:弃用Java APIs。 所谓人红是非多,所以Android的崛起,必定伴随着战争。其中最具代表性的,最有争议的莫过于甲骨文和Go...

    非著名程序员
  • 鸡蛋问题来了,是先有Class还是先有Object?

    周末比较无聊,在浏览论坛的时候,偶然看到一个程序猿提问的问题,他时这样提问的:突然想到一个很菜的问题, 倒底先有Object还是先有Class?所有类都是Obj...

    非著名程序员
  • 用Python爬取陈奕迅新歌《我们》10万条评论的新发现

    最近就有一部“怀旧”题材的电影,未播先火,那就是刘若英的处女作——《后来的我们》。青春,爱情,梦想,一直是“怀旧”题材的核心要素,虽然电影现在还未上映,但先行发...

    Python中文社区
  • [喵咪MQ(2)]RabbitMQ单机模式使用

    [喵咪MQ(2)]RabbitMQ单机模式使用 ? 哈喽!本周我们又见面了,今天呢我们接着说MQ软件RabbitMQ的故事,在上小节以及成功的安装了Rabbit...

    喵了个咪233
  • 【计算机本科补全计划】CCF 2016_09_04 交通规划 (Dijkstra - 单源最短路径算法)

    具体的想法来自下面这篇写的很好的博客,当然,他的代码很复杂,不如我的精简,但是解释这个算法的手法比我好得多!

    用户1687088
  • Unity-UGUI无限循环列表

    简介: UGUI使用ScrollView、GridLayoutGroup实现无限循环列表,支持数据刷新,支持跳转,支持动态插入/删除

    祝你万事顺利
  • 深度学习2016年度回顾:三大技术和三大趋势

    ---- 作者:简·布斯尔克(Jan Bussieck) 编译: AI100 原文地址: http://www.deeplearningweekly.com/b...

    AI科技大本营
  • 解题报告(牛客OI周赛7-普及组)

    某天,一只可爱的肥橘喵在路上走,突然遇到了一个怪人,那怪人自称PM6,“小肥喵,这里有一道水题,答对了我就请你吃狗肉,答错了你就请我吃猫肉!”

    glm233
  • 【报告】邓志东:人工智能前沿技术与产业发展趋势(53PPT)

    【新智元导读】感谢清华大学计算机系教授邓志东向新智元投稿,他在《人工智能前沿技术与产业发展趋势》报告中指出,深度学习是人工智能的最新突破,一定要和大数据结合起来...

    新智元

扫码关注云+社区

领取腾讯云代金券