今天学习了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;
}
}