Android开发学习笔记 Gallery和GridView浅析
程序员文章站
2022-04-12 12:25:15
一.gallery的简介
gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息。gallery还可以和image...
一.gallery的简介
gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息。gallery还可以和imageswitcher组件结合使用来实现一个通过缩略图来浏览图片的效果。
gallery常用的xml属性
属性名称
|
描述
|
|||||||||||||||||||||||||||||||||||||||
android:animationduration
|
设置布局变化时动画的转换所需的时间(毫秒级)。仅在动画开始时计时。该值必须是整数,比如:100。
|
|||||||||||||||||||||||||||||||||||||||
android:gravity
|
指定在对象的x和y轴上如何放置内容。指定一下常量中的一个或多个(使用 “|”分割)
|
|||||||||||||||||||||||||||||||||||||||
android:spacing
|
图片之间的间距
|
|||||||||||||||||||||||||||||||||||||||
android:unselectedalpha
|
设置未选中的条目的透明度(alpha)。该值必须是float类型,比如:“1.2”。
|
首先介绍gallery单独使用的例子:
mainactivity.java
package com.android.gallerydemo; import android.app.activity; import android.content.context; import android.os.bundle; import android.view.view; import android.view.viewgroup; import android.widget.adapterview; import android.widget.adapterview.onitemclicklistener; import android.widget.baseadapter; import android.widget.gallery; import android.widget.imageview; import android.widget.toast; public class mainactivity extends activity { private gallery gallery; @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); gallery = (gallery)findviewbyid(r.id.gallery); //设置图片适配器 gallery.setadapter(new imageadapter(this)); //设置监听器 gallery.setonitemclicklistener(new onitemclicklistener() { @override public void onitemclick(adapterview<?>parent, view v, int position, long id) { toast.maketext(mainactivity.this, "点击了第"+(position+1)+"张图片", toast.length_long).show(); } }); } } class imageadapter extends baseadapter{ //声明context private context context; //图片源数组 private integer[] imageinteger={ r.drawable.pic1, r.drawable.pic2, r.drawable.pic3, r.drawable.pic4, r.drawable.pic5, r.drawable.pic6, r.drawable.pic7 }; //声明 imageadapter public imageadapter(context c){ context = c; } @override //获取图片的个数 public int getcount() { return imageinteger.length; } @override //获取图片在库中的位置 public object getitem(int position) { return position; } @override //获取图片在库中的位置 public long getitemid(int position) { // todo auto-generated method stub return position; } @override public view getview(int position, view convertview, viewgroup parent) { imageview imageview = new imageview(context); //给imageview设置资源 imageview.setimageresource(imageinteger[position]); //设置比例类型 imageview.setscaletype(imageview.scaletype.fit_xy); //设置布局 图片128x192显示 imageview.setlayoutparams(new gallery.layoutparams(128, 192)); return imageview; } }
main.xml
<?xml version="1.0" encoding="utf-8"?> <gallery xmlns:android="http://schemas.android.com/apk/res/android" 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
package com.android.gallerytest; import android.app.activity; import android.content.context; import android.os.bundle; import android.view.view; import android.view.viewgroup; import android.view.window; import android.view.animation.animationutils; import android.widget.adapterview; import android.widget.baseadapter; import android.widget.gallery; import android.widget.imageswitcher; import android.widget.imageview; import android.widget.adapterview.onitemselectedlistener; import android.widget.gallery.layoutparams; import android.widget.viewswitcher.viewfactory; public class mainactivity extends activity implements onitemselectedlistener, viewfactory { private imageswitcher mswitcher; //大图片对应的缩略图源数组 private integer[] 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 }; //大图片源数组 private integer[] 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 public void oncreate(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(new imageadapter(this)); g.setonitemselectedlistener(this); } //创建内部类imageadapter public class imageadapter extends baseadapter { public imageadapter(context c) { mcontext = c; } public int getcount() { return mthumbids.length; } public object getitem(int position) { return position; } public long getitemid(int position) { return position; } public view getview(int position, view convertview, viewgroup parent) { imageview i = new imageview(mcontext); i.setimageresource(mthumbids[position]); //设置边界对齐 i.setadjustviewbounds(true); //设置布局参数 i.setlayoutparams(new gallery.layoutparams( layoutparams.wrap_content, layoutparams.wrap_content)); //设置背景资源 i.setbackgroundresource(r.drawable.picture_frame); return i; } private context mcontext; } @override //实现onitemselected()方法,更换图片 public void onitemselected(adapterview<?> adapter, view v, int position, long id) { //设置图片资源 mswitcher.setimageresource(mimageids[position]); } @override public void onnothingselected(adapterview<?> arg0) { } @override //实现makeview()方法,为imageview设置布局格式 public view makeview() { imageview i = new imageview(this); //设置背景颜色 i.setbackgroundcolor(0xff000000); //设置比例类型 i.setscaletype(imageview.scaletype.fit_center); //设置布局参数 i.setlayoutparams(new imageswitcher.layoutparams( layoutparams.fill_parent, layoutparams.fill_parent)); return i; } }
main.xml
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <imageswitcher android:id="@+id/switcher" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignparenttop="true" android:layout_alignparentleft="true" /> <gallery 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" /> </relativelayout>
效果图:
二.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
package com.android.gridview.activity; import android.app.activity; import android.content.context; import android.os.bundle; 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; import android.widget.toast; public class mainactivity extends activity { @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); gridview gv = (gridview)findviewbyid(r.id.gridview1); //为gridview设置适配器 gv.setadapter(new myadapter(this)); //注册监听事件 gv.setonitemclicklistener(new onitemclicklistener() { public void onitemclick(adapterview<?> parent, view v, int position, long id) { toast.maketext(mainactivity.this, "pic" + position, toast.length_short).show(); } }); } } //自定义适配器 class myadapter extends baseadapter{ //上下文对象 private context context; //图片数组 private integer[] 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; } public int getcount() { return imgs.length; } public object getitem(int item) { return item; } public long getitemid(int id) { return id; } //创建view方法 public view getview(int position, view convertview, viewgroup parent) { imageview imageview; if (convertview == null) { imageview = new imageview(context); imageview.setlayoutparams(new gridview.layoutparams(75, 75));//设置imageview对象布局 imageview.setadjustviewbounds(false);//设置边界对齐 imageview.setscaletype(imageview.scaletype.center_crop);//设置刻度的类型 imageview.setpadding(8, 8, 8, 8);//设置间距 } else { imageview = (imageview) convertview; } imageview.setimageresource(imgs[position]);//为imageview设置图片资源 return imageview; } }
main.xml
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <gridview 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" /> </linearlayout>
效果图:
第二个例子:
mainactivity.java
package com.android.gridview2.activity; import java.util.arraylist; import java.util.hashmap; import java.util.list; import java.util.map; import android.app.activity; import android.os.bundle; import android.widget.gridview; import android.widget.simpleadapter; public class mainactivity extends activity { private gridview gv; @override protected void oncreate(bundle savedinstancestate) { // todo auto-generated method stub super.oncreate(savedinstancestate); setcontentview(r.layout.gridview); //准备要添加的数据条目 list<map<string, object>> items = new arraylist<map<string,object>>(); for (int i = 0; i < 9; i++) { map<string, object> item = new hashmap<string, object>(); item.put("imageitem", r.drawable.icon);//添加图像资源的id item.put("textitem", "icon" + i);//按序号添加itemtext items.add(item); } //实例化一个适配器 simpleadapter adapter = new simpleadapter(this, items, r.layout.grid_item, new string[]{"imageitem", "textitem"}, new int[]{r.id.image_item, r.id.text_item}); //获得gridview实例 gv = (gridview)findviewbyid(r.id.mygridview); //为gridview设置适配器 gv.setadapter(adapter); } }
gridview.xml
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" > <gridview android:id="@+id/mygridview" android:numcolumns="3" android:gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:stretchmode="columnwidth" /> </linearlayout>
grid_item.xml
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/relativelayout1" android:layout_width="wrap_content" android:layout_height="fill_parent" android:paddingbottom="6dip" > <imageview android:id="@+id/image_item" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" /> <textview android:id="@+id/text_item" android:layout_below="@+id/image_item" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_centerhorizontal="true" /> </relativelayout>
效果图:
第三个例子:
mainactivity.java
package com.android.gridview3; import java.util.arraylist; import java.util.list; import android.app.activity; import android.content.context; import android.os.bundle; import android.view.layoutinflater; import android.view.view; import android.view.viewgroup; import android.widget.adapterview; import android.widget.baseadapter; import android.widget.gridview; import android.widget.imageview; import android.widget.textview; import android.widget.toast; import android.widget.adapterview.onitemclicklistener; public class mainactivity extends activity { private gridview gridview; //图片的文字标题 private string[] titles = new string[] { "pic1", "pic2", "pic3", "pic4", "pic5", "pic6", "pic7", "pic8", "pic9"}; //图片id数组 private int[] images = new int[]{ 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 public void oncreate(bundle savedinstancestate){ super.oncreate(savedinstancestate); setcontentview(r.layout.main); gridview = (gridview) findviewbyid(r.id.gridview); pictureadapter adapter = new pictureadapter(titles, images, this); gridview.setadapter(adapter); gridview.setonitemclicklistener(new onitemclicklistener() { public void onitemclick(adapterview<?> parent, view v, int position, long id) { toast.maketext(mainactivity.this, "pic" + (position+1), toast.length_short).show(); } }); } } //自定义适配器 class pictureadapter extends baseadapter{ private layoutinflater inflater; private list<picture> pictures; public pictureadapter(string[] titles, int[] images, context context) { super(); pictures = new arraylist<picture>(); inflater = layoutinflater.from(context); for (int i = 0; i < images.length; i++) { picture picture = new picture(titles[i], images[i]); pictures.add(picture); } } @override public int getcount() { if (null != pictures) { return pictures.size(); } else { return 0; } } @override public object getitem(int position) { return pictures.get(position); } @override public long getitemid(int position) { return position; } @override public view getview(int position, view convertview, viewgroup parent) { viewholder viewholder; if (convertview == null) { convertview = inflater.inflate(r.layout.picture_item, null); viewholder = new viewholder(); viewholder.title = (textview) convertview.findviewbyid(r.id.title); viewholder.image = (imageview) convertview.findviewbyid(r.id.image); convertview.settag(viewholder); } else { viewholder = (viewholder) convertview.gettag(); } viewholder.title.settext(pictures.get(position).gettitle()); viewholder.image.setimageresource(pictures.get(position).getimageid()); return convertview; } } class viewholder { public textview title; public imageview image; } class picture { private string title; private int imageid; public picture() { super(); } public picture(string title, int imageid) { super(); this.title = title; this.imageid = imageid; } public string gettitle() { return title; } public void settitle(string title) { this.title = title; } public int getimageid() { return imageid; } public void setimageid(int imageid) { this.imageid = imageid; } }
main.xml
<?xml version="1.0" encoding="utf-8"?> <gridview xmlns:android="http://schemas.android.com/apk/res/android" 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
<?xml version="1.0" encoding="utf-8"?> <linearlayout 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" > <imageview android:id="@+id/image" android:layout_width="100dp" android:layout_height="150dp" android:layout_gravity="center" android:scaletype="fitxy" android:padding="4dp" /> <textview android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center_horizontal" /> </linearlayout>
效果图:
本文出自 “it的点点滴滴” 博客