郑德才博客

Android开发学习

图片左右滑动效果，第五种：图片左右滑动，加了4个点，同步切换，使用控件ViewFlipper

新建xml布局文件：activity_two.xml，代码内容：

<FrameLayout 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/viewflipper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <LinearLayout
        android:id="@+id/ll_dot"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:paddingBottom="30dp" >

        <ImageView
            android:id="@+id/iv_1"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="0dp"
            android:clickable="true"
            android:contentDescription="@string/dot"
            android:src="@layout/dot" />

        <ImageView
            android:id="@+id/iv_2"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="5dp"
            android:clickable="true"
            android:contentDescription="@string/dot"
            android:src="@layout/dot" />

        <ImageView
            android:id="@+id/iv_3"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="5dp"
            android:contentDescription="@string/dot"
            android:src="@layout/dot" />

        <ImageView
            android:id="@+id/iv_4"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="5dp"
            android:contentDescription="@string/dot"
            android:src="@layout/dot" />
    </LinearLayout>

</FrameLayout>

使用线性布局LinearLayout，资源文件中的图片index1.jpg，index2.jpg，index3.jpg，index4.jpg

实现FiveActivity.java代码：

package com.zhengdecai.slidingeffect;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.ViewFlipper;

/**
 * 图片左右滑动效果-加了4个点，同步切换
 *
 * @author 郑德才
 *
 */
public class FiveActivity extends Activity implements OnGestureListener {
 private int[] imgID = { R.drawable.index1, R.drawable.index2,
   R.drawable.index3, R.drawable.index4 };
 private int[] ivID = { R.id.iv_1, R.id.iv_2, R.id.iv_3, R.id.iv_4 };
 private List<ImageView> ivs = new ArrayList<ImageView>();
 private ViewFlipper flipper;
 private GestureDetector detector;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_two);

  for (int i = 0; i < ivID.length; i++) {
   ImageView im_iv = (ImageView) findViewById(ivID[i]);
   ivs.add(im_iv);
  }

  detector = new GestureDetector(this);
  flipper = (ViewFlipper) findViewById(R.id.viewflipper);
  for (int i = 0; i < imgID.length; i++) {
   ImageView imageView = new ImageView(this);
   imageView.setImageResource(imgID[i]);
   imageView.setScaleType(ImageView.ScaleType.FIT_XY);
   flipper.addView(imageView, new LayoutParams(
     LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
  }
  ivs.get(0).setEnabled(false);
 }

 private void dotChange(int index) {
  for (int i = 0; i < ivs.size(); i++) {
   if (i == index) {
    ivs.get(i).setEnabled(false);
   } else {
    ivs.get(i).setEnabled(true);
   }
  }
 }

 @Override
 public boolean onDown(MotionEvent e) {
  return false;
 }

 @Override
 public void onShowPress(MotionEvent e) {

 }

 @Override
 public boolean onSingleTapUp(MotionEvent e) {
  return false;
 }

 @Override
 public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
   float distanceY) {
  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) {
   // 添加动画
   this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
     R.anim.push_left_in));
   this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
     R.anim.push_left_out));
   View view = flipper.getChildAt(imgID.length - 1);
   View view1 = flipper.getCurrentView();
   // flipper.getDisplayedChild();

   if (view == view1) {
    Toast.makeText(this, "最后一张", Toast.LENGTH_LONG).show();
    // return false;
   } else {
    this.flipper.showNext();
    dotChange(flipper.getDisplayedChild());
   }
   return true;
  }// 从右向左滑动
  else if (e1.getX() - e2.getX() < -120) {
   this.flipper.setInAnimation(AnimationUtils.loadAnimation(this,
     R.anim.push_right_in));
   this.flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
     R.anim.push_right_out));
   if (flipper.getChildAt(0) == flipper.getCurrentView()) {
    Toast.makeText(this, "第一张", Toast.LENGTH_LONG).show();
   } else {
    this.flipper.showPrevious();
    dotChange(flipper.getDisplayedChild());
   }

   return true;
  }
  return true;
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  return this.detector.onTouchEvent(event);
 }

}
模拟器运行效果：