UI组件之GridView实现图片浏览器

UI组件之GridView实现图片浏览器

GridView和ListView有共同的父类:AbsListView。因此ListView和GridView有很高的相似性,都是列表项。唯一区别就是ListView只显示一列，而GridView可以显示多列。GridView一般都会指定numColumns大于1

带预览的图片浏览器

界面布局文件代码

<?xml version="1.0" encoding="utf-8"?>
<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="vertical"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:numColumns="4" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

GridView的布局文件代码

<?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:gravity="center_horizontal"
    android:orientation="horizontal"
    android:padding="2dp"

    >

    <ImageView
        android:id="@+id/image"
        android:layout_width="80dp"
        android:layout_height="80dp" />
</LinearLayout>

Activity文件

package com.shake.day10_android1;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


public class MainActivity extends Activity implements AdapterView.OnItemSelectedListener, AdapterView.OnItemClickListener {

    private GridView gridView;
    private ImageView imageView;

    public int[] imageId = {R.drawable.baby0, R.drawable.baby1, R.drawable.baby2, R.drawable.baby3, R.drawable.baby4,
            R.drawable.baby5, R.drawable.baby6, R.drawable.baby7, R.drawable.baby8, R.drawable.baby9, R.drawable.baby10, R.drawable.baby11};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 创建一个List对象，List对象的元素是Map
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();

        for (int i = 0; i < imageId.length; i++) {
            //把图片存到集合里
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("image", imageId[i]);
            list.add(map);
        }
        // 获取显示图片的ImageView
        imageView = (ImageView) findViewById(R.id.imageView);
        // 创建一个SimpleAdapter
        SimpleAdapter simpleAdapter = new SimpleAdapter(this, list, R.layout.gridview_image, new String[]{"image"}, new int[]{R.id.image});

        gridView = (GridView) findViewById(R.id.gridView);
        gridView.setAdapter(simpleAdapter);

        gridView.setOnItemSelectedListener(this);
        gridView.setOnItemClickListener(this);

    }

    /**
     * 点击事件
     *
     * @param parent
     * @param view
     * @param position
     * @param id
     */
    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        //显示当前被选中的图片
        imageView.setImageResource(imageId[position]);
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {

    }

    /**
     * 点击事件
     *
     * @param parent
     * @param view
     * @param position
     * @param id
     */
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //显示当前被选中的图片
        imageView.setImageResource(imageId[position]);
    }
}

效果