vehicle-keyboard-android

Introduction: 停车王车牌号码专用键盘-Android
More: Author   ReportBugs   
Tags:

VehicleKeyboard是停车王品牌的各端产品线的基础组件,专为提高中国车牌号码输入速度而定制开发的专用键盘组件。 为停车行业的用户输入车牌号码,提供非常便捷有效的输入方式。

包括以下三个项目:

  • Android Android 项目,为 Android 客户端定制包括输入组件、键盘组件及相关控制逻辑实现;
  • iOS iOS 客户端项目,为 iOS 客户端定制包括输入组件、键盘组件及相关控制逻辑实现;
  • JavaScript(Vue.js) JavaScript(Vue.js)项目,为 H5 页面定制,包括 Web、微信、支付宝等,同样包括输入组件、键盘组件及相关控制逻辑实现

零、项目主页

Android 版本

iOS 版本

JavaScript Vue.js 版本

兼容性声明

注意: 当前版本 v0.5,已修改为 Java 原生实现键盘逻辑,不再使用 Javascript。项目包结构已发生重大修改,不再向 0.4 及以下版本兼容。

Gif

车牌号码规则

中国车牌号码编码规则全解

支持输入车牌类型

支持中华人民共和国现行绝大部分车牌号码类型:

  1. 民用蓝牌、黄牌;
  2. 新能源车牌;
  3. 港澳车牌;
  4. 武警车牌;
  5. 军队车牌;
  6. 新旧大使馆车牌;
  7. 新旧领事馆车牌;
  8. 民航车牌;

一、添加到项目

增加仓库地址:

repositories {
    jcenter()
}

添加库依赖:

    implementation 'com.parkingwang:keyboard:0.5.3'
    // OR
    compile 'com.parkingwang:keyboard:0.5.3'

二、使用组件

2.1 车牌号码输入组件 InputView

InputView 是用于手动输入车牌的组件,提供 7-8 个用户可选择修改的输入框,如上图所示。

在 XML 中放置输入组件:


    <com.parkingwang.keyboard.view.InputView
        android:id="@+id/input_view"
        app:pwkInputTextSize="22sp"
        android:layout_width="match_parent"
        android:layout_height="60dp"/>

2.2 车牌号码键盘组件 - KeyboardView

KeyboardView 是车牌输入键盘组件,提供按车牌类型显示一定规则的键盘布局供用户点击,如上图所示。

在 XML 中放置键盘组件:

    <com.parkingwang.keyboard.view.InputView
            android:id="@+id/input_view"
            android:layout_margin="6dp"
            app:pwkInputTextSize="22sp"
            android:layout_width="match_parent"
            android:layout_height="60dp"/>

2.3 输入框和键盘控制器 - KeyboardInputController

在代码中绑定输入组件与键盘的关联:

使用弹出键盘

详见 MainActivity 的演示代码。见地址:

// Init Views

// 创建弹出键盘
mPopupKeyboard = new PopupKeyboard(this);
// 弹出键盘内部包含一个 KeyboardView,在此绑定输入两者关联。
mPopupKeyboard.attach(mInputView, this);

// KeyboardInputController 提供一个默认实现的新能源车牌锁定按钮
mPopupKeyboard.getController()
        .setDebugEnabled(true)
        .bindLockTypeProxy(new KeyboardInputController.ButtonProxyImpl(lockTypeButton) {
            @Override
            public void onNumberTypeChanged(boolean isNewEnergyType) {
                super.onNumberTypeChanged(isNewEnergyType);
                if (isNewEnergyType) {
                    lockTypeButton.setTextColor(getResources().getColor(android.R.color.holo_green_light));
                } else {
                    lockTypeButton.setTextColor(getResources().getColor(android.R.color.black));
                }
            }
        });

不弹出键盘,直接显示


// 使用 KeyboardInputController 来关联
mController = KeyboardInputController
                    .with(mKeyboardView, inputView);

mController.useDefaultMessageHandler();

三、键盘功能特性设置

3.1 设置是否显示“确定”键

根据需要,你可以通过调用 KeyboardEngine 的setHideOKKey(boolean)来设置是否隐藏“确定”键。

mPopupKeyboard.getKeyboardEngine().setHideOKKey(mHideOKKey);

3.2 优先显示周边省份

根据需要,在不同地区的用户,输入车牌号码时,可以根据当地地理位置,显示周边省份的简称。 获取地理位置需要的定位功能,需要你外部调用定位 API,获取到对应的省份名称后,设置到 KeyboardEngine 中。 使用如下代码:

mPopupKeyboard.getKeyboardEngine().setLocalProvinceName("广东省");

3.3 设置键盘按下时的气泡:

  1. 正确地显示气泡

由于顶层按键的气泡会显示到键盘之外,因此需要键盘所在的父布局增加以下属性(如果气泡范围超出父布局,则需往上递归设置):

    android:clipChildren="false"
  1. 不显示气泡
    mKeyboardView.setShowBubble(false);

四、键盘样式设置

4.1 设置键盘按钮文字大小

在 Java 代码中添加以下设置:

    mKeyboardView.setCNTextSize(float); //设置中文字体大小
    mKeyboardView.setENTextSize(float); //设置英文字母或数字字体大小

4.2 设置键盘主题颜色

在 colors.xml 中覆盖以下颜色值以修改键盘主题色

    <color name="pwk_primary_color">#418AF9</color>
    <!--确定按键按下时的颜色-->
    <color name="pwk_primary_dark_color">#3A7CE0</color>

4.3 设置输入组件字体大小:

    <com.parkingwang.vehiclekeyboard.view.InputView
            app:pwkInputTextSize="22sp"
            ..../>

4.4 设置输入组件的样式

默认提供两种输入组件样式:

