安卓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文件反编译