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

图像组件包含图像视图(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;
    @Override
    protected 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() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(arrayPictures[pictutureIndex]);
                return imageView;
            }
        });
        imageSwitcher.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public 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,};
    @Override
    protected 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;
        }
        @Override
        public int getCount() {
            return picture.length;
        }
        @Override
        public Object getItem(int position) {
            return null;
        }
        @Override
        public long getItemId(int position) {
            return 0;
        }
        @Override
        public 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