# PatternLockView

**Repository Path**: archermind-ti/PatternLockView

## Basic Information

- **Project Name**: PatternLockView
- **Description**: An easy-to-use, customizable, Material Design ready Pattern Lock view. Porting for HarmonyOS.

源地址：https://github.com/aritraroy/PatternLockView
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-12
- **Last Updated**: 2021-12-20

## Categories & Tags

**Categories**: harmonyos-advanced

**Tags**: None

## README

# PatternLockView


#### 项目介绍

- 编程语言：Java 
- 一个易于使用，可自定义的，Material Design 风格的 图案锁控件

#### 使用效果

![image](resource/pattern_lock_view.gif)

#### 安装教程

方式一

1. 编译 patternlockview 和 patternlockview_reactive
2. 启动 DevEco Studio，将编译好的har包，导入工程目录“entry->libs”下。
3. 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下jar包的引用。
```
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
	……
}
```

在sdk4，DevEco Studio2.1 beta2下项目可直接运行
如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，
并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

方式二

在build.gradle文件中添加依赖：

```gradle
dependencies {
	......
    implementation 'com.gitee.archermind-ti:patternlockview:1.0.0-beta'
    implementation 'com.gitee.archermind-ti:patternlockview-reactive:1.0.0-beta'
}
```



#### 使用说明

1. 在布局中使用 PatternLockView

  ```xml
  <com.andrognito.patternlockview.PatternLockView
      ohos:id="$+id:patter_lock_view"
      ohos:height="280vp"
      ohos:width="280vp"/>
  ```

  这足以使View呈现在布局中。 但是您肯定希望添加一个 Listener 来监听图案的更改。 

2. 在代码中获取对象并添加一个 listener，

   ```java
   mPatternLockView = (PatternLockView) findViewById(R.id.pattern_lock_view);
   mPatternLockView.addPatternLockListener(mPatternLockViewListener);
   ```

   像下面这样实现 listener，

   ```java
   private PatternLockViewListener mPatternLockViewListener = new PatternLockViewListener() {
       @Override
       public void onStarted() {
           HiLog.debug(LABEL, "Pattern drawing started");
       }
   
       @Override
       public void onProgress(List<PatternLockView.Dot> progressPattern) {
           HiLog.debug(LABEL, "Pattern progress: " +
                       PatternLockUtils.patternToString(mPatternLockView, progressPattern));
       }
   
       @Override
       public void onComplete(List<PatternLockView.Dot> pattern) {
           HiLog.debug(LABEL, "Pattern complete: " +
                       PatternLockUtils.patternToString(mPatternLockView, pattern));
       }
   
       @Override
       public void onCleared() {
           HiLog.debug(LABEL, "Pattern has been cleared");
       }
   };
   ```

   就是这样！您的PatternLockView已准备就绪。您可能还希望在不需要时删除监听器，

   ```java
   removePatternLockListener(mPatternLockViewListener);
   ```

3. (可选: ReactiveX Interface)

   对于 RxJava 的粉丝，该库支持 RxJava 2 的视图绑定。 您可以订阅此 view 以获取图案更改的流。 

   ```java
   RxPatternLockView.patternChanges(mPatternLockView).subscribe(new Consumer<PatternLockCompoundEvent>() {
       @Override
       public void accept(PatternLockCompoundEvent event) throws Exception {
           if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_STARTED) {
               HiLog.debug(LABEL,"Pattern drawing started");
           } else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_PROGRESS) {
               HiLog.debug(LABEL,"Pattern progress: " +
                           PatternLockUtils.patternToString(mPatternLockView, event.getPattern()));
           } else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_COMPLETE) {
               HiLog.debug(LABEL,"Pattern complete: " +
                           PatternLockUtils.patternToString(mPatternLockView, event.getPattern()));
           } else if (event.getEventType() == PatternLockCompoundEvent.EventType.PATTERN_CLEARED) {
               HiLog.debug(LABEL,"Pattern has been cleared");
           }
       }
   });
   ```

   如果您对获取复合事件不感兴趣，则应订阅 patternComplete（）以及 patternProgress（）以获取特定的更新。

#### 自定义

您可以使用几个自定义选项来完全更改此 View 的外观和功能，以满足您的需求。 

#####  XML 

您可以从XML布局向PatternLockView添加各种属性。 

```xml
app:dotCount="3"                                        // Change the no.of dots in a row (or column)
app:dotNormalSize="12vp"                                // Change the size of the dots in normal state
app:dotSelectedSize="24vp"                              // Change the size of the dots in selected state
app:pathWidth="4vp"                                     // Change the width of the path
app:aspectRatioEnabled="true"                           // Set if the view should respect custom aspect ratio
app:aspectRatio="square"                                // Set between "square", "width_bias", "height_bias"
app:normalStateColor="$color:white"                     // Set the color of the pattern view in normal state
app:correctStateColor="$color:primary"                  // Set the color of the pattern view in correct state
app:wrongStateColor="$color:pomegranate"                // Set the color of the pattern view in error state     
app:dotAnimationDuration="200"                          // Change the duration of the animating dots
app:pathEndAnimationDuration="100"                      // Change the duration of the path end animaiton
```

##### JAVA

您还可以以编程方式更改 View 的属性，从而对其进行更多控制。 

```java
mPatternLockView.setViewMode(PatternLockView.PatternViewMode.CORRECT);	// Set the current viee more 
mPatternLockView.setInStealthMode(true);	// Set the pattern in stealth mode (pattern drawing is hidden)
mPatternLockView.setTactileFeedbackEnabled(true);	// Enables vibration feedback when the pattern is drawn
mPatternLockView.setInputEnabled(false);	// Disables any input from the pattern lock view completely

mPatternLockView.setDotCount(3);
mPatternLockView.setDotNormalSize((int) ResourceUtils.getDimensionInPx(this,
        ResourceTable.Float_pattern_lock_dot_size));
mPatternLockView.setDotSelectedSize((int) ResourceUtils.getDimensionInPx(this,
        ResourceTable.Float_pattern_lock_dot_selected_size));
mPatternLockView.setPathWidth((int) ResourceUtils.getDimensionInPx(this,
        ResourceTable.Float_pattern_lock_path_width));
mPatternLockView.setAspectRatio(PatternLockView.AspectRatio.ASPECT_RATIO_HEIGHT_BIAS); 
mPatternLockView.setNormalStateColor(ResourceUtils.getColor(this, ResourceTable.Color_white));
mPatternLockView.setCorrectStateColor(ResourceUtils.getColor(this, ResourceTable.Color_primary));
mPatternLockView.setWrongStateColor(ResourceUtils.getColor(this, ResourceTable.Color_pomegranate));
mPatternLockView.setDotAnimationDuration(150);
mPatternLockView.setPathEndAnimationDuration(100);
```

#### 缺失功能

1. 库本身不支持转屏前后状态保存恢复，需在实际app中自行保存恢复。

#### 版本迭代


- v1.0.0

#### 版权和许可信息

- Apache Licence

```
Copyright 2017 aritraroy

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```