GridView跟SimpleAdapter的结合使用显示图片

GridView和SimpleAdapter的结合使用显示图片

今天学习了GridView的使用，和ListView类似都是一种布局容器。下面实现的的是“带预览的图片浏览器”的Demo

带预览的图片浏览器
思路：
1、采用GridView来组织所有图片的预览效果。用ImageSwitch来显示
2、ImageSwitcher要设置一个ImageSwitcher.ViewFactory,并实现makeView()方法，
返回一个人ImageView，ImageSwitcher负责显示ImageView

步骤：
1、在xml文件中设置GridView布局，ImageSwicher组件
2、在MainActivity中定义图片数组id，实例化GridView和ImageSwitcher。
3、为ImageSwitcher设置动画效果。
4、通过SimpleAdapter将图片数组加载到GridView中。
5、为GridView中的图片设置点击预览事件，通过ImageSwitcher显示选中的图片。

xml布局文件：

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <GridView
        android:id="@+id/image_gridview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numColumns="4"
        android:gravity="center"></GridView>
    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageSwitcher
        android:id="@+id/imageswitcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        ></ImageSwitcher>
</LinearLayout>
</RelativeLayout>

MainActivity.java

package lzl.edu.com.gridviewtest;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.SimpleAdapter;
import android.widget.ViewSwitcher;

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

public class MainActivity extends Activity {

    public static final String TAG = "MainActivityInfos";
    GridView imagegridview;
    ImageSwitcher imageswitcher;
    ImageView image1;
    int[] imagesId = new int[]{R.mipmap.image1, R.mipmap.image2, R.mipmap.image3,R.mipmap.image4,
            R.mipmap.image5,R.mipmap.image6,R.mipmap.image7,R.mipmap.image8};

    @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        init();
    }
    void init(){
        imagegridview = (GridView)findViewById(R.id.image_gridview);
        imageswitcher=(ImageSwitcher)findViewById(R.id.imageswitcher);
        image1 = (ImageView)findViewById(R.id.image1);
        //设置图片切换动画
        imageswitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
        imageswitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));

        imageswitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                //设置imageView的属性
                imageView.setBackgroundColor(0xff0000);
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
                        ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
                return imageView;
            }
        });
        setGridViewImages();
    }

    //设置图片到GridView布局中
    void setGridViewImages(){
        /**
         * SimpleAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)
         参数context：上下文，比如this。关联SimpleAdapter运行的视图上下文
         参数data：Map列表，列表要显示的数据，这部分需要自己实现，如例子中的getData()，类型要与上面的一致，每条项目要与from中指定条目一致
         参数resource：ListView单项布局文件的Id,这个布局就是你自定义的布局了，你想显示什么样子的布局都在这个布局中。这个布局中必须包括了to中定义的控件id
         参数 from：一个被添加到Map上关联每一个项目列名称的列表，数组里面是列名称
         参数 to：是一个int数组，数组里面的id是自定义布局中各个控件的id，需要与上面的from对应
         */
        SimpleAdapter simpleAdapter = new SimpleAdapter(this,getData(), R.layout.activity_main,
                new String[]{"image"},new int[]{R.id.image1});
        imagegridview.setAdapter(simpleAdapter);
        //添加列表项被单击的监听器
        imagegridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Log.i(TAG+"--1",""+position);
                Log.i(TAG+"--2",""+position % imagesId.length);
                imageswitcher.setImageResource(imagesId[position]);
            }
        });

        //添加列表项被选中的监听器
        imagegridview.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Log.i(TAG+"---3",""+position);
                Log.i(TAG+"---4",""+position%imagesId.length);
                imageswitcher.setImageResource(imagesId[position]);
            }

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

     //将imagesId存储到List集合中
    public List<Map<String,Object>> getData(){
        List<Map<String,Object>> listItems =new ArrayList<Map<String,Object>>();
        for (int i=0;i<imagesId.length;i++) {
            Map<String,Object> maps = new HashMap<String,Object>();
            maps.put("image",imagesId[i]);
            listItems.add(maps);
        }
        return listItems;
    }
}