Android零基礎入門第55節：ImageSwitcher和TextSwitcher使用
上一期我們了解了ViewAnimator組件和ViewSwitcher組件的使用，你都掌握了嗎？本期一起來學習ViewSwitcher的兩個子組件ImageSwitcher和TextSwitcher。
一、ImageSwitcher
ImageSwitcher和ImageSwitcher繼承了 ViewSwitcher，因此它具有與ViewSwitcher相同的特征：可以在切換View組件時使用動畫效果。ImageSwitcher繼承了 ViewSwitcher，並重寫了 ViewSwitcher 的 showNext()、showPrevious()方法，因此 ImageSwitcher 使用起來更加簡單。
使用 ImageSwitcher 只要如下兩步即可。
-
為 ImageSwitcher 提供一個 ViewFactory，該 ViewFactory 生成的 View 組件必須是 ImageView。
-
需要切換圖片時，只要調用 ImageSwitcher 的 setImageDrawable(Drawable drawable)、 setImageResource(int resid)和 setImageURI(Uri uri)方法更換圖片即可。
接下來通過一個簡單的示例程序來學習ImageSwitcher 的使用。
繼續使用WidgetSample工程的advancedviewsample模塊，首先準備5張圖片放在drawable目錄下，然後在app/main/res/layout/目錄下創建imageswitcher_layout.xml文件，在其中填充如下代碼片段：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageSwitcher android:id="@+id/switcher" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:inAnimation="@android:anim/slide_in_left" android:outAnimation="@android:anim/slide_out_right"/> </RelativeLayout>
上面界面布局文件中的粗體字代碼定義了一個ImageSwitcher，並通過android:inAnimation 和android:outAnimation指定了圖片切換時的動畫效果。
ImageSwitcher的使用一個最重要的地方就是需要為它指定一個ViewFactory，也就是定義它是如何把內容顯示出來的，一般做法為在使用ImageSwitcher的該類中實現ViewFactory接口並覆蓋對應的makeView方法。新建ImageSwitcherActivity.java文件，加載上面新建的布局文件，具體代碼如下：
package com.jinyu.cqkxzsxy.android.advancedviewsample; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.ViewGroup; import android.view.animation.AnimationUtils; import android.widget.ImageSwitcher; import android.widget.ImageView; import android.widget.ViewSwitcher; /** * @創建者 鑫鱻 * @描述 Android零基礎入門到精通系列教程，歡迎關註微信公眾號ShareExpert */ public class ImageSwitcherActivity extends AppCompatActivity implements ViewSwitcher.ViewFactory { private ImageSwitcher mImageSwitcher = null; private int[] mImageIds = { R.drawable.image_01, R.drawable.image_02, R.drawable.image_03, R.drawable.image_04, R.drawable.image_05 }; private int mIndex = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.imageswitcher_layout); // 獲取界面組件 mImageSwitcher = (ImageSwitcher) findViewById(R.id.switcher); // 為他它指定一個ViewFactory，也就是定義它是如何把內容顯示出來的， // 實現ViewFactory接口並覆蓋對應的makeView方法。 mImageSwitcher.setFactory(this); // 添加動畫效果 mImageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in)); mImageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out)); // 為ImageSwitcher綁定監聽事件 mImageSwitcher.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mIndex ++; if(mIndex >= mImageIds.length){ mIndex = 0; } mImageSwitcher.setImageResource(mImageIds[mIndex]); } }); mImageSwitcher.setImageResource(mImageIds[0]); } @Override public View makeView() { ImageView imageView = new ImageView(this); imageView.setBackgroundColor(0xFF000000); // 設置填充方式 imageView.setScaleType(ImageView.ScaleType.FIT_XY); imageView.setLayoutParams(new ImageSwitcher.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); return imageView; } }
運行程序，點擊ImageSwitcher時可以看到下圖所示界面圖片切換的效果。
二、TextSwitcher
TextSwitcher繼承了 ViewSwitcher，因此它具有與ViewSwitcher相同的特征：可以在切換 View組件時使用動畫效果。與ImageSwitcher相似的是，使用TextSwitcher也需要設置一個 ViewFactory。與 ImageSwitcher 不同的是，TextSwitcher 所需的 ViewFactory 的 makeView()方法必須返回一個TextView組件。
TextSwitcher與TextView的功能有點相似，它們都可用於顯示文本內容，區別在於TextSwitcher的效果更炫，它可以指定文本切換時的動畫效果。
接下來通過一個簡單的示例程序來學習TextSwitcher的使用。
繼續使用WidgetSample工程的advancedviewsample模塊，在app/main/res/layout/目錄下創建textwitcher_layout.xml文件，在其中填充如下代碼片段：
<?xml version="1.0" encoding="utf-8" ?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 定義一個TextSwitcher，並指定了文本切換時的動畫效果 --> <TextSwitcher android:id="@+id/textSwitcher" android:layout_width="match_parent" android:layout_height="wrap_content" android:inAnimation="@android:anim/slide_in_left" android:outAnimation="@android:anim/slide_out_right" /> </LinearLayout>
上面的界面布局文件中定義了一個TextSwitcher，並指定了文本切換時的動畫效果。
接下來Activity只要為TextSwitcher設置ViewFactory，該TextSwitcher即可正常工作。新建TextSwitcherActivity.java文件，加載上面新建的布局文件，具體代碼如下：
package com.jinyu.cqkxzsxy.android.advancedviewsample; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.TextSwitcher; import android.widget.TextView; import android.widget.ViewSwitcher; /** * @創建者 鑫鱻 * @描述 Android零基礎入門到精通系列教程，歡迎關註微信公眾號ShareExpert */ public class TextSwitcherActivity extends AppCompatActivity { private TextSwitcher mTextSwitcher = null; private String[] mContents = { "你好", "HelloWorld", "Good!!!", "TextSwitcher", "你會了嗎？" }; private int mIndex = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.textwitcher_layout); mTextSwitcher = (TextSwitcher) findViewById(R.id.textSwitcher); mTextSwitcher.setFactory(new ViewSwitcher.ViewFactory() { @Override public View makeView() { TextView tv = new TextView(TextSwitcherActivity.this); tv.setTextSize(40); tv.setTextColor(Color.MAGENTA); return tv; } }); mTextSwitcher.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mTextSwitcher.setText(mContents[mIndex++ % mContents.length]); } }); mTextSwitcher.setText(mContents[0]); } }
上面的粗體字代碼重寫了 ViewFactory的makeView() 方法，該方法返回了一個TextView，這樣即可讓 TextSwitcher正常工作。當程序要切換TextSwitcher顯示文本時，調用TextSwitcher的setText()方法修改文本即可。
運行程序，點擊TextSwitcher將會切換顯示的文本，同時會出現動畫效果，如下圖所示。
至此，關於ImageSwitcher和TextSwitcher組件學習完畢，如果還有不清楚的地方建議回頭再多做練習。
今天就先到這裏，如果有問題歡迎留言一起探討，也歡迎加入Android零基礎入門技術討論微信群，共同成長！
此文章版權為微信公眾號分享達人秀（ShareExpert）——鑫鱻所有，若需轉載請聯系作者授權，特此聲明！
往期總結分享：
Android零基礎入門第1節：Android的前世今生
Android零基礎入門第2節：Android 系統架構和應用組件那些事
Android零基礎入門第3節：帶你一起來聊一聊Android開發環境
Android零基礎入門第4節：正確安裝和配置JDK, 高富帥養成第一招
Android零基礎入門第5節：善用ADT Bundle, 輕松邂逅女神
Android零基礎入門第6節：配置優化SDK Manager, 正式約會女神
Android零基礎入門第7節：搞定Android模擬器，開啟甜蜜之旅
Android零基礎入門第8節：HelloWorld，我的第一趟旅程出發點
Android零基礎入門第9節：Android應用實戰，不懂代碼也可以開發
Android零基礎入門第10節：開發IDE大升級，終於迎來了Android Studio
Android零基礎入門第11節：簡單幾步帶你飛，運行Android Studio工程
Android零基礎入門第12節：熟悉Android Studio界面，開始裝逼賣萌
Android零基礎入門第13節：Android Studio配置優化，打造開發利器
Android零基礎入門第14節：使用高速Genymotion，跨入火箭時代
Android零基礎入門第15節：掌握Android Studio項目結構，揚帆起航
Android零基礎入門第16節：Android用戶界面開發概述
Android零基礎入門第17節：文本框TextView
Android零基礎入門第18節：輸入框EditText
Android零基礎入門第19節：按鈕Button
Android零基礎入門第20節：復選框CheckBox和單選按鈕RadioButton
Android零基礎入門第21節：開關組件ToggleButton和Switch
Android零基礎入門第22節：圖像視圖ImageView
Android零基礎入門第23節：圖像按鈕ImageButton和縮放按鈕ZoomButton
Android零基礎入門第24節：自定義View簡單使用，打造屬於你的控件
Android零基礎入門第25節：簡單且最常用的LinearLayout線性布局
Android零基礎入門第26節：兩種對齊方式，layout_gravity和gravity大不同
Android零基礎入門第27節：正確使用padding和margin
Android零基礎入門第28節：輕松掌握RelativeLayout相對布局
Android零基礎入門第29節：善用TableLayout表格布局
Android零基礎入門第30節：兩分鐘掌握FrameLayout幀布局
Android零基礎入門第31節：少用的AbsoluteLayout絕對布局
Android零基礎入門第32節：新推出的GridLayout網格布局
Android零基礎入門第33節：Android事件處理概述
Android零基礎入門第34節：Android中基於監聽的事件處理
Android零基礎入門第35節：Android中基於回調的事件處理
Android零基礎入門第36節：Android系統事件的處理
Android零基礎入門第37節：初識ListView
Android零基礎入門第38節：初識Adapter
Android零基礎入門第39節：ListActivity和自定義列表項
Android零基礎入門第40節：自定義ArrayAdapter
Android零基礎入門第41節：使用SimpleAdapter
Android零基礎入門第42節：自定義BaseAdapter
Android零基礎入門第43節：ListView優化和列表首尾使用
Android零基礎入門第44節：ListView數據動態更新
Android零基礎入門第45節：網格視圖GridView
Android零基礎入門第46節：列表選項框Spinner
Android零基礎入門第47節：自動完成文本框AutoCompleteTextView
Android零基礎入門第48節：可折疊列表ExpandableListView
Android零基礎入門第49節：AdapterViewFlipper圖片輪播
Android零基礎入門第50節：StackView卡片堆疊
Android零基礎入門第51節：進度條ProgressBar
Android零基礎入門第52節：自定義ProgressBar炫酷進度條
Android零基礎入門第53節：拖動條SeekBar和星級評分條RatingBar
Android零基礎入門第54節：視圖切換組件ViewSwitcher
Android零基礎入門第55節：ImageSwitcher和TextSwitcher使用