如何使用Gallery跟ImageSwitcher

如果想要用Gallery跟ImageSwitcher作一個畫廊,
上面是ImageSwitcher下面是Gallery,

首先可能要先了解一下
如何使用SimpleAdapter
才能夠知道怎麼使用Gallery

首先xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    android:weightSum="5"
    tools:context="com.example.givemepass.galleryimageswitcherdemo.MainActivity">

    <ImageSwitcher
        android:layout_weight="2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image_switcher" />

    <Gallery
        android:layout_weight="3"
        android:id="@+id/gallery"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

定義了兩個元件, 分別是Gallery以及Switcher。

然後跟之前SimpleAdapter的範例一樣, 定義了兩個陣列, 並且丟進去SimpleAdapter,
只不過這次的對象是讓Gallery吃下這個adapter。
(當然你也可以使用baseAdapter自訂adapter, 參考如何用baseAdapter自訂ListView)

private int[] image = {
    R.drawable.cat, R.drawable.flower, R.drawable.hippo,
    R.drawable.monkey, R.drawable.mushroom, R.drawable.panda,
    R.drawable.rabbit, R.drawable.raccoon
};
private String[] imgText = {
    "cat", "flower", "hippo", "monkey", "mushroom", "panda", "rabbit", "raccoon"
};
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    imageSwitcher = (ImageSwitcher)findViewById(R.id.image_switcher);
    gallery = (Gallery)findViewById(R.id.gallery);
    List<Map<String, Object>> items = new ArrayList<Map<String,Object>>();
    for (int i = 0; i < image.length; i++) {
        Map<String, Object> item = new HashMap<String, Object>();
        item.put("image", image[i]);
        item.put("text", imgText[i]);
        items.add(item);
    }
    simpleAdapter = new SimpleAdapter(this, 
           items, R.layout.simple_adapter, new String[]{"image", "text"},
           new int[]{R.id.image, R.id.text});
    gallery.setAdapter(simpleAdapter);
    ....
}

接著設定imageSwitcher的初始值, 並且設定一個ImageView指定給它

imageSwitcher.setFactory(new ViewFactory(){
    @Override
    public View makeView() {
        ImageView imageView = new ImageView(GalleryImageSwitcherDemoActivity.this);
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setLayoutParams(
             new ImageSwitcher.LayoutParams(LayoutParams.FILL_PARENT, 180));
        return imageView;
    }         
});

接著我們可以設定ImageSwitcher進入跟進出的動畫, 讓轉換畫面的時候比較炫。

imageSwitcher.setInAnimation(
    AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left));
imageSwitcher.setOutAnimation(
    AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right));

最後設定gallery的事件, 只要點gallery的某一個item, 我們就將ImageSwitch的畫面換成我們點的Item。

gallery.setOnItemClickListener(new OnItemClickListener(){
    @Override
    public void onItemClick(AdapterView<?> parent, View arg1, int position,
                 long id) {
        imageSwitcher.setImageResource(image[position]);
    }
});

完整程式碼

public class MainActivity extends AppCompatActivity {

    private Gallery gallery;
    private ImageSwitcher imageSwitcher;
    private SimpleAdapter simpleAdapter;
    private int[] image = {
            R.drawable.cat, R.drawable.flower, R.drawable.hippo,
            R.drawable.monkey, R.drawable.mushroom, R.drawable.panda,
            R.drawable.rabbit, R.drawable.raccoon
    };
    private String[] imgText = {
            "cat", "flower", "hippo", "monkey", "mushroom", "panda", "rabbit", "raccoon"
    };
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageSwitcher = (ImageSwitcher)findViewById(R.id.image_switcher);
        gallery = (Gallery)findViewById(R.id.gallery);
        List<Map<String, Object>> items = new ArrayList<>();
        for (int i = 0; i < image.length; i++) {
            Map<String, Object> item = new HashMap<String, Object>();
            item.put("image", image[i]);
            item.put("text", imgText[i]);
            items.add(item);
        }
        simpleAdapter = new SimpleAdapter(this,
                items, R.layout.simple_adapter, new String[]{"image", "text"},
                new int[]{R.id.image, R.id.text});

        gallery.setAdapter(simpleAdapter);
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory(){

            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setLayoutParams(new ImageSwitcher.LayoutParams(Gallery.LayoutParams.MATCH_PARENT, Gallery.LayoutParams.MATCH_PARENT));
                return imageView;
            }

        });
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right));
        gallery.setOnItemClickListener(new AdapterView.OnItemClickListener(){

            @Override
            public void onItemClick(AdapterView<?> parent, View arg1, int position,
                                    long id) {
                imageSwitcher.setImageResource(image[position]);
            }
        });
    }
}

滾動的時候就可以點擊下方圖片

github