全部产品

输入框

更新时间:2020-06-19 15:11:15

下文分别介绍 mPaaS 提供的 AUInputBoxAUImageInputBoxAUTextCodeInputBox 三个输入框组件。其中,AUImageInputBox 和 AUTextCodeInputBox 继承 AUInputBox。

AUInputBox

AUInputBox 组件包含以下内容:

  • 一个 AUEditText 的文本输入框
  • 一个显示在输入框左侧的标签名
  • 一个输入框获取焦点并且内容不为空时会显示的删除按钮

效果图

依赖

参见 快速开始

接口说明

  1. /**
  2. * 取得 UBB 编码后的字符串
  3. */
  4. public String getUbbStr()
  5. /***
  6. * 设置 emoji 字体大小,单位为 px
  7. */
  8. public void setEmojiSize(int emojiSize)
  9. /***
  10. * 设置是否支持 emoji
  11. */
  12. public void setSupportEmoji(boolean isSupport) {
  13. this.supportEmoji = isSupport;
  14. }
  15. /**
  16. * 设置一个 Formatter 来对输入进行格式化
  17. * 设置完成后对已经输入的文字不会立刻生效,需要等待输入才能有效果
  18. */
  19. public void setTextFormatter(AUFormatter formatter)
  20. /**
  21. * 设置输入文字是否加粗显示
  22. *
  23. * @param isBold true 为加粗,false 为正常
  24. */
  25. public void setApprerance(boolean isBold)
  26. /**
  27. * Set a special listener to be called when an action is performed on the
  28. * text view. This will be called when the enter key is pressed, or when an
  29. * action supplied to the IME is selected by the user. Setting this means
  30. * that the normal hard key event will not insert a newline into the text
  31. * view, even if it is multi-line; holding down the ALT modifier will,
  32. * however, allow the user to insert a newline character.
  33. */
  34. public void setOnEditorActionListener(OnEditorActionListener l)
  35. /**
  36. * Adds a TextWatcher to the list of those whose methods are called whenever
  37. * this TextView's text changes.
  38. */
  39. public void addTextChangedListener(TextWatcher watcher)
  40. /**
  41. * 输入框输入文字后会显示出删除按钮,此处设置删除按钮的点击事件接收对象
  42. */
  43. public void setCleanButtonListener(View.OnClickListener listener)
  44. /**
  45. * 设置输入框文字内容
  46. */
  47. public void setText(CharSequence inputContent)
  48. /**
  49. * 获取文字内容,若文字被格式化,需要调用方处理为需要格式
  50. */
  51. public String getInputedText()
  52. /**
  53. * 获取输入框的 EditText 控件
  54. */
  55. public AUEditText getInputEdit()
  56. /**
  57. * 设置标签文本
  58. * @param title 输入的标签文本
  59. */
  60. public void setInputName(String title)
  61. /**
  62. * 获取输入内容名称(标签名)的控件
  63. */
  64. public AUTextView getInputName()
  65. /**
  66. * 输入内容名称字体大小,单位为 px
  67. */
  68. public void setInputNameTextSize(float textSize)
  69. /**
  70. * 设置输入框字体大小,单位为 px
  71. */
  72. public void setInputTextSize(float textSize)
  73. /**
  74. * 输入内容文字颜色
  75. */
  76. public void setInputTextColor(int textColor)
  77. /**
  78. * 设置输入内容类型
  79. */
  80. public void setInputType(int inputType)
  81. /**
  82. * 设置提示信息
  83. */
  84. public void setHint(String hintString)
  85. /**
  86. * 设置左侧标签图标
  87. */
  88. public void setInputImage(Drawable drawable)
  89. /**
  90. * 获取左侧标签图标
  91. */
  92. public AUImageView getInputImage()
  93. /**
  94. * 设置提示信息颜色
  95. */
  96. public void setHintTextColor(int textColor)
  97. /**
  98. * 设置输入框的最大输入长度
  99. *
  100. * @param maxlength 若参数 <=0,则不进行长度限制
  101. */
  102. public void setMaxLength(int maxlength)
  103. /**
  104. * 获取清除按钮控件
  105. */
  106. public AUIconView getClearButton()
  107. /**
  108. * 获取是否需要显示清除按钮
  109. */
  110. public boolean isNeedShowClearButton() {
  111. return isNeedShowClearButton;
  112. }
  113. /**
  114. * 设置是否需要显示清除按钮,若设置 false,则任何情况下清除按钮都不会显示
  115. */
  116. public void setNeedShowClearButton(boolean isNeedShowClearButton)
  117. /**
  118. * 设置控件的边框风格,包括上、中、下和独立
  119. * 此方法为 AULineGroupItemInterface 接口中的方法
  120. * 当控件结合 LineGroupView 使用时,这个方法会自动被调用到
  121. *
  122. * @param positionStyle,使用 AULineGroupItemInterface 中定义的变量 AULineGroupItemInterface.TOP,CENTER,BOTTOM,NORMAL,LINE,NONE
  123. */
  124. @Override
  125. public void setItemPositionStyle(int positionStyle)
  126. /**
  127. * 获取输入内容类型
  128. */
  129. public int getInputType()

