前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ViewFlipper实现多页面切换

ViewFlipper实现多页面切换

作者头像
xiangzhihong
发布2018-01-26 17:52:30
1.4K0
发布2018-01-26 17:52:30
举报
文章被收录于专栏:向治洪向治洪

1、屏幕切换指的是在同一个Activity内屏幕见的切换,最长见的情况就是在一个FrameLayout内有多个页面,比如一个系统设置页面;一个个性化设置页面。 2、介绍ViewFilpper类 ViewFlipper extends ViewAnimator java.lang.Object    ↳ android.view.View

   ↳ android.view.ViewGroup

   ↳ android.widget.FrameLayout

   ↳ android.widget.ViewAnimator

   ↳ android.widget.ViewFlipper Class Overview Simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

意思是:简单的ViewAnimator之间,两个或两个以上的view加上动画效果。只有一个小孩会显示在一个时间。如果需要,每个孩子能自动翻转之间在固定的时间间隔。

该类继承了Framelayout类,ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果。

该类有如下几个和动画相关的函数:

 setInAnimation:设置View进入屏幕时候使用的动画,该函数有两个版本,一个接受单个参数,类型为android.view.animation.Animation;一个接受两个参数,类型为Context和int,分别为Context对象和定义Animation的resourceID。 

 setOutAnimation: 设置View退出屏幕时候使用的动画,参数setInAnimation函数一样。

showNext: 调用该函数来显示FrameLayout里面的下一个View。

showPrevious: 调用该函数来显示FrameLayout里面的上一个View。

3、首选看一下定义四个动画的xml文件: in_left_right.xml——从左到右进入屏幕

代码语言:js
复制
 <?xml version="1.0" encoding="utf-8"?> 
 <set 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  > 
  
  <translate 
  android:fromXDelta="-100%p" 
  android:toXDelta="0" 
  android:duration="2000" 
  /> 
  
 </set> 

out_left_right.xml——从左到右出去屏幕

代码语言:js
复制
 <?xml version="1.0" encoding="utf-8"?> 
 <set 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  > 
  
  <translate 
  android:fromXDelta="0" 
  android:toXDelta="100%p" 
  android:duration="2000" 
  /> 
  
 </set> 

in_right_left.xml——从右到左进入屏幕

代码语言:js
复制
 <?xml version="1.0" encoding="utf-8"?> 
 <set 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  > 
  
  <translate 
  android:fromXDelta="100%p" 
  android:toXDelta="0" 
  android:duration="2000" 
  /> 
  
 </set> 

out_right_left.xml——从右到左出去屏幕

代码语言:js
复制
 <?xml version="1.0" encoding="utf-8"?> 
 <set 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  > 
  
  <translate 
  android:fromXDelta="0" 
  android:toXDelta="-100%p" 
  android:duration="2000" 
  /> 
  
 </set> 

4、定义main.xml文件

代码语言:js
复制
 <?xml version="1.0" encoding="utf-8"?> 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:background="#ffffff" 
  android:orientation="vertical" 
  android:padding="15dp" > 
  
  <ViewFlipper 
  android:id="@+id/flipper" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" > 
  
  <!-- 第一个页面 --> 
  <LinearLayout 
  android:id="@+id/layout1" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:orientation="vertical"> 
  
  <Spinner 
  android:id="@+id/spinner" 
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content" /> 
  
  <com.tiantang.testandroid1.MyTextView 
  android:id="@+id/mytext" 
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content" 
  android:clickable="true" 
  android:ellipsize="marquee" 
  android:focusable="true" 
  android:focusableInTouchMode="true" 
  android:lines="1" 
  android:marqueeRepeatLimit="marquee_forever" 
  android:scrollHorizontally="true" 
  android:text="1234567890987654321234556778909876765453234567898765322" 
  android:textColor="#000000" 
  android:textSize="20dp" /> 
  </LinearLayout> 
  <!-- 第二个页面 --> 
  <SlidingDrawer 
  android:id="@+id/drawer" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:content="@+id/content" 
  android:handle="@+id/handle" > 
  
  <ImageView 
  android:id="@id/handle" 
  android:layout_width="50dp" 
  android:layout_height="50dp" 
  android:src="@drawable/info" /> 
  
  <ImageView 
  android:id="@id/content" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:src="@drawable/confirm_bg" /> 
  </SlidingDrawer> 
  </ViewFlipper> 
  
 </LinearLayout> 

