Android：左右滑动以滑动视图

Question

我有一个列表视图。点击项后会打开该项的详细视图。此布局具有许多小部件，如文本视图、ImageView按钮等。现在我想滑动这些项目的详细视图，以显示下一个项目的详细视图。同样，左到右为上一项。

我无法实现视图滑动。我已经知道如何获取列表中的上一个/下一个项。但是，实际滑动是个问题。

我尝试了像Android：Swipe left to right and right to left这样的gesturedetector和其他示例。但是当我尝试滑动时，没有任何效果。我根本看不到任何视觉滑动。

如何解决这个问题？

尝试过以下代码，但仍然无法进行滑动操作。

 public class ProductActivity extends Activity implements OnGestureListener {


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

     private void setContent() {
         Bundle extras = getIntent().getExtras();
         TextView title = (TextView) findViewById(R.id.title);
         title.setText(extras.getString("Title"));
         TextView desc = (TextView) findViewById(R.id.desc);
         desc.setText(extras.getString("Desc"));
         Button buy = (Button) findViewById(R.id.buy);
         String priceTag = ("$" + String.format("%.2g", extras.getDouble("Price")) + "  Buy Now >>");
         buy.setText(priceTag);
         ImageView image = (ImageView) findViewById(R.id.productimage);
         Utils.imageLoader.DisplayImage(extras.getString("Image"), image);

     }




     private static final int SWIPE_MIN_DISTANCE = 6; // 120;
     private static final int SWIPE_MAX_OFF_PATH = 125; // 250;
     private static final int SWIPE_THRESHOLD_VELOCITY = 100; // 200;
     private GestureDetector gestureScanner;

     @
     Override
     public boolean onTouchEvent(MotionEvent me) {
         return gestureScanner.onTouchEvent(me);
     }

     // @Override
     public boolean onDown(MotionEvent e) {
         // viewA.setText("-" + "DOWN" + "-");
         return true;
     }

     // @Override
     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
         float velocityY) {
         try {
             if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                 return false;
             // right to left swipe
             if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                 Toast.makeText(getApplicationContext(), "Left Swipe",
                     Toast.LENGTH_SHORT).show();

             } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                 Toast.makeText(getApplicationContext(), "Right Swipe",
                     Toast.LENGTH_SHORT).show();

             } else if (e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                 Toast.makeText(getApplicationContext(), "Swipe up",
                     Toast.LENGTH_SHORT).show();

             } else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                 Toast.makeText(getApplicationContext(), "Swipe down",
                     Toast.LENGTH_SHORT).show();

             }
         } catch (Exception e) {
             // nothing
         }

         return true;
     }

     @
     Override
     public void onLongPress(MotionEvent e) {
         Toast mToast = Toast.makeText(getApplicationContext(), "Long Press",
             Toast.LENGTH_SHORT);
         mToast.show();
     }

     // @Override
     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
         float distanceY) {
         // viewA.setText("-" + "SCROLL" + "-");
         return true;
     }

     // @Override
     public void onShowPress(MotionEvent e) {
         // viewA.setText("-" + "SHOW PRESS" + "-");
     } // @Override

     public boolean onSingleTapUp(MotionEvent e) {
         Toast mToast = Toast.makeText(getApplicationContext(), "Single Tap",
             Toast.LENGTH_SHORT);
         mToast.show();
         return true;
     }

 }

- png

---

我终于按照这个链接：http://misha.beshkin.lv/android-swipe-gesture-implementation/ 进行了操作。这正是我所寻找的。感谢所有的帮助。 - png

Answer 1

我认为写一篇新答案是个好主意，因为旧的回答与现在有很大不同。

我先介绍一些背景： 这里的想法是使用水平滚动视图来以优美的方式移动到下一组控件。所以当用户停止向左或向右滚动滚动视图时，我们想要更改图片和文本，然后将滚动条移回中间以准备进行下一次滑动操作。已经有人回答了如何侦听滚动视图何时停止的问题。 我包含了一个几乎完整的示例，展示如何使用此方法来获得所需的效果。

