Android應用開發入門（二十六）UI控件ImageSwitcher的使用

前言

　　本文來聊一聊AndroidUI開發中ImageSwitcher控件的使用。ImageSwitcher控件與ImageView類似，都可以用於顯示圖片，但是ImageSwitcher通過名字可以看出，主要是用於多張圖片的切換顯示。在本篇中，會介紹ImageSwitcher控件的基本屬性的設置以及常用方法的調用。在最後會通過一個示例Demo來展示本篇博客中講到的一些內容。

ImageSwitcher

　　ImageSwitcher是一個圖片切換器，它間接繼承自FrameLayout類，和ImageView相比，多了一個功能，那就是它說顯示的圖片切換時，可以設置動畫效果，類似於淡進淡出效果，以及左進右出滑動等效果。

　　既然ImageSwitcher是用來顯示圖片的控件，AndroidAPI為我們提供了三種不同方法來設定不同的圖像來源，方法有：

• setImageDrawable(Drawable)：指定一個Drawable對象，用來給ImageSwitcher顯示。
• setImageResource(int)：指定一個資源的ID，用來給ImageSwitcher顯示。
• setImageURL(URL)：指定一個URL地址，用來給ImageSwitcher顯示URL指向的圖片資源。

動畫效果設定

　　上面介紹到，ImageSwitcher可以設置圖片切換時，動畫的效果。對於動畫效果的支持，是因為它繼承了ViewAnimator類，這個類中定義了兩個屬性，用來確定切入圖片的動畫效果和切出圖片的動畫效果：

• android:inAnimation：切入圖片時的效果。
• android:outAnimation：切出圖片時的效果。

　　以上兩個屬性如果在XML中設定的話，當然可以通過XML資源文件自定義動畫效果，但是如果只是想使用Android自帶的一些簡單的效果的話，需要設置參數為“@android:anim/AnimName”來設定效果，其中AnimName為指定的動畫效果。如果在代碼中設定的話，可以直接使用setInAnimation()和setOutAnimation()方法。它們都傳遞一個Animation的抽象對象，Animation用於描述一個動畫效果，一般使用一個AnimationUtils的工具類獲得。對於動畫效果，不是本片博客的重點，關於Android的動畫效果，以後再詳細講解。

　　對於動畫效果，一般定義在android.R.anim類中，它是一個final類，以一些int常量的形式，定義的樣式，這裡僅僅介紹兩組樣式，淡進淡出效果，以及左進右出滑動效果，如果需要其他效果，可以查閱官方文檔。

• fede_in：淡進。
• fade_out:淡出
• slide_in_left:從左滑進。
• slide_out_right: 從右滑出。

　　一般使用的話，通過這些常量名稱就可以看出是什麼效果，這裡並不是強制Xxx_in_Xxx就一定對應了setInAnimation()方法，但是一般如果不成組設定的話，效果會很丑，建議還是成組的對應In和Out設定效果。

ViewFactory

　　在使用ImageSwitcher的時候，有一點特別需要注意的，需要通過setFactory()方法為它設置一個ViewSwitcher.ViewFactory接口，設置這個ViewFactory接口時需要實現makeView()方法，該方法通常會返回一個ImageView，而ImageSwitcher則負責顯示這個ImageView。如果不設定ViewFactory的話，ImageSwitcher將無法使用。通過官方文檔了解到，setFactory()方法被聲明在ViewSwitcher類中，而ImageSwitcher直接繼承自ViewSwitcher類。ViewSwitcher的功能與ImageSwitcher類似，只是ImageSwitcher用於展示圖片，而ViewSwitcher用於展示一些View視圖。

　　可以這麼理解，通過ViewFactory中的makeView()方法返回一個新的View視圖，用來放入ViewSwitcher中展示，而對於ImageSwitcher而言，這裡通常返回的是一個ImageView。

示例程序

