Android——仿京东淘宝分类页面

最新推荐文章于 2024-07-31 09:56:25 发布
最新推荐文章于 2024-07-31 09:56:25 发布
阅读量1.4w 收藏 70
点赞数 6
分类专栏： 移动开发 文章标签： 京东分类 京东
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xy8199/article/details/78604159
版权

效果图：

json在assets下

添加依赖：

 

compile 'com.squareup.okhttp3:okhttp:3.8.1'
compile 'com.facebook.fresco:fresco:0.11.0'
compile 'com.alibaba:fastjson:1.1.46.android'

MainActivitypublic class MainActivity extends AppCompatActivity {

private List<String> menuList = new ArrayList<>();
private List<CategoryBean.DataBean> homeList = new ArrayList<>();
private List<Integer> showTitle;

private ListView lv_menu;
private ListView lv_home;

private MenuAdapter menuAdapter;
private HomeAdapter homeAdapter;
private int currentItem;

private TextView tv_title;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Fresco.initialize(this);
initView();
loadData();
}


private void loadData() {

String json = getJson(this, "category.json");
CategoryBean categoryBean = JSONObject.parseObject(json, CategoryBean.class);
showTitle = new ArrayList<>();
for (int i = 0; i < categoryBean.getData().size(); i++) {
CategoryBean.DataBean dataBean = categoryBean.getData().get(i);
menuList.add(dataBean.getModuleTitle());
showTitle.add(i);
homeList.add(dataBean);
}
tv_title.setText(categoryBean.getData().get(0).getModuleTitle());

menuAdapter.notifyDataSetChanged();
homeAdapter.notifyDataSetChanged();
}

private void initView() {
lv_menu = (ListView) findViewById(R.id.lv_menu);
tv_title = (TextView) findViewById(R.id.tv_titile);
lv_home = (ListView) findViewById(R.id.lv_home);
menuAdapter = new MenuAdapter(this, menuList);
lv_menu.setAdapter(menuAdapter);

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

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));
}
});


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);
// lv_home.setSelection(current);
if (currentItem != current && current >= 0) {
currentItem = current;
tv_title.setText(menuList.get(currentItem));
menuAdapter.setSelectItem(currentItem);
menuAdapter.notifyDataSetInvalidated();
}
}
});
}

/**
* 得到json文件中的内容
*
* @param context
* @param fileName
* @return
*/
public static String getJson(MainActivity context, String fileName) {
StringBuilder stringBuilder = new StringBuilder();
//获得assets资源管理器
AssetManager assetManager = context.getAssets();
//使用IO流读取json文件内容
try {
BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(
assetManager.open(fileName), "utf-8"));
String line;
while ((line = bufferedReader.readLine()) != null) {
stringBuilder.append(line);
}
} catch (IOException e) {
e.printStackTrace();
}
return stringBuilder.toString();
}


}

GridViewForScrollViewpublic class GridViewForScrollView extends GridView {

public GridViewForScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public GridViewForScrollView(Context context) {
super(context);
}

public GridViewForScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec, expandSpec+30);

}


}

HomeAdapter/**
* 右侧主界面ListView的适配器
*
* @author Administrator
*/
public class HomeAdapter extends BaseAdapter {

private Context context;
private List<CategoryBean.DataBean> foodDatas;

public HomeAdapter(Context context, List<CategoryBean.DataBean> foodDatas) {
this.context = context;
this.foodDatas = foodDatas;
}

@Override
public int getCount() {
if (foodDatas != null) {
return foodDatas.size();
} else {
return 10;
}
}

@Override
public Object getItem(int position) {
return foodDatas.size();
}

@Override
public long getItemId(int position) {
return position;
}


@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;
}

}

HomeItemAdapter/**
* author：wangzihang
* date： 2017/8/8 19:15
* desctiption：
* e-mail：wangzihang@xiaohongchun.com
*/

public class HomeItemAdapter extends BaseAdapter {

private Context context;
private List<CategoryBean.DataBean.DataListBean> foodDatas;

public HomeItemAdapter(Context context, List<CategoryBean.DataBean.DataListBean> foodDatas) {
this.context = context;
this.foodDatas = foodDatas;
}


@Override
public int getCount() {
if (foodDatas != null) {
return foodDatas.size();
} else {
return 10;
}
}

@Override
public Object getItem(int position) {
return foodDatas.size();
}

@Override
public long getItemId(int position) {
return position;
}


@Override
public View getView(int position, View convertView, ViewGroup parent) {
CategoryBean.DataBean.DataListBean subcategory = foodDatas.get(position);
ViewHold viewHold = null;
if (convertView == null) {
convertView = View.inflate(context, R.layout.item_home_category, null);
viewHold = new ViewHold();
viewHold.tv_name = (TextView) convertView.findViewById(R.id.item_home_name);
viewHold.iv_icon = (SimpleDraweeView) convertView.findViewById(R.id.item_album);
convertView.setTag(viewHold);
} else {
viewHold = (ViewHold) convertView.getTag();
}
viewHold.tv_name.setText(subcategory.getTitle());
Uri uri = Uri.parse(subcategory.getImgURL());
viewHold.iv_icon.setImageURI(uri);
return convertView;


}

private static class ViewHold {
private TextView tv_name;
private SimpleDraweeView iv_icon;
}

}

