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

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

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;

}

————————————————

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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343

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

推荐阅读更多精彩内容