Android带预览效果的手势解锁

Github 地址：BmPatternLockView

先来看一下效果图：

手势解锁的控件采用开源项目：PatternLockView。

在此基础上增加了预览图。预览的使用也非常简单。

使用方式

导入依赖

dependencies {
    compile 'com.github.bmqb:BmPatternLockView:0.0.8'
}

第二步，先在布局定义：

<com.bmqb.patternlockview.PatternPreviewView
   android:id="@+id/preview_view"
   android:layout_width="70dp"
   android:layout_height="70dp"
   app:pDotNormalSize="6dp"/>

最后在合适的地方调用状态设置函数：

for (PatternLockView.Dot dot : pattern) {
   selected[dot.getRow()][dot.getColumn()] = true;
}
mPatternPreview.setSelectedDots(selected);

预览图分析

图中的每个点使用 PatternLockView 中封装的 DotState 来描述。

private PatternLockView.DotState[][] mDotStates;

可自定义三种属性：

private static int sDotCount = 3;//点的个数
private int mDotNormalSize;     //圆点的尺寸
private int mNormalStateColor;  //初始状态颜色
private int mSelectedStateColor;//选中状态颜色

onDraw 的过程也比较简单，通过 DotState 保存的参数得到点的大小，centerX 来确定点的位置，使用 drawCircle 来画圆。

protected void onDraw(Canvas canvas) {
    for (int i = 0; i < sDotCount; i++) {
        float centerY = getCenterYForRow(i);
        for (int j = 0; j < sDotCount; j++) {
            PatternLockView.DotState dotState = mDotStates[i][j];
            float centerX = getCenterXForColumn(j);
            float size = dotState.mSize * dotState.mScale;
            float translationY = dotState.mTranslateY;
            drawCircle(canvas, (int) centerX, (int) centerY + translationY, size,dotState.mAlpha,mSelectedDots[i][j]);
        }
    }
}

手势图的更多使用方式，请到项目的 Github 上查看。