1
1
# PinView
2
2
3
- Provides a widget for enter PIN/OTP/password etc.
3
+ Provides a widget for enter PIN/OTP/password etc on Android 4.1+ (API 16) .
4
4
5
5
<p ><img src =" screenshots/styles.png " width =" 35% " />
6
6
<img src =" screenshots/input.gif " width =" 35% " /></p >
@@ -15,7 +15,7 @@ repositories {
15
15
}
16
16
17
17
dependencies {
18
- compile 'com.chaos.view:pinview:1.2 .0'
18
+ compile 'com.chaos.view:pinview:1.3 .0'
19
19
}
20
20
```
21
21
@@ -38,6 +38,9 @@ Add PinView in your layout.
38
38
android : padding =" @dimen/common_padding"
39
39
android : textColor =" @color/text_colors"
40
40
android : textSize =" 18sp"
41
+ android : cursorVisible =" true"
42
+ app : cursorColor =" @color/line_selected"
43
+ app : cursorWidth =" 2dp"
41
44
app : itemCount =" 5"
42
45
app : itemHeight =" 48dp"
43
46
app : itemRadius =" 4dp"
@@ -55,18 +58,22 @@ PinView pinView = (PinView) findViewById(R.id.secondPinView);
55
58
pinView. setTextColor(
56
59
ResourcesCompat . getColor(getResources(), R . color. colorAccent, getTheme()));
57
60
pinView. setTextColor(
58
- ResourcesCompat . getColorStateList(getResources(), R . color. line_colors , getTheme()));
61
+ ResourcesCompat . getColorStateList(getResources(), R . color. text_colors , getTheme()));
59
62
pinView. setLineColor(
60
63
ResourcesCompat . getColor(getResources(), R . color. colorPrimary, getTheme()));
61
64
pinView. setLineColor(
62
- ResourcesCompat . getColorStateList(getResources(), R . color. text_colors , getTheme()));
65
+ ResourcesCompat . getColorStateList(getResources(), R . color. line_colors , getTheme()));
63
66
pinView. setItemCount(4 );
64
67
pinView. setItemHeight(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_size));
65
68
pinView. setItemWidth(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_size));
66
69
pinView. setItemRadius(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_radius));
67
70
pinView. setItemSpacing(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_spacing));
68
71
pinView. setLineWidth(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_item_line_width));
69
72
pinView. setAnimationEnable(true );// start animation when adding text
73
+ pinView. setCursorVisible(false );
74
+ pinView. setCursorColor(
75
+ ResourcesCompat . getColor(getResources(), R . color. line_selected, getTheme()));
76
+ pinView. setCursorWidth(getResources(). getDimensionPixelSize(R . dimen. pv_pin_view_cursor_width));
70
77
```
71
78
72
79
### Step 2:
@@ -90,18 +97,34 @@ or use the `PinWidget.PinView` style.
90
97
style =" @style/PinWidget.PinView" />
91
98
```
92
99
100
+ ### Step 3 (Optional):
101
+
102
+ To highlight current item,
103
+
104
+ add ` android:state_selected="true" ` to ` app:lineColor `
105
+
106
+ ``` xml
107
+ <selector xmlns : android =" http://schemas.android.com/apk/res/android" >
108
+ <!-- Use for the item to be input, set the value as the default to disable it -->
109
+ <item android : color =" @color/line_selected" android : state_selected =" true" />
110
+ <item android : color =" @color/line_focused" android : state_focused =" true" />
111
+ <item android : color =" @color/line_default" />
112
+ </selector >
113
+ ```
114
+
115
+ or add ` android:cursorVisible="true" ` .
116
+
93
117
## Attributes
94
118
95
- * ** itemSize** , @deprecated use itemWidth or itemHeight instead.
96
- * ** borderWidth** , @deprecated use lineWidth instead.
97
- * ** borderColor** , @deprecated use lineColor instead.
98
119
* ** itemCount** , the length of your pin code.
99
120
* ** itemWidth** , the width of each item.
100
121
* ** itemHeight** , the height of each item.
101
122
* ** itemSpacing** , the spacing between two items.
102
- * ** lineWidth** , the line(border) width.
103
- * ** lineColor** , the line(border) colors.
123
+ * ** lineWidth** , the line (border) width.
124
+ * ** lineColor** , the line (border) colors.
104
125
* ** viewType** , the view type of PinView, currently this will be one of ` rectangle ` or ` line ` .
126
+ * ** cursorColor** , the cursor color.
127
+ * ** cursorWidth** , the width of cursor.
105
128
106
129
## Thanks
107
130
0 commit comments