用户界面 View（八）

Gallery 画廊

Gallery是一个内部元素可以水平滚动，并且可以把当前选择的子元素定位在它中心的布局组件。

我们还是直接看看例子的运行效果。

下面上代码，相关解释都放在代码里了。

1、建立一个新项目 HelloGallery

2、拷贝wallpaper_0.jpg…wallpaper_9.jpg 10个图片文件到res/drawable目录

3、res/layout/main.xml文件的内容如下：

1. <?xml version="1.0" encoding="utf-8"?>
2. <framelayout android:layout_height="fill_parent" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/FrameLayout01">
3. <imageview android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/ImageView01" android:src="@drawable/wallpaper_0">
4. </imageview>
6. <gallery android:layout_height="wrap_content" android:layout_width="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/Gallery01" android:spacing="5dp">
7. </gallery>
8. </framelayout>

复制代码

其中我们使用FrameLayout来实现叠加效果，使用ImageView来显示大图，Gallery来展示画廊，android:spacing="5dp" 属性则是用来设置元素之间的间隔。4、在res/values/目录中新建一个attrs.xml内容如下：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <resources>
3.         <declare -styleable="" name="HelloGallery">
4.                 <attr name="android:galleryItemBackground">
5.         </attr></declare>
6. </resources>

复制代码

5、在MainHelloGallery.java中的内容如下：

1. package android.basic.lesson13;
3. import android.app.Activity;
4. import android.content.Context;
5. import android.content.res.TypedArray;
6. import android.os.Bundle;
7. import android.view.View;
8. import android.view.ViewGroup;
10. import android.widget.AdapterView;
11. import android.widget.AdapterView.OnItemClickListener;
12. import android.widget.BaseAdapter;
13. import android.widget.Gallery;
14. import android.widget.ImageView;
15. import android.widget.Toast;
17. public class MainHelloGallery extends Activity {
19.         /** Called when the activity is first created. */
20.         @Override
21.         public void onCreate(Bundle savedInstanceState) {
22.                 super.onCreate(savedInstanceState);
23.                 setContentView(R.layout.main);
25.                 //定义UI组件
26.                 final ImageView iv= (ImageView)findViewById(R.id.ImageView01);
27.                 Gallery g = (Gallery) findViewById(R.id.Gallery01);
29.                 //设置图片匹配器
30.                 g.setAdapter(new ImageAdapter(this));
32.                 //设置AdapterView点击监听器，Gallery是AdapterView的子类
33.                 g.setOnItemClickListener(new OnItemClickListener() {
35.                         @Override
36.                         public void onItemClick(AdapterView<?> parent, View view,
37.                                         int position, long id) {
38.                                 //显示点击的是第几张图片
39.                                 Toast.makeText(MainHelloGallery.this, "" + position,
40.                                                 Toast.LENGTH_LONG).show();
41.                                 //设置背景部分的ImageView显示当前Item的图片
42.                                 iv.setImageResource(((ImageView)view).getId());
43.                         }
44.                 });
45.         }
47.         //定义继承BaseAdapter的匹配器
48.         public class ImageAdapter extends BaseAdapter {
50.                 //Item的修饰背景
51.                 int mGalleryItemBackground;
53.                 //上下文对象
54.                 private Context mContext;
56.                 //图片数组
57.                 private Integer[] mImageIds = { R.drawable.wallpaper_0,
58.                                 R.drawable.wallpaper_1, R.drawable.wallpaper_2,
59.                                 R.drawable.wallpaper_3, R.drawable.wallpaper_4,
60.                                 R.drawable.wallpaper_5, R.drawable.wallpaper_6,
61.                                 R.drawable.wallpaper_7, R.drawable.wallpaper_8,
62.                                 R.drawable.wallpaper_9 };
64.                 //构造方法
65.                 public ImageAdapter(Context c){
66.                         mContext = c;
67.                         //读取styleable资源
68.                 TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);
69.                 mGalleryItemBackground = a.getResourceId(
70.                         R.styleable.HelloGallery_android_galleryItemBackground, 0);
71.                 a.recycle();
73.                 }
75.                 //返回项目数量
76.                 @Override
77.                 public int getCount() {
78.                         return mImageIds.length;
79.                 }
81.                 //返回项目
82.                 @Override
83.                 public Object getItem(int position) {
84.                         return position;
85.                 }
87.                 //返回项目Id
88.                 @Override
89.                 public long getItemId(int position) {
90.                         return position;
91.                 }
93.                 //返回视图
94.                 @Override
95.                 public View getView(int position, View convertView, ViewGroup parent) {
97.                         ImageView iv = new ImageView(mContext);
98.                         iv.setImageResource(mImageIds[position]);
99.                         //给生成的ImageView设置Id，不设置的话Id都是-1
100.                         iv.setId(mImageIds[position]);
101.                         iv.setLayoutParams(new Gallery.LayoutParams(120, 160));
102.                         iv.setScaleType(ImageView.ScaleType.FIT_XY);
103.                         iv.setBackgroundResource(mGalleryItemBackground);
104.                         return iv;
105.                 }
107.         }
108. }

复制代码

我们点击某一张图片，会把该子元素的图片显示在放在后面一层的ImageView组件中。有兴趣的同学可以了解一下AdapterView的继承关系： 

转自：http://www.apkbus.com/android-653-1-1.html