1. 程式人生 > >【Android 開發】:UI控制元件之 ImageSwitcher 圖片切換控制元件的使用

【Android 開發】:UI控制元件之 ImageSwitcher 圖片切換控制元件的使用

1. ImageSwitcher 概要

1). ImageSwitcher 控制元件可以用在不同的影象之間切換,其中切換的過程可以採用動畫的方法,如淡入淡出的效果。

2). ImageSwitcher 需要一個影象工廠(ViewFactory)來建立用於顯示影象的ImageView物件,因此我們需要一個實現

    android.widget.ViewSwitcher.ViewFactory介面的類。

2. 程式案例的實現

[需求]:我們需要根據 ImageSwitcher 的特性完成一個圖片切換的Demo,在學習之前我們需要掌握一些知識點

1) 佈局檔案

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageSwitcher
        android:id="@+id/imageswitcher"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingTop="100dp" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
			android:layout_marginLeft="50dp"
			android:layout_weight="1"
            android:text="next" />

        <Button
            android:id="@+id/button2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="50dp"
            android:layout_weight="1"
            android:text="forward" />
    </LinearLayout>

</LinearLayout>

2) 主程式程式碼

public class ImageSwitcherDemo extends Activity implements OnClickListener, ViewFactory{
    
    private ImageSwitcher imageSwitcher;
    private Button button1, button2;
    private int index = 0; //用於瀏覽圖片的次序
    
    /*
     * 使用者存放使用者的圖片資訊
     * Drawable物件主要是用來幹什麼用的呢?
     */
    private List<Drawable> list = new ArrayList<Drawable>();
    
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initComponent();       
        button1.setOnClickListener(this);
        button2.setOnClickListener(this);    
        imageSwitcher.setFactory(this);
        
        //往list集合裡裝載圖片資訊
        list.add(getResources().getDrawable(R.drawable.item1));
        list.add(getResources().getDrawable(R.drawable.item2));
        list.add(getResources().getDrawable(R.drawable.item3));
        list.add(getResources().getDrawable(R.drawable.item4));
        list.add(getResources().getDrawable(R.drawable.item5));
        list.add(getResources().getDrawable(R.drawable.item6));
        list.add(getResources().getDrawable(R.drawable.item7));
        list.add(getResources().getDrawable(R.drawable.item8));
        
        /*
         * 初始化載入圖片的資訊
         * 檢視api文件 ImageSwitcher
         * public void setImageDrawable (Drawable drawable)方法知它接受的是一個drawable物件
         */
        if(list.size() > 0){
            imageSwitcher.setImageDrawable(list.get(0));
        }
        
    }
    
    private void initComponent(){
        imageSwitcher = (ImageSwitcher)findViewById(R.id.imageswitcher);
        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);

 
    }

    @Override
    public View makeView() {
        // TODO Auto-generated method stub
        return new ImageView(ImageSwitcherDemo.this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.button1:
                //表示按下一張圖片,如果圖片走到末尾,則重新瀏覽,這樣就可以迴圈瀏覽了
                index--;
                if(index < 0){
                    index = list.size() - 1;
                }
                imageSwitcher.setImageDrawable(list.get(index));
                break;

            case R.id.button2:
                //表示按上一張圖片,如果圖片走到首張,則重新瀏覽,這樣就可以迴圈瀏覽了
                index++;
                if(index >= list.size()){
                    index = 0;
                }
                imageSwitcher.setImageDrawable(list.get(index));
                break;
        }
        
    }
}

3. 程式案例的執行

這樣的效果主要是用在傢俱或者服裝中使用向下或者向上來瀏覽圖片的功能

4. 程式案例的說明

1) Drawable 物件

Drawable 物件主要是用來幹什麼用的呢?檢視一下 Android api文件:android.graphics.drawable.Drawable 它主要是用來描述當前資原始檔Drawable資料夾下面的圖片的一個資訊,它可以構建圖形的位元組陣列物件,也可以是單純的一張圖片作為一個物件。
2) ImageSwitcher
檢視api文件 ImageSwitcher,主要涉及到兩個方法:
public void setFactory (ViewSwitcher.ViewFactory factory) [如果在ImageSwitcher 中找不到這個方法,就往父類去找] 
public void setImageDrawable (Drawable drawable) 設定一個Drawable物件的Image
3) makeView()方法
ImageSwitcher 中,由於他實現了 ViewFactory,所以需要重寫的這個 public View makeView() 方法,這個方法是比較重要的檢視 ViewFactory api文件說明它可以在ViewSwitcher中建立一個檢視,它裡面有一個抽象方法如下圖所示:

 
建立一個新的檢視然後新增到ViewSwicher中。【意思就是當我們在點擊向前向後退的時候,它需要圖片的資源載入到 ImageView 中,這樣它就可以去顯示了】所以返回的是一個 ImageView的物件了 new ImageView。
[注意]:android-support-v4.jar 是Anroid官方版本升級2.3.3之後給我們打的一個補丁包