首页
JAVA笔记
数据库笔记
混乱记忆
小站记
您现在的位置
android ViewFlipper 使用示例不得不看
简介: 经常看到别人的 app 中出现滑动的效果,今天第一次使用 ViewFlipper 发现原来实现自动滚动导航原来是这么简单。

代码示例很简单,先终结下 ViewFlipper 的特性:可以设置进和出的动画,通过设置 android:autoStart 支持自动播放效果,设置 android:flipInterval="1000" 设置执行间隔。通过简单试用后第一个想到的就是一些 app 中的自动滚动的消息导航,之前我用 Gallery 实现过。然后想到了在 app 第一次执行时的操作导航,应用中的翻页我一般是使用 ViewPage 来实现。

 

话不多说上代码:

ViewFilpperActivity 代码

/**
 * 创建时间:2014-3-22 下午2:21:29 
 * 项目名称:MyDemos 
 * @author 樊宁辉
 * @version 1.0  
 * @since
 * 文件名称:ViewFlowActivity.java 
 * 类说明: 
 */
public class ViewFilpperActivity1 extends Activity implements OnTouchListener{
 ViewFlipper viewFlipper = null;
  // 左右滑动时手指按下的X坐标
    private float touchDownX;
    // 左右滑动时手指松开的X坐标
    private float touchUpX;
 
    //滑入
 private Animation in;
 //滑出
 private Animation out;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.view_filpper);
  viewFlipper = (ViewFlipper) findViewById(R.id.viewFlipper);
        viewFlipper.setOnTouchListener(this);
        viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.in));
        viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.out));
 }

 @Override
 public boolean onTouch(View v, MotionEvent event) {
  // TODO Auto-generated method stub
   if (event.getAction() == MotionEvent.ACTION_DOWN) {
             // 取得左右滑动时手指按下的X坐标
             touchDownX = event.getX();
             return true;
         } else if (event.getAction() == MotionEvent.ACTION_UP) {
             // 取得左右滑动时手指松开的X坐标
             touchUpX = event.getX();
             // 从左往右,看前一个View
             if (touchUpX - touchDownX > 150) {
              //阻止循环翻页
              if(viewFlipper.getDisplayedChild() ==0){
               return true;
              }
                 // 显示下一个View
                 viewFlipper.showPrevious();
                 // 从右往左,看后一个View
             } else if (touchDownX - touchUpX > 150) {
              //阻止循环翻页
              if(viewFlipper.getDisplayedChild() ==viewFlipper.getChildCount()-1){
               return true;
              }
                 // 显示前一个View
                 viewFlipper.showNext();
             }
             return true;
         }
         return false;
 }

}

 

in.xml 动画配置文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="300"
        android:fromXDelta="100%"
       
        android:toXDelta="0" />

    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />

</set>

 

out.xml 动画文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="300"
        android:fromXDelta="0"
        android:toXDelta="-100%" />

    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

</set>

 

view_filpper.xml layout 配置文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ViewFlipper
        android:id="@+id/viewFlipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:id="@+id/layout1"
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:background="@android:color/white" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="text1" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:background="@android:color/darker_gray" >

            <TextView
                android:id="@+id/test"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="text2" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/layout3"
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:background="@android:color/darker_gray" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="text3" />
        </LinearLayout>
    </ViewFlipper>

</LinearLayout>

 

再将 activity 进行配置就可以体验到执行效果了