安卓UI元件之ViewFlipper

首先，我們總結一下我們學過的UI元件：

基本UI元件

Button：按鈕

ImageButon ：圖檔按鈕

Imageview：圖檔視圖

RadioButton：單選按鈕

CheckBox：複選框

ToggleButton：多選按鈕

TextView：文本框

EditText：文本編輯框

進階UI元件：

AutoComleteTextView：自動完成文本框

Spinner：下拉清單

DataPicker與TimePicker：時間日期選擇框

PogressBar,RatingBar,SeekBar：進度條，星級條，拖動條

TabHost：頁籤

ListView：清單

ExpandableListView：可打開的清單

GridView：網格

ImageSwitch：圖像切換器

Gallery：畫廊

對話框：Dialog

菜單：Menu

Toast與Notification：

這些都是非常常見且經常被我們用到的UI元件，現在我們介紹另一個非常有用的UI元件，由于手機螢幕的限制，我們設計界面的時候不得不考慮螢幕的大小，是以，我們可以使用ViewFlipper來顯示視圖，這樣設計既使用又美觀：

由于這種設計在購物App中很常見，我們設計了一個購物街程式來講解這個這個UI元件。

這個元件其實很簡單：我們在xml檔案中來定義ViewFlipper：

main.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="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical" >
    <RelativeLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:id="@+id/title_ry"
        >
        <include layout="@layout/home_title_layout"/>
    </RelativeLayout>
        <LinearLayout
        android:id="@+id/footbar_layout_ly" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        >
        <include layout="@layout/home_footbar_layout"></include>"
    </LinearLayout>
    <ScrollView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/viewflipper_scrollview"
        android:scrollbars="none"
        android:focusable="false"
        android:layout_above="@id/footbar_layout_ly"
        android:layout_below="@id/title_ry">
        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        <ViewFlipper
            android:id="@+id/mViewFliper_vf"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
				            <LinearLayout 
				        android:layout_width="match_parent"
				        android:layout_height="wrap_content">
				        <ImageView 
				            android:layout_width="match_parent"
				            android:layout_height="160dip"
				            android:background="@drawable/default_pic_1"/>
				    </LinearLayout>
				      <LinearLayout 
				        android:layout_width="match_parent"
				        android:layout_height="wrap_content"
				        android:orientation="vertical">
				        <ImageView 
				            android:layout_width="match_parent"
				            android:layout_height="160dip"
				            android:background="@drawable/default_pic_2"/>
				    </LinearLayout>
				      <LinearLayout 
				        android:layout_width="match_parent"
				        android:layout_height="wrap_content"
				        android:orientation="vertical">
				        <ImageView 
				            android:layout_width="match_parent"
				            android:layout_height="160dip"
				            android:background="@drawable/default_pic_3"/>
				    </LinearLayout>
				      <LinearLayout 
				        android:layout_width="match_parent"
				        android:layout_height="wrap_content"
				        android:orientation="vertical">
				        <ImageView 
				            android:layout_width="match_parent"
				            android:layout_height="160dip"
				            android:background="@drawable/default_pic_4"/>
				    </LinearLayout>
        </ViewFlipper>
        <LinearLayout
        android:id="@+id/home_date_ratio_ly" 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/mViewFliper_vf">
         	<include  layout="@layout/home_data_bar"/>  
        </LinearLayout>
        <LinearLayout 
            android:id="@+id/home_user_layout_ly"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/home_date_ratio_ly">
                    <include layout="@layout/home_user_layout"/>
        </LinearLayout>
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/home_user_layout_ly">
            <include layout="@layout/home_select_list_layout"/>
        </LinearLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>

主界面中在Scrollview裡面定義了ViewFlipper，這樣我們可以同時設定OnTouchListener();

我們看到在LinearLayout裡面我們還include了一些界面設計檔案，由于不是本文介紹終點，故不作贅述。

我們在主Activity中來設定了一些OnClickListener(),OnTouckListener()來控制使用者的互動動作：

import java.util.Calendar;
import java.util.Date;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.GestureDetector;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.GestureDetector.OnGestureListener;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.ViewFlipper;

public class TestUIActivity extends Activity implements OnGestureListener, OnTouchListener {
	
	private TextView date_TextView;
	private ImageButton set_ImageButton, regist_ImageButton, login_ImageButton;
	private ViewFlipper viewFlipper;
	private boolean showNext = true;
	private boolean isRun = true;
	private int currentPage = 0;
	private final int SHOW_NEXT = 0011;
	private static final int FLING_MIN_DISTANCE = 50;
	private static final int FLING_MIN_VELOCITY = 0;
	private GestureDetector mGestureDetector;
	private LinearLayout home_img_bn_Layout, style_img_bn_layout, cam_img_bn_layout, shopping_img_bn_layout, show_img_bn_layout;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        date_TextView = (TextView) findViewById(R.id.home_date_tv);
        date_TextView.setText(getDate());
        
