在滑动操作中实现类似Facebook底部评论表单的功能

Question

与Facebook评论框类似，我想在向下滑动时关闭评论框，在向上滑动时打开评论框。是否有人可以提供任何库或如何实现此动画的方法？提前致谢。

- Donny Dominic

Answer 1

检测活动中的滑动手势。

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.Toast;

public class SwipeScreenExample extends Activity implements SimpleGestureListener{
            private SimpleGestureFilter detector;

        @Override
            public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.swipe_screen);

                // Detect touched area 
                detector = new SimpleGestureFilter(this,this);
        }

    @Override
    public boolean dispatchTouchEvent(MotionEvent me){
        // Call onTouchEvent of SimpleGestureFilter class
         this.detector.onTouchEvent(me);
       return super.dispatchTouchEvent(me);
    }
    @Override
     public void onSwipe(int direction) {
      String str = "";

      switch (direction) {

      case SimpleGestureFilter.SWIPE_RIGHT : str = "Swipe Right";
                                               break;
      case SimpleGestureFilter.SWIPE_LEFT :  str = "Swipe Left";
                                                     break;
      case SimpleGestureFilter.SWIPE_DOWN :  str = "Swipe Down";
                                                     break;
      case SimpleGestureFilter.SWIPE_UP :    str = "Swipe Up";
                                                     break;

      }
       Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
     }

     @Override
     public void onDoubleTap() {
        Toast.makeText(this, "Double Tap", Toast.LENGTH_SHORT).show();
     }

  }

SimpleGestureFilter.java

import android.app.Activity;
import android.view.GestureDetector;
import android.view.GestureDetector.SimpleOnGestureListener;
import android.view.MotionEvent;

public class SimpleGestureFilter extends SimpleOnGestureListener{

         public final static int SWIPE_UP    = 1;
         public final static int SWIPE_DOWN  = 2;
         public final static int SWIPE_LEFT  = 3;
         public final static int SWIPE_RIGHT = 4;

         public final static int MODE_TRANSPARENT = 0;
         public final static int MODE_SOLID       = 1;
         public final static int MODE_DYNAMIC     = 2;

         private final static int ACTION_FAKE = -13; 
         private int swipe_Min_Distance = 100;
         private int swipe_Max_Distance = 350;
         private int swipe_Min_Velocity = 100;

     private int mode             = MODE_DYNAMIC;
     private boolean running      = true;
     private boolean tapIndicator = false;

     private Activity context;
     private GestureDetector detector;
     private SimpleGestureListener listener;

     public SimpleGestureFilter(Activity context,SimpleGestureListener sgl) {

      this.context = context;
      this.detector = new GestureDetector(context, this);
      this.listener = sgl;
     }

     public void onTouchEvent(MotionEvent event){

       if(!this.running)
      return; 

       boolean result = this.detector.onTouchEvent(event);

       if(this.mode == MODE_SOLID)
        event.setAction(MotionEvent.ACTION_CANCEL);
       else if (this.mode == MODE_DYNAMIC) {

         if(event.getAction() == ACTION_FAKE)
           event.setAction(MotionEvent.ACTION_UP);
         else if (result)
           event.setAction(MotionEvent.ACTION_CANCEL);
         else if(this.tapIndicator){
          event.setAction(MotionEvent.ACTION_DOWN);
          this.tapIndicator = false;
         }

       }
       //else just do nothing, it's Transparent
     }

     public void setMode(int m){
      this.mode = m;
     }

     public int getMode(){
      return this.mode;
     }

     public void setEnabled(boolean status){
      this.running = status;
     }

     public void setSwipeMaxDistance(int distance){
      this.swipe_Max_Distance = distance;
     }

     public void setSwipeMinDistance(int distance){
      this.swipe_Min_Distance = distance;
     }

     public void setSwipeMinVelocity(int distance){
      this.swipe_Min_Velocity = distance;
     }

     public int getSwipeMaxDistance(){
      return this.swipe_Max_Distance;
     }

     public int getSwipeMinDistance(){
      return this.swipe_Min_Distance;
     }

     public int getSwipeMinVelocity(){
      return this.swipe_Min_Velocity;
     }

