《Android开发基础教程》——6.2节Gallery界面组件——画廊展示

简介:

本节书摘来自异步社区《Android开发基础教程》一书中的第6章,第6.2节Gallery界面组件——画廊展示,作者邓文渊,更多章节内容可以访问云栖社区“异步社区”公众号查看

6.2 Gallery界面组件——画廊展示
Android开发基础教程
Gallery组件的展示方式是将图片从左到右的方式排列,如同画廊放置作品一样。但是较为特殊的是Gallery组件支持手指左右拖曳滑动的效果,并且可以选择指定的图片,从界面布局来看是相当灵活而有用的组件。

6.2.1 Gallery语法示例与常用的属性
例如:我们要创建一个Gallery组件,名称为“Gallery01”,Gallery组件和边界的距离是5dp,图片间的间隔是2dp,宽度填满整个屏幕,高度根据图片高度调整。

<Gallery android:id="@+id/Gallery01"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:padding="5dp"
   android:spacing="2dp"/>

Gallery提供许多属性来设置其特性,常用的属性如下。


956a3e6b6ec4471484e23241ac9f1ce0f49380b5

6.2.2 Gallery程序执行的流程
一般来说Gallery程序的执行流程重点如图6-3所示。


1c8468af4909dd7287675f88885c4601679c37e7

图6-3 Gallery程序的执行流程

Gallery组件所使用图片的数据源是以BaseAdapter对象的形式存在,所以在使用前必须要先声明BaseAdapter。

6.2.3 继承BaseAdapter
使用Gallery组件的数据源必须创建一个继承自BaseAdapter的对象来放置想要呈现的图片数据。在程序中继承BaseAdapter后,必须实现getCount()、getView()、getItem()、getItemId()等方法,并将Gallery组件欲显示的图片创建在getView()方法中。

创建继承BaseAdapter的类
下面我们以创建继承BaseAdapter的myAdapter类为例,产生的程序结构如下,我们最主要的工作就是在getView()方法加入要显示的内容,当然默认的参数命名也可改为较易识别的名称。getCount()获取共有多少张图片,getItem()是获取目前的选项,getItemId()是获取目前的选项的Id,getView()方法定义要显示的内容。

public class MyAdapterextendsBaseAdapter{
    @Override
    public int getCount(){
        //TODO Auto-generated method stub
        return 0;
    }
    @Override
    Public ObjectgetItem(int arg0){
        //TODO Auto-generated method stub
        return null;
    }
    @Override
    public long getItemId(int arg0){
        //TODO Auto-generated method stub
        Return 0;
    }
    @Override
    public View getView(int arg0,View arg1,ViewGroup arg2){
        //TODO Auto-generated method stub 
        return null;
    }
}

默认创建的参数名称不易识别,通常会更改为较易识别的名称。

例如:定义Gallery组件要显示的图片是一个ImageView组件,ImageView宽、高为120*80,图像居中,图像来源为imageIds数组。

//定义显示的图片
public View getView(int position,View contextView,View Group
parent)
{
    ImageView iv=new ImageView(mContext);
    iv.setImageResource(imageIds[position]);
    iv.setScaleType(ImageView.ScaleType.FIT_CENTER);
    iv.setLayoutParams(newGallery.LayoutParams(120,80));
    return iv;
}

6.2.4 示例:使用Gallery组件显示图片行
使用Gallery组件显示图片行,当在Gallery组件中选择指定的图片,同时会在下方的ImageView组件显示完整图片,如图6-4所示。


e3998432bac02f00cb97f7ff98b8efc3d5bd49de

1.新建项目并完成布局配置
新建项目,在中创建一个Gallery组件、ImageView组件,并设置Gallery组件属性Padding="5dp"、Spacing="-5dp"。

<Gallery1/res/layout/main.xml>
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayout <a>xmlns:android="http://schemas.android.com/apk/res/android"</a>

android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
    <Gallery android:id="@+id/Gallery01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:spacing="-5dp"/>
    <ImageView android:id="@+id/imgShow"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</LinearLayout>

