高级控件之画廊视图(Gallery)

一．Gallery的基础知识

       画廊视图使用Gallery表示,能够按水平方向显示内容,并且可以手指直接拖动图片和移动,一般用 来浏览图片,,被选中的选项位于中间,并且可以响应事件显示信息.在使用画廊视图时,首先在屏幕 上添加Gallery组件,通常使用标记在XML而布局文件中添加.
画廊视图在4.0后已经过期，但是我们仍然可以使用。

（一）XML配置：

<Gallery 
android:id="@+id/gallery1" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" />

（二）常用属性：

1. android:animationDuration 用于设置列表项切换时的动画持续时间
2. android:gravity 用于设置对齐方式
3. android:spacing 用于设置列表项之间的间距
4. android:unselectedAlpha 用于设置没有选中的列表项的透明度（0到1的小数），0完全透明，1或1以上完全显示

二．画廊的程序示例代码

这里结合ImageSwitcher显示画廊效果。程序运行后的界面：

这里给上面显示图片的ImageSwitcher设置了触摸事件，如果点击上面的图片左边或右边会切换到画廊的上一张图片或下一张图片。
这里也给画廊对象Gallery设置的选择事件，如果画廊中选中的图片也是会显示在ImageSwitcher中。

并且这里给画廊中没有被选中的图片设置了透明的，在xml中设置。

程序设计代码：

（一）布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageSwitcher
        android:id="@+id/main_is"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Gallery
        android:id="@+id/main_gallery"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:animationDuration="2000"
        android:spacing="20dp"
        android:unselectedAlpha="0.6" />

</RelativeLayout>

（二）java代码文件

package com.example.lesson7_gallery;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity {

    // Galery画廊对象,
    Gallery gallery;

    // 数据源
    int[] images = { R.drawable.a1, R.drawable.a2, R.drawable.a3,
            R.drawable.a4, R.drawable.a5, R.drawable.a6, R.drawable.a7,
            R.drawable.a8, R.drawable.a9 };

    // 当前图片索引值
    int index = 0;

    // ImageSwitcher对象，其实和ImageView一样
    ImageSwitcher is;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 实例化
        gallery = (Gallery) findViewById(R.id.main_gallery);
        // 添加适配器
        gallery.setAdapter(adapter);

        // 实例化ImageSwitcher对象
        is = (ImageSwitcher) findViewById(R.id.main_is);

        // 为图片切换器设置图片工厂
        is.setFactory(new ViewFactory() {
            @Override
            public View makeView() {
                // 实例化一个ImageView对象
                ImageView iv = new ImageView(MainActivity.this);
                // 设置居中缩放
                iv.setScaleType(ImageView.ScaleType.FIT_CENTER);
                return iv;
            }
        });
        // 获取屏幕的宽度：
        final int width = getResources().getDisplayMetrics().widthPixels;
        // 设置图片选择的默认显示
        is.setImageResource(images[0]);
        // 给图像设置触摸监听，这要改变图片的资源，以及画廊中选中的图片
        is.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    if (event.getX() > width / 2) {
                        // 下一张图片
                        index++;
                        if (index == images.length) {
                            index = 0;
                        }
                    } else {
                        // 上一张图片
                        index--;
                        if (index == -1) {
                            index = images.length - 1;
                        }
                    }

                    is.setImageResource(images[index]);
                    gallery.setSelection(index);
                    break;

                default:
                    break;
                }
                return false;
            }
        });

        // 给画廊控件添加选择条目的监听事件，这里滑动画廊界面，会自动选中中间的图片，点击某一个画廊中的图片也是选中图片
        gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view,
                    int position, long id) { // 图像被选中后
                // Toast.makeText(MainActivity.this, "选中了" + position,
                // 0).show();
                is.setImageResource(images[position]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });

    }

    // 给画廊创建adapter
    BaseAdapter adapter = new BaseAdapter() {

        // 返回的是显示的每个图像，
        // 这里的图像对象用java代码直接new出来
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            ImageView iv = null;
            if (convertView == null) {
                convertView = new ImageView(MainActivity.this);
            }

            iv = (ImageView) convertView;
            iv.setScaleType(ScaleType.FIT_XY);
            iv.setPadding(20, 20, 20, 20);
            iv.setImageResource(images[position]);

            return convertView;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public Object getItem(int position) {

            return images[position];
        }

        @Override
        public int getCount() {
            return images.length;
        }
    };

}

       画廊控件虽然已经过期，但是它的显示效果还是不错的。这里的ImageSwitcher使用起来也是有点麻烦的，其实是可以使用ImageView来代替的。这里只是为了展示一下它是使用方法。