使用图像组件实现滑动查看相册，手机相册页面

本文主要是介绍使用图像组件实现滑动查看相册，手机相册页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图像组件包含图像视图(ImageView)，图像切换器(ImageSwitcher)和网格视图(GridView)。

图1 图像组件继承关系图
从上图中可以看出，ImageView继承自View，用于呈现图像；ImageSwitcher继承自FrameLayout，所以可以实现动画效果；GridView继承自AdapterView，AdapterView继承自ViewGroup(View容器)，所以可以包含多个列表项。

1 图像视图

图像视图(ImageView)用来在屏幕上显示任何Drawable对象。
<ImageView>标记语法格式如下：

<ImageView
属性列表
>
</ImageView>

ImageView支持的xml属性如表1：

xml属性	描述
andriod:adjustViewBounds	设置ImageView是否调整自己的边界来保持所显示图片的长宽比
android:maxHeight	设置ImageView的最大高度，前提andriod:adjustViewBounds为true
android:maxWidth	设置ImageView的最大宽度，前提andriod:adjustViewBounds为true
android:scaleType	设置所显示的图片如何缩放或移动以适应ImageView的大小
android:src	设置ImageView所显示的Drawable对象的ID
android:tint	用于为图片着色

表1 ImageView支持的xml属性

2 图像切换器

图像切换器(ImageSwitcher)用于实现带动画效果的图片切换功能。
常用接口：
setFactory()：为ImageSwitcher类设置一个ViewFactory，用于将显示的图片和父窗口分开。
setImageResource()：用于指定要在ImageSwitcher中显示的图片资源。
ImageSwitcher：实现滑动查看相册
MainActivity.java

public class MainActivity extends Activity {private int[] arrayPictures = new int[]{R.mipmap.img01, R.mipmap.img02, R.mipmap.img03,R.mipmap.img04, R.mipmap.img05, R.mipmap.img06,R.mipmap.img07, R.mipmap.img08, R.mipmap.img09,};private ImageSwitcher imageSwitcher;private int pictutureIndex;// 手指按下的X坐标private float touchDownX;// 手指松开的X坐标private float touchUpX;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);imageSwitcher = (ImageSwitcher) findViewById(R.id.imageswitcher);imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {@Overridepublic View makeView() {ImageView imageView = new ImageView(MainActivity.this);imageView.setImageResource(arrayPictures[pictutureIndex]);return imageView;}});imageSwitcher.setOnTouchListener(new View.OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {if (event.getAction() == MotionEvent.ACTION_DOWN) {// 取得手指按下的X坐标touchDownX = event.getX();return true;} else if (event.getAction() == MotionEvent.ACTION_UP) {// 取得手指松开的X坐标touchUpX = event.getX();if (touchUpX - touchDownX > 100) {  // 从左往右，看下一张pictutureIndex = pictutureIndex == 0 ? arrayPictures.length - 1 : pictutureIndex - 1;// 设置图片切换的动画imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_left));imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_right));// 设置当前要看的图片imageSwitcher.setImageResource(arrayPictures[pictutureIndex]);} else if (touchDownX - touchUpX > 100)  // 从右往左，看上一张{pictutureIndex = pictutureIndex == arrayPictures.length - 1 ? 0 : pictutureIndex + 1;// 设置切换动画imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_out_left));imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, R.anim.slide_in_right));// 设置要看的图片imageSwitcher.setImageResource(arrayPictures[pictutureIndex]);}return true;}return false;}});}
}

https://github.com/hanyuhang-hz/android-demos

3 网格视图

网格视图(GridView)是按照行，列分布的方式来显示多个组件。
<GridView>基本语法格式如下：

<GridView
属性列表
>
</GridView>

GridView组件支持的xml属性如表2：

xml属性	描述
android:columnWidth	设置列的宽度
android:gravity	设置对齐方式
android:stretchMode	设置拉伸模式
android:numColumns	设置列数
android:horizontalSpacing	设置各元素水平间距
android:verticalSpacing	设置各元素垂直间距

表2 GridView组件支持的xml属性
Adapter类是一个接口，它是数据与组件之间的桥梁，通过它可以为GridView提供数据。常用实现类如下：
(1)ArrayAdapter：数组适配器，显示一行文字。
(2)SimpleAdapter：简单适配器，通常用于将List的多个值包装成列表项。
(3)SimpleCursorAdapter：实现将数据库的内容以列表的形式展示出来。
(4)BaseAdapter：抽象类，它可以对各列表项进行最大限度的定制。
GridView：通过BaseAdapter适配器指定内容的方式创建GridView，实现手机相册页面
MainActivity.java

public class MainActivity extends Activity {private Integer[] picture = {R.mipmap.img01, R.mipmap.img02, R.mipmap.img03,R.mipmap.img04, R.mipmap.img05, R.mipmap.img06, R.mipmap.img07,R.mipmap.img08, R.mipmap.img09, R.mipmap.img10, R.mipmap.img11,R.mipmap.img12,};@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);GridView gridView= (GridView) findViewById(R.id.gridView);gridView.setAdapter(new ImageAdapter(this));}public class ImageAdapter extends BaseAdapter{private Context mContext;public ImageAdapter(Context c){mContext=c;}@Overridepublic int getCount() {return picture.length;}@Overridepublic Object getItem(int position) {return null;}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {ImageView imageView;if(convertView==null){imageView=new ImageView(mContext);// 为组件设置宽高imageView.setLayoutParams(new GridView.LayoutParams(300, 176));// 选择图片铺设方式imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);}else{imageView= (ImageView) convertView;}imageView.setImageResource(picture[position]);return imageView;}}
}

GitHub - hanyuhang-hz/android-demos

这篇关于使用图像组件实现滑动查看相册，手机相册页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---