android gallery 背景,Android开发学习笔记：Gallery和GridView浅析

一.Gallery的简介

Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图，一般用来浏览图片，并且可以响应事件显示信息。Gallery还可以和ImageSwitcher组件结合使用来实现一个通过缩略图来浏览图片的效果。

Gallery常用的XML属性

属性名称

描述

android:animationDuration

设置布局变化时动画的转换所需的时间(毫秒级)。仅在动画开始时计时。该值必须是整数，比如：100。

android:gravity

指定在对象的X和Y轴上如何放置内容。指定一下常量中的一个或多个(使用 “|”分割)

Constant

Value

Description

top

0x30

紧靠容器顶端，不改变其大小

bottom

0x50

紧靠容器底部，不改变其大小

left

0x03

紧靠容器左侧，不改变其大小

right

0x05

紧靠容器右侧，不改变其大小

center_vertical

0x10

垂直居中，不改变其大小

fill_vertical

0x70

垂直方向上拉伸至充满容器

center_horizontal

0x01

水平居中，不改变其大小

Fill_horizontal

0x07

水平方向上拉伸使其充满容器

center

0x11

居中对齐，不改变其大小

fill

0x77

在水平和垂直方向上拉伸，使其充满容器

clip_vertical

0x80

垂直剪切(当对象边缘超出容器的时候，将上下边缘超出的部分剪切掉)

clip_horizontal

0x08

水平剪切(当对象边缘超出容器的时候，将左右边缘超出的部分剪切掉)

android:spacing

图片之间的间距

android:unselectedAlpha

设置未选中的条目的透明度(Alpha)。该值必须是float类型，比如：“1.2”。

首先介绍Gallery单独使用的例子：

MainActivity.java

packagecom.android.gallerydemo;

importandroid.app.Activity;

importandroid.content.Context;

importandroid.os.Bundle;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.widget.AdapterView;

importandroid.widget.AdapterView.OnItemClickListener;

importandroid.widget.BaseAdapter;

importandroid.widget.Gallery;

importandroid.widget.ImageView;

importandroid.widget.Toast;

publicclassMainActivityextendsActivity {

privateGallery gallery;

@Override

publicvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

gallery = (Gallery)findViewById(R.id.gallery);

//设置图片适配器

gallery.setAdapter(newImageAdapter(this));

//设置监听器

gallery.setOnItemClickListener(newOnItemClickListener() {

@Override

publicvoidonItemClick(AdapterView>parent, View v,intposition,longid) {

Toast.makeText(MainActivity.this,"点击了第"+(position+1)+"张图片", Toast.LENGTH_LONG).show();

}

});

}

}

classImageAdapterextendsBaseAdapter{

//声明Context

privateContext context;

//图片源数组

privateInteger[] p_w_picpathInteger={

R.drawable.pic1,

R.drawable.pic2,

R.drawable.pic3,

R.drawable.pic4,

R.drawable.pic5,

R.drawable.pic6,

R.drawable.pic7

};

//声明 ImageAdapter

publicImageAdapter(Context c){

context = c;

}

@Override

//获取图片的个数

publicintgetCount() {

returnp_w_picpathInteger.length;

}

@Override

//获取图片在库中的位置

publicObject getItem(intposition) {

returnposition;

}

@Override

//获取图片在库中的位置

publiclonggetItemId(intposition) {

// TODO Auto-generated method stub

returnposition;

}

@Override

publicView getView(intposition, View convertView, ViewGroup parent) {

ImageView p_w_picpathView =newImageView(context);

//给ImageView设置资源

p_w_picpathView.setImageResource(p_w_picpathInteger[position]);

//设置比例类型

p_w_picpathView.setScaleType(ImageView.ScaleType.FIT_XY);

//设置布局 图片128x192显示

p_w_picpathView.setLayoutParams(newGallery.LayoutParams(128,192));

returnp_w_picpathView;

}

}

main.xml

android:id="@+id/gallery"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:background="?android:galleryItemBackground"

/>

效果图：

Gallery和ImageSwitcher组件结合使用的例子：

MainActivity.java

packagecom.android.gallerytest;

importandroid.app.Activity;

importandroid.content.Context;

importandroid.os.Bundle;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.view.Window;

importandroid.view.animation.AnimationUtils;

importandroid.widget.AdapterView;

