添加渐变颜色以滑动手势

时间:2012-02-27 22:24:47

标签: android gesture

现在我可以使用发布的代码轻松处理滑动手势。但是当用户从一个方向滑动到另一个方向时,我想为过渡添加背景颜色。与股票联系人应用程序的方式非常相似。我知道我将不得不使用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;
}

}

enter image description here

2 个答案:

答案 0 :(得分:3)

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

为列表项创建一个像这样的翻译视图:

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>

为flipperview的背景设置如下的渐变:

<?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方法设置listitem背景的边界

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

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

答案 1 :(得分:0)

屏幕截图是否来自三星手机?我之前已经实现了这个效果。 此滑动条不是渐变色,只是由三张图片组成。

您可以使用apktool

反编译APK文件来获取这些图片