andorid 学习笔记 模仿淘宝分类

最新推荐文章于 2022-05-30 20:36:52 发布
最新推荐文章于 2022-05-30 20:36:52 发布
阅读量705 收藏 3
点赞数
分类专栏： 一点一滴学android 文章标签： android listview 淘宝分类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu5080126/article/details/48049847
版权

模仿了淘宝分类界面，如果有其他更好的实现方式，欢迎提出。

首先看下效果图



界面一些细节还没处理,大概样式已经出来了

我的思路是2个listView 来实现分类

主界面布局

  activity_category.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".CategoryActivity" >

	<ListView 
	    android:id="@+id/lable_list"
	    android:layout_height="match_parent"
	    android:layout_width="0dp"
	    android:layout_weight="1"
	    android:divider="@null"
	    android:scrollbars="none"
	    >
	    
	</ListView>
	
    <ListView 
        android:id="@+id/image_list"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="4"
        android:padding="10dp"
        android:divider="@null"
        android:scrollbars="none"
        >
    </ListView>

</LinearLayout>

上面 2个listView 用 weight 来划分视图所占比例, 这样就可以 在任何分辨率中保持相同的布局


下面是我的主Activity

CategoryActivity

package com.example.cameratest.category;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.ListView;

import com.example.cameratest.R;
import com.nostra13.universalimageloader.core.ImageLoader;

public class CategoryActivity extends Activity {
	
	private Context mContext;
	
	//listView
	private ListView listLabel;
	private ListView listImages;
	
	//假数据
	private List<HashMap<String, String>> labelData;
	private List<ImageBean> imageData;
	
	//适配器
	private LabelAdapter labelAdapter;
	private ImageAdapter imageAdapter;
	
	//头图
	private View imageHead;
	private ImageView imageHeadImage;
	
	private LayoutInflater inflater;
	