importandroid.widget.BaseAdapter;

importandroid.widget.Gallery;

importandroid.widget.ImageSwitcher;

importandroid.widget.ImageView;

importandroid.widget.AdapterView.OnItemSelectedListener;

importandroid.widget.Gallery.LayoutParams;

importandroid.widget.ViewSwitcher.ViewFactory;

publicclassMainActivityextendsActivityimplementsOnItemSelectedListener,

ViewFactory {

privateImageSwitcher mSwitcher;

//大图片对应的缩略图源数组

privateInteger[] mThumbIds = { R.drawable.sample_thumb_0,

R.drawable.sample_thumb_1, R.drawable.sample_thumb_2,

R.drawable.sample_thumb_3, R.drawable.sample_thumb_4,

R.drawable.sample_thumb_5, R.drawable.sample_thumb_6,

R.drawable.sample_thumb_7 };

//大图片源数组

privateInteger[] mImageIds = { R.drawable.sample_0, R.drawable.sample_1,

R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4,

R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 };

@Override

publicvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//设置窗口无标题

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.main);

mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);

//注意在使用一个ImageSwitcher之前，

//一定要调用setFactory方法，要不setImageResource这个方法会报空指针异常。

mSwitcher.setFactory(this);

//设置动画效果

mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_in));

mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,

android.R.anim.fade_out));

Gallery g = (Gallery) findViewById(R.id.gallery);

//添加OnItemSelectedListener监听器

g.setAdapter(newImageAdapter(this));

g.setOnItemSelectedListener(this);

}

//创建内部类ImageAdapter

