有听说过PatternLockView吗?适用于Android的易于使用,可自定义和Material Design的Pattern Lock视图,下面我们一起来简单的介绍一下手势锁的速成步骤吧:
1.添加依赖:
dependencies {
// other dependencies here
compile 'com.andrognito.patternlockview:patternlockview:1.0.0'
// Optional, for RxJava2 adapter
compile 'com.andrognito.patternlockview:patternlockview-reactive:1.0.0'
}
2.XML布局写法:
<com.andrognito.patternlockview.PatternLockView
android:id="@+id/pattern_lock_view"
android:layout_width="280dp"
android:layout_height="280dp"/>
完整XML布局:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/mine_shaft"
android:orientation="vertical">
<ImageView
android:id="@+id/profile_image"
android:layout_width="84dp"
android:layout_height="84dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="104dp"
android:src="@drawable/img_no_avatar"/>
<TextView
android:id="@+id/profile_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:fontFamily="sans-serif-thin"
android:gravity="center"
android:maxLines="1"
android:text="Welcome"
android:textColor="@color/white"
android:textSize="34sp"/>
<com.andrognito.patternlockview.PatternLockView
android:id="@+id/patter_lock_view"
android:layout_width="280dp"
android:layout_height="280dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
app:aspectRatio="square"
app:aspectRatioEnabled="true"
app:dotAnimationDuration="150"
app:dotCount="3"/>
</LinearLayout>
2.主函数代码:
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.util.Log;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Toast;
import com.andrognito.patternlockview.PatternLockView;
import com.andrognito.patternlockview.listener.PatternLockViewListener;
import com.andrognito.patternlockview.utils.PatternLockUtils;
import com.andrognito.patternlockview.utils.ResourceUtils;
import com.andrognito.rxpatternlockview.RxPatternLockView;
import com.andrognito.rxpatternlockview.events.PatternLockCompleteEvent;
import com.andrognito.rxpatternlockview.events.PatternLockCompoundEvent;
import java.util.List;
import io.reactivex.functions.Consumer;
public class MainActivity extends AppCompatActivity {
private PatternLockView mPatternLockView;
private PatternLockViewListener mPatternLockViewListener = new PatternLockViewListener() {
@Override
public void onStarted() {
Log.d(getClass().getName(), "Pattern drawing started");
}
@Override
public void onProgress(List<PatternLockView.Dot> progressPattern) {
Log.d(getClass().getName(), "Pattern progress: " +
PatternLockUtils.patternToString(mPatternLockView, progressPattern));
}
@Override
public void onComplete(List<PatternLockView.Dot> pattern) {
Log.d(getClass().getName(), "Pattern complete: " +
PatternLockUtils.patternToString(mPatternLockView, pattern));
//判断是否成功:24678
String mima = "24678";
String patternToString = PatternLockUtils.patternToString(mPatternLockView, pattern);
// Toast.makeText(MainActivity.this,"您绘制的密码是:"+patternToString,Toast.LENGTH_SHORT).show();
if(!TextUtils.isEmpty(patternToString)){
if(patternToString.equals(mima)){
Toast.makeText(MainActivity.this,"您绘制的密码是:"+patternToString+"\n"+"密码正确,正在进入首页...",Toast.LENGTH_SHORT).show();
}else {
Toast.makeText(MainActivity.this,"您绘制的密码是:"+patternToString+"\n"+"密码错误,请重新绘制",Toast.LENGTH_SHORT).show();
}
}
}
@Override
public void onCleared() {
Log.d(getClass().getName(), "Pattern has been cleared");
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
mPatternLockView = (PatternLockView) findViewById(R.id.patter_lock_view);
mPatternLockView.setDotCount(3);
mPatternLockView.setDotNormalSize((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_dot_size));
mPatternLockView.setDotSelectedSize((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_dot_selected_size));
mPatternLockView.setPathWidth((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_path_width));
mPatternLockView.setAspectRatioEnabled(true);
mPatternLockView.setAspectRatio(PatternLockView.AspectRatio.ASPECT_RATIO_HEIGHT_BIAS);
mPatternLockView.setViewMode(PatternLockView.PatternViewMode.CORRECT);
mPatternLockView.setDotAnimationDuration(150);
mPatternLockView.setPathEndAnimationDuration(100);
mPatternLockView.setCorrectStateColor(ResourceUtils.getColor(this, R.color.white));
mPatternLockView.setInStealthMode(false);
mPatternLockView.setTactileFeedbackEnabled(true);
mPatternLockView.setInputEnabled(true);
mPatternLockView.addPatternLockListener(mPatternLockViewListener);
RxPatternLockView.patternComplete(mPatternLockView)
.subscribe(new Consumer<PatternLockCompleteEvent>() {
@Override
public void accept(PatternLockCompleteEvent patternLockCompleteEvent) throws Exception {
Log.d(getClass().getName(), "Complete: " + patternLockCompleteEvent.getPattern().toString());
}
});
RxPatternLockView.patternChanges(mPatternLockView)
.subscribe(new Consumer<PatternLockCompoundEvent>() {
@Override
public void accept(PatternLockCompoundEvent event) throws Exception {
if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_STARTED) {
Log.d(getClass().getName(), "Pattern drawing started");
} else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_PROGRESS) {
Log.d(getClass().getName(), "Pattern progress: " +
PatternLockUtils.patternToString(mPatternLockView, event.getPattern()));
} else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_COMPLETE) {
Log.d(getClass().getName(), "Pattern complete: " +
PatternLockUtils.patternToString(mPatternLockView, event.getPattern()));
} else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_CLEARED) {
Log.d(getClass().getName(), "Pattern has been cleared");
}
}
});
}
}
注意的控件的监听方法,然后自己在相应的方法中写符合自己项目的需求逻辑就ok了:
private PatternLockViewListener mPatternLockViewListener = new PatternLockViewListener() {
@Override
public void onStarted() {
Log.d(getClass().getName(), "Pattern drawing started");
}
@Override
public void onProgress(List<PatternLockView.Dot> progressPattern) {
Log.d(getClass().getName(), "Pattern progress: " +
PatternLockUtils.patternToString(mPatternLockView, progressPattern));
}
@Override
public void onComplete(List<PatternLockView.Dot> pattern) {
Log.d(getClass().getName(), "Pattern complete: " +
PatternLockUtils.patternToString(mPatternLockView, pattern));
}
@Override
public void onCleared() {
Log.d(getClass().getName(), "Pattern has been cleared");
}
};
3.定制细节介绍:
若您想要自己定制的话,您可以从XML布局向PatternLockView添加各种属性。
app:dotCount="3" // 更改行(或列)
app:dotNormalSize="12dp" // 更改正常状态
app:dotSelectedSize="24dp" // 更改选定状态
app:pathWidth="4dp" // 更改路径
app:aspectRatioEnabled="true" // 设置视图是否应该遵循自定义宽高比
app:aspectRatio="square" // 设置在“square”,“width_bias”,“height_bias”
app:normalStateColor="@color/white" // 设置正常状态下图案视图的颜色
app:correctStateColor="@color/primary" // 将图案视图的颜色设置为正确状态
app:wrongStateColor="@color/pomegranate" // 设置错误状态
app:dotAnimationDuration="200" // 更改动画点
app:pathEndAnimationDuration="100" // 更改路径结束动画的持续时间
您还可以以编程方式更改视图的属性,从而对其进行更多控制:
mPatternLockView.setViewMode(PatternLockView.PatternViewMode.CORRECT); // 设置当前视图更多
mPatternLockView.setInStealthMode(true); // 将模式设置为隐藏模式(隐藏模式绘图)
mPatternLockView.setTactileFeedbackEnabled(true); //绘制图案时启用振动反馈
mPatternLockView.setInputEnabled(false); //完全禁用模式锁定视图中的任何输入
mPatternLockView.setDotCount(3);
mPatternLockView.setDotNormalSize((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_dot_size));
mPatternLockView.setDotSelectedSize((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_dot_selected_size));
mPatternLockView.setPathWidth((int) ResourceUtils.getDimensionInPx(this, R.dimen.pattern_lock_path_width));
mPatternLockView.setAspectRatioEnabled(true);
mPatternLockView.setAspectRatio(PatternLockView.AspectRatio.ASPECT_RATIO_HEIGHT_BIAS);
mPatternLockView.setNormalStateColor(ResourceUtils.getColor(this, R.color.white));
mPatternLockView.setCorrectStateColor(ResourceUtils.getColor(this, R.color.primary));
mPatternLockView.setWrongStateColor(ResourceUtils.getColor(this, R.color.pomegranate));
mPatternLockView.setDotAnimationDuration(150);
mPatternLockView.setPathEndAnimationDuration(100);
项目下载地址:https://github.com/aritraroy/PatternLockView