android - 为滑动手势添加渐变颜色

Question

现在我可以使用发布的代码很好地处理滑动手势。但是我想在用户从一个方向滑动到另一个方向时为过渡添加背景颜色。与股票联系人应用程序的方式非常相似。我知道我将不得不使用 GestureOverlay，但我不知道如何将它与我当前的代码链接起来。这可能吗，或者有更简单的方法吗？

    // inside my onCreate method
    View view = getLayoutInflater().inflate(R.layout.gesture_overlay, null);
    GestureOverlayView gestureOverlayView = new GestureOverlayView(this);
    gestureOverlayView.addView(view);


    mGestureDetector = new GestureDetector(new MyGestureDetector());
    mGestureListener = new View.OnTouchListener() {
        public boolean onTouch(View view, MotionEvent event) {
            mLongPress = false;
            return mGestureDetector.onTouchEvent(event);
        }
    };

    // mListView.setOnItemClickListener(this);
    mListView.setOnTouchListener(mGestureListener);
}


class MyGestureDetector extends SimpleOnGestureListener {
    private static final int SWIPE_MIN_DISTANCE       = 120;
    private static final int SWIPE_MAX_OFF_PATH       = 200;
    private static final int SWIPE_THRESHOLD_VELOCITY = 200;

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
    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) {
        return true;
    } else
        if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
                && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
            return true;
        }

    return false;
}

Answer 1

到目前为止，我已经创建了一个对我有用的解决方案......

为列表项创建一个翻转 View ，如下所示:

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/listItemViewFlipper"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- ViewFlipper Child 1 -->
<RelativeLayout 
android:id="@+id/listItem"
android:layout_width="match_parent"
android:layout_height="80dip"    
android:padding="4dip"    
android:background="@drawable/list_item_background"
>

<TextView 
    android:id="@+id/productName"        
    android:singleLine="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:textSize="20sp"
    android:gravity="left|center_vertical"
    android:text="" 
    android:textColor="#FFFFFF"/>
<TextView
    android:id="@+id/short_description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"        
    android:text="short description"
    android:gravity="left"
    android:layout_below="@id/productName"
    />      
<EditText
    android:id="@+id/editValue"     
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"                    
    android:hint="@string/value"
    android:layout_alignParentRight="true"
    android:layout_alignBaseline="@id/productName"
    android:textColorHint="#FFFFFF"
    android:text=""
    android:singleLine="true"
    android:inputType="number"  
    android:textColor="#FFFFFF"
    android:maxLength="2"       
    />  
        <TextView 
    android:id="@+id/productPrice"      
    android:layout_height="wrap_content"    
    android:layout_width="wrap_content"
    android:paddingRight="8dip"     
    android:layout_toLeftOf="@id/editValue"                
    android:text="€3,40"
    android:textSize="20sp" 
    android:textColor="#FFFFFF"
    />

</RelativeLayout>

<!-- Transition views -->
<!-- ViewFlipper Child 2 -->
<LinearLayout 
    android:id="@+id/transitionViewAdd"
    android:layout_width="match_parent"
    android:layout_height="80dip"   
    android:padding="4dip"    
    android:background="@drawable/list_item_swipe"              
    android:orientation="horizontal"
>
    <TextView
        android:id="@+id/swipe_transition_textview_add"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"                       
        android:gravity="center"
        android:textSize="25sp"     
        android:textColor="#FFFFFF" 
        android:text="@string/swipe_transition_text_add"            
    />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:src="@drawable/content_new"
    />

</LinearLayout>  
<!-- ViewFlipper Child 3 -->
<LinearLayout 
    android:id="@+id/transitionViewRemove"
    android:layout_width="match_parent"
    android:layout_height="80dip"           
    android:background="#ff7978"        
    android:orientation="horizontal"
>  
<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:src="@drawable/ic_action_remove"            
/>
<TextView
        android:id="@+id/swipe_transition_textview_remove"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="25sp"     
        android:textColor="#FFFFFF" 
        android:text="@string/swipe_transition_text_remove"                 
    />
</LinearLayout>
</ViewFlipper>

为翻转 View 的背景设置如下渐变:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:startColor="#FF0000"
              android:endColor="@android:color/transparent"
              android:angle="0"/>           
    <corners android:radius="3dp"/>        
</shape>

现在在 GestureDetector 中滑动时将 FlipperView 更改为您想要的 View。(我假设您使用 MotionEvent 来处理滑动的不同状态)

 case MotionEvent.ACTION_MOVE:{         
        float deltaX = motionEvent.getRawX() - mDownX;
        int deltaXRound = Math.round(deltaX);
        float deltaY = motionEvent.getRawY() - mDownY;
        if(mVelocityTracker == null || mPaused){
            break;
        }

        if(Math.abs(deltaY) > Math.abs(deltaX)){                
            return false;
        }

        mVelocityTracker.addMovement(motionEvent);          
        if (Math.abs(deltaX) > mSlop) {
            mSwiping = true;                                    
            mListView.requestDisallowInterceptTouchEvent(true); 
        }

     // Cancel ListView's touch (un-highlighting the item)
        MotionEvent cancelEvent = MotionEvent.obtain(motionEvent);
        cancelEvent.setAction(MotionEvent.ACTION_CANCEL |
                (motionEvent.getActionIndex()
                        << MotionEvent.ACTION_POINTER_INDEX_SHIFT));
        mListView.onTouchEvent(cancelEvent);
        cancelEvent.recycle();           

        if(deltaX > 0 && mSwiping){                             
                  mViewFlipper.setDisplayedChild(mViewFlipper.indexOfChild(mViewFlipper.findViewById(R.id.transitionViewAdd)));
            mCurrentFlipperView = mViewFlipper.getCurrentView();

            Drawable background = mCurrentFlipperView.getBackground();
            background.setBounds(0, 0, deltaXRound, mCurrentFlipperView.getHeight());   
            background.invalidateSelf();

现在.. 解决问题的方法是使用 setBounds 方法来设置列表项背景的边界

Drawable background = mCurrentFlipperView.getBackground();
background.setBounds(0, 0, deltaXRound, mCurrentFlipperView.getHeight());   
background.invalidateSelf();

这对我有用..它创建了一个渐变，在滑动时跟随触摸..它需要一些编辑才能让它更好地工作..但我已经寻找了很长时间的解决方案而且我知道很多人都在正在寻找它，所以我想尽快展示它。但我认为你会想办法按照你想要的方式去做。