您的位置:首页 > 产品设计 > UI/UE

【Android 开发】:UI控件之 Gallery 画廊控件的使用

2013-06-05 22:45 821 查看
    Gallery控件一般是用于显示图像列表,因此也称为是画廊控件, Gallery只能水平显示一行,而且支持水平滑动效果。也就是说,单击、选中或者拖动Gallery中的图像, Gallery图像中的列表会根据不同的情况向左向右移动,直到显示到最后的一个图像为止。

    1. 在学习Gallery控件之前,我们需要掌握一些准备知识

1) Adapter (适配器)

查看这个 Adapter 的 Android 官方API文档:适配器对象作为AdapterView
和这个视图下数据的桥梁,它提供了返回数据选项的权利,当然它还可以在这些数据集合中添加数据元素。

它是一个接口,可以看出有很多实现这个接口的子类的适配器,为什么Android中的Adapter会有这么多适配器呢?主要是因为android中的UI展示的控件不一样,所以要用到这些不同的适配器来填充数据。如下图所示:





    当我们手机的屏幕想要显示一些数据的时候,它不是直接来源与数据源,而是先从适配器中去取出数据,数据源中的数据则需要填充到适配中,这样Android在展示某些数据就可以用不同的方式来展示,同时也需要不同的适配器来装载这些数据来填充的手机的UI控件中,这个类似于生活中的笔记本电脑。

2) 创建一个类继承 BaseAdapter

了解上面的知识框架之后,我们必须自己创建一个适配器类来继承
BaseAdapter,注意的是我们在声明一个类去继承这个适的时候,一般都不会直接去用这个类去实现Adapter接口,我们一般是去继承BaseAdapter这个抽象类,它是所有适配器中可以自定义的适配器,它里面所填充的格式或者内容都是用户可以自己去定义的。

public class ImageAdapter extends BaseAdapter
而后,我们必须实现下面这四个方法

1) getCount() 表示在适配器中有多少个数据选项

2) getItem(int position) 表示根据position位置来得到数据选项的值

3) getItemId(int position)  根据position位置得到所在选项的Id

4) getView(int position, View convertView, ViewGroup parent)【重要】表示在数据集合中指定一个位置得到一个视图来显示数据。更多内容,查看API文档中的这个方法定义。

由于在这里我们设计的是一个自定义的适配器,所以需要用自定义的布局来显示。这种情况下通常Android的通用布局是不能满足需求的,所以可以手工创建一个View视图,也可以用一个inflate来加载一个XML文件,然后从数据中根据position获得每一个Item的值,加载到指定的XML布局中,参数说明如下:

int
position:
    表示需要显示视图的适配器中选项的位置信息

View
convertView:
参数表示一个旧的布局,如果没有新的布局加载的时候,将使用旧的布局

ViewGroup
parent:
当前这个填充的布局,会被追加到父布局中。

2. Gallery画廊案例的实现

1) 布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<Gallery android:id="@+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"/>

</LinearLayout>

2) attrs.xml,在values文件下,这个文件主要添加一些属性的信息,替我们找到gallery的设计风格

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Gallery">
<attr name="android:galleryItemBackground"></attr>

</declare-styleable>
</resources>


3) 主程序代码

public class GalleryDemo extends Activity {

private Gallery gallery;
private ImageAdapter imageAdapter;

// 声明图片的数组
private int[] resIds = {
R.drawable.item1, R.drawable.item2, R.drawable.item3, R.drawable.item4,
R.drawable.item5, R.drawable.item6, R.drawable.item7, R.drawable.item8,
R.drawable.item9, R.drawable.item10, R.drawable.item11, R.drawable.item12,
R.drawable.item13, R.drawable.item14, R.drawable.item15,
};

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
gallery = (Gallery) findViewById(R.id.gallery);
imageAdapter = new ImageAdapter(this);
gallery.setAdapter(imageAdapter);
}

public class ImageAdapter extends BaseAdapter {

private Context context;

int mGralleryItemBackground; // 使用简单的计数器,主要是完成往每一个Item中去填充背景的图片

public ImageAdapter(Context context) {
this.context = context;
// 使用类型数组来读取属性
TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);
mGralleryItemBackground = typedArray.getResourceId(
R.styleable.Gallery_android_galleryItemBackground, 0);

}

@Override
public int getCount() {
// TODO Auto-generated method stub
return Integer.MAX_VALUE; // 返回当前适配器最大值,是整数类型的。
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return resIds[position]; // 返回数组resIds[]的位置信息
}

@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中填充图片的信息,填充的时候传递是resIds[]的下标
imageView.setImageResource(resIds[position % resIds.length]);
// 表示当前ImageView 把图片 不按比例扩大/缩小到View的大小显示
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
// 设置ImageView的大小
imageView.setLayoutParams(new Gallery.LayoutParams(200, 150));
// 设置ImageView的背景
imageView.setBackgroundResource(mGralleryItemBackground);
// TODO Auto-generated method stub
return imageView;
}

}
}

3. 程序执行结果



源码下载地址:http://download.csdn.net/detail/xukunhui2/5527233
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