Android开发：使用gridview开发购物APP流程

一、任务要求：

使用GridView开发出模拟手机选购界面，共包含8个手机商品，手机图片已经自备，界面分四行，每一行两个手机，每个手机下面显示手机品牌信息，点击主页面的任何一个商品，将跳转到新的页面，新的页面中显示商品大图图片

二、页面布局

主布局：

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.gridviewapp4.MainActivity" >
    
     <GridView
        android:id="@+id/gridview"
        android:numColumns="2"
        android:gravity="center"
        android:columnWidth="180dp"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:padding="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
     
</RelativeLayout>

子布局：

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="180dp"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="18sp"
        android:text="品牌" />

</LinearLayout>

详情页布局：

<?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>

三、代码实现

package com.example.gridviewapp4;

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

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.SimpleAdapter;

public class MainActivity extends Activity {
	
	private GridView gridView;
	private List<Map<String, Object>> dataList;
	private SimpleAdapter simpleAdapter;

	private int []imageIds = new int[]{R.drawable.fivet,R.drawable.honor8,R.drawable.honorv9,
			R.drawable.iphone8,R.drawable.iphone8plus,R.drawable.iphonex,
			R.drawable.mate10,R.drawable.mix2};
	private String[] names = new String[]{"fivet","honor8","honorv9","iphone8",
			"iphone8plus","iphonex","mate10","mix2"};
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		gridView = (GridView)findViewById(R.id.gridview);  
		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]);  
            dataList.add(map);  
        }
        
        // 构造适配器
        simpleAdapter = new SimpleAdapter(MainActivity.this, dataList, 
        		R.layout.grid_item, new String[]{"image", "name"}, 
        		new int[]{R.id.imageview, R.id.textview});
        
        // 绑定适配器
        gridView.setAdapter(simpleAdapter);
        
        // ListView项点击事件
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
				// parent:识别是哪个listview;
				// view:当前listview的item的view的布局
				// position;当前item在listview的适配器里的位置，从0开始
				// id:当前item在listview的第几行的位置
				
				// 获取点击的商品的图像资源ID
				int imagesId = imageIds[position];
				Intent intent = new Intent();
				// 跳转到新的页面显示商品图片
				intent.setClass(MainActivity.this, ProductImageActivity.class);
				intent.putExtra("imagesId", imagesId);
				startActivity(intent);
			}		
		});
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();
		if (id == R.id.action_settings) {
			return true;
		}
		return super.onOptionsItemSelected(item);
	}
}

package com.example.gridviewapp4;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;

public class ProductImageActivity extends Activity{
	private ImageView imageview;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.image_main);
		
		// 获取从主页面传递过来的图像资源ID参数
        int imagesId = getIntent().getIntExtra("imagesId", 0);
        
		 // 使用ImageView控件显示所选商品的图像资源
		imageview = (ImageView)findViewById(R.id.imageView);
		imageview.setImageResource(imagesId);
		
	}
}