5、java代码实现:

代码语言:js
复制
 package com.tiantang.testandroid1;   
  
 import android.app.Activity;   
 import android.content.Context;   
 import android.os.Bundle;   
 import android.view.GestureDetector;   
 import android.view.GestureDetector.OnGestureListener;   
 import android.view.LayoutInflater;   
 import android.view.MotionEvent;   
 import android.view.View;   
 import android.view.View.OnTouchListener;   
 import android.view.ViewGroup;   
 import android.widget.ArrayAdapter;   
 import android.widget.BaseAdapter;   
 import android.widget.Button;   
 import android.widget.EditText;   
 import android.widget.ListView;   
 import android.widget.RadioButton;   
 import android.widget.SlidingDrawer;   
 import android.widget.Spinner;   
 import android.widget.TextView;   
 import android.widget.ViewFlipper;   
  
 public class TestAndroid1Activity extends Activity {   
  /** Called when the activity is first created. */ 
  private Spinner spinner;   
  
  private ViewFlipper flipper;   
  private MyAdapter adapter;   
  private TextView text;   
  private SlidingDrawer drawer;   
  private GestureDetector detector;   
  
  @Override 
  public void onCreate(Bundle savedInstanceState) {   
  super.onCreate(savedInstanceState);   
         setContentView(R.layout.main);   
         spinner = (Spinner) findViewById(R.id.spinner);   
         drawer = (SlidingDrawer) findViewById(R.id.drawer);   
         flipper = (ViewFlipper) findViewById(R.id.flipper);   
         String[] strs = new String[]{"1234567890987654321234556778909876765453234567898765322"};   
         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.mytext, strs);   
         spinner.setAdapter(adapter);   
  
         flipper.setLongClickable(true);   
         flipper.setOnTouchListener(new OnTouchListener() {   
  @Override 
  public boolean onTouch(View v, MotionEvent event) {   
  // TODO Auto-generated method stub  
                 detector.onTouchEvent(event);   
  return false;   
             }   
         });   
          detector = new GestureDetector(this, new OnGestureListener(){   
  @Override 
  public boolean onDown(MotionEvent e) {   
  //用户轻触屏幕。(单击)   
  return true;   
                 }   
  
  @Override 
  public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {   
  //用户按下屏幕,快速移动后松开(就是在屏幕上滑动)   
  //e1:第一个ACTION_DOWN事件(手指按下的那一点)   
  //e2:最后一个ACTION_MOVE事件 (手指松开的那一点)   
  //velocityX:手指在x轴移动的速度 单位:像素/秒   
  //velocityY:手指在y轴移动的速度 单位:像素/秒   
  
  int x = (int) (e2.getX() - e1.getX());   
  if(x>0){   
                         flipper.setInAnimation(TestAndroid1Activity.this,R.anim.in_left_right );   
                               flipper.setOutAnimation(TestAndroid1Activity.this,R.anim.out_left_right );   
                               flipper.showPrevious();                        
                     }else{   
                         flipper.setInAnimation(TestAndroid1Activity.this,R.anim.in_right_left );   
                               flipper.setOutAnimation(TestAndroid1Activity.this,R.anim.out_right_left );   
                               flipper.showNext();                    
                     }   
  return true;   
                 }   
  @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;//用户轻触屏幕后松开。  
                 }   
             });   
     }   
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2013-12-18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档