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" >
<ViewFlipper
android:id="@+id/viewFlipper"
android:layout_width="match_parent"
android:layout_height="match_parent"
></ViewFlipper>
</RelativeLayout>
编写代码：
复制内容到剪贴板
代码:
package com.xzw.ui;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;
/**
* 左右滑动demo
*@authorxzw
*
*/
public class MainActivity extends Activity implements OnGestureListener {
private static final String TAG = "MainActivity";
private ViewFlipper viewFlipper;
private GestureDetector detector; //手势检测
Animation leftInAnimation;
Animation leftOutAnimation;
Animation rightInAnimation;
Animation rightOutAnimation;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper);
detector = new GestureDetector(this);
//往viewFlipper添加View
viewFlipper.addView(getImageView(R.drawable.new_feature_1));
viewFlipper.addView(getImageView(R.drawable.new_feature_2));
viewFlipper.addView(getImageView(R.drawable.new_feature_3));
viewFlipper.addView(getImageView(R.drawable.new_feature_4));
viewFlipper.addView(getImageView(R.drawable.new_feature_5));
viewFlipper.addView(getImageView(R.drawable.new_feature_6));
//动画效果
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);
}
private ImageView getImageView(int id){
ImageView imageView = new ImageView(this);
imageView.setImageResource(id);
return imageView;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return this.detector.onTouchEvent(event); //touch事件交给手势处理。
}
@Override
public boolean onDown(MotionEvent e) {
// TODO Auto-generated method stub
return false;
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
Log.i(TAG, "e1="+e1.getX()+" e2="+e2.getX()+" e1-e2="+(e1.getX()-e2.getX()));
if(e1.getX()-e2.getX()>120){
viewFlipper.setInAnimation(leftInAnimation);
viewFlipper.setOutAnimation(leftOutAnimation);
viewFlipper.showNext();//向右滑动
return true;
}else if(e1.getX()-e2.getY()<-120){
viewFlipper.setInAnimation(rightInAnimation);
viewFlipper.setOutAnimation(rightOutAnimation);
viewFlipper.showPrevious();//向左滑动
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;
}
}
接下来我们编写动画效果的xml文件，你也可以通过代码实现，这里使用xml配置，个人感觉比较简单。
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://www.itlanbao.com/preview.aspx#1,0
更多相关文章
- 在Ubuntu16.04上下载并编译Android内核源代码
- android自定义按钮按下效果
- [Android UI界面] 怎样实现ListView分页效果？
- Android实用代码片段(一)
- Android PullToRefreshView巴黎埃菲尔铁塔效果
- fanfou(饭否） android客户端 代码学习1
- android短信发送器源代码