PinView

提供一个用于在 Android 4.1+（API 16）上输入 PIN/OTP/密码等的小部件。

依赖

JCenter(已弃用)

repositories {
    maven {
        jcenter()
    }
}

dependencies {
   implementation 'com.chaos.view:pinview:1.4.4'
}

Maven 中央仓库

repositories {
    maven {
        mavenCentral()
    }
}

dependencies {
   implementation 'io.github.chaosleung:pinview:1.4.4'
}

请注意，MavenCentral 使用 io.github.chaosleung 作为组 ID

用法

PinView 继承自 EditText，这意味着您可以使用 EditText 的所有 API。

步骤 1：

在您的布局中添加 PinView。

XML

<com.chaos.view.PinView
    android:id="@+id/firstPinView"
    style="@style/PinWidget.PinView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:cursorVisible="true"
    android:hint="Hint."
    android:inputType="text"
    android:itemBackground="@mipmap/ic_launcher"
    android:padding="@dimen/common_padding"
    android:textColor="@color/text_colors"
    android:textSize="18sp"
    android:textStyle="bold"
    app:cursorColor="@color/line_selected"
    app:cursorWidth="2dp"
    app:hideLineWhenFilled="true"
    app:itemCount="5"
    app:itemHeight="48dp"
    app:itemRadius="4dp"
    app:itemSpacing="0dp"
    app:itemWidth="48dp"
    app:lineColor="@color/line_colors"
    app:lineWidth="2dp"
    app:viewType="rectangle" />

Java

final PinView pinView = findViewById(R.id.secondPinView);
pinView.setTextColor(
        ResourcesCompat.getColor(getResources(), R.color.colorAccent, getTheme()));
pinView.setTextColor(
        ResourcesCompat.getColorStateList(getResources(), R.color.text_colors, getTheme()));
pinView.setLineColor(
        ResourcesCompat.getColor(getResources(), R.color.colorPrimary, getTheme()));
pinView.setLineColor(
        ResourcesCompat.getColorStateList(getResources(), R.color.line_colors, getTheme()));
pinView.setItemCount(4);
pinView.setItemHeight(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_size));
pinView.setItemWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_size));
pinView.setItemRadius(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_radius));
pinView.setItemSpacing(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_spacing));
pinView.setLineWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_item_line_width));
pinView.setAnimationEnable(true);// start animation when adding text
pinView.setCursorVisible(false);
pinView.setCursorColor(
        ResourcesCompat.getColor(getResources(), R.color.line_selected, getTheme()));
pinView.setCursorWidth(getResources().getDimensionPixelSize(R.dimen.pv_pin_view_cursor_width));
pinView.addTextChangedListener(new TextWatcher() {...});
pinView.setItemBackgroundColor(Color.BLACK);
pinView.setItemBackground(getResources().getDrawable(R.drawable.item_background));
pinView.setItemBackgroundResources(R.drawable.item_background);
pinView.setHideLineWhenFilled(false);
pinView.setPasswordHidden(false);
pinView.setTransformationMethod(new PasswordTransformationMethod());

步骤 2：

在您的主题中指定 pinViewStyle，

<style name="AppTheme" parent="Theme.AppCompat.Light">
    ...
    <item name="pinViewStyle">@style/PinWidget.PinView</item>
</style>

或使用 PinWidget.PinView 样式。

<com.chaos.view.PinView
    android:id="@+id/pinView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/PinWidget.PinView" />

步骤 3（可选）：

如需高亮当前项，请使用“selected”状态，换句话说，

在 app:lineColor 中添加 android:state_selected="true"

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Use for the item to be input, set the value as the default to disable it -->
    <item android:color="@color/line_selected" android:state_selected="true" />
    <item android:color="@color/line_focused" android:state_focused="true" />
    <item android:color="@color/line_default" />
</selector>

或添加 android:cursorVisible="true"。

属性

itemCount，PIN 码的长度。
itemWidth，每个输入项的宽度。
itemHeight，每个输入项的高度。
itemSpacing，两个输入项之间的间距。
lineWidth，线条（边框）宽度。
lineColor，线条（边框）颜色。
viewType，PinView 的视图类型，目前可选值为 rectangle、line 或 none。
cursorVisible，是否显示光标。
cursorColor，光标颜色。
cursorWidth，光标的宽度。
itemBackground，输入项的背景。
hideLineWhenFilled，指定输入文本后线条（边框）是否应隐藏或可见。

致谢

灵感来源于 EthanCo 的 PasswordInput

许可证

基于 Apache 许可证 2.0 版（以下简称“许可证”）授权；
除非遵守许可证，否则您不得使用此文件。
您可以在以下网址获取许可证副本：

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

除非适用法律要求或书面同意，否则根据许可证分发的软件
是按“原样”分发的，不提供任何明示或暗示的担保或条件。
有关许可证所规定的权限和限制，请参阅许可证。