android滑动按钮显示隐藏内容

需求

在一个宽度为屏幕宽的布局中 , 滑动布局中的按钮 , 将内容进行联动并处理相关逻辑

效果

效果如图

代码

第一步SwipeCloseLayout.class

package com.mvp.org.coustomview;

import android.animation.ValueAnimator;
import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.mvp.org.R;
import com.mvp.org.utils.DensityUtil;

/**
 * Created by Administrator on 2020/8/28.
 */

public class SwipeCloseLayout extends LinearLayout implements View.OnTouchListener, View.OnClickListener {

    public SwipeCloseLayout(Context context) {
        this(context, null);
    }

    public SwipeCloseLayout(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SwipeCloseLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initLayout(context);
    }

    View content;
    LinearLayout ll_close;
    Context context;
    View viewleft;
    View viewright;
    ImageView img_eye_open;
    ImageView img_eye_close;
    TextView tv_account;
    TextView tv_account_cny;
    LinearLayout ll_content;

    private void initLayout(Context context) {
        setOrientation(HORIZONTAL);
        this.context = context;
        content = View.inflate(context, R.layout.swipe_close_layout, null);
        LinearLayout.LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        content.setLayoutParams(lp);
        ll_close = content.findViewById(R.id.ll_close);
        img_eye_open = content.findViewById(R.id.img_eye_open);
        img_eye_close = content.findViewById(R.id.img_eye_close);
        tv_account = content.findViewById(R.id.tv_account);
        tv_account_cny = content.findViewById(R.id.tv_account_cny);
        viewleft = content.findViewById(R.id.viewleft);
        viewright = content.findViewById(R.id.viewright);
        ll_content = content.findViewById(R.id.ll_content);
        addView(content);
        ll_close.setOnTouchListener(this);
        img_eye_open.setOnClickListener(this);
        img_eye_close.setOnClickListener(this);
    }

    int transterLenth = 0;
    private int lastX;

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        int x = (int) event.getRawX();
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            getParent().requestDisallowInterceptTouchEvent(true);
        } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
            int deltaX = x - lastX;
            int translationX = (int) (ll_close.getTranslationX() + deltaX);
            handlerActionMove(translationX);
        } else {
            if (lastX >= DensityUtil.getScreenWidth(context) / 2) {
                ViewCompat.animate(ll_close).translationX(content.getWidth() - ll_close.getWidth() - DensityUtil.dip2px(context, 25)).setDuration(100).start();
                viewright.setAlpha(0);
                viewleft.setAlpha(1);
                handlerContentTranslation(transterLenth);
                handlerClose(true);
            } else {
                ViewCompat.animate(ll_close).translationX(0).setDuration(100).start();
                viewright.setAlpha(1);
                viewleft.setAlpha(0);
                handlerContentTranslation(0);
                handlerClose(false);
            }
            ll_content.setAlpha(1);
            getParent().requestDisallowInterceptTouchEvent(false);
        }
        lastX = x;
        return true;
    }

    private void handlerActionMove(int translationX) {
        if (translationX <= 0) {
            ll_close.setTranslationX(0);
        } else if (translationX >= content.getWidth() - ll_close.getWidth() - DensityUtil.dip2px(context, 25)) {
            ll_close.setTranslationX(content.getWidth() - ll_close.getWidth() - DensityUtil.dip2px(context, 25));
        } else {
            ll_close.setTranslationX(translationX);
            if (translationX < ll_close.getWidth()) {
                viewright.setAlpha(1 - ((float) translationX / (float) ll_close.getWidth()));
                viewleft.setAlpha(((float) translationX / (float) ll_close.getWidth()));
            }
            if (translationX < ll_close.getWidth()) {
                ll_content.setAlpha(1 - ((float) translationX / (float) ll_close.getWidth()));
                handlerClose(false);
            } else {
                handlerClose(true);
                ll_content.setAlpha(((float) translationX / transterLenth));
            }
        }
        handlerContentTranslation(ll_close.getTranslationX());
    }

    private void handlerContentTranslation(float translationX) {
        float scale = (translationX) / transterLenth;
        if (scale <= 0) {
            ll_content.setTranslationX(0);
        } else {
            float contentTranslationX = -ll_close.getWidth() * scale;
            ll_content.setTranslationX(contentTranslationX);
        }
    }

    private void handlerClose(boolean close) {
        if (close) {
            img_eye_open.setVisibility(GONE);
            img_eye_close.setVisibility(VISIBLE);
            tv_account.setText("********  USDT");
            tv_account_cny.setText("");
        } else {
            img_eye_close.setVisibility(GONE);
            img_eye_open.setVisibility(VISIBLE);
            tv_account.setText("1000.0000 USDT");
            tv_account_cny.setText("￥700.0000");
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        transterLenth = content.getWidth() - ll_close.getWidth() - DensityUtil.dip2px(context, 25);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img_eye_open:
                ValueAnimator valueAnimator = ValueAnimator.ofInt(0, content.getWidth() - ll_close.getWidth() - DensityUtil.dip2px(context, 25));
                valueAnimator.setDuration(300).setInterpolator(new AccelerateDecelerateInterpolator());
                valueAnimator.addUpdateListener(animation -> handlerActionMove((int) animation.getAnimatedValue()));
                valueAnimator.start();
                break;
            case R.id.img_eye_close:
                ValueAnimator valueAnimator1 = ValueAnimator.ofInt(content.getWidth() - ll_close.getWidth() - DensityUtil.dip2px(context, 25), 0);
                valueAnimator1.setDuration(300).setInterpolator(new AccelerateDecelerateInterpolator());
                valueAnimator1.addUpdateListener(animation -> handlerActionMove((int) animation.getAnimatedValue()));
                valueAnimator1.start();
                break;
        }
    }
}

第二步
添加自定义控件的布局
swipe_close_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_white_with_shadow"
    android:gravity="center"
    android:orientation="horizontal">


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

        <LinearLayout
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="32px"
            android:layout_toRightOf="@+id/ll_close"
            android:layout_weight="1"
            android:orientation="vertical">

            <LinearLayout

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="總資產折合"
                    android:textColor="#ff777777"
                    android:textSize="30px" />
                <ImageView
                    android:id="@+id/img_eye_close"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="44px"
                    android:visibility="gone"
                    android:src="@drawable/icon_eye_close" />
                <View
                    android:layout_width="0dp"
                    android:layout_height="1dp"
                    android:layout_weight="1"
                    />
                <ImageView
                    android:id="@+id/img_eye_open"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="44px"
                    android:src="@drawable/icon_eye_open" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30px"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tv_account"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="1000.0000 USDT"
                    android:textColor="#ff333333"
                    android:textSize="30px" />

                <TextView
                    android:id="@+id/tv_account_cny"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="￥700.0000"
                    android:layout_marginRight="44px"
                    android:textColor="#CCCCCC"
                    android:textSize="30px" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_close"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <View
                android:id="@+id/viewleft"
                android:layout_width="1px"
                android:layout_height="114px"
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@+id/img_close"
                android:alpha="0"
                android:background="#f5f5f5" />

            <ImageView
                android:id="@+id/img_close"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/icon_eth" />

            <View
                android:id="@+id/viewright"
                android:layout_width="1px"
                android:layout_height="114px"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/img_close"
                android:background="#f5f5f5" />
        </LinearLayout>

    </RelativeLayout>


</LinearLayout>

第三步
在需要展示的页面引入
<com.mvp.org.coustomview.SwipeCloseLayout
android:layout_width=“match_parent”
android:layout_height=“wrap_content” />