4.4.1. 混合紧排样式(默认样式) - MIXED

    <!--输入框按键样式,最左最右键样式设置-->
    <style name="PWKInputItemStyleKey" parent="PWKInputItemStyle_BORDER_KEY"/>
    <style name="PWKInputItemStyleLeft" parent="PWKInputItemStyle_BORDER_LEFT"/>
    <style name="PWKInputItemStyleRight" parent="PWKInputItemStyle_BORDER_RIGHT"/>
    <!--输入框外部样式-->
    <style name="PWKInputViewStyle" parent="PWKInputViewStyle_MIXED"/>

4.4.2. 分隔块状样式 - DIVIDED

    <!--输入框按键样式,最左最右键样式设置-->
    <style name="PWKInputItemStyleKey" parent="PWKInputItemStyle_FILLED_KEY"/>
    <style name="PWKInputItemStyleLeft" parent="PWKInputItemStyle_FILLED_LEFT"/>
    <style name="PWKInputItemStyleRight" parent="PWKInputItemStyle_FILLED_RIGHT"/>
    <!--输入框外部样式-->
    <style name="PWKInputViewStyle" parent="PWKInputViewStyle_DIVIDED"/>

在项目的styles.xml中覆盖设置以上两种样式配置,可以切换显示不同的样式。可参考 App 的配置代码。

4.5 如何修改自己的样式

覆盖PWKInputItemStyleKey / PWKInputItemStyleLeft / PWKInputItemStyleRightPWKInputViewStyle来实现。

  • PWKInputItemStyleKey 控制输入组件内每个输入框的按键 Button 样式,样式作用于每个 Button;
  • PWKInputItemStyleLeft 控制输入组件内最左侧输入框的按键 Button 样式,样式作用于一个 Button;
  • PWKInputItemStyleRight 控制输入组件内最右侧输入框的按键 Button 样式,样式作用于一个 Button;
  • PWKInputViewStyle 控制输入组件的整体样式,作用于 LinearLayout;

4.5.1 InputView 的样式选项

通过覆盖以下样式配置,可以修改默认样式


    <!--输入框外边框宽度-->
    <dimen name="pwk_input_view_border_width">0.7pt</dimen>
    <!--背景缩进,必须与 pwk_input_view_border_width 保持一致,并且为负值-->
    <dimen name="pwk_input_view_border_width_inset">-0.7pt</dimen>
    <!--输入框分割线的宽度,在混合组件中使用-->
    <dimen name="pwk_input_view_divider_split_line">@dimen/pwk_input_view_border_width</dimen>
    <!--输入框分割空间的距离,在分离组件样式中使用-->
    <dimen name="pwk_input_view_divider_split_space">5dp</dimen>
    <!--输入框选中状态的边框宽度,在混合组件中使用-->
    <dimen name="pwk_input_item_highlight_border_width">1.2pt</dimen>
    <!--输入框圆角-->
    <dimen name="pwk_input_item_radius">4dp</dimen>
    <!--输入框字体大小-->
    <dimen name="pwk_input_item_text_size">24sp</dimen>

五、停车王车牌键盘布局切换逻辑

5.1 DOC 文档

DOC 文档

5.2 停车王车牌键盘布局切换逻辑

停车王车牌键盘布局切换逻辑的思维导图,说明了当前版本的键盘布局的切换,以及“更多”、“返回”按钮的切换逻辑。

停车王车牌键盘布局切换逻辑

百度脑图地址

六、版本更新

v0.5 2018.06.15

说明:在此版本中,发生架构和项目结构的重大修改,不向下兼容,请按照当前版本的使用说明来修改;

  • 使用 Java 原生键盘引擎,替代原 JavaScript。
  • 删除 KeyboardType 类型,不再需要配置键盘类型,本版本支持所有类型车牌;
  • 增加全类型车牌支持,增加“更多”和“返回”来切换键盘布局;
  • 优化 InputView 内部逻辑,简化其实现代码;
  • 优化整体操作性能,键盘输入更多流畅了;
  • 增加周边省份功能设定;

v0.4.0 2018.0424

说明:在此版本中,如果使用com.parkingwang.vehiclekeyboard.support.KeyboardInputController包的相关类, 会报告 Deprecated,使用com.parkingwang.keyboard.KeyboardInputController包的类即可。

  • 更新 KeyboardInputController 及相关类的包结构;
  • 增加 Controller 各个 Set 和 Add 接口的 NullPointer 检查;

v0.3-ALPHA 2017.1120

  • 修复 Texts 关于字符判断的问题;
  • 更新 Gradle 版本为 3.3.0;
  • 更新 JS 文件(JS 压缩);
  • 全键盘模式下,增加“民航”车牌类型;
  • 修改 KeyboardView 每行键位数的基准为第一行;

v0.2-ALPHA 2017.1113

  • 修改键盘组件主题颜色的控制逻辑,原有的pwk_keyboard_primary_color修改为pwk_primary_color,并作为整个键盘的主题色。
  • 为输入框不同键位的增加控制主题。PWKInputItemStyleKey / PWKInputItemStyleLeft / PWKInputItemStyleRight

v0.1-BETA 2017.1108

  • 完成基础功能,更新文档并公开发布;

Contributors

VehicleKeyboard-Android 由西安艾润物联网技术服务有限公司第一事业部深圳研发中心开发和维护,旨在为停车行业同行进行技术交流和分享。

目前在两位开发者在开发维护,如您有相关问题,可以通过 PullRequest 和 Issues 来提交,也可以通过邮件与我们联系。

  • 陈永佳 联系方式:chenyongjia@parkingwang.com
  • 黄浩杭 联系方式:huanghaohang@parkingwang.com
Support Me
Apps
About Me
Google+: Trinea trinea
GitHub: Trinea