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布局文件:



    
    
    


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> 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> getData(){
        List> listItems =new ArrayList>();
        for (int i=0;i maps = new HashMap();
            maps.put("image",imagesId[i]);
            listItems.add(maps);
        }
        return listItems;
    }
}



你可能感兴趣的:(安卓基础)