android开发：使用ListView控件开发王者皮肤购物车APP流程

使用ListView控件开发王者皮肤购物车APP流程

一、任务要求

使用ListView开发出模拟商品选购界面，共包含8个皮肤商品，皮肤图片已经自备，每一行左侧显示图片，右侧显示皮肤具体信息，从上到下依次为名字，品质，价格（设置为红色字体），好评度，单页屏幕显示不全，能够拖动显示余下项，点击主页面的任何一个商品，将跳转到新的页面，新的页面中显示皮肤商品图片。

二、创建ListView布局

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

三、创建Item布局

<?xml version="1.0" encoding="UTF-8"?>

<ImageView
    android:id="@+id/imageView"
    android:layout_width="72dp"
    android:layout_height="72dp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="名字：" />

    <TextView
        android:id="@+id/textViewQuality"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="品质：" />

    <TextView
        android:id="@+id/textViewPrice"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="价格："
        android:textColor="@android:color/holo_red_dark" />

    <TextView
        android:id="@+id/textViewAcclaim"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="好评：" />
</LinearLayout>

四、构造数据源

//创建控件
private ListView listView;
private List<Map<String, Object>> dataList;
private SimpleAdapter simpleAdapter;

private int[] imageIds = new int[] {R.drawable.gsl, R.drawable.pqh, R.drawable.zy, R.drawable.lan, R.drawable.lx,
			R.drawable.lb, R.drawable.ts, R.drawable.mkbl };

private String[] names = new String[] { "公孙离", "裴擒虎", "赵云", "澜", "李信", "李白", "唐三藏", "马可波罗" };

private String[] qualities = new String[] { "传说", "勇者", "星史诗", "星史诗", "限定", "传说", "史诗", "限定" };

private double[] prices = new double[] { 168.8, 28.8, 78.8, 78.8, 168.8, 168.8, 68.8, 168.8 };
private String[] acclaim = new String[] { "87.9%", "56.7%", "98.1%", "94.4%", "99.6%", "97.9%", "85.2%", "88.5%" };
//绑定控件
listView = (ListView) findViewById(R.id.listView);
dataList = new ArrayList<Map<String, Object>>();
//构造数据源
for (int i = 0; i < imageIds.length; i++) {
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("image", imageIds[i]);
			map.put("name", names[i]);
			map.put("quality", qualities[i]);
			map.put("price", "￥" + prices[i]);
			map.put("acclaim", acclaim[i]);
			dataList.add(map);
		}

五、调用构造函数创建适配器

simpleAdapter = new SimpleAdapter(this, dataList, R.layout.item_main,
				new String[] { "image", "name", "quality", "price", "acclaim" }, new int[] { R.id.imageView,
						R.id.textViewName, R.id.textViewQuality, R.id.textViewPrice, R.id.textViewAcclaim });

六、绑定适配器

listView.setAdapter(simpleAdapter);

七、实现商品跳转

1.创建商品跳转布局页面

<?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="horizontal"
    android:padding="8dp" >
    
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerInside" />
</LinearLayout>

#2.创建商品页面java文件

3.在主活动类实现listview点击事件实现跳转

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				// 跳转到新的页面显示商品图片
				// 获取点击的商品的图像资源ID
		        //int imagesId = getItem(position).getImageId();
				int imagesId = imageIds[position];
				Intent intent = new Intent();
				intent.setClass(MainActivity.this, ProductImageActivity.class);
				intent.putExtra("imagesId", imagesId);
				startActivity(intent);
			}			
		});

八、最终效果