在RecyclerView上的帖子上添加幻灯片颜色覆盖

时间:2016-07-20 13:48:40

标签: android events android-recyclerview slide

我想在我的应用程序中创建类似的内容,以便用户可以通过幻灯片对RecyclerViews查看器做出反应,然后向它们添加事件侦听器。我该如何实现? 我用动画制作了一个简单的插图。

Demonstartion

2 个答案:

答案 0 :(得分:0)

请参阅此ItemTouchHelper,尤其是onChildDraw()回调方法。

答案 1 :(得分:0)

我可以使用ClipDrawable达到类似于你的要求。

解决方案如下:

<强> RES /值/ colors.xml

<resources>
    <!-- need colors with alpha.. Not full transparent and not full opaque -->
    <color name="left_to_right_color">#AA008800</color>
    <color name="right_to_left_color">#AACC2200</color>
</resources>

<强> main_activity_layout.xml

我在ImageView上面添加了一个View。这样,我控制View的背景...如果你试图控制ImageView的背景,动画将发生在Icon后面......

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:background="?attr/colorPrimaryDark"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

        <ImageView
            android:id="@+id/imageview"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:src="@drawable/YOU_PICTURE" />

        <View
            android:id="@+id/imageview_surface_view"
            android:layout_width="match_parent"
            android:layout_height="100dp" />
    </RelativeLayout>
</LinearLayout>

Java代码

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        View view = findViewById(R.id.imageview_surface_view);
        view.setOnTouchListener(new MyCustomTouchListener());
    }

    private class MyCustomTouchListener implements View.OnTouchListener {
        private static final int THRESHOLD_VALUE = 100;
        private static final int UNKOWN = 0;
        private static final int LEFT_TO_RIGHT = 1;
        private static final int RIGHT_TO_LEFT = 2;
        private int direction = UNKOWN;
        private int startX;
        private int endX;
        private ClipDrawable clipDrawable;

        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {
            int action = motionEvent.getAction();
            if(action == MotionEvent.ACTION_DOWN) {
                startX = (int) motionEvent.getX();
                endX = (int) (view.getWidth() - view.getX());
                return true;
            } else if(action == MotionEvent.ACTION_UP) {
                AlphaAnimation fadeOutAnimation = new AlphaAnimation(1.0f, 0.0f);
                fadeOutAnimation.setDuration(300);
                fadeOutAnimation.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                        // Do nothing
                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        if(clipDrawable != null)
                            clipDrawable.setLevel(0);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                        // Do nothing
                    }
                });
                view.startAnimation(fadeOutAnimation);
                direction = UNKOWN;
                return true;
            } else if(action == MotionEvent.ACTION_MOVE) {
                if(direction == UNKOWN) {
                    if(motionEvent.getX() > startX) {
                        if(startX < (view.getX() + THRESHOLD_VALUE)) {
                            direction = LEFT_TO_RIGHT;
                            clipDrawable = new ClipDrawable(getResources().getDrawable(R.color.left_to_right_color),
                                    Gravity.START, ClipDrawable.HORIZONTAL);
                            view.setBackground(clipDrawable);
                            return true;
                        }
                    } else if (startX > (endX - THRESHOLD_VALUE)) {
                        direction = RIGHT_TO_LEFT;
                        clipDrawable = new ClipDrawable(getResources().getDrawable(R.color.right_to_left_color),
                                Gravity.END, ClipDrawable.HORIZONTAL);
                        view.setBackground(clipDrawable);
                        return true;
                    }
                    return false;
                } else if (clipDrawable != null){
                    if(direction == LEFT_TO_RIGHT)
                        clipDrawable.setLevel((int) motionEvent.getX() * 10000 / endX);
                    else
                        clipDrawable.setLevel(10000 - (int) motionEvent.getX() * 10000 / endX);
                    return true;
                }
                return false;
            }
            return false;
        }
    }
}

我希望此代码可以帮助您找到您想要的内容