希望这会对您有所帮助，如果您还有其他问题，请随时提出。

 @Override
 protected void onScrollChanged(int x, int y, int oldX, int oldY) {
     if (Math.abs(y - oldY) > SlowDownThreshold) {
         currentlyScrolling = true;
     } else {
         currentlyScrolling = false;
         if (!currentlyTouching) {
             //scrolling stopped...handle here
             //Check if it was a left or right swipe by comparing the new and old scroll locations
             if (y > oldY) {
                 //Scroll moved Right
                 //So we would do something like 
                 setContents(Index + 1);
                 //We find out where the middle of the scroll is
                 int middleHScroll = (Hscrollview.getMeasuredWidth() / 2) - (Hscrollview.getMeasuredWidth() / 2)
                 //We then return the scroll view to the middle
                 HScroll.scrollTo(middleHScroll);
             } else {
                 //Scroll moved Left
                 //We get set the pictures and text to the previous Index of the contents
                 setContents(Index - 1);
                 //We find out where the middle of the scroll is
                 int middleHScroll = (Hscrollview.getMeasuredWidth() / 2) - (Hscrollview.getMeasuredWidth() / 2)
                 //We then return the scroll view to the middle
                 HScroll.scrollTo(middleHScroll);
             }
             super.onScrollChanged(x, y, oldX, oldY);
         }
     }
 }

这个xml应该是以下内容。虽然还有很多工作要做才能使其正常工作，但我希望这能让你朝着正确的方向前进。

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textview1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/title_bar"
            android:gravity="center_horizontal"
            android:text="PRODUCTS >> PRODUCT DETAILS" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <RelativeLayout
                android:id="@+id/RelativeLayout1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:weightSum="2" >

                <HorizontalScrollView
                    xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/HorizontalScrollView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true" >


                    <LinearLayout
                        xmlns:android="http://schemas.android.com/apk/res/android"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="70dp"
                        android:orientation="horizontal" >



                        <ImageView
                            android:id="@+id/productimage3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="70dp"
                            android:layout_marginRight="20dp"
                            android:layout_weight="1"
                            android:background="@drawable/product_detail_gradient"
                            android:minHeight="100dp"
                            android:minWidth="100dp" />

                        <ImageView
                            android:id="@+id/productimage2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="70dp"
                            android:layout_marginRight="70dp"
                            android:layout_weight="1"
                            android:background="@drawable/product_detail_gradient"
                            android:minHeight="100dp"
                            android:minWidth="100dp" />

                        <ImageView
                            android:id="@+id/productimage1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="70dp"
                            android:layout_marginRight="70dp"
                            android:layout_weight="1"
                            android:background="@drawable/product_detail_gradient"
                            android:minHeight="100dp"
                            android:minWidth="100dp" />

                    </LinearLayout>
                </HorizontalScrollView>

                <RelativeLayout
                    android:id="@+id/description"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@+id/HorizontalScrollView1"
                    android:layout_weight="1"
                    android:background="@drawable/black_img_bg" >

                    <TextView
                        android:id="@+id/title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="15dip"
                        android:textStyle="bold" >
                    </TextView>

                    <TextView
                        android:id="@+id/desc"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/title" >
                    </TextView>

                    <Button
                        android:id="@+id/addtocart"
                        android:layout_width="80dip"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentLeft="true"
                        android:background="@drawable/button_green_lhs"
                        android:gravity="left|center_vertical"
                        android:onClick="addToCartOrBuy"
                        android:text="Add To Cart"
                        android:textSize="10dip" />

                    <Button
                        android:id="@+id/buy"
                        android:layout_width="150dip"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_toRightOf="@+id/addtocart"
                        android:background="@drawable/button_orange_mid"
                        android:onClick="addToCartOrBuy"
                        android:text="Buy"
                        android:textSize="10dip" />

                    <Button
                        android:id="@+id/tellafriend"
                        android:layout_width="80dip"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentRight="true"
                        android:layout_toRightOf="@+id/buy"
                        android:background="@drawable/button_green_rhs"
                        android:gravity="right|center_vertical"
                        android:onClick="tellAFriend"
                        android:text="Tell A Friend"
                        android:textSize="10dip" />
                </RelativeLayout>
            </RelativeLayout>
        </RelativeLayout>

    </LinearLayout>

- Reefa

---

非常感谢您的帮助。有几个问题：SlowDownThreshold是什么，Hscrollview等等。谢谢。 - png

当用户停止滚动时，他们并不总是将手指从屏幕上拿开。这意味着滚动实际上仍在移动，只是非常缓慢。SlowDownThreshold是滚动必须减速到多慢才能被应用程序视为完成的阈值。HScroll是水平滚动布局。HorizontalScrollview Hscroll =（HorizontalScrollview）findViewById（R.id.HorizontalScrollView1）。这样我们就不必每次想与水平滚动视图交互时都使用findViewById了。抱歉回复晚了两天。 - Reefa

