GridView显示网格图片

说明:当点击小图片时,在屏幕下方显示大的图片,并且图片有边框

自定义myImageView实体类,实现图片加边框

package cn.bzu.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.ImageView;

public class myImageView extends ImageView {
	private String namespace = "http://shadow.com";
	private int color;

	public myImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		color = Color.parseColor(attrs.getAttributeValue(namespace,
				"BorderColor"));
	}

	/*
	 * (non-Javadoc)
	 * 
	 * @see android.widget.ImageView#onDraw(android.graphics.Canvas)
	 */
	@Override
	protected void onDraw(Canvas canvas) {

		super.onDraw(canvas);
		// 画边框
		Rect rec = canvas.getClipBounds();
		rec.bottom--;
		rec.right--;
		Paint paint = new Paint();
		paint.setColor(color);
		paint.setStyle(Paint.Style.STROKE);
		canvas.drawRect(rec, paint);
	}

}

activity_grid_view.xml(红色部分是实现边框的关键代码)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:shadow="http://shadow.com"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/imagelist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:horizontalSpacing="20dp"
        android:numColumns="2"
        android:verticalSpacing="10dp" >
    </GridView>

    <cn.bzu.view.myImageView
        android:id="@+id/imageshow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:adjustViewBounds="true"
        shadow:BorderColor="GRAY" />

</LinearLayout>

在res/lauout下建个xml:grid.xml

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

    <cn.bzu.view.myImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="50dp"
        shadow:BorderColor="GRAY" />

    <TextView
        android:id="@+id/title"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/image" >
    </TextView>

</RelativeLayout>

GridViewActivity.java代码:

package cn.bzu.gridview;

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

import cn.bzu.view.myImageView;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.support.v4.app.NavUtils;

public class GridViewActivity extends Activity {
	private GridView imageGrid;
	private myImageView image;
	private int[] pics;//存放图片id
	private String[] titles;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_view);
        //查找组件
        imageGrid=(GridView) this.findViewById(R.id.imagelist);
        image=(myImageView) this.findViewById(R.id.imageshow);
        //实例化图片id的数组
        pics=new int[]{R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,R.drawable.f};
        titles=new String[]{"可爱的小白兔","拥抱的狗狗","迷茫的小狗","装可怜的双胞胎","爱萝卜的小白兔","享受的猫叔"};
        //创建一个List<Map>集合,用于将图片id转化为List集合
        List<Map<String,Object>> pic_items=new ArrayList<Map<String, Object>>();
        for(int i=0;i<pics.length;i++){
        	Map<String,Object> items=new HashMap<String, Object>();
        	items.put("pic", pics[i]);
        	items.put("title", titles[i]);
        	pic_items.add(items);
        }
       
        //创建SimpleAdapter适配器,以备与GridView组件进行绑定
        SimpleAdapter adapter=new SimpleAdapter(this, pic_items,R.layout.grid, new String[]{"pic","title"}, new int[]{R.id.image,R.id.title});
        //GridView组件和Adapter适配器进行绑定
        imageGrid.setAdapter(adapter);
        //为image组件设置默认图片
        image.setImageResource(pics[0]);
        //注册事件监听
        imageGrid.setOnItemClickListener(new GridViewHandler());
        
    }
    public class GridViewHandler implements OnItemClickListener{

		@Override
		public void onItemClick(AdapterView<?> adapter, View view, int position,
				long id) {
			image.setImageResource(pics[position]);
			
		}
    	
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_grid_view, menu);
        return true;
    }

    
}




 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值