     @Override
         public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
           float velocityY) {

          final float xDistance = Math.abs(e1.getX() - e2.getX());
          final float yDistance = Math.abs(e1.getY() - e2.getY());

          if(xDistance > this.swipe_Max_Distance || yDistance > this.swipe_Max_Distance)
           return false;

          velocityX = Math.abs(velocityX);
          velocityY = Math.abs(velocityY);
                boolean result = false;

          if(velocityX > this.swipe_Min_Velocity && xDistance > this.swipe_Min_Distance){
           if(e1.getX() > e2.getX()) // right to left
            this.listener.onSwipe(SWIPE_LEFT);
           else
            this.listener.onSwipe(SWIPE_RIGHT);

           result = true;
          }
          else if(velocityY > this.swipe_Min_Velocity && yDistance > this.swipe_Min_Distance){
           if(e1.getY() > e2.getY()) // bottom to up
            this.listener.onSwipe(SWIPE_UP);
           else
            this.listener.onSwipe(SWIPE_DOWN);

           result = true;
          }

           return result;
         }

     @Override
     public boolean onSingleTapUp(MotionEvent e) {
      this.tapIndicator = true;
      return false;
     }

     @Override
     public boolean onDoubleTap(MotionEvent arg) {
      this.listener.onDoubleTap();;
      return true;
     }

     @Override
     public boolean onDoubleTapEvent(MotionEvent arg) {
      return true;
     }

     @Override
     public boolean onSingleTapConfirmed(MotionEvent arg) {

      if(this.mode == MODE_DYNAMIC){        // we owe an ACTION_UP, so we fake an
         arg.setAction(ACTION_FAKE);      //action which will be converted to an ACTION_UP later.
         this.context.dispatchTouchEvent(arg);
      }  

      return false;
     }

        static interface SimpleGestureListener{
         void onSwipe(int direction);
         void onDoubleTap();
     }

    }

使用PopupWindow实现Facebook弹窗

fb_comments_list_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:padding="10dp"
              android:paddingLeft="5dp"
              android:paddingRight="5dp">
    <ImageView
        android:src="@drawable/ic_launcher"
        android:layout_width="30dp"
        android:layout_height="30dp"/>

    <TextView
        android:id="@android:id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@android:style/TextAppearance.Small"
        android:gravity="center_vertical"
        android:textColor="@color/black"/>

</LinearLayout>

fb_popup_bg.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white"/>
    <corners android:radius="5dp"/>
</shape>

fb_popup_layout.xml

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

    <LinearLayout
        android:id="@+id/headerLayout"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:orientation="horizontal"
        android:layout_alignParentTop="true"
        android:gravity="center">

        <TextView
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Some One and 20 Others Like this"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:layout_margin="5dp"/>
    </LinearLayout>

    <ListView
        android:id="@+id/commentsListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:layout_below="@id/headerLayout"
        android:paddingBottom="50dp"
        android:layout_marginBottom="0dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:src="@color/Gray"/>
        <EditText
            android:id="@+id/writeComment"
            android:hint="Write a Comment"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:textSize="12dp"
            android:textColor="@color/black"
            android:background="#00000000"/>
    </LinearLayout>

</RelativeLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private PopupWindow popWindow;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    // call this method when required to show popup
    public void onShowPopup(View v){

        LayoutInflater layoutInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        // inflate the custom popup layout
        final View inflatedView = layoutInflater.inflate(R.layout.fb_popup_layout, null,false);
        // find the ListView in the popup layout
        ListView listView = (ListView)inflatedView.findViewById(R.id.commentsListView);

        // get device size
        Display display = getWindowManager().getDefaultDisplay();
        final Point size = new Point();
        display.getSize(size);
        mDeviceHeight = size.y;


        // fill the data to the list items
        setSimpleList(listView);


        // set height depends on the device size
        popWindow = new PopupWindow(inflatedView, size.x - 50,size.y - 400, true );
        // set a background drawable with rounders corners
        popWindow.setBackgroundDrawable(getResources().getDrawable(R.drawable.fb_popup_bg));
        // make it focusable to show the keyboard to enter in `EditText`
        popWindow.setFocusable(true);
        // make it outside touchable to dismiss the popup window
        popWindow.setOutsideTouchable(true);

        // show the popup at bottom of the screen and set some margin at bottom ie,
        popWindow.showAtLocation(v, Gravity.BOTTOM, 0,100);
    }


    void setSimpleList(ListView listView){

        ArrayList<String> contactsList = new ArrayList<String>();

        for (int index = 0; index < 10; index++) {
            contactsList.add("I am @ index " + index + " today " + Calendar.getInstance().getTime().toString());
        }

        listView.setAdapter(new ArrayAdapter<String>(TryMeActivity.this,
            R.layout.fb_comments_list_item, android.R.id.text1,contactsList));
    }

}

- Akshay Chopde

---

谢谢@Akshay，我认为应该可以工作。再次感谢您提供的代码片段！！ - Donny Dominic

你好Akshay，无法实现SimpleGestureListener因为它不是接口而是类，你是如何解决的呢？ 谢谢。 - Mosa

这个 override 怎么样？@Override public boolean dispatchTouchEvent(MotionEvent me){ // 调用 SimpleGestureFilter 类的 onTouchEvent 方法 this.detector.onTouchEvent(me); return super.dispatchTouchEvent(me); } - Arnold Brown