        set_ImageButton = (ImageButton) findViewById(R.id.title_set_bn);
        set_ImageButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				toastInfo("設定屬性");
			}
		});
        
        regist_ImageButton = (ImageButton) findViewById(R.id.home_bn_regist);
        regist_ImageButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				toastInfo("注冊按鈕");
			}
		});
        login_ImageButton = (ImageButton) findViewById(R.id.home_bn_login);
        login_ImageButton.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				toastInfo("登入按鈕");
			}
		});
        //為底部選擇框設定監聽器
        home_img_bn_Layout = (LinearLayout) findViewById(R.id.bottom_home_layout_ly);
        home_img_bn_Layout.setOnClickListener(clickListener_home);

        style_img_bn_layout = (LinearLayout) findViewById(R.id.bottom_style_layout_ly);
        style_img_bn_layout.setOnClickListener(clickListener_style);
        
        cam_img_bn_layout = (LinearLayout) findViewById(R.id.bottom_cam_layout_ly);
        cam_img_bn_layout.setOnClickListener(clickListener_cam);
        
        shopping_img_bn_layout = (LinearLayout) findViewById(R.id.bottom_shopping_layout_ly);
        shopping_img_bn_layout.setOnClickListener(clickListener_shopping);
        
        show_img_bn_layout = (LinearLayout) findViewById(R.id.bottom_show_layout_ly);
        show_img_bn_layout.setOnClickListener(clickListener_show);
        
//視圖切換
        viewFlipper = (ViewFlipper) findViewById(R.id.mViewFliper_vf);
        mGestureDetector = new GestureDetector(this);
        viewFlipper.setOnTouchListener(this);	//設定觸摸監聽器
        viewFlipper.setLongClickable(true);		//設定長按監聽器
        viewFlipper.setOnClickListener(clickListener);	//設定按下監聽器
        displayRatio_selelct(currentPage);
        
        MyScrollView myScrollView = (MyScrollView) findViewById(R.id.viewflipper_scrollview);
        myScrollView.setOnTouchListener(onTouchListener);
        //設定手勢偵探
        myScrollView.setGestureDetector(mGestureDetector);
        
        thread.start();
    }
    private OnClickListener clickListener = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			toastInfo("點選事件");
		}
	};
    private OnTouchListener onTouchListener = new OnTouchListener() {
		
		@Override
		public boolean onTouch(View v, MotionEvent event) {
			// TODO Auto-generated method stub
			return mGestureDetector.onTouchEvent(event);
		}
	};
    
    Handler mHandler = new Handler(){

		@Override
		public void handleMessage(Message msg) {
			// TODO Auto-generated method stub
			switch (msg.what) {
			case SHOW_NEXT:
				if (showNext) {
					showNextView();
				} else {
					showPreviousView();
				}
				break;

			default:
				break;
			}
		}
    	
    };
    private String getDate(){
    	Date date = new Date();
    	Calendar c = Calendar.getInstance();
    	c.setTime(date);
    	String[] weekDays = {"星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"};
    	int w = c.get(Calendar.DAY_OF_WEEK) - 1 ;
    	if (w < 0) {
			w = 0;
		}
    	String mDate = c.get(Calendar.YEAR)+"年" + c.get(Calendar.MONTH) + "月" + c.get(Calendar.DATE) + "日  " + weekDays[w];
    	return mDate;
    }
    private OnClickListener clickListener_home = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
				home_img_bn_Layout.setSelected(true);
				style_img_bn_layout.setSelected(false);
				cam_img_bn_layout.setSelected(false);
				shopping_img_bn_layout.setSelected(false);
				show_img_bn_layout.setSelected(false);
				Intent intent = new Intent();
				intent.setClass(TestUIActivity.this, MyActivity.class);
				intent.putExtra("clickble", true);
				startActivity(intent);
				home_img_bn_Layout.setSelected(false);
		}
	};
	private OnClickListener clickListener_style = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			home_img_bn_Layout.setSelected(false);
			style_img_bn_layout.setSelected(true);
			cam_img_bn_layout.setSelected(false);
			shopping_img_bn_layout.setSelected(false);
			show_img_bn_layout.setSelected(false);
			toastInfo("點選我的家有跳轉");
		}
	};
	private OnClickListener clickListener_cam = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			home_img_bn_Layout.setSelected(false);
			style_img_bn_layout.setSelected(false);
			cam_img_bn_layout.setSelected(true);
			shopping_img_bn_layout.setSelected(false);
			show_img_bn_layout.setSelected(false);
			toastInfo("點選我的家有跳轉");
		}
	};
	private OnClickListener clickListener_shopping = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			home_img_bn_Layout.setSelected(false);
			style_img_bn_layout.setSelected(false);
			cam_img_bn_layout.setSelected(false);
			shopping_img_bn_layout.setSelected(true);
			show_img_bn_layout.setSelected(false);
			toastInfo("點選我的家有跳轉");
		}
	};
	private OnClickListener clickListener_show = new OnClickListener() {
		
		@Override
		public void onClick(View v) {
			// TODO Auto-generated method stub
			home_img_bn_Layout.setSelected(false);
			style_img_bn_layout.setSelected(false);
			cam_img_bn_layout.setSelected(false);
			shopping_img_bn_layout.setSelected(false);
			show_img_bn_layout.setSelected(true);
			toastInfo("點選我的家有跳轉");
		}
	};
	
	//重寫OnGestureListener的一些方法
	//
	@Override
	public boolean onDown(MotionEvent e) {
		// TODO Auto-generated method stub
		return false;
	}
	@Override
