Android幻燈片式圖片瀏覽器

本文轉自：http://blog.csdn.net/bear_huangzhen/article/details/24232029

今天我們通過使用Android提供給我們的現有空間Gallery和ImageSwitcher來實現一個幻燈片式的圖片瀏覽器。

(1)首先我們新建一個工程，修改主佈局文件activity_main.xml內容如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ImageSwitcher
        android:id="@+id/image_switcher"
        android:layout_width="wrap_content"
        android:layout_height="0dip"
        android:layout_weight="2"
        android:paddingTop="30dip" />

    <!--
         android:layout_weight  詳細解釋:按比例顯示LinearLayout內各個子控件，
                                需設置android:layout_width="0dp"，
                                如果爲豎直方向的設置android:layout_height="0dp"。
                                在這種情況下某子個控件佔用LinearLayout的比例爲：
                                本控件weight值 / LinearLayout內所有控件的weight值的和。

         android:spacing 設置圖片的間距

         android:unselectedAlpha 設置爲選中條目的透明度
    -->

    <Gallery
        android:id="@+id/gallery"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:spacing="5dip"
        android:unselectedAlpha="0.6" />

</LinearLayout>

(2)在Java代碼部分，修改MainActivity.java的內容如下(代碼已經詳細註釋)：

public class MainActivity extends Activity {

    // 聲明並靜態初始化圖片id數組
    private int[] imageIds = { R.drawable.img01, R.drawable.img02,
            R.drawable.img03, R.drawable.img04, R.drawable.img05,
            R.drawable.img06, R.drawable.img07, R.drawable.img08,
            R.drawable.img09, R.drawable.img10, R.drawable.img11,
            R.drawable.img12 };

    // 聲明一個Gallery視圖控件變量
    private Gallery gallery;

    // 聲明一個ImageSwitcher視圖控件變量
    private ImageSwitcher imageSwitcher;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 獲取視圖控件對象
        gallery = (Gallery) findViewById(R.id.gallery);
        imageSwitcher = (ImageSwitcher) findViewById(R.id.image_switcher);

        // 設置動畫效果
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.fade_in));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.fade_out));

        // 爲imageSwitcher設置ViewFactory對象
        imageSwitcher.setFactory(new ViewFactory() {

            @Override
            public View makeView() {
                // 初始化一個ImageView對象
                ImageView imageView = new ImageView(MainActivity.this);
                // 設置保持縱橫比居中縮放圖像
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                // 設置imageView的寬高
                imageView.setLayoutParams(new FrameLayout.LayoutParams(
                        LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

                return imageView;
            }
        });

        //初始化一個MainGalleryAdapter對象
        MainGalleryAdapter adapter = new MainGalleryAdapter();

        //將適配器與gallery關聯起來
        gallery.setAdapter(adapter);

        //初始選中中間的圖片
        gallery.setSelection(imageIds.length/2);

        gallery.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                //在ImageSwitcher中顯示選中的圖片
                imageSwitcher.setImageResource(imageIds[position]);
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    /**
     * 定義Gallery的數據適配器MainGalleryAdapter
     */
    class MainGalleryAdapter extends BaseAdapter {

        /**
         * 獲得數量
         */
        @Override
        public int getCount() {
            return imageIds.length;
        }

        /**
         * 獲得當前選項
         */
        @Override
        public Object getItem(int position) {
            return getResources().getDrawable(imageIds[position]);
        }

        /**
         * 獲得當前選項的id
         */
        @Override
        public long getItemId(int position) {
            return position;
        }

        /**
         * 獲得當前選項的視圖
         */
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            //初始化一個ImageView對象
            ImageView imageView = new ImageView(MainActivity.this);
            //設置縮放方式
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            //設置ImageView的寬高
            imageView.setLayoutParams(new Gallery.LayoutParams(180, 135));
            //設置IamgeView顯示的圖片
            imageView.setImageResource(imageIds[position]);

            /**
             * 設置ImageView背景，這裏背景使用的是android提供的一種背景風格
             * 在values/attr.xml文件中需要一下內容
             *  <declare-styleable name="Gallery">
             *      <attr name="android:galleryItemBackground" />
             *  </declare-styleable>
             */
            TypedArray typedArray = MainActivity.this
                    .obtainStyledAttributes(R.styleable.Gallery);
            int mGalleryItemBackground = typedArray.getResourceId(
                    R.styleable.Gallery_android_galleryItemBackground, 0);
            imageView.setBackgroundResource(mGalleryItemBackground);

            //返回ImageView對象
            return imageView;
        }

    }
}

(3)我們看一下程序運行後的效果圖：

(4)附上完整的android源碼：

Android幻燈片式的圖片瀏覽器