MenuAdapter/**
* 左侧菜单ListView的适配器
*
* @author Administrator
*/
public class MenuAdapter extends BaseAdapter {

private Context context;
private int selectItem = 0;
private List<String> list;

public MenuAdapter(Context context, List<String> list) {
this.list = list;
this.context = context;
}

public int getSelectItem() {
return selectItem;
}

public void setSelectItem(int selectItem) {
this.selectItem = selectItem;
}

@Override
public int getCount() {
return list.size();
}

@Override
public Object getItem(int arg0) {
return list.get(arg0);
}

@Override
public long getItemId(int arg0) {
return arg0;
}

@Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
ViewHolder holder = null;
if (arg1 == null) {
holder = new ViewHolder();
arg1 = View.inflate(context, R.layout.item_menu, null);
holder.tv_name = (TextView) arg1.findViewById(R.id.item_name);
arg1.setTag(holder);
} else {
holder = (ViewHolder) arg1.getTag();
}
if (arg0 == selectItem) {
holder.tv_name.setBackgroundColor(Color.WHITE);
holder.tv_name.setTextColor(context.getResources().getColor(R.color.green));
} else {
holder.tv_name.setBackgroundColor(context.getResources().getColor(R.color.background));
holder.tv_name.setTextColor(context.getResources().getColor(R.color.black));
}
holder.tv_name.setText(list.get(arg0));
return arg1;
}

static class ViewHolder {
private TextView tv_name;
}
}

activity_main.xml<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.bawei.com.jpushdemo.MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="horizontal">

<ListView
android:id="@+id/lv_menu"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#EDECEC" />

<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="@color/white">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<ListView
android:id="@+id/lv_home"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

<TextView
android:id="@+id/tv_titile"
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#DCDBDB"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/app_name" />

</RelativeLayout>
</LinearLayout>


</RelativeLayout>

item_home.xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<TextView
android:id="@+id/blank"
android:layout_width="match_parent"
android:layout_height="35dp"
android:background="#DCDBDB"
android:gravity="center_vertical"
android:paddingLeft="20dp"
android:text="@string/app_name" />

<com.bawei.com.jpushdemo.GridViewForScrollView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="3"></com.bawei.com.jpushdemo.GridViewForScrollView>


</LinearLayout>

item_home_category.xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">


<LinearLayout
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical">

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/item_album"
android:layout_width="85dp"
android:layout_height="85dp"
android:layout_gravity="center_horizontal"
android:scaleType="centerCrop" />

<TextView
android:id="@+id/item_home_name"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:singleLine="true"
android:text="标题"
android:textSize="12dp" />

</LinearLayout>


</LinearLayout>

 

item_menu.xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/item_name"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text=""
android:gravity="center"
android:textSize="12sp"
android:textColor="@color/green"/>

</LinearLayout>

请前往http://download.csdn.net/download/xy8199/10128753下载demo

 

