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

2024-02-20 13:47:44

最近接了一个项目，要仿照京东写一个商品分类页，但需要滑动右边子分类，左边的主分类也跟着变换，写了个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链接直达链接

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

Android实现商品展示效果

一. 创建手机界面布局创建一个activity_main.xml文件代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" androi
Android仿淘宝商品浏览界面图片滚动效果

用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个ScrollView滚动到最底下时会有提示,继续拖动才能浏览图片.仿照这个效果写一个出来并不难,只要定义一个Layout管理两个ScrollView就行了,当第一个ScrollView滑到底部时,再次向上滑动进入第二个ScrollView.效果如下: 需要注意的地方是: 1.如果是手动滑到底部需要再次按下才能继续往下滑,自动滚动到底部则不需要 2.在由上一个ScrollView滑动到下一个ScrollView的过程中多只手指相继拖动也不会导
Android仿淘宝切换商品列表布局效果的示例代码

最近电商项目中有这样一个需求,就是在进入商品列表界面,有一个按钮可以切换商品列表的布局(网格或者垂直列表排列). 效果图: 上面两幅图分别是点击右上角按钮后显示两种不同布局的效果.简单的流程可以概括为:第一次进入页面,有个默认的布局(网格布局),点击按钮,由网格布局切换到竖直的线性布局,再次点击切换到网格布局. 分析: 可以看到商品展示的形式都是以列表的方式来展现,我用的是RecyclerView,这种列表并不复杂,配合Adapter数据适配器就实现了. 提出这个需求时,问了朋友,他说使用了两个
Android仿京东、天猫商品详情页

前言前面在介绍控件TabLayout控件和CoordinatorLayout使用的时候说了下实现京东.天猫详情页面的效果,今天要说的是优化版,是我们线上实现的效果,首先看一张效果: 项目结构分析首先我们来分析一下要实现上面的效果,我们需要怎么做.顶部是一个可以滑动切换Tab,可以用ViewPager+Fragment实现,也可以使用系统的TabLayout控件实现:而下面的 View是一个可以滑动拖动效果的View,可以采用网上一个叫做DragLayout的控件,我这里是自己实现了一个,主要
Android 仿淘宝商品属性标签页

需求 1.动态加载属性,如尺码,颜色,款式等由于每件商品的属性是不确定的,有的商品的属性是颜色和尺码,有的是口味,有的是大小,所以这些属性不能直接写死到页面上. 2.动态加载属性下的标签每个属性下的标签个数也不是一定的,比如有的商品的尺码是是S,M,XL,有的是均码,也就是每种属性的具体的内容是不一定的. 技术点自定义ViewGroup,使其中的TextView可以依据内容长短自动换行,如下图所示实现布局通过ListView来显示商品所有属性,每种属性作为ListView的Item.
安卓(android)仿电商app商品详情页按钮浮动效果

1.效果图如下: 这效果用户体验还是很酷炫,今天我们就来讲解如何实现这个效果. 2.分析为了方便理解,作图分析如图所示,整个页面分为四个部分: 1.悬浮内容,floatView 2.顶部内容,headView 3.中间内容,与悬浮内容相同,middleView 4.商品详情展示页面,detailView 因为页面内容高度会超出屏幕,所以用Scrollview实现滚动,悬浮view与scrollview同级,都在一个帧布局或者相对布局中. 当y方向的滚动距离小于中间的内容middleView到
Android 仿京东、拼多多商品分类页的示例代码

最近接了一个项目,要仿照京东写一个商品分类页,但需要滑动右边子分类,左边的主分类也跟着变换,写了个demo,需要的同学可以自取. 先放一个写完之后的样子: 写这个需求的思路也很清晰,首先左边肯定是一个listView,右边也是一个listView,这两个listView要达到一个联动的效果.右边的listView再嵌套一个GridView即可.如下图所示. 所以,我们需要的数据结构也就确定了,应该是数组套数组,也就说护肤大分类下又有子分类商品,类似于这个样子: ok,数据和UI结构确定了,就可以
Android仿京东手机端类别页

