Android-使用ViewFlipper制作图片轮播器
之前我认为,左右滑动需要写大量的动画才可以实现,不过在复习Android基础时,发现了
ViewFlipper,只需要写几个简单的动画xml文件即可实现图片的左右自动滑动。
布局文件
<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"
tools:context=".MainActivity">
<ViewFlipper
android:id="@+id/id_flipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
></ViewFlipper>
</RelativeLayout>
两个动画文件:
left_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromXDelta="-100%p"
android:toXDelta="0"
/>
<alpha
android:duration="1000"
android:fromAlpha="0.5"
android:toAlpha="1"
/>
</set>
left_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromXDelta="0"
android:toXDelta="100%p"
/>
<alpha
android:duration="1000"
android:fromAlpha="0.5"
android:toAlpha="1"
/>
</set>
主活动:
MainAtivity.java
package com.xieth.as.againviewflipperdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.ViewFlipper;
public class MainActivity extends AppCompatActivity {
private ViewFlipper flipper = null;
private int[] resId = {R.mipmap.pic1, R.mipmap.pic2, R.mipmap.pic3, R.mipmap.pic4};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
for (int i = 0; i < resId.length; i++) {
flipper.addView(getImageView(resId[i]));
}
flipper.setInAnimation(this, R.anim.left_in);
flipper.setOutAnimation(this, R.anim.left_out);
flipper.setFlipInterval(1000);
flipper.startFlipping();
}
private ImageView getImageView(int resId) {
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(resId);
return imageView;
}
private void initViews() {
flipper = (ViewFlipper) findViewById(R.id.id_flipper);
}
}
运行:
我设置的时间间隔为1秒,可以设置长一点。
通过手指进行手动滑动
重写onTouchEvent方法即可
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
// 向右滑动
if (startX - event.getX() > 100) {
flipper.setInAnimation(this, R.anim.right_in);
flipper.setOutAnimation(this, R.anim.right_out);
// 显示后面一页
flipper.showNext();
}
// 向左滑动
else if (startX - event.getX() < 100) {
flipper.setInAnimation(this, R.anim.left_in);
flipper.setOutAnimation(this, R.anim.left_out);
// 显示前面一页
flipper.showPrevious();
}
break;
case MotionEvent.ACTION_DOWN:
startX = event.getX();
break;
default:
break;
}
return super.onTouchEvent(event);
}
完整代码:
package com.xieth.as.againviewflipperdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ViewFlipper;
public class MainActivity extends AppCompatActivity {
private ViewFlipper flipper = null;
private int[] resId = {R.mipmap.pic1, R.mipmap.pic2, R.mipmap.pic3, R.mipmap.pic4};
private float startX;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
for (int i = 0; i < resId.length; i++) {
flipper.addView(getImageView(resId[i]));
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_UP:
// 向右滑动
if (startX - event.getX() > 100) {
flipper.setInAnimation(this, R.anim.right_in);
flipper.setOutAnimation(this, R.anim.right_out);
// 显示后面一页
flipper.showNext();
}
// 向左滑动
else if (startX - event.getX() < 100) {
flipper.setInAnimation(this, R.anim.left_in);
flipper.setOutAnimation(this, R.anim.left_out);
// 显示前面一页
flipper.showPrevious();
}
break;
case MotionEvent.ACTION_DOWN:
startX = event.getX();
break;
default:
break;
}
return super.onTouchEvent(event);
}
private ImageView getImageView(int resId) {
ImageView imageView = new ImageView(this);
imageView.setBackgroundResource(resId);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
return imageView;
}
private void initViews() {
flipper = (ViewFlipper) findViewById(R.id.id_flipper);
}
}
right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="2000"
android:fromXDelta="100%p"
android:toXDelta="0"
/>
<alpha
android:duration="2000"
android:fromAlpha="0.5"
android:toAlpha="1"
/>
</set>
right_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="2000"
android:fromXDelta="0"
android:toXDelta="-100%p"
/>
<alpha
android:duration="2000"
android:fromAlpha="0.5"
android:toAlpha="1"
/>
</set>
运行: