Question

在Facebook中，如果您触摸活动Feed中的某个项目，它会立即变暗以显示您的手指在其上。然后，如果您使用手指滚动Feed，则视图持有者将再次变为白色。

您还可以在Recyclerview中保留一个项目，并且视图将变暗。如果你抬起手指，你已经“点击”了该项目，Facebook会显示有关你点击内容的更多信息。

这似乎很容易实现，但我一直在努力。

我认为Facebook使用onTouchListener来实现效果......

我编写了下面的代码，但它似乎使我的recyclerview的itemView变暗了橙色，但是当我拖动或抬起我的手指时，橙色不会变成我想要的透明颜色。

另外因为recyclerview是'回收'/重复使用它的视图，如果我触摸列表中的第一项并滚动，则来自recyclerview底部的其中一个项目也将获得橙色色调作为视图现在已经移出视线（我点击的第一个视图）现在已经被重新用于底部的视图。

这是我的代码：

((ProfileFeedViewHolder) holder).itemView.setOnTouchListener(new View.OnTouchListener() {

public final static int FINGER_RELEASED = 0;
public final static int FINGER_TOUCHED = 1;
public final static int FINGER_DRAGGING = 2;
public final static int FINGER_UNDEFINED = 3;

private int fingerState = FINGER_RELEASED;

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    Log.e("motionEvent", "motion "+motionEvent.getAction());
    switch (motionEvent.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if (fingerState == FINGER_RELEASED) fingerState = FINGER_TOUCHED;
            else fingerState = FINGER_UNDEFINED;
            view.setBackgroundColor(ContextCompat.getColor(context, R.color.deep_orange_500));
            break;

        case MotionEvent.ACTION_UP:
            if(fingerState != FINGER_DRAGGING) {
                fingerState = FINGER_RELEASED;
                view.setBackgroundColor(ContextCompat.getColor(context, R.color.transparent));
                // Your onClick codes
            }
            else if (fingerState == FINGER_DRAGGING) fingerState = FINGER_RELEASED;
            else fingerState = FINGER_UNDEFINED;
            view.setBackgroundColor(ContextCompat.getColor(context, R.color.transparent));
            break;

        case MotionEvent.ACTION_MOVE:
            if (fingerState == FINGER_TOUCHED || fingerState == FINGER_DRAGGING) {
                fingerState = FINGER_DRAGGING;
                view.setBackgroundColor(ContextCompat.getColor(context, R.color.transparent));
            }
            else fingerState = FINGER_UNDEFINED;
            break;
        default:
            fingerState = FINGER_UNDEFINED;
            view.setBackgroundColor(ContextCompat.getColor(context, R.color.transparent));
    }
    return false;
}
});

如何实现这种在当今大多数应用中都非常受欢迎的简单效果？

Answer 1

我稍微谷歌，你可以在xml上实际做到这一点。感谢Lawrr和这篇文章：Background Selector in RecyclerView Item只需将以下内容作为背景：

android:background="?android:attr/selectableItemBackground"

请注意，我在下面有两个relativeLayouts，内容将进入内部relativeLayout。原因是android：background设置了itemView的背景颜色。我的itemViews都有白色背景，所以我需要将外部relativeLayout设置为白色。然后，当我触摸itemView时，内部relativeLayout设置为?android:attr/selectableItemBackground的背景将导致灰色突出显示和android涟漪效果。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/container">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/selectableItemBackground">

        //put in your content here for each itemView

    </RelativeLayout>

</RelativeLayout>

Android Recyclerview：在recyclerview上使用onTouchListener来更改onTouch

1 个答案: