Android 仿京东、拼多多商品分类页的示例代码
作者:Kevin是只兔子 时间:2023-05-02 13:55:30
最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个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链接直达链接
来源:http://www.jianshu.com/p/41b4b749ac28?utm_source=tuicool&utm_medium=referral
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
spring配置不扫描service层的原因解答
![](https://img.aspxhome.com/file/2023/0/101940_0s.png)
关于Flyweight模式应用实践的相关介绍
java设计模式学习之装饰模式
![](https://img.aspxhome.com/file/2023/7/121937_0s.jpg)
Maven项目读取resources文件路径问题解决方案
Java8中的Stream 流实践操作
![](https://img.aspxhome.com/file/2023/0/87210_0s.webp)
C# wpf简单颜色板的实现
![](https://img.aspxhome.com/file/2023/8/129768_0s.png)
详解在Spring3中使用注解(@Scheduled)创建计划任务
C#使用yield关键字构建迭代器详解
结合.net框架在C#派生类中触发基类事件及实现接口事件
Kotlin Navigation可视化开发详解
![](https://img.aspxhome.com/file/2023/4/111714_0s.png)
完美解决idea创建文件时,文件不分级展示的情况
![](https://img.aspxhome.com/file/2023/9/62099_0s.jpg)
Unity 修改FBX模型动画的操作
![](https://img.aspxhome.com/file/2023/3/80053_0s.jpg)
java实现银行管理系统
Winform控件优化Paint事件实现圆角组件及提取绘制圆角的方法
![](https://img.aspxhome.com/file/2023/9/77299_0s.png)
Java实现高校教务系统
Android简单实现 缓存数据
![](https://img.aspxhome.com/file/2023/2/137292_0s.png)
JavaWeb文件上传下载功能示例解析
![](https://img.aspxhome.com/file/2023/9/110619_0s.jpg)
SpringMVC实现多文件上传
![](https://img.aspxhome.com/file/2023/9/67999_0s.jpg)
C#-WinForm跨线程修改UI界面的示例
![](https://img.aspxhome.com/file/2023/0/76420_0s.png)