闲来无事,刚好群里面有同学问这方面的知识,就写上来了。
不多说了,先上图。有图才能吸引观众是不是...
GridView是android.widget下的组件,属于android系统常用的组件。与ListVIew不同的是,它主要是支持与9宫格方式的显示,其加载的方式与ListView相同。
首先,建立布局: 取名就简单点吧:gradeview_layout.xml
<?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:orientation="vertical"
android:background="@android:color/white">
<GridView
android:id="@+id/gradview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="3" //有几列
android:verticalSpacing="10dp" //item竖向距离
android:horizontalSpacing="10dp" //item横向距离
>
</GridView>
</LinearLayout>
<?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:orientation="vertical"
android:background="@android:color/white">
<GridView
android:id="@+id/gradview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="3" //有几列
android:verticalSpacing="10dp" //item竖向距离
android:horizontalSpacing="10dp" //item横向距离
>
</GridView>
</LinearLayout>
新建一个Activity GradviewActivity.calss
package com.android.flip;
import java.util.ArrayList;
import java.util.List;
import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class GradviewActivity extends Activity {
private GridView gradiew;
private DisplayImageOptions options;
private List<model> datas = new ArrayList<model>();
private ArrayList<String> picarrs;
public DisplayImageOptions getOptions() {
return options;
}
public void setOptions(DisplayImageOptions options) {
this.options = options;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.gradeview_layout);
//初始化Imageloader 建议写到BaseAppliction里面做初始化 不然用的时候每次都要初始化
//创建默认的ImageLoader配置参数
ImageLoaderConfiguration configuration = ImageLoaderConfiguration
.createDefault(this);
//Initialize ImageLoader with configuration.
ImageLoader.getInstance().init(configuration);
//显示图片的配置
setOptions(new DisplayImageOptions.Builder().build());
model m = null;
for (int i = 0; i < 11; i++) {
m = new model();
m.setIMGURL("http://img3.imgtn.bdimg.com/it/u=1183223528,3058066243&fm=21&gp=0.jpg");
datas.add(m);
}
//将数据转化为String 的集合
picarrs = new ArrayList<String>();
for (int i = 0; i < datas.size(); i++) {
picarrs.add(datas.get(i).getIMGURL());
}
gradiew = (GridView) findViewById(R.id.gradview);
gradiew.setAdapter(new GradsAdapter(getApplicationContext(), datas));
gradiew.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
//跳转到大图展示页面
Intent intent = new Intent(GradviewActivity.this,
BrowsPictureActivity.class);
Bundle bundle = new Bundle();
//传递路径集合
bundle.putStringArrayList("Urls", picarrs);
//传递下标
bundle.putInt("index", position);
intent.putExtra("msg", bundle);
startActivity(intent);
}
});
}
private class GradsAdapter extends BaseAdapter{
private List<model> data;
private LayoutInflater lif;
private Context context;
public GradsAdapter(Context context,List<model> data) {
this.context = context;
this.data = data;
lif = LayoutInflater.from(context);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return data.size();
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return data.get(position);
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(int position, View v, ViewGroup parent) {
if(v == null){
v = lif.inflate(R.layout.graditem_layout, null);
}
ImageView img = (ImageView) v.findViewById(R.id.img);
//填充图片
ImageLoader.getInstance().displayImage(data.get(position).getIMGURL(), img, options);
return v;
}
}
}
代码中都有注释标明了 在这里用的是ImageLoader加载图片,没有具体的去配置Options,不了解的可以在百度上搜索相关的开源库
单项点击事件,是跳转查看大图,跳转到另一个页面并加载大图。
主要是ViewPager的使用,这里就不攒述了。
附上项目下载链接:
点击打开链接