	//加载图片框架
	private ImageLoader imageLoader;
	
	
	

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_category);
		inflater = LayoutInflater.from(this);
		initViews();
		initValues();
		initOnClick();
	}
	
	private void initViews() {
		listLabel = (ListView) findViewById(R.id.lable_list);
		listImages = (ListView) findViewById(R.id.image_list);
		
		imageHead = inflater.inflate(R.layout.head_image, null);
		
		imageHeadImage = (ImageView) imageHead.findViewById(R.id.image_head_image);
	}
	
	private void initValues() {
		mContext = CategoryActivity.this;
		imageLoader = ImageLoader.getInstance();
		setData();
		labelAdapter = new LabelAdapter(mContext, labelData);
		listLabel.setAdapter(labelAdapter);
		imageAdapter = new ImageAdapter(mContext, imageData);
		listImages.addHeaderView(imageHead);
		listImages.setAdapter(imageAdapter);
		
		imageLoader.displayImage("http://img3.imgtn.bdimg.com/it/u=2994317333,270821840&fm=207", imageHeadImage);

	}
	
	private void initOnClick() {
		//更改labelItem颜色
		listLabel.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				// TODO Auto-generated method stub
				changeLabel(position);
			}
		});
	}
	
	//获取假数据
	private void setData() {
		labelData = getLablServiceData();
		imageData = getImageData();
	}
	
	//label点击更改背景色
	@SuppressLint("NewApi")
	private void changeLabel(int position) {
		for (HashMap<String, String> hashMap : labelData) {
			hashMap.put("isCheck", "false");
		}
		labelData.get(position).put("isCheck", "true");
		labelAdapter.notifyDataSetChanged();
		listLabel.smoothScrollToPositionFromTop(position, 0);
	}
	
	//封装image对象
	private List<ImageBean> getImageData() {
		List<HashMap<String, String>> serviceData = getServiceData();
		String preType = null;
		List<ImageBean> beans = new ArrayList<ImageBean>();
		ImageBean bean = null;
		
		int i = 1;
		List<HashMap<String, String>> tempHashMaps = null;
		for (HashMap<String, String> hashMap : serviceData) {
			if (preType == null || !preType.equals(hashMap.get("type"))) {
				if (preType != null) {
					bean.setHashMaps(tempHashMaps);
					beans.add(bean);
				}
				preType = hashMap.get("type"); 
				bean = new ImageBean();
				bean.setSplit(true);
				bean.setType(preType);
				i = 1;
				tempHashMaps = new ArrayList<HashMap<String,String>>();
				
			} 
			
			if (i % 4 == 0) {
				bean.setHashMaps(tempHashMaps);
				beans.add(bean);
				bean = new ImageBean();
				tempHashMaps = new ArrayList<HashMap<String,String>>();
				bean.setType(preType);
				i = 1; 
			}
			tempHashMaps.add(hashMap);
			i ++;
		}
		return beans;
	}
	
	//模拟获取服务器数据
	private List<HashMap<String, String>> getLablServiceData() {
		List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
		HashMap<String, String> hashMap = null;
		for (int i = 0; i < 20; i++) {
			hashMap = new HashMap<String, String>();
			hashMap.put("name", "itme" + i);
			hashMap.put("isCheck", "false");
			list.add(hashMap);
		}
		list.get(0).put("isCheck", "true");
		return list;
	}
	
	//模拟获取服务器数据
	private List<HashMap<String, String>> getServiceData() {
		List<HashMap<String, String>> hashMaps = new ArrayList<HashMap<String,String>>();
		HashMap<String, String> hashMap = null;
		for (int i = 0; i < 50; i++) {
			hashMap = new HashMap<String, String>();
			if (i < 12) {
				hashMap.put("type", "女装");
				hashMap.put("name", "连衣裙");
				hashMap.put("uri", "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3917794418,2901599605&fm=116&gp=0.jpg");
			} else if (i < 20) {
				hashMap.put("type", "裤子");
				hashMap.put("name", "秋裤");
				hashMap.put("uri", "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3680816424,1482585439&fm=116&gp=0.jpg");
			} else if (i < 36) {
				hashMap.put("type", "上衣");
				hashMap.put("name", "衬衫");
				hashMap.put("uri", "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1489409334,2165812600&fm=116&gp=0.jpg");
			} else if (i < 50) {
				hashMap.put("type", "鞋子");
				hashMap.put("name", "凉鞋");
				hashMap.put("uri", "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2106036709,4164252681&fm=116&gp=0.jpg");
			}
			hashMaps.add(hashMap);
		}
		
		return hashMaps;
	}

}



这里 很多代码都是属于模拟后台数据， 在init Views 里面我们初始化了 2个listview， 在initValues 中 首先获取假数据然后再初始化Adapter

这里 注意  listImages 添加headView时 一定要在设置adapter前面 不然会抛出异常


下面看看 2个adapter中的代码

ImageAdapter.java

package com.example.cameratest.category;

import java.util.HashMap;
import java.util.List;

import com.example.cameratest.R;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**  
 * @Package: com.example.cameratest.category  
 * @ClassName: ImageAdapter.java  
 * @Description:TODO 
 * @author: HYH
 * @date: 2015-8-26  
 *
 * Copyright @ 2015 51ZhiYe    
 */
public class ImageAdapter extends BaseAdapter{
	
	private List<ImageBean> data;
	
	private Context mContext;
	
	private LayoutInflater inflater;
	
	private ImageLoader imageLoader;
	
	private String preType;
	
