android 中的 ViewFlipper 的简单使用
前面说到了 Viewpager ，当然还有 除了 Viewpager 的 还有 ViewFilpper 和 ViewFlow
现在说下 ViewFipper 的简单使用，
首先说一下， ViewPager 继承 ViewGroup Viewpager 有自己的adapter 可以和 fragment ，view 各种配合 ，适合动态的 复杂的交互。
ViewFilpper 继承 ViewAnimation 这个呢，就适合一些简单的页面 比如引导，欢迎页面 那种的静态页面 比较适合。
看下效果图。
public class MainActivity extends Activity {
private ViewFlipper viewFlipper;
private List<View> views = new ArrayList<View>();
private Timer timer =new Timer();
private LinearLayout linear_all_point; // 存储点的容器
private int offset; // 位移量
private ImageView curDot;
private int nowPosition; // 记录当前的位置
private int aa = 0;
private Handler han = new Handler(){
public void handleMessage(android.os.Message msg) {
if(aa!= 3){
viewFlipper.showNext();
moveCursorTo(aa);
aa++;
}
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
linear_all_point = (LinearLayout)this.findViewById(R.id.dot_contain);
curDot = (ImageView) findViewById(R.id.cur_dot);
viewFlipper = (ViewFlipper)this.findViewById(R.id.view_flipper);
// 早堆假数据
View v1 = LayoutInflater.from(this).inflate(R.layout.aa1, null);
// v1.setId(1);
View v2 = LayoutInflater.from(this).inflate(R.layout.aa2, null);
// v2.setId(2);
View v3 = LayoutInflater.from(this).inflate(R.layout.aa3, null);
// v3.setId(3);
views.add(v1);
views.add(v2);
views.add(v3);
for (int i = 0; i < views.size(); i++) {
viewFlipper.addView(views.get(i));
}
Animation inAnimation = AnimationUtils.loadAnimation(this, R.anim.right_in);
Animation outAnimation = AnimationUtils.loadAnimation(this, R.anim.left_out);
// animation 里面得到当前的View 然后改变引导界面下面的指示器图片
outAnimation.setAnimationListener(new AnimationListener(){
@Override
public void onAnimationStart(Animation animation) {
System.out.println("start= =================");
// 这里是 左边图片自动划出去的时候 animation start 调用
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
System.out.println("viewFlipper.getCurrentView().getId()=="+ viewFlipper.getCurrentView().getId());
}
});
viewFlipper.setInAnimation(inAnimation);
viewFlipper.setOutAnimation(outAnimation);
// 一些方法
// viewFlipper.startFlipping(); 开始滑动
// viewFlipper.stopFlipping(); 停止滑动
// viewFlipper.showNext(); 下一个
// viewFlipper.showPrevious(); 上一个
// viewFlipper.isFlipping();
// viewFlipper.isAutoStart();
/**
* 1. 设置自动播放功能 这个注掉了 我用的是定时器，自动播放的话 在上面的
*
* onAnimationStart 中 切换指示器的图片就好了
*
* viewFlipper.setAutoStart(true);
* viewFlipper.setFlipInterval(3000); //隔3秒
*
*
*/
//初始化点 每个底部小点的指示器
for(int i=0; i< views.size() ; i++){
ImageView dotView = new ImageView(this);
dotView.setImageResource(R.drawable.dot1_w);
dotView.setLayoutParams(new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,1.0f));
linear_all_point.addView(dotView);
}
//当curDot的所在的树形层次将要被绘出时此方法被调用
curDot.getViewTreeObserver().addOnPreDrawListener(
new OnPreDrawListener() {
public boolean onPreDraw() {
// 获取ImageView的宽度也就是点图片的宽度
offset = curDot.getWidth();
return true;
}
});
/**
* 2. 还可以用 定时器 控制自动滑动 这个和 handler配合 然后更改指示器
*/
timer.schedule(new TimerTask() {
@Override
public void run() {
han.sendMessage(new Message());
}
}, 1 , 2000);
}
//指示器 移动
private void moveCursorTo(int position) {
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation tAnim = new TranslateAnimation(offset* nowPosition, offset * position, 0, 0);
animationSet.addAnimation(tAnim);
animationSet.setDuration(10);
animationSet.setFillAfter(true);
curDot.startAnimation(animationSet);
}
}
animation
right_in 和 left_out 配合 （右边的图片进来，现在的图片 往左边出去 - -）
首先，right_in
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="100%p"
android:toXDelta="0" />
<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>
left_out
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="0"
android:toXDelta="-100%p" />
<alpha
android:duration="1500"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>
left_in 和 right_out 配合 （向右边滑动的时候， 左边的图片进来 ，现在的图片从右边出去）
首先，left_in
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="-100%p"
android:toXDelta="0" />
<alpha
android:duration="1500"
android:fromAlpha="0.1"
android:toAlpha="1.0" />
</set>
right_out
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1500"
android:fromXDelta="0"
android:toXDelta="100%p" />
<alpha
android:duration="1500"
android:fromAlpha="1.0"
android:toAlpha="0.1" />
</set>
xml。指示器那个也是从 前面说的 viewpager中复制过来的
<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/view_flipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:layout_marginBottom="22.0dip">
<LinearLayout
android:id="@+id/dot_contain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
<ImageView
android:id="@+id/cur_dot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/dot2_w" />
</FrameLayout>
</RelativeLayout>
好了，就是这些了。