publicclassImageAdapterextendsBaseAdapter {

publicImageAdapter(Context c) {

mContext = c;

}

publicintgetCount() {

returnmThumbIds.length;

}

publicObject getItem(intposition) {

returnposition;

}

publiclonggetItemId(intposition) {

returnposition;

}

publicView getView(intposition, View convertView, ViewGroup parent) {

ImageView i =newImageView(mContext);

i.setImageResource(mThumbIds[position]);

//设置边界对齐

i.setAdjustViewBounds(true);

//设置布局参数

i.setLayoutParams(newGallery.LayoutParams(

LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

//设置背景资源

i.setBackgroundResource(R.drawable.picture_frame);

returni;

}

privateContext mContext;

}

@Override

//实现onItemSelected()方法，更换图片

publicvoidonItemSelected(AdapterView> adapter, View v,intposition,

longid) {

//设置图片资源

mSwitcher.setImageResource(mImageIds[position]);

}

@Override

publicvoidonNothingSelected(AdapterView> arg0) {

}

@Override

//实现makeView()方法，为ImageView设置布局格式

publicView makeView() {

ImageView i =newImageView(this);

//设置背景颜色

i.setBackgroundColor(0xFF000000);

//设置比例类型

i.setScaleType(ImageView.ScaleType.FIT_CENTER);

//设置布局参数

i.setLayoutParams(newImageSwitcher.LayoutParams(

LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

returni;

}

}

main.xml

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

android:id="@+id/switcher"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

/>

android:id="@+id/gallery"

android:background="#55000000"

android:layout_width="fill_parent"

android:layout_height="60dp"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:gravity="center_vertical"

android:spacing="16dp"

/>

效果图:

二.GridView的简介

GridView(网格视图)是按照行列的方式来显示内容的，一般用于显示图片，图片等内容，比如实现九宫格图，用GridView是首选，也是最简单的。主要用于设置Adapter。

GridView常用的XML属性：

属性名称

描述

android:columnWidth

设置列的宽度。

android:gravity

设置此组件中的内容在组件中的位置。可选的值有：top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical可以多选，用“|”分开。

android:horizontalSpacing

两列之间的间距。

android:numColumns

设置列数。

android:stretchMode

缩放模式。

android:verticalSpacing

两行之间的间距。

下面有三个例子，第一个是只显示图片的，第二个是显示图片文字的(这里的图片是Android系统自带的图片)，第三个是显示自定义的图片文字。前面两个例子的实现都不是很难，第三个例子的实现有些复杂，学习GridView的时候，就想着能不能自定义自己喜欢的图片加上文字，在网上找些资料，一般都是第二个例子的形式的，最后在视频学习上找到了能实现自定义自己的图片的例子。自己就照着例子去学习，修改成了第三个例子。

第一个例子：

MainActivity.java

packagecom.android.gridview.activity;

importandroid.app.Activity;

importandroid.content.Context;

importandroid.os.Bundle;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.widget.AdapterView;

importandroid.widget.AdapterView.OnItemClickListener;

importandroid.widget.BaseAdapter;

importandroid.widget.GridView;

importandroid.widget.ImageView;

importandroid.widget.Toast;

publicclassMainActivityextendsActivity {

@Override

publicvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

GridView gv = (GridView)findViewById(R.id.GridView1);

//为GridView设置适配器

gv.setAdapter(newMyAdapter(this));

//注册监听事件

gv.setOnItemClickListener(newOnItemClickListener()

{

publicvoidonItemClick(AdapterView> parent, View v,intposition,longid)

{

Toast.makeText(MainActivity.this,"pic"+ position, Toast.LENGTH_SHORT).show();

}

});

}

}

//自定义适配器

classMyAdapterextendsBaseAdapter{

//上下文对象

privateContext context;

//图片数组

privateInteger[] imgs = {

R.drawable.pic0, R.drawable.pic1, R.drawable.pic2,

R.drawable.pic3, R.drawable.pic4, R.drawable.pic5,

R.drawable.pic6, R.drawable.pic7, R.drawable.pic8,

R.drawable.pic0, R.drawable.pic1, R.drawable.pic2,

R.drawable.pic3, R.drawable.pic4, R.drawable.pic5,

R.drawable.pic6, R.drawable.pic7, R.drawable.pic8,

};

MyAdapter(Context context){

this.context = context;

}

publicintgetCount() {

returnimgs.length;

}

publicObject getItem(intitem) {

returnitem;

}

publiclonggetItemId(intid) {

returnid;

}

//创建View方法

publicView getView(intposition, View convertView, ViewGroup parent) {

ImageView p_w_picpathView;

if(convertView ==null) {

p_w_picpathView =newImageView(context);

p_w_picpathView.setLayoutParams(newGridView.LayoutParams(75,75));//设置ImageView对象布局

p_w_picpathView.setAdjustViewBounds(false);//设置边界对齐

p_w_picpathView.setScaleType(ImageView.ScaleType.CENTER_CROP);//设置刻度的类型

p_w_picpathView.setPadding(8,8,8,8);//设置间距

}

else{

p_w_picpathView = (ImageView) convertView;

}

p_w_picpathView.setImageResource(imgs[position]);//为ImageView设置图片资源

returnp_w_picpathView;

}

}

main.xml

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

android:id="@+id/GridView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:columnWidth="90dp"

android:numColumns="3"

android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"

android:stretchMode="columnWidth"

android:gravity="center"

/>

效果图：

第二个例子：

MainActivity.java

packagecom.android.gridview2.activity;

importjava.util.ArrayList;

importjava.util.HashMap;

importjava.util.List;

importjava.util.Map;

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.widget.GridView;

importandroid.widget.SimpleAdapter;

publicclassMainActivityextendsActivity {

privateGridView gv;

@Override

protectedvoidonCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub

super.onCreate(savedInstanceState);

setContentView(R.layout.gridview);

//准备要添加的数据条目

List> items =newArrayList>();

for(inti =0; i <9; i++) {

Map item =newHashMap();

item.put("p_w_picpathItem", R.drawable.icon);//添加图像资源的ID

item.put("textItem","icon"+ i);//按序号添加ItemText

items.add(item);

}

//实例化一个适配器

SimpleAdapter adapter =newSimpleAdapter(this,

items,

R.layout.grid_item,

newString[]{"p_w_picpathItem","textItem"},

newint[]{R.id.p_w_picpath_item, R.id.text_item});

//获得GridView实例

gv = (GridView)findViewById(R.id.mygridview);

//为GridView设置适配器

gv.setAdapter(adapter);

}

}

gridview.xml

android:layout_width="wrap_content"

android:layout_height="wrap_content"

>

android:id="@+id/mygridview"

android:numColumns="3"

android:gravity="center_horizontal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:stretchMode="columnWidth"

/>

grid_item.xml

android:id="@+id/RelativeLayout1"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:paddingBottom="6dip"

>

android:id="@+id/p_w_picpath_item"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerHorizontal="true"

/>

android:id="@+id/text_item"

android:layout_below="@+id/p_w_picpath_item"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:layout_centerHorizontal="true"

/>

效果图：

第三个例子：

MainActivity.java

packagecom.android.gridview3;

importjava.util.ArrayList;

importjava.util.List;

importandroid.app.Activity;

importandroid.content.Context;

importandroid.os.Bundle;

importandroid.view.LayoutInflater;

importandroid.view.View;

importandroid.view.ViewGroup;

importandroid.widget.AdapterView;

importandroid.widget.BaseAdapter;

importandroid.widget.GridView;

importandroid.widget.ImageView;

importandroid.widget.TextView;

importandroid.widget.Toast;

importandroid.widget.AdapterView.OnItemClickListener;

publicclassMainActivityextendsActivity

{

privateGridView gridView;

//图片的文字标题

privateString[] titles =newString[]

{"pic1","pic2","pic3","pic4","pic5","pic6","pic7","pic8","pic9"};

//图片ID数组

privateint[] p_w_picpaths =newint[]{

R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,

R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,

R.drawable.pic7, R.drawable.pic8,R.drawable.pic9

};

@Override

publicvoidonCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

gridView = (GridView) findViewById(R.id.gridview);

PictureAdapter adapter =newPictureAdapter(titles, p_w_picpaths,this);

gridView.setAdapter(adapter);

gridView.setOnItemClickListener(newOnItemClickListener()

{

publicvoidonItemClick(AdapterView> parent, View v,intposition,longid)

{

Toast.makeText(MainActivity.this,"pic"+ (position+1), Toast.LENGTH_SHORT).show();

}

});

}

}