	public ImageAdapter(Context context, List<ImageBean> data) {
		this.mContext = context;
		this.data = data;
		this.inflater = LayoutInflater.from(context);
		
		imageLoader = ImageLoader.getInstance();
		
		
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return data.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return data.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		HolderView holderView = null;
		ImageBean bean = data.get(position);
		List<HashMap<String, String>> hashMaps = bean.getHashMaps();
		
		if (convertView == null) {
			holderView = new HolderView();
			convertView = inflater.inflate(R.layout.item_image, null);
			holderView.typeText = (TextView) convertView.findViewById(R.id.item_text);
			
			holderView.layout1 = (LinearLayout) convertView.findViewById(R.id.item_layout1);
			holderView.imageView1 = (ImageView) convertView.findViewById(R.id.item_layout1_image);
			holderView.textView1 = (TextView) convertView.findViewById(R.id.item_layout1_text);
			
			holderView.layout2 = (LinearLayout) convertView.findViewById(R.id.item_layout2);
			holderView.imageView2 = (ImageView) convertView.findViewById(R.id.item_layout2_image);
			holderView.textView2 = (TextView) convertView.findViewById(R.id.item_layout2_text);
			
			holderView.layout3 = (LinearLayout) convertView.findViewById(R.id.item_layout3);
			holderView.imageView3 = (ImageView) convertView.findViewById(R.id.item_layout3_image);
			holderView.textView3 = (TextView) convertView.findViewById(R.id.item_layout3_text);
			
			convertView.setTag(holderView);
		} else {
			holderView = (HolderView) convertView.getTag();
		}
		
		if (bean.isSplit()) {
			holderView.typeText.setText(bean.getType());
			holderView.typeText.setVisibility(View.VISIBLE);
		} else {
			holderView.typeText.setVisibility(View.GONE);
		}
		
		if (hashMaps.size() == 3) {
			if (holderView.layout2.getVisibility() == View.INVISIBLE ||
					holderView.layout3.getVisibility() == View.INVISIBLE){
				holderView.layout2.setVisibility(View.VISIBLE);
				holderView.layout3.setVisibility(View.VISIBLE);
			} 
			HashMap<String, String> hashMap = null;
			for (int i = 0; i < 3; i++) {
				hashMap = hashMaps.get(i);
				switch (i) {
				case 0:
					imageLoader.displayImage(hashMap.get("uri"), holderView.imageView1, CateApplication.displayImageOptions);
					holderView.textView1.setText(hashMap.get("name"));
					break;
				case 1:
					imageLoader.displayImage(hashMap.get("uri"), holderView.imageView2, CateApplication.displayImageOptions);
					holderView.textView2.setText(hashMap.get("name"));
					break;
				case 2:
					imageLoader.displayImage(hashMap.get("uri"), holderView.imageView3, CateApplication.displayImageOptions);
					holderView.textView3.setText(hashMap.get("name"));
					break;
				default:
					break;
				}
			}
		} else if (hashMaps.size() == 2) {
			if (holderView.layout2.getVisibility() == View.INVISIBLE) {
				holderView.layout2.setVisibility(View.VISIBLE);
			}
			
			if (holderView.layout3.getVisibility() != View.INVISIBLE) {
				holderView.layout3.setVisibility(View.INVISIBLE);
			}
			
			HashMap<String, String> hashMap = null;
			for (int i = 0; i < 2; i++) {
				hashMap = hashMaps.get(i);
				switch (i) {
				case 0:
					imageLoader.displayImage(hashMap.get("uri"), holderView.imageView1, CateApplication.displayImageOptions);
					holderView.textView1.setText(hashMap.get("name"));
					break;
				case 1:
					imageLoader.displayImage(hashMap.get("uri"), holderView.imageView2, CateApplication.displayImageOptions);
					holderView.textView2.setText(hashMap.get("name"));
					break;
				}
			}
			
		} else {
			holderView.layout2.setVisibility(View.INVISIBLE);
			holderView.layout3.setVisibility(View.INVISIBLE);
			
			imageLoader.displayImage(hashMaps.get(0).get("uri"), holderView.imageView1, CateApplication.displayImageOptions);
			holderView.textView1.setText(hashMaps.get(0).get("name"));
		}
	
		return convertView;
	}

	class HolderView{
		TextView typeText;
		LinearLayout layout1;
		ImageView imageView1;
		TextView textView1;
		LinearLayout layout2;
		ImageView imageView2;
		TextView textView2;
		LinearLayout layout3;
		ImageView imageView3;
		TextView textView3;
	}
	
}

上面是imageAdapter 注意是根据数据做界面的相应的处理

LabelAdapter.java

package com.example.cameratest.category;

import java.util.HashMap;
import java.util.List;

import com.example.cameratest.R;