　　下面通過一個Demo來說明上面講到的內容。在示例中定義一個ImageSwitcher和兩個Button，這兩個按鈕分別控制著圖像的上一張、下一張顯示，當然，在資源中必須存在這幾個待切換的圖片文件。。

　　布局代碼：

<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" 
    tools:context=".MainActivity" android:orientation="vertical"> 
      
    <ImageSwitcher 
        android:id="@+id/imageSwitcher1" 
        android:layout_width="fill_parent" 
        android:layout_height="150dp" 
         /> 
    <Button 
        android:id="@+id/btnadd" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="上一張" /> 
    <Button 
        android:id="@+id/btnSub" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="下一張" /> 
</LinearLayout> 

　實現代碼：

package com.bgxt.imageswitcherDemo;  
 
import java.util.ArrayList;  
import java.util.List;  
 
import android.os.Bundle;  
import android.app.Activity;  
import android.graphics.drawable.Drawable;  
import android.view.Menu;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.view.animation.Animation;  
import android.view.animation.AnimationUtils;  
import android.widget.Button;  
import android.widget.ImageSwitcher;  
import android.widget.ImageView;  
import android.widget.ViewSwitcher.ViewFactory;  
 
public class MainActivity extends Activity {  
    private Button btnAdd, btnSub;  
    private ImageSwitcher imageSwitcher;  
    private int index = 0;  
    private List<Drawable> list;  
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        putData();  
        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher1);  
        btnAdd = (Button) findViewById(R.id.btnadd);  
        btnSub = (Button) findViewById(R.id.btnSub);  
        btnAdd.setOnClickListener(myClick);  
        btnSub.setOnClickListener(myClick);  
          
        //通過代碼設定從左緩進，從右換出的效果。  
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_in_left));  
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.slide_out_right));  
        imageSwitcher.setFactory(new ViewFactory() {  
              
            @Override 
            public View makeView() {  
                // makeView返回的是當前需要顯示的ImageView控件，用於填充進ImageSwitcher中。  
                return new ImageView(MainActivity.this);  
            }  
        });  
        imageSwitcher.setImageDrawable(list.get(0));  
    }  
   
    @Override 
    public boolean onCreateOptionsMenu(Menu menu) {  
        // Inflate the menu; this adds items to the action bar if it is present.  
        getMenuInflater().inflate(R.menu.main, menu);  
        return true;  
    }  
 
    private View.OnClickListener myClick = new OnClickListener() {  
 
        @Override 
        public void onClick(View v) {  
            switch (v.getId()) {  
            case R.id.btnadd:  
                index--;  
                if(index<0)  
                {  
                    //用於循環顯示圖片  
                    index=list.size()-1;  
                }  
                //設定ImageSwitcher顯示新圖片  
                imageSwitcher.setImageDrawable(list.get(index));  
                break;  
 
            case R.id.btnSub:  
                index++;  
                if(index>=list.size())  
                {  
                    //用於循環顯示圖片  
                    index=0;  
                }  
                imageSwitcher.setImageDrawable(list.get(index));  
                break;  
            }  
        }  
    };  
 
    private void putData() {  
        //填充圖片的Drawable資源數組  
        list = new ArrayList<Drawable>();  
        list.add(getResources().getDrawable(R.drawable.bmp1));  
        list.add(getResources().getDrawable(R.drawable.bmp2));  
        list.add(getResources().getDrawable(R.drawable.bmp3));  
        list.add(getResources().getDrawable(R.drawable.bmp4));  
        list.add(getResources().getDrawable(R.drawable.bmp5));  
    }  
} 

　效果展示：

 　　源碼下載

總結

　　本篇主要講解了ImageSwitcher的使用方式，而對於其父類ViewSwitcher的使用，大致上與ImageSwitcher相似，只是填充的內容不同而已，一般了解了ImageSwitcher的使用，再看ViewSwitcher就很好理解，以後有時間再詳細講解ViewSwitcher的使用。