//自定义适配器

classPictureAdapterextendsBaseAdapter{

privateLayoutInflater inflater;

privateList pictures;

publicPictureAdapter(String[] titles,int[] p_w_picpaths, Context context)

{

super();

pictures =newArrayList();

inflater = LayoutInflater.from(context);

for(inti =0; i < p_w_picpaths.length; i++)

{

Picture picture =newPicture(titles[i], p_w_picpaths[i]);

pictures.add(picture);

}

}

@Override

publicintgetCount()

{

if(null!= pictures)

{

returnpictures.size();

}else

{

return0;

}

}

@Override

publicObject getItem(intposition)

{

returnpictures.get(position);

}

@Override

publiclonggetItemId(intposition)

{

returnposition;

}

@Override

publicView getView(intposition, View convertView, ViewGroup parent)

{

ViewHolder viewHolder;

if(convertView ==null)

{

convertView = inflater.inflate(R.layout.picture_item,null);

viewHolder =newViewHolder();

viewHolder.title = (TextView) convertView.findViewById(R.id.title);

viewHolder.p_w_picpath = (ImageView) convertView.findViewById(R.id.p_w_picpath);

convertView.setTag(viewHolder);

}else

{

viewHolder = (ViewHolder) convertView.getTag();

}

viewHolder.title.setText(pictures.get(position).getTitle());

viewHolder.p_w_picpath.setImageResource(pictures.get(position).getImageId());

returnconvertView;

}

}

classViewHolder

{

publicTextView title;

publicImageView p_w_picpath;

}

classPicture

{

privateString title;

privateintp_w_picpathId;

publicPicture()

{

super();

}

publicPicture(String title,intp_w_picpathId)

{

super();

this.title = title;

this.p_w_picpathId = p_w_picpathId;

}

publicString getTitle()

{

returntitle;

}

publicvoidsetTitle(String title)

{

this.title = title;

}

publicintgetImageId()

{

returnp_w_picpathId;

}

publicvoidsetImageId(intp_w_picpathId)

{

this.p_w_picpathId = p_w_picpathId;

}

}

main.xml

android:id="@+id/gridview"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:columnWidth="90dp"

android:numColumns="auto_fit"

android:verticalSpacing="10dp"

android:horizontalSpacing="10dp"

android:stretchMode="columnWidth"

android:gravity="center"

/>

picture_item.xml

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/root"

android:orientation="vertical"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="5dp"

>

android:id="@+id/p_w_picpath"

android:layout_width="100dp"

android:layout_height="150dp"

android:layout_gravity="center"

android:scaleType="fitXY"

android:padding="4dp"

/>

android:id="@+id/title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:gravity="center_horizontal"

/>

效果图：