import android.annotation.SuppressLint;
import android.content.Context;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.LinearLayout;
import android.widget.TextView;

/**  
 * @Package: com.example.cameratest.category  
 * @ClassName: LabelAdapter.java  
 * @Description:TODO 
 * @author: HYH
 * @date: 2015-8-26  
 *
 * Copyright @ 2015 51ZhiYe    
 */
public class LabelAdapter extends BaseAdapter{
	
	private Context mContext;
	
	private List<HashMap<String, String>> data;
	
	private LayoutInflater inflater;
	
	public LabelAdapter(Context context, List<HashMap<String, String>> data) {
		this.mContext = context;
		this.data = data;
		this.inflater = LayoutInflater.from(context);
	}
	
	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return data.size();
	}

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return data.get(position);
	}

	@Override
	public long getItemId(int position) {
		// TODO Auto-generated method stub
		return position;
	}

	@SuppressLint("NewApi")
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		ViewHolder holder = null;
		HashMap<String, String> hashMap = data.get(position);
		if (convertView == null) {
			holder = new ViewHolder();
			convertView = inflater.inflate(R.layout.item_label, null);
			holder.label = (TextView) convertView.findViewById(R.id.item_label_label);
			holder.labelLayout = (LinearLayout) convertView.findViewById(R.id.item_label_layout);
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		
		if (hashMap.get("isCheck").equals("true")) {
//			holder.label.setBackgroundResource(R.drawable.category_label_selected);
			holder.label.setTextColor(mContext.getResources().getColor(R.color.orange));
			holder.labelLayout.setBackgroundResource(R.drawable.category_label_selected);
		} else {
//			holder.label.setBackgroundResource(R.drawable.category_label_unselected);
			holder.label.setTextColor(mContext.getResources().getColor(android.R.color.black));
			holder.labelLayout.setBackgroundResource(R.drawable.category_label_unselected);
		}
		
		holder.label.setText(hashMap.get("name"));
		
		return convertView;
	}

	class ViewHolder{
		LinearLayout labelLayout;
		TextView label;
	}

}

Ok到这里 主要的逻辑已经出来了，如果有什么更好的建议欢迎提出 一起学习

还有很多细节代码没有贴出来，如果有要看看其他的代码可以去下载代码



点击下载代码