//GestureListener的onFling（）方法
	public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
			float velocityY) {
		// TODO Auto-generated method stub
		Log.e("view", "onFling");
		if (e1.getX() - e2.getX()> FLING_MIN_DISTANCE  
                && Math.abs(velocityX) > FLING_MIN_VELOCITY ) {
			Log.e("fling", "left");
			showNextView();
			showNext = true;
//			return true;
		} else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE  
                && Math.abs(velocityX) > FLING_MIN_VELOCITY){
			Log.e("fling", "right");
			showPreviousView();
			showNext = false;
//			return true;
		}
		return false;
	}
	@Override
	public void onLongPress(MotionEvent e) {
		// TODO Auto-generated method stub
		
	}
	@Override
	public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
			float distanceY) {
		// TODO Auto-generated method stub
		return false;
	}
	@Override
	public void onShowPress(MotionEvent e) {
		// TODO Auto-generated method stub
		
	}
	@Override
	public boolean onSingleTapUp(MotionEvent e) {
		// TODO Auto-generated method stub
		return false;
	}
	//重寫了onTouchLisetner的這些方法
	//
	
	//重寫OnTouchListener的onTouch()方法
	@Override
	public boolean onTouch(View v, MotionEvent event) {
		// TODO Auto-generated method stub
		return mGestureDetector.onTouchEvent(event);
	}
	
	
	
	
	Thread thread = new Thread(){

		@Override
		public void run() {
			// TODO Auto-generated method stub
			while(isRun){
				try {
					Thread.sleep(1000 * 8);
					Message msg = new Message();
					msg.what = SHOW_NEXT;
					mHandler.sendMessage(msg);
				} catch (InterruptedException e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			}
		}
		
	};
	
	//
	private void showNextView(){

		viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
		viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));		
		viewFlipper.showNext();
		currentPage ++;
		if (currentPage == viewFlipper.getChildCount()) {
			displayRatio_normal(currentPage - 1);
			currentPage = 0;
			displayRatio_selelct(currentPage);
		} else {
			displayRatio_selelct(currentPage);
			displayRatio_normal(currentPage - 1);
		}
		Log.e("currentPage", currentPage + "");		
		
	}
	private void showPreviousView(){
		displayRatio_selelct(currentPage);
		viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in));
		viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out));
		viewFlipper.showPrevious();
		currentPage --;
		if (currentPage == -1) {
			displayRatio_normal(currentPage + 1);
			currentPage = viewFlipper.getChildCount() - 1;
			displayRatio_selelct(currentPage);
		} else {
			displayRatio_selelct(currentPage);
			displayRatio_normal(currentPage + 1);
		}
		Log.e("currentPage", currentPage + "");		
	}
	private void displayRatio_selelct(int id){
		int[] ratioId = {R.id.home_ratio_img_04, R.id.home_ratio_img_03, R.id.home_ratio_img_02, R.id.home_ratio_img_01};
		ImageView img = (ImageView)findViewById(ratioId[id]);
		img.setSelected(true);
	}
	private void displayRatio_normal(int id){
		int[] ratioId = {R.id.home_ratio_img_04, R.id.home_ratio_img_03, R.id.home_ratio_img_02, R.id.home_ratio_img_01};
		ImageView img = (ImageView)findViewById(ratioId[id]);
		img.setSelected(false);
	}
	
	//重寫Activity的一些方法
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// TODO Auto-generated method stub
		if (keyCode == KeyEvent.KEYCODE_BACK) {
			isRun = false;
			finish();
		}
		return super.onKeyDown(keyCode, event);
	}
	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		finish();
		super.onDestroy();
	}
	//自定義發送Toast的方法
	private void toastInfo(String string){
		Toast.makeText(TestUIActivity.this, string, Toast.LENGTH_SHORT).show();
	}
}

我們來運作程式，看到如下界面，而且控制了這個流動視圖自動滾動：

安卓UI元件之ViewFlipper

由于我們這設定了OnTouchListener()，是以當我們用手指在螢幕上滑動，圖檔發生改變：

安卓UI元件之ViewFlipper

這樣，ViewFlipper的特性與功能就實作了。

讀者如果有興趣，可以從一下連結下載下傳源代碼：

http://download.csdn.net/detail/u010798277/5673135

安卓UI元件之ViewFlipper

繼續閱讀

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

android 主線程的相關問題

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