代码示例

  1. <com.alipay.mobile.antui.input.AUInputBox
  2. android:id="@+id/safeInputBox"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. app:listItemType="top"
  6. app:inputName="标签1"
  7. app:inputType="textPassword"
  8. app:inputHint="这个输入框会弹出安全键盘"/>
  9. <com.alipay.mobile.antui.input.AUInputBox
  10. android:layout_width="match_parent"
  11. android:layout_height="wrap_content"
  12. app:listItemType="center"
  13. app:inputName="标签2"
  14. app:inputHint="按提示输入提示"/>
  15. <com.alipay.mobile.antui.input.AUInputBox
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  18. app:listItemType="bottom"
  19. app:inputName="转入金额"
  20. app:inputHint="按提示输入提示"/>
  21. <com.alipay.mobile.antui.input.AUInputBox
  22. android:layout_width="match_parent"
  23. android:layout_height="wrap_content"
  24. android:layout_marginTop="20dp"
  25. app:inputImage="@drawable/image"
  26. app:inputName="转入金额"
  27. app:inputHint="按提示输入提示"/>
  28. <com.alipay.mobile.antui.input.AUInputBox
  29. android:layout_width="match_parent"
  30. android:layout_height="wrap_content"
  31. android:layout_marginTop="20dp"
  32. app:inputHint="按提示输入提示"/>

AUImageInputBox

AUImageInputBox 继承 AUInputBox,包含:

  • 一个显示在右侧的 IconView,可展示图标或 Unicode
  • 一个显示在右侧的 TextView

效果图

依赖

参见 快速开始

接口说明

  1. /**
  2. * 设置最右侧功能按钮背景
  3. * 若设置按钮背景为空,则不会显示功能按钮,保持与 AUInputBox 功能一致
  4. */
  5. public void setLastImgDrawable(Drawable drawable)
  6. /**
  7. * 设置最右侧功能按钮背景
  8. * @param unicode
  9. */
  10. public void setLastImgUnicode(String unicode)
  11. /**
  12. * 设置最右侧图标是否可见
  13. * @param visible
  14. */
  15. public void setLastImgBtnVisible(boolean visible)
  16. /**
  17. * 设置最右侧功能按钮的监听
  18. */
  19. public void setLastImgClickListener(View.OnClickListener l)
  20. /**
  21. * 设置最右侧的文本
  22. * @param lastText
  23. */
  24. public void setLastTextView(String lastText)
  25. /**
  26. * 获取最右边的 TextView
  27. *
  28. * @return 获取最右侧TextView
  29. */
  30. public AUTextView getLastTextView()
  31. /**
  32. * 获取最右边的图标 View
  33. * @return
  34. */
  35. public AUIconView getLastImgBtn()

代码示例

  1. <com.alipay.mobile.antui.input.AUImageInputBox
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:layout_marginTop="20dp"
  5. app:listItemType="top"
  6. app:inputName="姓名"
  7. app:inputHint="收款人姓名"
  8. app:input_rightIconUnicode="@string/iconfont_phone_contact" />
  9. <com.alipay.mobile.antui.input.AUImageInputBox
  10. android:layout_width="match_parent"
  11. android:layout_height="wrap_content"
  12. app:listItemType="center"
  13. app:inputName="卡号"
  14. app:inputHint="收款人储蓄卡号" />
  15. <com.alipay.mobile.antui.input.AUImageInputBox
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  18. app:listItemType="bottom"
  19. app:inputName="银行"
  20. app:inputHint="请选择银行"
  21. app:input_rightIconDrawable="@drawable/table_arrow" />
  22. <com.alipay.mobile.antui.input.AUImageInputBox
  23. android:layout_width="match_parent"
  24. android:layout_height="wrap_content"
  25. android:layout_marginTop="20dp"
  26. app:inputName="金额"
  27. app:inputHint="输入转账金额"
  28. app:input_rightText="限额说明" />