非常感谢。这个onscrollchanged是哪个类方法。我在activity中没有看到它。需要实现任何接口吗？ - png

非常感谢您为解决这个问题所做的努力。不幸的是，它对我没有起作用。这里是有效的方法：http://misha.beshkin.lv/android-swipe-gesture-implementation/。我按照这个教程进行操作，非常简单和直接。 - png

Answer 2

如果我理解正确，您只需要使用手势监听器，然后调用用于填充所有文本视图和图像视图的下一个信息实例的方法。

当我正在学习手势识别时，我发现这个示例非常有用。

首先，在公共类myClass中添加手势监听器。

import android.widget.Toast;
public class myClass extends Activity implements OnGestureListener {

然后接下来紧跟着的是，这样我们就可以监听每个触摸事件。

    private static final int SWIPE_MIN_DISTANCE = 6; //120;
    private static final int SWIPE_MAX_OFF_PATH = 125; //250;
    private static final int SWIPE_THRESHOLD_VELOCITY = 100; //200;
    private GestureDetector gestureScanner;@
    Override
    public boolean onTouchEvent(MotionEvent me) {
        return gestureScanner.onTouchEvent(me);
    }
    //@Override
    public boolean onDown(MotionEvent e) {
        //viewA.setText("-" + "DOWN" + "-");
        return true;
    }
    //@Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        try {
            if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                return false;
            // right to left swipe
            if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                Toast.makeText(getApplicationContext(), "Left Swipe", Toast.LENGTH_SHORT).show();

            } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                Toast.makeText(getApplicationContext(), "Right Swipe", Toast.LENGTH_SHORT).show();

            } else if (e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                Toast.makeText(getApplicationContext(), "Swipe up", Toast.LENGTH_SHORT).show();

            } else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                Toast.makeText(getApplicationContext(), "Swipe down", Toast.LENGTH_SHORT).show();

            }
        } catch (Exception e) {
            // nothing
        }

        return true;
    }@
    Override
    public void onLongPress(MotionEvent e) {
        Toast mToast = Toast.makeText(getApplicationContext(), "Long Press", Toast.LENGTH_SHORT);
        mToast.show();
    }
    //@Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        //viewA.setText("-" + "SCROLL" + "-");
        return true;
    }
    //@Override
    public void onShowPress(MotionEvent e) {
        //viewA.setText("-" + "SHOW PRESS" + "-");
    } //@Override
    public boolean onSingleTapUp(MotionEvent e) {
        Toast mToast = Toast.makeText(getApplicationContext(), "Single Tap", Toast.LENGTH_SHORT);
        mToast.show();
        return true;
    }

您可以在相关的监听器中放置用来调用前一个或后一个实例的方法，这样就能够方便地使用 toast 了。

您可以通过改变这些变量来调整滑动的灵敏度。

 private static final int SWIPE_MIN_DISTANCE = 6; //120;
 private static final int SWIPE_MAX_OFF_PATH = 125; //250;
 private static final int SWIPE_THRESHOLD_VELOCITY = 100; //200;

希望这能有所帮助。

编辑：

抱歉搞错了，你的onCreate应该包括gestureScanner = new GestureDetector(this);

@Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.product_details);
     setContent();
     gestureScanner = new GestureDetector(this);
 }

这样应该可以让它工作，除了视觉效果。您可以尝试使用ScrollView来帮助滑动。

- Reefa

---

我建议使用滚动视图。设置3组图像和文本控件。然后当用户滚动到滚动视图的顶部时，设置新元素并将它们滚动到中间。让滚动视图做艰苦的工作，允许图像和文本视图进行无缝重绘。 - Reefa

我尝试了这个。请查看我的问题更新。但是我没有看到任何滑动效果，也没有弹出提示。我认为我漏掉了一些基本的东西。 - png

我编辑了我的答案，应该可以让你的监听器开始工作。 - Reefa

是的，我可以通过修复来解决这个问题。但是当我尝试将其制作为可滚动条时，提示甚至消失了。相反，发生的是滑动会变成滚动，视图从顶部向底部滚动。 - png

我无法添加布局，因为受到大小限制。你能给我任何ID，以便我可以发送文件吗？非常感谢。 - png