安卓UI组件之ViewFlipper

于 2013-06-30 16:08:20 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： 安卓学习 文章标签： Android UI 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/youlebron/article/details/9207717
版权

首先，我们总结一下我们学过的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();
	}
}


我们来运行程序，看到如下界面，而且控制了这个流动视图自动滚动：



由于我们这设置了OnTouchListener()，所以当我们用手指在屏幕上滑动，图片发生改变：



这样，ViewFlipper的特性与功能就实现了。

读者如果有兴趣，可以从一下链接下载源代码：

http://download.youkuaiyun.com/detail/u010798277/5673135


viewFlipper
01-21
viewFilpper 的简单使用
ViewFlipper
MMjiajia132的专栏
06-07 487
安装APP后，首次进入时，经常看到几个页面的关于本应用的使用介绍，可通过点击上边的按钮和手势实现滑动，到最后页面时进入应用。这种效果的实现可以使用ViewFlipper。 ViewFlipper是间接继承自FrameLayout的。      android.widget.ViewAnimator类继承至FrameLayout，ViewAnimator类的作用是为Frame
Android应用源码之ViewFlipper水平滑动.zip
11-05
在Android应用开发中，ViewFlipper是一个非常实用的组件，它允许开发者实现视图间的平滑切换，通常用于创建类似轮播图或者翻页效果的界面。这个源码示例是专门为安卓学习者设计的，旨在帮助他们理解和掌握如何在...
安卓Android源码——ViewFlipper水平滑动.rar
10-10
【标题】"安卓Android源码——ViewFlipper水平滑动.rar"揭示了关于Android平台下ViewFlipper组件的实现细节，特别关注其水平滑动功能。ViewFlipper是Android SDK提供的一种视图容器，用于在多个视图之间进行平滑切换...
Android开发之ViewFlipper自动播放图片功能实现方法示例
08-26
ViewFlipper是Android开发中常用的UI组件之一，它可以实现图片的自动播放功能，以下是ViewFlipper自动播放图片功能实现方法的详细介绍。 ViewFlipper简介 ViewFlipper是Android开发中的一种ViewAnimator子类，它...
应用源码之ViewFlipper1.zip
最新发布
04-22
源码中的`ViewFlipper`使用Java编写，展示了如何在Java中操作Android UI组件。 - ANDROID：此标签表明源码与Android平台紧密相关，涵盖了Android开发中的组件使用和交互逻辑。 - 毕业设计：`ViewFlipper`的应用广泛...
viewflipper
04-28
利用系统自带的ViewFlipper实现自动轮播的效果，可以监听手势进行滑动
安卓UI设计范例：手势与ViewFlipper结合应用
本知识点将围绕“android一个漂亮的UI设计demo”展开，详细介绍在Android平台中实现美观UI时所涉及的关键技术点和组件。 首先，我们来谈谈ViewFlipper组件。ViewFlipper在Android UI设计中扮演着至关重要的角色，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值