AUTextCodeInputBox

AUTextCodeInputBox 继承 AUInputBox,右侧包含一个发送短信验证码的文本按钮。

效果图

依赖

参见 快速开始

接口说明

  1. /**
  2. * 设置发送按钮点击事件 callback
  3. * @param callback 当用户点击发送按钮时,OnSendCallback.onSend() 方法将被回调
  4. */
  5. public void setOnSendCallback(OnSendCallback callback)
  6. /**
  7. * 当前时间归 0
  8. */
  9. public void currentSecond2Zero()
  10. /**
  11. * 设置当前时间
  12. */
  13. public void setCurrentSecond(int current)
  14. /**
  15. * 获取当前时间
  16. */
  17. public int getCurrentSecond()
  18. /**
  19. * 获取发送按钮
  20. */
  21. public AUButton getSendCodeButton()
  22. /**
  23. * 供业务调用释放 timer
  24. */
  25. public void releaseTimer()
  26. /**
  27. * 按钮开始倒计时
  28. */
  29. public void scheduleTimer()
  30. public interface SendButtonEnableChecker {
  31. public boolean checkIsEnabled();
  32. }
  33. /**
  34. * 此方法会设置检测 SendButton 是否可用的方法
  35. * 若此方法检测按钮不可用,则调用 updateSendButtonEnableStatus 方法时按钮置灰
  36. * 否则按照倒计时自己的逻辑,调用 updateSendButtonEnableStatus 方法时设置可用状态
  37. * 总之,只有所有检查都可用,最后按钮才可用,否则都置灰
  38. */
  39. public void setSendButtonEnableChecker(SendButtonEnableChecker checker)
  40. /**
  41. * 根据 SendButtonEnableChecker 和 CheckCodeSendBox 内部状态更新 SendButton 可用状态
  42. * 只有所有检查都可用,最后按钮才可用,否则都置灰
  43. */
  44. public void updateSendButtonEnableStatus()
  45. /**
  46. * 获取SendResultCallback
  47. */
  48. public SendResultCallback getSendResultCallback()

代码示例

  • XML:

    1. <com.alipay.mobile.antui.input.AUTextCodeInputBox
    2. android:id="@+id/au_textcode_input"
    3. android:layout_width="match_parent"
    4. android:layout_height="wrap_content"
    5. android:layout_marginTop="20dp"/>
  • Java:

  1. final AUTextCodeInputBox textCodeInputBox = (AUTextCodeInputBox) findViewById(R.id.au_textcode_input);
  2. textCodeInputBox.setOnSendCallback(new OnSendCallback() {
  3. @Override
  4. public void onSend(final SendResultCallback callback) {
  5. // 这里rpc请求服务端发送验证码..
  6. boolean resendSmsRpcSuccess = true;
  7. if (resendSmsRpcSuccess) {
  8. // 发送验证码成功,开始倒计时
  9. callback.onSuccess();
  10. // 收到验证码..
  11. Toast.makeText(InputActivity.this, "收到验证码: 123456", Toast.LENGTH_SHORT)
  12. .show();
  13. textCodeInputBox.setText("123456");
  14. Log.d(TAG, "输入的验证码为:" + textCodeInputBox.getInputedText());
  15. } else {
  16. // 发送验证码失败,重新enable发送按钮
  17. callback.onFail();
  18. }
  19. }
  20. });

自定义属性

下表所列的是以上三个组件的自定义属性参数。

属性名 说明 类型
inputName 输入内容名称 string,reference
inputHint 输入框提示内容 string,reference
maxLength 输入内容最大长度 integer
inputType 输入内容类型 enum,取值有 textNormal、textNumber、textDecimal、textPassword
inputImage 输入框左边的图片 reference
listItemType 条目的背景类型 enum,取值有 top、center、bottom、normal、line、none
input_rightIconUnicode 右侧图标 string,reference
input_rightIconDrawable 右侧图片 reference
input_rightText 右侧超链接文本 string,reference