Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Android學習指南之四十五:用戶界面View之ImageSwitcher 和TextSwitcher

Android學習指南之四十五:用戶界面View之ImageSwitcher 和TextSwitcher

編輯:關於android開發

       本節所講內容為Android中用於輪顯圖片的圖片切換器ImageSwitcher、用於切換文本的文本切換器TextSwitcher。

       一、ImageSwitcher 圖片切換器

       我們可以看到很多網站首頁裡的有個圖片輪顯控件,用來顯示站內重點新聞等,在這些網站裡很多采用了JQuery等JS框架提供的輪顯插件,而在Android裡也有這個ImageSwitcher提供了類似的功能。

       那麼我們就一起做一個例子感覺一下:

       1、新建一個項目:Lesson45_ImageSwitcher。

       2、准備好5張看著順眼的圖片,放在res\drawable目錄下:

Android學習指南之四十五:用戶界面View之ImageSwitcher 和TextSwitcher

       3、在main.xml中添加一個ImageSwitcher組件:

XML/HTML代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LINEARLAYOUT xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">  
  3.     <IMAGESWITCHER android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/imageSwitcher1">  
  4.     </IMAGESWITCHER>  
  5. </LINEARLAYOUT>  

       4、在MainActivity.java中的代碼如下:

Java代碼
  1. package basic.android.lesson45;   
  2.   
  3. import android.app.Activity;   
  4. import android.os.Bundle;   
  5. import android.view.View;   
  6. import android.view.Window;   
  7. import android.view.WindowManager;   
  8. import android.view.animation.AnimationUtils;   
  9. import android.widget.ImageSwitcher;   
  10. import android.widget.ImageView;   
  11. import android.widget.ViewSwitcher.ViewFactory;   
  12.   
  13. public class MainActivity extends Activity {   
  14.   
  15.     //當前顯示的圖片索引   
  16.     private int index;   
  17.   
  18.     //圖片數組   
  19.     private int[] images = { R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4,   
  20.             R.drawable.image5 };   
  21.   
  22.     /** Called when the activity is first created. */  
  23.     @Override  
  24.     public void onCreate(Bundle savedInstanceState) {   
  25.   
  26.         super.onCreate(savedInstanceState);   
  27.   
  28.         //全屏設置   
  29.         requestWindowFeature(Window.FEATURE_NO_TITLE);   
  30.         getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);   
  31.   
  32.         setContentView(R.layout.main);   
  33.   
  34.         //得到ImageSwitcher對象   
  35.         final ImageSwitcher is = (ImageSwitcher) findViewById(R.id.imageSwitcher1);   
  36.   
  37.         //實現並設置工廠內部接口的makeView方法,用來顯示視圖。   
  38.         is.setFactory(new ViewFactory() {   
  39.             @Override  
  40.             public View makeView() {   
  41.                 return new ImageView(MainActivity.this);   
  42.             }   
  43.         });   
  44.   
  45.         //設置圖片來源   
  46.         is.setImageResource(images[index]);   
  47.   
  48.         //設置點擊監聽器   
  49.         is.setOnClickListener(new View.OnClickListener() {   
  50.   
  51.             @Override  
  52.             public void onClick(View v) {   
  53.                 //點擊會切換圖片   
  54.                 index++;   
  55.                 if (index >= images.length) {   
  56.                     index = 0;   
  57.                 }   
  58.                 is.setImageResource(images[index]);   
  59.             }   
  60.         });   
  61.   
  62.         //設置切入動畫   
  63.         is.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_in_left));   
  64.         //設置切出動畫   
  65.         is.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_out_right));   
  66.   
  67.     }   
  68. }  

       5、編譯並運行程序,查看結果:

       抱歉我抓不到切換圖片瞬間的截圖。

Android學習指南之四十五:用戶界面View之ImageSwitcher 和TextSwitcher

       二、TextSwitcher 文本切換器

       文本的切換動畫也是有一個叫TextSwitcher的類可以做到,它的使用方法和ImageSwitcher類似。至於為什麼用法如此相似,還是看下面兩張繼承關系圖吧:

Android學習指南之四十五:用戶界面View之ImageSwitcher 和TextSwitcher

Android學習指南之四十五:用戶界面View之ImageSwitcher 和TextSwitcher

       下面直接上例子:

       1、新建一個項目:Lesson45_TextSwitcher。

       2、在main.xml中添加一個TextSwitcher組件:

XML/HTML代碼
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LINEARLAYOUT xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">  
  3.     <TEXTSWITCHER android:layout_height="wrap_content" android:layout_width="match_parent" android:id="@+id/textSwitcher1">  
  4.     </TEXTSWITCHER>  
  5. </LINEARLAYOUT>  

       3、在MainActivity.java中的代碼如下:

Java代碼
  1. package basic.android.lesson45;   
  2.   
  3. import android.app.Activity;   
  4. import android.graphics.Color;   
  5. import android.os.Bundle;   
  6. import android.view.View;   
  7. import android.view.animation.AnimationUtils;   
  8. import android.widget.TextSwitcher;   
  9. import android.widget.TextView;   
  10. import android.widget.ViewSwitcher.ViewFactory;   
  11.   
  12. public class MainActivity extends Activity {   
  13.   
  14.     // 索引   
  15.     private int index;   
  16.     // 文本數組   
  17.     private String[] poemArray = { "去年今日栽", "臨去見花開", "好住守空院", "夜間人不來" };   
  18.   
  19.     /** Called when the activity is first created. */  
  20.     @Override  
  21.     public void onCreate(Bundle savedInstanceState) {   
  22.         super.onCreate(savedInstanceState);   
  23.         setContentView(R.layout.main);   
  24.   
  25.         //定義文字切換器   
  26.         final TextSwitcher ts = (TextSwitcher) findViewById(R.id.textSwitcher1);   
  27.   
  28.         //定義視圖顯示工廠,並設置   
  29.         ts.setFactory(new ViewFactory() {   
  30.   
  31.             @Override  
  32.             public View makeView() {   
  33.                 TextView tv =new TextView(MainActivity.this);   
  34.                 tv.setTextSize(32);   
  35.                 tv.setTextColor(Color.GREEN);   
  36.                 return tv;   
  37.             }   
  38.         });   
  39.   
  40.         // 設置圖片來源   
  41.         ts.setText(poemArray[index]);   
  42.   
  43.         // 設置點擊監聽器   
  44.         ts.setOnClickListener(new View.OnClickListener() {   
  45.   
  46.             @Override  
  47.             public void onClick(View v) {   
  48.                 // 點擊會切換圖片   
  49.                 index++;   
  50.                 if (index >= poemArray.length) {   
  51.                     index = 0;   
  52.                 }   
  53.                 ts.setText(poemArray[index]);   
  54.             }   
  55.         });   
  56.   
  57.         // 設置切入動畫   
  58.         ts.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_in_left));   
  59.         // 設置切出動畫   
  60.         ts.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_out_right));   
  61.   
  62.     }   
  63. }  

       4、編譯並運行程序,查看結果:

Android學習指南之四十五:用戶界面View之ImageSwitcher 和TextSwitcher

       抱歉還是沒法截取到切換時的場景#_#

       本節就講到這裡了,相信大家已經比較清楚了。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved