Android 滑动效果入门篇(二)—— Gallery
发布日期:2021-07-29 10:44:31 浏览次数:0 分类:技术文章


 是Android官方提供的一个View容器类,继承于AbsSpinner类,用于实现页面滑动效果。


从上面的继承关系可以看出,AbsSpinner类继承自AdapterView,因此我们可以自定义实现Adapter,来填充Gallery容器的数据。


本示例通过自己实现一个Adapter,来填充Gallery容器的图片数据,首先看效果:




Activity

[java] 
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.View;  
  4. import android.widget.AdapterView;  
  5. import android.widget.Gallery;  
  6. import android.widget.Toast;  
  7.   
  8. public class GalleryActivity extends Activity {  
  9.     @Override  
  10.     public void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         setContentView(R.layout.main);  
  13.   
  14.         Gallery gallery = (Gallery) findViewById(R.id.gallery);  
  15.         gallery.setAdapter(new ImageAdapter(this));         // gallery添加ImageAdapter图片资源  
  16.         gallery.setOnItemClickListener(listener);           // gallery设置点击图片资源的事件  
  17.     }  
  18.       
  19.     AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {  
  20.         @Override  
  21.         public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
  22.             Toast.makeText(GalleryActivity.this"图片 " + (position + 1), Toast.LENGTH_SHORT).show();  
  23.         }  
  24.     };  
  25. }  

ImageAdapter.java

[java] 
  1. import android.content.Context;  
  2. import android.view.View;  
  3. import android.view.ViewGroup;  
  4. import android.widget.BaseAdapter;  
  5. import android.widget.Gallery;  
  6. import android.widget.ImageView;  
  7.   
  8. public class ImageAdapter extends BaseAdapter {  
  9.     private Context mContext;  
  10.       
  11.     //  图片数组源  
  12.     private Integer[] imgs = { R.drawable.img1, R.drawable.img2,  
  13.             R.drawable.img3, R.drawable.img4, R.drawable.img5,  
  14.             R.drawable.img6, R.drawable.img7};  
  15.   
  16.     public ImageAdapter(Context c) {  
  17.         mContext = c;  
  18.     }  
  19.   
  20.     @Override  
  21.     public int getCount() {  
  22.         return imgs.length;  
  23.     }  
  24.   
  25.     // 获取图片位置  
  26.     @Override  
  27.     public Object getItem(int position) {  
  28.         return imgs[position];  
  29.     }  
  30.   
  31.     // 获取图片ID  
  32.     @Override  
  33.     public long getItemId(int position) {  
  34.         return position;  
  35.     }  
  36.   
  37.     @Override  
  38.     public View getView(int position, View convertView, ViewGroup parent) {  
  39.         ImageView imageview = new ImageView(mContext);  
  40.   
  41.         imageview.setImageResource(imgs[position]);  
  42.         imageview.setLayoutParams(new Gallery.LayoutParams(240120));      // 设置布局 图片120×120显示  
  43.         imageview.setScaleType(ImageView.ScaleType.CENTER);             // 设置显示比例类型(不缩放)  
  44.         return imageview;  
  45.     }  
  46. }  


main.xml

[html] 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:orientation="vertical">  
  6.       
  7.     <!-- 文字居中显示  android:gravity -->  
  8.     <!-- 控件居中显示  android:layout_gravity -->  
  9.       
  10.     <TextView   
  11.         android:id="@+id/tv"  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:gravity="center"                  
  15.         android:layout_gravity="center"           
  16.         android:layout_marginTop="50dip"  
  17.         android:textColor="#ffff0000"  
  18.         android:textSize="30sp"  
  19.         android:text="Gallery Test"/>  
  20.       
  21.     <Gallery   
  22.     android:id="@+id/gallery"  
  23.     android:layout_width="fill_parent"  
  24.     android:layout_height="wrap_content"  
  25.     android:layout_marginTop="10dip"  
  26.     android:layout_below="@id/tv" />  
  27.       
  28. </RelativeLayout>  




示例分析:

1、ImageAdapter中,是继承BaseAdapter自定义实现的,重载了BaseAdapter的几个虚方法,其中重要的有两个

getCount() : 返回资源的大小(总长度)

getView(int position, View convertView, ViewGroup parent) : 返回当前显示的资源(获取焦点)

2、GalleryActivity中,通过gallery.setAdapter(imgAdapter); 设置资源,然后设置gallery的点击监听事件。

3、main.xml中,是布局文件,显示一个TextView和Gallery,RelativeLayout是相对布局

总体来说,Gallery 上述的示例很简单,结构比较清晰,能够满足基本的应用。



Gallery 高级应用

上面的示例,仅仅是最简单的Gallery应用,如果我们想做的更酷、更炫的效果:

1、Gallery 图片显示能够循环播放,即向右滑到左侧第一张图片后,需要接着显示最后一张图片;向左滑到最后一张图片后,需要接着显示第一张图片,往复不间断显示的循环效果。

2、选中图片高亮,未选中图片阴影,更加突出当前获取焦点的选中图片

3、区分“点击”与“选中”图片事件的区别和适用场景



效果1 —— 高亮显示

没有选中,在GalleryActivity中,设置gallery.setUnselectedAlpha(0.3f); 透明度为0.3

选中,在ImageAdapter的getView(int position, View convertView, ViewGroup parent)中,设置imageview.setBackgroundColor(Color.alpha(1)); 背景色为1


效果2 —— 循环播放

原理:Gallery循环播放的原理,跟循环链表的思想一样,首尾item连接都是通过“取余”实现

修改1、ImageAdapter中的getCount() 方法中,修改返回值为无穷大 return Integer.MAX_VALUE;

修改2、ImageAdapter中的getView(int position, View convertView, ViewGroup parent)方法中,设置imageview.setImageResource(imgs[position % imgs.length]); 取余

