Android的畫廊 - Gallery與ImageSwitcher

Android有提供Gallery及ImageSwitcher的控件，結合這個兩個控件可以很容易地做出一個簡單的小畫廊。

Gallery:

1. 可以配合Adapter，將圖片的資放進Adapter中，在用Gallery的setAdapter()方法就可以讓Gallery能夠顯示相應的圖片，其中還可以配合OnItemSelectedListener來取得是哪一張圖片被Select。
2. 在這裡所謂被Select是指哪一張圖案在Gallery的正中央。
3. 記得Gallery要設置Spacing的屬性，圖片才不會擠在一起。

ImageSwitcher:

1. ImageSwitcher可以容易的切換兩張ImageView，並且可以為切換圖片的動作設定動畫(Animation)。
2. 當呼叫ImageSwitcher的setImageResource()方法時，ImageSwitcher其實是設定好下一個ImageView再切換到下一個ImageView。
3. 在使用ImageSwitcher時要用setFactory()方法設定ViewFactory，而ViewFactory要Override一個makeView()方法並回傳一個ImageView，也就是ImageSwitcher要用來顯示圖的ImageView。
4. 對於ImageSwitcher的細節原理，在這篇Android_TextSwitcher和ImageSwitcher有非常詳盡的解說。

下面我就用程式碼來製作一個小型簡單的畫廊來做示範:

1. 主要的Layout，activity_main.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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:background="@android:color/background_dark">

    <ImageSwitcher
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/imageSwitcher"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/gallery" />

    <Gallery
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:id="@+id/gallery"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:spacing="16dp" />
</RelativeLayout>
















主要的程式碼，其中imagesId陣列中放置的是已經放在資源中Drawable資料的四張圖片，MainActivity.java:


package com.example.administrator.galleryandimageswitcher;

import android.app.ActionBar;
import android.content.Context;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher;

public class MainActivity extends ActionBarActivity {
    final int[] imagesId = new int[]{R.drawable.chrysanthemum, R.drawable.desert, R.drawable.penguins, R.drawable.tulips};

    ImageSwitcher imageSwitcher;
    Gallery gallery;

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

        //取得ImageSwitcher和Gallery
        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
        gallery = (Gallery) findViewById(R.id.gallery);

        //為ImageSwitcher設置ViewFactory，用來處理圖片切換的顯示
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(getApplicationContext());

                return imageView;
            }
        });
        //為ImageSwitcher設置淡入淡出動畫
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_in));
        imageSwitcher.setAnimation(AnimationUtils.loadAnimation(this,android.R.anim.fade_out));

        //為Gallery設置Adapter以讓Gallery顯示圖片
        gallery.setAdapter(new BaseAdapter() {
            @Override
            public int getCount() {
                return imagesId.length;
            }

            @Override
            public Object getItem(int position) {
                return imagesId[position];
            }

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

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                ImageView imageView = new ImageView(getApplicationContext());
                imageView.setImageResource(imagesId[position]);
                //設定圖片尺寸等比例縮放
                imageView.setAdjustViewBounds(true);
                imageView.setLayoutParams(new Gallery.LayoutParams(Gallery.LayoutParams.WRAP_CONTENT, Gallery.LayoutParams.WRAP_CONTENT));
                return imageView;
            }
        });
        //為Gallery設置一個OnItemSelectedListener，置於中間的縮圖為被Selected
        gallery.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                //將對應選到的縮圖的大圖放置於ImageSwitcher中
                imageSwitcher.setImageResource(imagesId[position]);
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {
                //什麼也不必做
            }
        });
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}




成品如下影片所示:

 

附上源始碼下載： Gallery與Image Switcher