模仿了淘宝分类界面,如果有其他更好的实现方式,欢迎提出。
首先看下效果图
界面一些细节还没处理,大概样式已经出来了
我的思路是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到这里 主要的逻辑已经出来了,如果有什么更好的建议欢迎提出 一起学习
还有很多细节代码没有贴出来,如果有要看看其他的代码可以去下载代码