修改3、GalleryActivity中,设置gallery.setSelection(imgAdapter.imgs.length * 100); 使gallery显示图片的位置从中间开始显示(即imgAdapter.imgs.length * 100)

修改解释:

修改1,主要是为了是循环接近无限往复循环,使position无限大,循环在实践应用上不容易结束(理论上会结束,即2^31-1约20亿次循环后)

修改2,通过取余,使图片能够重复利用并显示

修改3,由于起始位置如果是0,则向右滑动左侧将无法循环(此时左侧将为-1,超出了imgs[]数组的下边界),因此开始应设置起始位置为imgAdapter.imgs.length的整数倍


效果3 —— “点击”和“选中”事件

1、点击事件OnItemClickListener,是需要用手点击才触发,滑动时不触发

2、选中事件OnItemSelectedListener,是当图片滑到屏幕正中,则视为自动选中,在滑动的过程中会触发

适用场景:

1、点击事件OnItemClickListener,是在确定要选中该项时,才点击进行逻辑处理

2、选中事件OnItemSelectedListener,可以用来提醒用户,当前获取焦点的项,如果确认为该项则需要点击OnItemClickListener后,进行下一步的逻辑处理


高级应用完整代码:


Activity

[java] 
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.Gravity;  
  4. import android.view.View;  
  5. import android.widget.AdapterView;  
  6. import android.widget.Gallery;  
  7. import android.widget.Toast;  
  8.   
  9. public class GalleryActivity extends Activity {  
  10.       
  11.     private ImageAdapter imgAdapter = null;         // 声明图片资源对象  
  12.     private Gallery gallery = null;  
  13.       
  14.     @Override  
  15.     public void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.main);  
  18.   
  19.         gallery = (Gallery) findViewById(R.id.gallery);  
  20.         imgAdapter = new ImageAdapter(this);  
  21.         gallery.setAdapter(imgAdapter);                     // 设置图片资源  
  22.         gallery.setGravity(Gravity.CENTER_HORIZONTAL);      // 设置水平居中显示  
  23.         gallery.setSelection(imgAdapter.imgs.length * 100);     // 设置起始图片显示位置(可以用来制作gallery循环显示效果)  
  24.           
  25.         gallery.setOnItemClickListener(clickListener);          // 设置点击图片的监听事件(需要用手点击才触发,滑动时不触发)  
  26.         gallery.setOnItemSelectedListener(selectedListener);        // 设置选中图片的监听事件(当图片滑到屏幕正中,则视为自动选中)  
  27.         gallery.setUnselectedAlpha(0.3f);                   // 设置未选中图片的透明度  
  28.         gallery.setSpacing(40);                         // 设置图片之间的间距  
  29.     }  
  30.       
  31.     // 点击图片的监听事件  
  32.     AdapterView.OnItemClickListener clickListener = new AdapterView.OnItemClickListener() {  
  33.         @Override  
  34.         public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
  35.             Toast.makeText(GalleryActivity.this"点击图片 " + (position + 1), 100).show();  
  36.         }  
  37.     };  
  38.       
  39.     // 选中图片的监听事件  
  40.     AdapterView.OnItemSelectedListener selectedListener = new AdapterView.OnItemSelectedListener() {  
  41.         @Override  
  42.         public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {  
  43.             Toast.makeText(GalleryActivity.this"选中图片 " + (position + 1), 20).show();  
  44.         }  
  45.   
  46.         @Override  
  47.         public void onNothingSelected(AdapterView<?> arg0) {  
  48.               
  49.         }  
  50.     };  
  51. }  



ImageAdapter.java

[java] 
  1. import android.content.Context;  
  2. import android.graphics.Color;  
  3. import android.view.View;  
  4. import android.view.ViewGroup;  
  5. import android.widget.BaseAdapter;  
  6. import android.widget.Gallery;  
  7. import android.widget.ImageView;  
  8.   
  9. public class ImageAdapter extends BaseAdapter {  
  10.     private Context mContext;  
  11.       
  12.     //  图片数组源  
  13.     public Integer[] imgs = { R.drawable.img1, R.drawable.img2,  
  14.             R.drawable.img3, R.drawable.img4, R.drawable.img5,  
  15.             R.drawable.img6, R.drawable.img7};  
  16.   
  17.     public ImageAdapter(Context c) {  
  18.         mContext = c;  
  19.     }  
  20.   
  21.     @Override  
  22.     public int getCount() {  
  23.         return Integer.MAX_VALUE;  
  24.     }  
  25.   
  26.     // 获取图片位置  
  27.     @Override  
  28.     public Object getItem(int position) {  
  29.         return imgs[position];  
  30.     }  
  31.   
  32.     // 获取图片ID  
  33.     @Override  
  34.     public long getItemId(int position) {  
  35.         return position;  
  36.     }  
  37.   
  38.     @Override  
  39.     public View getView(int position, View convertView, ViewGroup parent) {  
  40.         ImageView imageview = new ImageView(mContext);  
  41.   
  42.         imageview.setImageResource(imgs[position % imgs.length]);  
  43.         imageview.setLayoutParams(new Gallery.LayoutParams(20094));       // 设置布局 图片120×120显示  
  44.         imageview.setScaleType(ImageView.ScaleType.CENTER);             // 设置显示比例类型  
  45.         imageview.setBackgroundColor(Color.alpha(1));  
  46.         return imageview;  
  47.     }  
  48. }  




参考推荐:





上一篇:Android 滑动效果基础篇(三)—— Gallery仿图像集浏览
下一篇:获取当前显示的activity

关于作者

    白红宇是个全栈工程师,前端vue,小程序,app开发到后端框架设计,数据库设计,环境部署上线运维。

最新文章