Android 滑动效果入门篇（二）—— Gallery

2022-02-04 08:59:09

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

Android 滑动效果入门篇（二）—— GalleryAndroid 滑动效果入门篇（二）—— Gallery

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

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

 

Android 滑动效果入门篇（二）—— Gallery

Activity

  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. public class GalleryActivity extends Activity {
  8. @Override
  9. public void onCreate(Bundle savedInstanceState) {
  10. super.onCreate(savedInstanceState);
  11. setContentView(R.layout.main);
  12. Gallery gallery = (Gallery) findViewById(R.id.gallery);
  13. gallery.setAdapter(new ImageAdapter(this));         // gallery添加ImageAdapter图片资源
  14. gallery.setOnItemClickListener(listener);           // gallery设置点击图片资源的事件
  15. }
  16. AdapterView.OnItemClickListener listener = new AdapterView.OnItemClickListener() {
  17. @Override
  18. public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  19. Toast.makeText(GalleryActivity.this, "图片 " + (position + 1), Toast.LENGTH_SHORT).show();
  20. }
  21. };
  22. }

ImageAdapter.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. public class ImageAdapter extends BaseAdapter {
  8. private Context mContext;
  9. //  图片数组源
  10. private Integer[] imgs = { R.drawable.img1, R.drawable.img2,
  11. R.drawable.img3, R.drawable.img4, R.drawable.img5,
  12. R.drawable.img6, R.drawable.img7};
  13. public ImageAdapter(Context c) {
  14. mContext = c;
  15. }
  16. @Override
  17. public int getCount() {
  18. return imgs.length;
  19. }
  20. // 获取图片位置
  21. @Override
  22. public Object getItem(int position) {
  23. return imgs[position];
  24. }
  25. // 获取图片ID
  26. @Override
  27. public long getItemId(int position) {
  28. return position;
  29. }
  30. @Override
  31. public View getView(int position, View convertView, ViewGroup parent) {
  32. ImageView imageview = new ImageView(mContext);
  33. imageview.setImageResource(imgs[position]);
  34. imageview.setLayoutParams(new Gallery.LayoutParams(240, 120));      // 设置布局 图片120×120显示
  35. imageview.setScaleType(ImageView.ScaleType.CENTER);             // 设置显示比例类型（不缩放）
  36. return imageview;
  37. }
  38. }

main.xml

  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. <!-- 文字居中显示  android:gravity -->
  7. <!-- 控件居中显示  android:layout_gravity -->
  8. <TextView
  9. android:id="@+id/tv"
  10. android:layout_width="fill_parent"
  11. android:layout_height="wrap_content"
  12. android:gravity="center"
  13. android:layout_gravity="center"
  14. android:layout_marginTop="50dip"
  15. android:textColor="#ffff0000"
  16. android:textSize="30sp"
  17. android:text="Gallery Test"/>
  18. <Gallery
  19. android:id="@+id/gallery"
  20. android:layout_width="fill_parent"
  21. android:layout_height="wrap_content"
  22. android:layout_marginTop="10dip"
  23. android:layout_below="@id/tv" />
  24. </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、区分“点击”与“选中”图片事件的区别和适用场景

Android 滑动效果入门篇（二）—— Gallery

效果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

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

ImageAdapter.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. public class ImageAdapter extends BaseAdapter {
    9. private Context mContext;
    10. //  图片数组源
    11. public Integer[] imgs = { R.drawable.img1, R.drawable.img2,
    12. R.drawable.img3, R.drawable.img4, R.drawable.img5,
    13. R.drawable.img6, R.drawable.img7};
    14. public ImageAdapter(Context c) {
    15. mContext = c;
    16. }
    17. @Override
    18. public int getCount() {
    19. return Integer.MAX_VALUE;
    20. }
    21. // 获取图片位置
    22. @Override
    23. public Object getItem(int position) {
    24. return imgs[position];
    25. }
    26. // 获取图片ID
    27. @Override
    28. public long getItemId(int position) {
    29. return position;
    30. }
    31. @Override
    32. public View getView(int position, View convertView, ViewGroup parent) {
    33. ImageView imageview = new ImageView(mContext);
    34. imageview.setImageResource(imgs[position % imgs.length]);
    35. imageview.setLayoutParams(new Gallery.LayoutParams(200, 94));       // 设置布局 图片120×120显示
    36. imageview.setScaleType(ImageView.ScaleType.CENTER);             // 设置显示比例类型
    37. imageview.setBackgroundColor(Color.alpha(1));
    38. return imageview;
    39. }
    40. }
上一篇：Xib给特定view添加手势


下一篇：【Android开源库】 PagerSlidingTabStrip从头到脚