京东手机端的类别标签页, 是一个左侧滑动可选择类别, 右侧一个类别明细的列表联动页面. 当用户选择左侧选项, 可在右侧显示更多选项来选择. 实现方式也不少. 最常见的当然是左侧和右侧各一个Fragment, 左侧Fragment放置ListView, 右侧放显示类别明细的Fragment. 如果觉得页面包含的Fragment太多, 左侧直接给一个ListView就可以了.不影响效果. 效果图: 例子中值得注意的三点: 左侧列表点击某个Item可以自动上下滑动,使所点击的item自动移至列表中间
Android仿网易新闻图片详情下滑隐藏效果示例代码

前言本文主要给大家分享了Android仿网易新闻图片详情下滑隐藏效果的相关内容,分享出来供需要的朋友参考学习,下面话不多说了,来一起看看详细的介绍吧效果图: 实例代码 public class InfoTextView extends AutoRelativeLayout { private Context context; private int lastY; private int offY; private int MIN_HEIGHT = 600; public InfoTextVi
Android仿简书搜索框效果的示例代码

前言之前用简书的时候一直是在web端,后来下载了客户端,看到了搜索的那个动画,就尝试的去写了,没写之前感觉挺容易的,写了之后,就感觉里面还是有些要注意的东西的.话不多说,直接上图. Activity 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo
Android仿淘宝搜索联想功能的示例代码

现在不少应用都提供了搜索功能,有些还提供了搜索联想.对于一个搜索联想功能,最基本的实现流程为:客户端通过监听输入框内容的变化,当输入框发生变化之后就会回调afterTextChanged方法,客户端利用当前输入框内的文字向服务器发起请求,服务器返回与该搜索文字关联的结果给客户端进行展示.服务器那边,一般要做内存缓存池,就是把有可能的结果都放在内存中. 效果图 APP这边也有几个重要的问题需要我们思考当搜索词为空时,不应该发起网络请求. 在用户连续输入的情况下,可能会发起某些不必要的请求.例如用
android仿京东商品属性筛选功能

筛选和属性选择是目前非常常用的功能模块:几乎所有的APP中都会使用: 点击筛选按钮会弹出一个自己封装好的popupWindow,实用方法非常简单:两行代码直接显示:(当然初始化数据除外) 这里和以前用到的流式布局有些不一样:流式布局以前使用的是单个分类,而且也没有在项目中大量实用:这个筛选功能除了数据外几乎都是从项目中Copy出来的: 整个popupWindow布局就是一个自定义的ListView,这个自定义的listview主要是控制listview的高度: 如果数据少的话就是自适应,如果数
Android仿京东分类模块左侧分类条目效果

本文实例为大家分享了Android仿京东左侧分类条目效果的具体代码,供大家参考,具体内容如下 import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.LinearLayout; import android.widget.ScrollView; import android.widget.TextView; import com.frame.R;
Android仿淘宝商品详情页效果

本文实例为大家分享了Android仿淘宝商品详情页的具体代码,供大家参考,具体内容如下 Demo地址:先上效果图效果就是上面图片的效果接下来看看如何实现首先我们来看下布局文件 <LinearLayout android:id="@+id/header" android:layout_width="match_parent" android:layout_height="72dp" android:paddingTop="24
Android仿京东分类效果

本文实例为大家分享了Android仿京东分类效果展示的具体代码,供大家参考,具体内容如下 1.写一个fragment import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;
Android仿京东快报信息滚动效果

先来看看效果吧,Android仿京东快报信息滚动效果,具体内容如下 (截图效果不是很好,但是差不多出来了) 代码: package com.test.scrolltransptoolbar; import android.content.Context; import android.graphics.Color; import android.os.Handler; import android.text.TextUtils; import android.util.AttributeSet;

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

相关推荐

随机推荐