xy8199
关注
专栏目录
UI仿写
12-07 277
Android 仿京东、天猫 app 的商品详情页的布局架构, 以及功能实现仿京东、天猫 app 的商品详情页 自定义 viewgroup+viewdraghelper 仿探探卡片式滑动自定义 viewgroup+viewdraghelper 仿探探卡片式滑动，实现卡片的放大和缩小画面以及删除效果 一个漂亮的干货集中营客户端的生成，集合了干货 api 的大部分功能Rxjava,Retrofit,
搜集整理的一些博客导航
刺青的博客
10-26 5021
简介:第一次在CSDN上发表博客,将自己关注或者看过的一些博客整理了一下,其中包含了鸿神和郭神的全部博客,包括两位大神微信公众号推荐的博客,另外还有一些安卓开发社区的博客,后续每天都会更新这个导航,希望这个博客导航能够给小伙伴们带来一些帮助… Android重要机制 快速了解Android重要机制 ActionBar Android ActionBar完全解析，使用官方推荐的最佳导
Android仿京东左右分类
03-15
最近看到很多购物商城都是采用了一种布局，左边是list列表右侧是商品的列表
Android 仿京东分类功能实现
馒头
11-19 4297
业务需要实现类似京东分类页面的页面效果,原先没有写过类似的这种效果,特此搞个Demo 梳理一下整体的实现流程以及记录下逻辑实现的效果 二,实现思路 RecycleView+Fragment(RecycleView)+观察者动态切换数据 1:左侧是RecycleView 为了实现局部刷新 使用了DiffUtil 处理局部刷新问题 2:右侧是一个Fragment 用了 SmartRefreshLayout,RecycleView处理刷新效果 3.数据通讯使用了 Cla...
Androidstudio开发，购物商城app实现商品分类列表（五）
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
07-31 813
相关视频教程在某站上面(🔍浩宇软件开发)
【android】安卓高仿京东分类页
GuoguoDad的博客
08-11 1771
android 实现商城类app的分类页，高仿哦
Android仿京东分类效果
az44yao的专栏
04-05 654
https://www.jb51.net/article/142480.htmhttps://www.jb51.net/article/134957.htm https://www.jb51.net/article/134971.htmhttps://www.jb51.net/article/134953.htm 这篇文章主要为大家详细介绍了Android实现京东App分类页面效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 今天群里有人问了关于仿京东App分类页面的实现，而我之前正好查过.
android 高仿京东
weixin_34216036的博客
04-19 183
android 高仿京东源码，两年前的作品，最近发现一些老代码，发布出来给初学者学习，下面附上几张展示的效果，有需要的请到下面地址下载，记得stare哦 https://github.com/xiangzhihong/jdProduct ...
ScrollView分页 仿京东淘宝商品详情 改良版（新增到顶部）
09-24
总的来说，"ScrollView分页 仿京东淘宝商品详情 改良版（新增到顶部）"是一个结合了滚动监听、数据加载、用户交互等多种技术的项目，对于Android开发者来说，理解和实现这样的功能有助于提升应用的用户体验和性能。...
仿京东商品详情
08-24
本项目"仿京东商品详情"是基于一个开源项目——`android-vertical-slide-view`进行改造的，原项目地址为<https://github.com/xmuSistone/android-vertical-slide-view>。 `android-vertical-slide-view`是一个适用...
JavaScript实战操作（DOM，BOM）
qq_43542290的博客
11-19 554
JS语法页面文档对象模型浏览器对象模型JSECMAScriptDOMBOM API 应用程序编程接口，就是一个工具，以便于能轻松实现想要完成的功能 Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API（DOM和BOM） DOM 可以改变网页的内容、结构和样式 DOM树 文档：一个页面就是一个文档 document 元素：页面中的所有标签都是元素，element 节点...
Android 仿京东分类效果
08-20
仿京东APP分类效果,左边是类别，右边是选中类的详细列表
android 仿京东购物商城分类视图
11-10
android 仿京东购物商城分类视图,android studio 2.2项目 对应文章看这里： http://blog.csdn.net/stzy00/article/details/47959075
android仿京东分类效果
09-30
网上流传很多京东效果，但是分类效果不理想，特此上传
android 仿京东商品三级分类简单实例
11-28
使用简单的方法实现类似京东商品三级分类、没有加特效和动画。
React-Native 版高仿淘宝、京东商城首页、商品分类页面
m0_46962786的博客
10-11 1123
前言 正在做商城项目的同学有福啦，看看是你们想要的效果吗？ 项目地址：https://github.com/pengzhenjin/react-native-mall 效果图 已实现功能 沉浸式状态栏 酷炫的顶部导航动画 消息角标 循环轮播图 搜索 商品一级分类 商品二级分类 商品子分类 顶部滑动的tab、智能下拉菜单 用到的技术 自定义 Badge（角标） 动画、动画插值器 Swiper 轮播图 自定义 tab 自定义 popup 弹窗下拉菜单 FlatList、SectionList 重点代码
[android进阶]仿京东app分类特效
az44yao的专栏
04-03 250
https://blog.csdn.net/xiaolinxx/article/details/22108985 在eoe论坛上看到某人高分求助，想实现京东分类效果 效果如图1： 图2： 1、首先是图1，点击某分类后，右侧滑动出覆盖层（过程有动画），如图二。 2、图一的分类列表在覆盖动画过程中，字体缩放，图片推出，直到图二效果。 3、图二中，一级列表选中效果的小箭头（见图二），在一级分类切换时箭头有滑动动画（这点可以暂不实现，若有高手那自然更好）。 4、图2分类切换时，右侧覆盖层更新内容。 5、图
仿淘宝商品属性分类
12-12
想要看界面的 http://blog.csdn.net/u010924834/article/details/50353955这是界面效果 我制作的下边的分类效果
仿京东App分类页面实现：Android示例
"Android实现京东App分类页面效果的示例代码和原理解析" 在Android开发中，有时我们需要创建类似京东App的分类页面，这个页面通常包含一个搜索栏、左侧滚动的分类列表和右侧展示具体内容的ViewPager。这个效果的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值