Android滑动解锁分享自定义组件

最新推荐文章于 2024-10-10 13:11:08 发布

weixin_36495794

最新推荐文章于 2024-10-10 13:11:08 发布

阅读量552

点赞数

分类专栏： Android开发

本文链接：https://blog.csdn.net/weixin_36495794/article/details/102517617

版权

Android开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

先看下滑动的效果图滑动解锁分享的一个效果

https://github.com/TangfeiJi/SlideToUnlockProject 源码

我是以模块的方式导入的。看下操作的步骤

1.下载模块并导入在项目中。

2.在项目的Gradle中增加依赖

3.在布局中增加组件

 <com.qdong.slide_to_unlock_view.CustomSlideToUnlockView
        android:id="@+id/slide_to_unlock"
        android:layout_width="match_parent"
        android:layout_height="44dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="45dp"
        android:layout_marginBottom="40dp"
        chuck:slideImageViewResId="@mipmap/unlock_hide"
        chuck:slideImageViewResIdAfter="@mipmap/unlock_1_hide"
        chuck:slideImageViewWidth="35dp"
        chuck:slideThreshold="0.5"
        chuck:textColorResId="#fff"
        chuck:textHint="滑动解锁"
        chuck:textSize="6"
        chuck:viewBackgroundResId="@drawable/shape_round_normal_green"
        tools:ignore="MissingConstraints">

    </com.qdong.slide_to_unlock_view.CustomSlideToUnlockView>

4.在activity中初始化并使用这是列出它给出的监听

    CustomSlideToUnlockView.CallBack callBack = new CustomSlideToUnlockView.CallBack() {
            @Override//滑动到的位置
            public void onSlide(int distance) {
                Log.e("1111",distance+"");
            }

            @Override
            public void onUnlocked() {  //滑动到最后解锁
                pop_layout.setVisibility(View.VISIBLE);
                Toast.makeText(MainActivity.this,"onUnlocked",Toast.LENGTH_LONG).show();
            }
        };

来看看源码我这已经给出了注释说明

package com.qdong.slide_to_unlock_view;

import android.content.Context;
import android.content.res.TypedArray;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.github.florent37.viewanimator.AnimationListener;
import com.github.florent37.viewanimator.ViewAnimator;
import com.nineoldandroids.view.ViewHelper;


/**

 **/
public class CustomSlideToUnlockView extends RelativeLayout {

    private static final String TAG="CustomSlideToUnlockView";
    private static final long DEAFULT_DURATIN_LONG = 200;//左弹回,动画时长
    private static final long DEAFULT_DURATIN_SHORT = 100;//右弹,动画时长
    private static final boolean LOG = true;//打印开关
    private static int  DISTANCE_LIMIT = 600;//滑动阈值
    private static float  THRESHOLD = 0.5F;//滑动阈值比例:默认是0.5,即滑动超过父容器宽度的一半再松手就会触发
    protected Context mContext;
    private ImageView iv_slide;//滑块
    private TextView tv_hint;//提示文本
    private RelativeLayout rl_slide;//滑动view
    private RelativeLayout rl_root;//父容器
    private boolean mIsUnLocked;//已经滑到最右边,将不再响应touch事件
    private CallBack mCallBack;//回调


    private int slideImageViewWidth;//滑块宽度
    private int  slideImageViewResId;//滑块资源
    private int  slideImageViewResIdAfter;//滑动到右边时,滑块资源id
    private int  viewBackgroundResId;//root 背景
    private String textHint;//文本
    private int textSize;//单位是sp,只拿数值
    private int textColorResId;//颜色,@color


    public CustomSlideToUnlockView(Context mContext) {
        super(mContext);
        this.mContext = mContext;
        initView();
    }

    public CustomSlideToUnlockView(Context mContext, AttributeSet attrs) {
        super(mContext, attrs);
        this.mContext = mContext;
        TypedArray mTypedArray = mContext.obtainStyledAttributes(attrs,
                R.styleable.SlideToUnlockView);
        init(mTypedArray);
        initView();
    }

    public CustomSlideToUnlockView(Context mContext, AttributeSet attrs, int defStyleAttr) {
        super(mContext, attrs, defStyleAttr);
        this.mContext = mContext;

        TypedArray mTypedArray = mContext.obtainStyledAttributes(attrs,
                R.styleable.SlideToUnlockView);
        init(mTypedArray);

        initView();

    }

    /**

     **/
    private void init(TypedArray mTypedArray) {

        slideImageViewWidth= (int) mTypedArray.getDimension(R.styleable.SlideToUnlockView_slideImageViewWidth, DensityUtil.dp2px(getContext(), 50));
        slideImageViewResId= mTypedArray.getResourceId(R.styleable.SlideToUnlockView_slideImageViewResId, -1);
        slideImageViewResIdAfter= mTypedArray.getResourceId(R.styleable.SlideToUnlockView_slideImageViewResIdAfter, -1);
        viewBackgroundResId= mTypedArray.getResourceId(R.styleable.SlideToUnlockView_viewBackgroundResId, -1);
        textHint=mTypedArray.getString(R.styleable.SlideToUnlockView_textHint);
        textSize=mTypedArray.getInteger(R.styleable.SlideToUnlockView_textSize, 7);
        textColorResId= mTypedArray.getColor(R.styleable.SlideToUnlockView_textColorResId, getResources().getColor(android.R.color.white));
        THRESHOLD=mTypedArray.getFloat(R.styleable.SlideToUnlockView_slideThreshold, 0.5f);

        mTypedArray.recycle();
    }