hu5080126
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
安卓开发学习笔记（1）使用Bundle在Activity之间交换数据（实例：模拟淘宝的填写并显示收货地址的功能）
小幸运
11-14 1373
运行结果： 代码截图： 不要忘记在manifest-》AndroidManifest.XML中添加新的Activity，否则会闪退 MainActivity.java AddressActivity.java activity_main.XML <?xml version="1.0" encoding="utf-8"?> &l...
Android组件化和插件化的概念，android快速开发框架
m0_66264569的博客
02-03 304
开发单个模块时可以共享资源和工具类。 可以针对单个模块测试， 开发调试时不需要对整个项目进行编译。 多人合作时可以只关注自己的业务模块，把某一业务当成单一项目来开发。 可以灵活的对业务模块进行组装和拆分。 4、组件化开发的主要思路 就是将一个Module拆分成若干个Module，由主App提供统一的入口，每个拆分后的Module都依赖共享的Common依赖库，通过相关配置，各个Module可以独立运行调试，也可以供主App依赖使用。 5、组件化开发的步骤： 新建一个lib组件，New..
模仿淘宝分类
08-28
模仿淘宝分类，效果图http://blog.csdn.net/hu5080126/article/details/48049847 如果有更好的建议，请务必提出，一起学习
Android——仿京东淘宝分类页面
热门推荐
xy8199的博客
11-22 1万+
效果图： 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 MainA...
React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现
我是紫色紫色的专栏
03-31 9607
转载请注明出处：http://blog.csdn.net/woshizisezise/article/details/51030410大家好，趁着现在别人都去吃饭的时间，来给大家讲一讲React Native中Android部分的控件ViewPagerAndroid的讲解，这里特别提醒一下，我写的博客都是基于大家有一些React Native基础的前提下，因为关于React Native这一系列的博
Android编程实现仿美团或淘宝的多级分类菜单效果示例【附demo源码下载】
01-20
本文实例讲述了Android编程实现仿美团或淘宝的多级分类菜单效果。分享给大家供大家参考，具体如下： 这里要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果。当分类数量非常多时可以考虑采用两级分类，而诸如美团这种表现方式是一个不错的选择。 首先上效果图：   主要代码： 1. PopupWindow初始化过程： popupWindow = new PopupWindow(this); View view = LayoutInflater.from(this).inflate(R.layout.popup_layout, null); leftLV = (ListView) view.fin
android 仿淘宝sku算法选择颜色分类弹框
11-30
android 仿淘宝sku算法选择颜色分类弹框 当规格超出边界会自动换行，点击规格会根据算法判断关联规格，无则灰显，全部选中后则变化图片。代码是kotlin和java混合。
web学习笔记
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
Android功能强大，UI 简洁，android开发入门与实战第二版
m0_64382743的博客
11-26 366
public void onConfirm() { toast(“click confirm”); } }) .show(); new XPopup.Builder(getContext()).asInputConfirm(“我是标题”, “请输入内容。”, new OnInputConfirmListener() { @Override public void onConfirm(String text) { toast("input text: " + text); } }) .show(); new
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 4990
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
Android仿淘宝购物车
06-19
Android仿淘宝购物车，as开发，自己公司的代码提取出来，保证可用。 实现了购物车中商品按照店铺分类显示的，全选、反选，数量增加，总价增加等功能。
仿淘宝商品属性分类
12-12
想要看界面的 http://blog.csdn.net/u010924834/article/details/50353955这是界面效果 我制作的下边的分类效果
仿淘宝京东分类
09-09
仿淘宝京东分类，内含源码，包括xml，很全面 也很简单。适合新手去学习
Android 仿淘宝购物车的实现
01-29
实现了购物车中商品按照店铺分类显示的 也就是淘宝购物车的显示方式。 全选 反选 数量增加 总价增加等功能 效果请看 http://blog.csdn.net/u014061684/article/details/50608588
仿淘宝首页，多样式列表
12-05
仿淘宝，支付宝，京东等知名app首页模块，多样式列表，mvp模式应用，
Android：实现仿 美团/淘宝 多级分类菜单效果
weixin_34162228的博客
11-01 717
本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果。当分类数量许多时能够考虑採用两级分类。而诸如美团这样的表现方式是一个不错的选择。 首先上效果图： 主要代码： 1. PopupWindow初始化过程： popupWindow = new PopupWindow(this); View view = LayoutInf...
安卓仿淘宝首页的分类标签实现(横向滑动)
qq_35777293的博客
07-02 2928
淘宝效果 我的效果 使用recycleview实现 很简答,几行代码(只粘贴 了主要代码) GridLayoutManager gridLayoutManager = new GridLayoutManager(getContext(), 2, LinearLayoutManager.HORIZONTAL, false);//2代表是两列,也可以改成你需要的列数 ,LinearLayoutManager.HORIZONTAL代表横向滑动 recycleView.setLayoutManager(gr
【Android】仿淘宝商品详情页
QCODER's Coding Fleid
05-15 6249
话不多说---先上效果图： 图1 商品详情页 图2 加入购物车点击事件 需求分析： 图1中主要需要实现的效果： 1.轮播图 2.顶部导航栏的渐变 3.顶部导航栏随着滑动的位置选择对应的值以及点击滑动到对应位置 图2中主要需要实现的效果： 1.界面从底部出场的效果 2.参数选择的瀑布流式效果 技术分析： 图1： 1.轮播图，可以采用自定义（ViewPager的使用），也可以用直接用第三方库。这里我采用的是 https://github.com/youth5201314/bann
Android学习笔记：面向对象基础与三大特性详解
"Android宝典（学习笔记）" 是一份由传智播客学员黄玉昆整理的学习Android开发的详细笔记，它覆盖了从基础到高级的知识体系。这份笔记以文档结构图的形式呈现，使得知识点的组织清晰易懂，特别适合初学者和进阶者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值