【Android基础知识】使用ViewFlipper实现页面左右滑动

说到android的左右滑动效果我们可以说是在每个应用上面都可以看到这样的效果,不管是微博,还是QQ等。实现左右滑动的方式很多,有ViewPaer(不过这个和需要android-support-v4.jar的支持),自定义实现Viewgroup,gallery等都可以达到这种效果。这里做下ViewFliper实现左右滑动的效果。

以下会会用到的技术有:
1、ViewFlipper
2、GestureDetector
3、Animation
主要是这三个类再起作用。

原理:向左向右滑动主要是依赖手势来控制,手势向右滑动就调用 viewFlipper.showNext();方法,同理,向左滑动就会去调用viewFlipper.showPrevious();方法。
接下来直接上代码:

首先在布局文件中添加ViewFlipper的标签:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.viewflipperdemo.MainActivity" >
   <ViewFlipper 
       android:id="@+id/viewflipper"
       android:layout_width="match_parent"
       android:layout_height="match_parent"> 
   </ViewFlipper>
</RelativeLayout>
MainActivity.java

public class MainActivity extends Activity implements OnGestureListener{
<span style="white-space:pre">	</span> private ViewFlipper viewFlipper;
     private GestureDetector detector; //手势检测


     Animation leftInAnimation;
     Animation leftOutAnimation;
     Animation rightInAnimation;
     Animation rightOutAnimation;
    private int[] res = {R.drawable.pic1,R.drawable.pic2,R.drawable.pic3,R.drawable.pic4};
    float startX;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewFlipper = (ViewFlipper)findViewById(R.id.viewflipper);
        detector = new GestureDetector(this);
        //动态加载子view
        for(int i = 0;i<res.length;i++){
        <span style="white-space:pre">	</span>viewFlipper.addView(getImageView(res[i]));
        }
        leftInAnimation = AnimationUtils.loadAnimation(this, R.anim.left_in);
        leftOutAnimation = AnimationUtils.loadAnimation(this, R.anim.left_out);
        rightInAnimation = AnimationUtils.loadAnimation(this, R.anim.right_in);
        rightOutAnimation = AnimationUtils.loadAnimation(this, R.anim.right_out);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
       return this.detector.onTouchEvent(event); //touch事件交给手势处理。
    }
    private ImageView getImageView(int resId){
      ImageView image = new ImageView(this);
      //image.setImageResource(resId);
      image.setBackgroundResource(resId);
      return image;
    }
@Override
public boolean onDown(MotionEvent e) {

return false;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
<span style="white-space:pre">	</span>return false;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,float distanceY) {
<span style="white-space:pre">	</span>return false;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,float velocityY) {
if (e1.getX() - e2.getX() > 120) {
<span style="white-space:pre">	</span>//避免循环滑动
<span style="white-space:pre">	</span>if (viewFlipper.getDisplayedChild() == res.length - 1) {
<span style="white-space:pre">		</span>viewFlipper.stopFlipping();
<span style="white-space:pre">		</span>return false;
<span style="white-space:pre">	</span>} else {
<span style="white-space:pre">		</span>viewFlipper.setInAnimation(leftInAnimation);
<span style="white-space:pre">		</span>viewFlipper.setOutAnimation(leftOutAnimation);
<span style="white-space:pre">		</span>viewFlipper.showNext();// 向右滑动
<span style="white-space:pre">		</span>return true;
<span style="white-space:pre">	</span>}
} else if (e1.getX() - e2.getY() < -120) {
<span style="white-space:pre">	</span>if (viewFlipper.getDisplayedChild() == 0) {
<span style="white-space:pre">		</span>viewFlipper.stopFlipping();
<span style="white-space:pre">		</span>return false;
<span style="white-space:pre">	</span>} else {
<span style="white-space:pre">		</span>viewFlipper.setInAnimation(rightInAnimation);
<span style="white-space:pre">		</span>viewFlipper.setOutAnimation(rightOutAnimation);
<span style="white-space:pre">		</span>viewFlipper.showPrevious();// 向左滑动
<span style="white-space:pre">		</span>return true;
        }
    }
    return false;
}
}



动画文件

left_in.xml

<?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="600"
        />
    <alpha 
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />
</set>
left_out.xml

<?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="600"
        />
    <alpha 
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="600"
        />
</set>
right_in.xml

<?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="600"
        />
    <alpha 
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="600"
        />
</set>
right_out.xml

<?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="600"
        />
    <alpha 
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="600"
        />
</set>
本文转自: http://bbs.51cto.com/thread-970178-1.html




  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值