如何將橫幅幻燈片放映添加到Android應用

Question

我想在我的Android應用程序中添加圖片幻燈片，就像Flipkart Android應用程序一樣。 將有三個圖像。 首先，它將顯示第一張圖像。 當有人觸摸水平移動時，它將顯示下一個。

我是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）在您的res文件夾中創建一個名為anim文件夾，並將以下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>

如果要更改播放動畫的方式，請檢查以下內容： 補間動畫

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中。 我用這個答案來獲得觸摸方向。

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;
            }
        });