如何将横幅幻灯片放映添加到Android应用程序

Question

我想在我的Android应用程序中添加一个图像幻灯片，就像flipkart android app一样。将有三个图像。首先它将显示第一张图片。当有人触摸水平移动时，它会显示下一个。

我在初学者级别的android。不知道如何实现这一目标。需要一些帮助。

感谢。

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //addListenerOnButton();
    //changeOnTouch();
}

public void changeOnTouch() {
    windowwidth = getWindowManager().getDefaultDisplay().getWidth();
    windowheight = getWindowManager().getDefaultDisplay().getHeight();
    final ImageView img = (ImageView) findViewById(R.id.imageView1);
    img.setOnTouchListener(new View.OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
              LayoutParams layoutParams = (LayoutParams) img
                            .getLayoutParams();
              switch (event.getAction()) {
              case MotionEvent.ACTION_DOWN:
                     break;
              case MotionEvent.ACTION_MOVE:
                     int x_cord = (int) event.getRawX();
                     int y_cord = (int) event.getRawY();

                     if (x_cord > windowwidth) {
                            x_cord = windowwidth;
                     }
                     if (y_cord > windowheight) {
                            y_cord = windowheight;
                     }

                     layoutParams.leftMargin = x_cord - 25;
                     layoutParams.topMargin = y_cord - 75;

                     img.setLayoutParams(layoutParams);
                     break;
              default:
                     break;
              }
              return true;
        }
 });
}

Answer 1

以下是我创建的示例，用于执行您要求使用ViewFlipper

的内容

1）在anim文件夹中创建一个名为res的文件夹，并将以下xml文件保存在其中。这些是您将用于管理视图转换的动画文件。我不记得它们的来源。

a）enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set>
    <translate 
                xmlns:android="http://schemas.android.com/apk/res/android"
               android:fromXDelta="100%"
               android:toXDelta="0"
               android:interpolator="@android:anim/decelerate_interpolator"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

b）exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
               android:fromXDelta="0"
               android:toXDelta="-100%"
               android:interpolator="@android:anim/decelerate_interpolator"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

c）pop_enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
               android:fromXDelta="-100%"
               android:toXDelta="0"
               android:interpolator="@android:anim/decelerate_interpolator"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

d）pop_exite.xml

<set>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
               android:fromXDelta="0"
               android:toXDelta="100%"
               android:interpolator="@android:anim/decelerate_interpolator"
               android:duration="@android:integer/config_mediumAnimTime"/>
</set>

2）接下来的两个动画文件用于表示在翻转方向上没有更多可用的视图。将它们保存在anim文件夹中。

a）no_next.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
               android:fromXDelta="0"
               android:toXDelta="-5%"
               android:interpolator="@android:anim/linear_interpolator"
               android:duration="100"/>
   <translate
                android:startOffset="100"
               android:fromXDelta="-5%"
               android:toXDelta="0"
               android:interpolator="@android:anim/linear_interpolator"
               android:duration="100"/>
</set>

b）no_previous.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
               android:fromXDelta="0"
               android:toXDelta="5%"
               android:interpolator="@android:anim/linear_interpolator"
               android:duration="100"/>
   <translate
                android:startOffset="100"
               android:fromXDelta="5%"
               android:toXDelta="0"
               android:interpolator="@android:anim/linear_interpolator"
               android:duration="100"/>
</set>

如果您想更改播放动画的方式，请选中：Tween Animation

3）将其添加到您希望幻灯片放映的布局中：

<!-- layout before your slide show -->
    <ViewFlipper
        android:id="@+id/viewFlipper1"
        android:layout_width="300dp"
        android:layout_height="500dp" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <ImageView
                android:id="@+id/image_view_flip1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:contentDescription=""
                android:src="@drawable/image1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <ImageView
                android:id="@+id/image_view_flip2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:contentDescription=""
                android:src="@drawable/image2" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
                <ImageView
                    android:id="@+id/image_view_flip3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:contentDescription=""
                    android:src="@drawable/image3" />
        </LinearLayout>
    </ViewFlipper>
<!-- rest of your layout -->

4）将此方法添加到您的班级，它将管理视图转换：

ViewFlipper flipper;
private static Handler handler = new Handler(); 
public void slideFipper(final String direction){
    final Animation no_next = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.no_next);
    final Animation no_previuos = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.no_previous);
      handler.post(new Runnable(){
          public void run(){
            int currentView = flipper.getDisplayedChild();
            if (direction.equalsIgnoreCase("left")) {
                //left
                if (currentView < 2) {
                    flipper.setInAnimation(getApplicationContext(), R.anim.enter);
                    flipper.setOutAnimation(getApplicationContext(), R.anim.exit);
                    flipper.showNext();
                } else {
                    flipper.startAnimation(no_next);
                }
            } else {
                //right
                if (currentView > 0) {
                    flipper.setInAnimation(getApplicationContext(),R.anim.pop_enter);
                    flipper.setOutAnimation(getApplicationContext(), R.anim.pop_exit);
                    flipper.showPrevious();
                } else {
                    flipper.startAnimation(no_previuos);
                }
            }
          }
      }); 
}

5）将其添加到OnCreate方法中。我们将找到鳍状肢视图并添加TouchListener。我使用此answer来获取触摸方向。

flipper = (ViewFlipper) findViewById(R.id.viewFlipper1);
        flipper.setOnTouchListener(new OnTouchListener() {

            float x1 = 0, x2, y1 = 0, y2, dx, dy;

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                String direction;
                switch(event.getAction()) {
                    case(MotionEvent.ACTION_DOWN):
                        x1 = event.getX();
                        y1 = event.getY();
                        break;
                    case(MotionEvent.ACTION_UP): {
                        x2 = event.getX();
                        y2 = event.getY();
                        dx = x2-x1;
                        dy = y2-y1;
                         // Use dx and dy to determine the direction
                        if(Math.abs(dx) > Math.abs(dy)) {
                            if(dx>0)  {
                                direction = "right";
                            } else {
                                direction = "left";
                            }
                            slideFipper(direction);
                        } else {
                            if(dy>0) direction = "down";
                            else direction = "up";
                        }
                    }
                }
                v.performClick(); 
                return true;
            }
        });