    private int mActionDownX, mLastX, mSlidedDistance;


    /**
     * 初始化界面布局
     */
    protected void initView() {

        LayoutInflater.from(mContext).inflate(R.layout.layout_view_slide_to_unlock,
                this, true);

        rl_root = (RelativeLayout) findViewById(R.id.rl_root);
        rl_slide = (RelativeLayout) findViewById(R.id.rl_slide);
        iv_slide = (ImageView) findViewById(R.id.iv_slide);
        tv_hint = (TextView) findViewById(R.id.tv_hint);

        LayoutParams params= (LayoutParams) iv_slide .getLayoutParams();
        //获取当前控件的布局对象
        params.width= slideImageViewWidth;//设置当前控件布局的高度
        iv_slide.setLayoutParams(params);//将设置好的布局参数应用到控件中

        setImageDefault();
        if(viewBackgroundResId>0){
//            rl_slide.setBackgroundResource(viewBackgroundResId);//rootView设置背景
        }

        MarginLayoutParams tvParams = (MarginLayoutParams) tv_hint.getLayoutParams();
        tvParams.setMargins(0, 0, slideImageViewWidth, 0);//textview的marginRight设置为和滑块的宽度一致
        tv_hint.setLayoutParams(tvParams);
        tv_hint.setTextSize(DensityUtil.sp2px(getContext(), textSize));
        tv_hint.setTextColor(textColorResId);
        tv_hint.setText(TextUtils.isEmpty(textHint)? mContext.getString(R.string.hint):textHint);

        //添加滑动监听
        rl_slide.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                DISTANCE_LIMIT= (int) (CustomSlideToUnlockView.this.getWidth()*THRESHOLD);//默认阈值是控件宽度的一半

                switch (event.getAction()) {

                    case MotionEvent.ACTION_DOWN://按下时记录纵坐标

                        if(mIsUnLocked){//滑块已经在最右边则不处理touch
                            return false;
                        }

                        mLastX = (int) event.getRawX();//最后一个action时x值
                        mActionDownX = (int) event.getRawX();//按下的瞬间x
                        logI(TAG, mLastX + "X,=============================ACTION_DOWN");
                        break;

                    case MotionEvent.ACTION_MOVE://上滑才处理,如果用户一开始就下滑,则过掉不处理

                        logI(TAG, "=============================ACTION_MOVE");
                        logI(TAG, "event.getRawX()============================="+event.getRawX());

                        int dX = (int) event.getRawX() - mLastX;
                        logI(TAG, "dX============================="+dX);

                        mSlidedDistance = (int) event.getRawX() - mActionDownX;
                        logI(TAG, "mSlidedDistance============================="+ mSlidedDistance);

                        final MarginLayoutParams params = (MarginLayoutParams) v.getLayoutParams();
                        int left = params.leftMargin;
                        int top = params.topMargin;
                        int right = params.rightMargin;
                        int bottom = params.bottomMargin;

                        logI(TAG, "left:"+left+",top:"+top+",right:"+right+",bottom"+bottom);

                        int leftNew = left + dX;
                        int rightNew =right - dX;

                        if (mSlidedDistance > 0) {//直接通过margin实现滑动
                            params.setMargins(leftNew, top, rightNew, bottom);
                            logI(TAG, leftNew + "=============================MOVE");
                            v.setLayoutParams(params);
                            resetTextViewAlpha(mSlidedDistance);

                            //回调
                            if(mCallBack!=null){
                                mCallBack.onSlide(mSlidedDistance);
                            }
                            mLastX = (int) event.getRawX();
                        } else {
                            return true;
                        }

                        break;


                    case MotionEvent.ACTION_UP:
                        logI(TAG, "MotionEvent.ACTION_UP,之前移动的偏移值：" + ViewHelper.getTranslationY(v));
                        if (Math.abs(mSlidedDistance) > DISTANCE_LIMIT) {
                            scrollToRight(v);//右边
//                            scrollToLeft(v);//左边
                        } else {
                            scrollToLeft(v);//左边
                        }
                        break;


                    case MotionEvent.ACTION_CANCEL:
//                        try {
//                            if (vTracker != null) {
//                                vTracker.recycle();
//                                vTracker = null;
//                            }
//                            vTracker.recycle();
//                        } catch (Exception e) {
//                            e.printStackTrace();
//                        }

                        break;

                }


                return true;
            }
        });



    }


    private void logI(String tag,String content){
        if(LOG){
            Log.i(tag,content);
        }
    }

    /**
     * @method name:resetTextViewAlpha
     * @des:  重置提示文本的透明度
     * @param :[mSlidedDistance]
     * @return type:void
     * @date 创建时间:2017/5/24
     * @author Chuck
     **/
    private void resetTextViewAlpha(int distance) {

        if(Math.abs(distance)>=Math.abs(DISTANCE_LIMIT)){
            tv_hint.setAlpha(0.0f);
        }
        else{
            tv_hint.setAlpha(1.0f-Math.abs(distance)*1.0f/Math.abs(DISTANCE_LIMIT));
        }
    }


    /**
     * @method name:scrollToLeft
     * @des:  滑动未到阈值时松开手指,弹回到最左边
     * @param :[v]
     * @return type:void
     * @date 创建时间:2017/5/24
     * @author Chuck
     **/
    private void scrollToLeft(final View v) {


        final MarginLayoutParams params1 = (MarginLayoutParams) v.getLayoutParams();
        logI(TAG, "scrollToLeft,ViewHelper.getTranslationX(v)：" + ViewHelper.getTranslationX(v));
        logI(TAG, "scrollToLeft，params1.leftMargin：" + params1.leftMargin);
        logI(TAG, "scrollToLeft， params1.rightMargin：" + params1.rightMargin);


        ViewAnimator
                .animate( rl_slide)
                .translationX(ViewHelper.getTranslationX(v), -params1.leftMargin+15)
                .interpolator(new AccelerateInterpolator())
                .duration(DEAFULT_DURATIN_LONG)
                .onStop(new AnimationListener.Stop() {
                    @Override
                    public void onStop() {
                        MarginLayoutParams para = (MarginLayoutParams) v.getLayoutParams();
                        logI(TAG, "scrollToLeft动画结束para.leftMargin：" + para.leftMargin);
                        logI(TAG, "scrollToLeft动画结束para.rightMargin：" + para.rightMargin);
                        logI(TAG, "scrollToLeft动画结束,ViewHelper.getTranslationX(v):" + ViewHelper.getTranslationX(v));
                        mSlidedDistance = 0;
                        tv_hint.setAlpha(1.0f);
                        mIsUnLocked=false;
                        if(mCallBack!=null){
                            mCallBack.onSlide(mSlidedDistance);
                        }
                        setImageDefault();
                    }
                })
                .start();
    }


    /**
   
     **/
    private void scrollToRight(final View v) {


        final MarginLayoutParams params1 = (MarginLayoutParams) v.getLayoutParams();
        logI(TAG, "scrollToRight,ViewHelper.getTranslationX(v)：" + ViewHelper.getTranslationX(v));
        logI(TAG, "scrollToRight，params1.leftMargin：" + params1.leftMargin);
        logI(TAG, "scrollToRight， params1.rightMargin：" + params1.rightMargin);

        //移动到最右端  移动的距离是 父容器宽度-leftMargin
        ViewAnimator
                .animate( rl_slide)
                //.translationX(ViewHelper.getTranslationX(v), ViewHelper.getTranslationX(v)+100)
                .translationX(ViewHelper.getTranslationX(v), -params1.leftMargin+15)
//                .translationX(ViewHelper.getTranslationX(v), ( rl_slide.getWidth() - params1.leftMargin-slideImageViewWidth))
                //.translationX(params1.leftMargin, ( rl_slide.getWidth() - params1.leftMargin-100))
                .interpolator(new AccelerateInterpolator())
                .duration(DEAFULT_DURATIN_SHORT)
                .onStop(new AnimationListener.Stop() {
                    @Override
                    public void onStop() {
                        MarginLayoutParams para = (MarginLayoutParams) v.getLayoutParams();
                        logI(TAG, "scrollToRight动画结束para.leftMargin：" + para.leftMargin);
                        logI(TAG, "scrollToRight动画结束para.rightMargin：" + para.rightMargin);
                        logI(TAG, "scrollToRight动画结束,ViewHelper.getTranslationX(v):" + ViewHelper.getTranslationX(v));
                        mSlidedDistance = 0;
                        tv_hint.setAlpha(1.0f);
                        mIsUnLocked=false;

//                        if(slideImageViewResIdAfter>0){
//                            iv_slide.setImageResource(slideImageViewResIdAfter);//滑块imagview设置资源
//                        }

                        //回调
                        if(mCallBack!=null){
                            mCallBack.onUnlocked();
                        }
                    }
                })
                .start();


    }


    public void resetView(){
        mIsUnLocked=false;
        setImageDefault();
        scrollToLeft(rl_slide);
    }

    private void setImageDefault() {
        /**
      
         **/

        if(slideImageViewResId>0){
            iv_slide.setImageResource(slideImageViewResId);//滑块imagview设置资源
        }
    }

    public interface CallBack{
        void onSlide(int distance);//右滑距离回调
        void onUnlocked();//滑动到了右边,事件回调
    }


    public CallBack getmCallBack() {
        return mCallBack;
    }

    public void setmCallBack(CallBack mCallBack) {
        this.mCallBack = mCallBack;
    }
}