2.加入图片
在项目目录下创建文件夹,加入~共6张,注意文件名必须使用小写字母。

3.加入执行的程序代码
打开。程序中自动创建MyAdapter类继承BaseAdapter类,作为Gallery的图片数据源,并加入ItemSelected()事件,当选择Gallery中的图片后会在下方的ImageView显示完整图片。

<Gallery1/src/Gallery1.com/Gallery1Activity.java>
…略
13public class Gallery01Activity extends Activity{
14private static finalint[] imageIds={
15R.drawable.img01,R.drawable.img02,R.drawable.img03,
16R.drawable.img04,R.drawable.img05,R.drawable.img06
17};
18private ImageView imgShow;
19@Override
20public void onCreate(BundlesavedInstanceState){
21super.onCreate(savedInstanceState);
22setContentView(R.layout.main);
23
24//获取资源文件中的界面组件
25 imgShow=(ImageView)findViewById(R.id.imgShow);
26 Gallerygal=(Gallery)findViewById(R.id.Gallery01);
27
28//创建自定义的Adapter
29 MyAdapteradapter=newMyAdapter(this);
30
31//设置Gallery的数据源
32 gal.setAdapter(adapter);
33
34//设置Gallery组件ItemSelected事件的listener为galListener
35 gal.setOnItemSelectedListener(galListener);
36  }
第14~18行,创建全局变量,包含图片来源的imageIds数组和imgShow。
第29行,以自定义的MyAdapter类创建对象adapter,这个adapter的功能就是在定义Gallery组件的布局配置,等一下会进行设置。
第32行,设置Gallery组件的数据源是adapter。
第35行,设置Gallery组件ItemSelected事件的listener为galListener。
续:<Gallery1/src/Gallery1.com/Gallery1Activity.java>
38private Gallery.OnItemSelectedListenergalListener=new
         Gallery.OnItemSelectedListener(){
39@Override
40public void onItemSelected(AdapterView<?> parent,
41View view,int position,long id){
42imgShow.setImageResource(imageIds[position]);
43}
44
45@Override
46public void onNothingSelected(AdapterView<?> arg0){
47//TODO Auto-generated method stub
48}
49};
第38~49行,创建设置Gallery组件ItemSelected事件的listener。
第40~43行,触发后会执行onItemSelected()方法,该方法将imageIds数组中当前选择的图片以setImageResource()方法显示在imageView组件中。
续:<Gallery1/src/Gallery1.com/Gallery1Activity.java>
51//自定义的MyAdapter类,继承BaseAdapter类
52class MyAdapter extends BaseAdapter{
53private Context mContext;
54public MyAdapter(Context c){
55mContext=c;
56}
57public int getCount(){
58return imageIds.length;//图片共有多少张
59}
60public Object getItem(int arg0){
61return null;
62}
63public long getItemId(int arg0){
64return 0;
65}
66
67//设置imageView的图片、显示方式居中,大小是120x80
68public View getView(int position,View contextView,
           View Group parent){
69ImageView iv=new ImageView(mContext);
70iv.setImageResource(imageIds[position]);
71iv.setScaleType(ImageView.ScaleType.FIT_CENTER);
72iv.setLayoutParams(newGallery.LayoutParams(120,80));
73return iv;
74}
75}

第52~75行,继承BaseAdapter创建MyAdapter类,在BaseAdapter类下必须实现getCount()、getView()、getItem()、getItemId()等方法,最重要的部分是将Gallery组件的布局配置创建在getView()方法中。
第54~56行,创建MyAdapter的构造函数,在构造函数中以mContext=c;初始化,参数“c”是Content类型的全局变量,它是第29行:MyAdapteradapter=newMyAdapter(this);中的“this”参数,也就是项目执行的主程序类“Gallery1Activity”。
第57~59行,getCount()中使用imageIds.length获取图片共有多少张。
第60~65行,getItem()与getItemId()暂时不使用但仍需保留实现结构,所以保留默认内容。
第68~74行,其实Gallery组件的内容是一张张的ImageView组合起来,这里我们要利用getView()的内容来设置Gallery的布局配置。
第69行,创建一个ImageView类型的对象iv,必须加入mContext参数,表示对象要创建在主程序类Gallery1Activity中。
第70~72行,设置ImageView图像来源为imageIds数组,并设置图片宽、高为120*80,居中显示。
第73行,完成设置传回自定义的imageView组件。
保存项目后,按Ctrl+F11组合键执行项目,在上方显示的即是Gallery组件,用户可以利用鼠标拖曳,下方的ImageView组件会显示Gallery组件目前中间所显示的图片,如图6-5所示。


e8ff263203e56697d23172bf9f3db201322b9757

6.2.5 示例:图片循环播放的Gallery组件
Gallery组件并不支持图片循环播放,当显示至最后一张时,下一张图片并不会循环至第一张。这里就必须自行处理,按照项目创建项目,其中布局配置文件与程序文件大致是相同,只要针对进行调整即可,其源文件如下:

<Gallery2/src/Gallery2.com/Gallery2Activity.java>
…略
    private Gallery.OnItemSelectedListenergalListener=new Gallery.
    OnItemSelectedListener(){
       @Override
       public void onItemSelected(AdapterView<?> parent,View view,int position,long id){
       imgShow.setImageResource(imageIds[position%imageIds.length]);
       …略
       };
    //自定义的MyAdapter类,继承BaseAdapter类
    class MyAdapter extends BaseAdapter{
       …略
       public int getCount(){
       returnInteger.MAX_VALUE;//设置图片数量为系统最大整数
       }
…略
       //设置imageView的图片、显示方式居中,大小是120x80
       public View getView(int position,View contextView,View Groupparent){
           ImageView iv=newImageView(mContext);
           iv.setImageResource(imageIds[position%imageIds.length]);
           …略
           return iv;
       }
…略

更改getCount()获取的图片数量,Integer.MAX_VALUE为最大整数。

②原来图片播放的索引值一定小于或等于图片数量,但是目前的索引值大于图片的数量,所以相除后的余数为播放图片的索引,即可正常播放图片。

③将当前图片显示在下方的ImageView。图片索引也和上方的计算方式相同。

保存项目后,按Ctrl+F11组合键执行项目。

相关文章
|
2月前
|
设计模式 Android开发
[Android 四大组件] --- BroadcastReceiver
[Android 四大组件] --- BroadcastReceiver
33 0
|
3月前
|
Android开发 开发者
什么是Android Jetpack,它包括哪些组件?
什么是Android Jetpack,它包括哪些组件?
39 0
|
4月前
|
数据库 Android开发
Android Studio开发之应用组件Application的讲解及实战(附源码,通过图书管理信息系统实战)
Android Studio开发之应用组件Application的讲解及实战(附源码,通过图书管理信息系统实战)
49 0
|
4月前
|
XML Java Android开发
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
72 0
|
2月前
|
数据可视化 Android开发
[Android 四大组件] --- Service
[Android 四大组件] --- Service
24 0
|
2月前
|
Android开发
[Android 四大组件] --- Activity
[Android 四大组件] --- Activity
22 1
|
2月前
|
Android开发 数据安全/隐私保护
【Android Studio】简单的QQ登录界面
【Android Studio】简单的QQ登录界面
|
2月前
|
存储 数据库 Android开发
安卓四大组件是什么?
安卓四大组件是什么?
|
3月前
|
数据库 Android开发 开发者
Android基础知识:什么是Android应用的四大组件?
Android基础知识:什么是Android应用的四大组件?
59 1
|
4月前
|
XML Java 调度
Android App网络通信中通过runOnUiThread快速操纵界面以及利用线程池Executor调度异步任务实战(附源码 简单易懂)
Android App网络通信中通过runOnUiThread快速操纵界面以及利用线程池Executor调度异步任务实战(附源码 简单易懂)
30 0