All Products
Search
Document Center

Input box

Last Updated: May 25, 2021

This topic describes the AUInputBox, AUImageInputBox, and AUTextCodeInputBox input box components provided by mPaaS. The AUImageInputBox and AUTextCodeInputBox components inherit the AUInputBox component.

AUInputBox

The AUInputBox component contains the following:

  • An AUEditText text input box
  • A tag name displayed on the left of the input box
  • A Delete button that is displayed when an input box gets focus and the content is not empty

Sample image

Dependency

See Quick start.

API description

 
  1. /**
  2. * Get the string after UBB encoding.
  3. */
  4. public String getUbbStr()
  5. /***
  6. * Set the emoji font size, in pixels(px).
  7. */
  8. public void setEmojiSize(int emojiSize)
  9. /***
  10. * Specify whether support to emoji.
  11. */
  12. public void setSupportEmoji(boolean isSupport) {
  13. this.supportEmoji = isSupport;
  14. }
  15. /**
  16. * Set a Formatter to format the input.
  17. * After the setting is completed, the text that has been entered does not take effect immediately. The effects will show upon subsequent text input.
  18. */
  19. public void setTextFormatter(AUFormatter formatter)
  20. /**
  21. * Specify whether the input text is bold.
  22. *
  23. * @param isBold The value true indicates that the text is bold and the value false indicates that the text is normal.
  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. * The Delete button will be displayed after entering text in the input box, and setting the object received by click event of the delete button here.
  42. */
  43. public void setCleanButtonListener(View.OnClickListener listener)
  44. /**
  45. * Set the text content of the input box.
  46. */
  47. public void setText(CharSequence inputContent)
  48. /**
  49. * Get the text content. If the text is formatted, the calling party needs to process the text to meet the required format.
  50. */
  51. public String getInputedText()
  52. /**
  53. * The EditText control for getting the input box.
  54. */
  55. public AUEditText getInputEdit()
  56. /**
  57. * Set the tag text.
  58. * @param title The input tag text.
  59. */
  60. public void setInputName(String title)
  61. /**
  62. * The control for getting the input content name (tag name).
  63. */
  64. public AUTextView getInputName()
  65. /**
  66. * The font size of the input content name, in pixels(px).
  67. */
  68. public void setInputNameTextSize(float textSize)
  69. /**
  70. * Set the font size of the input box, in pixels(px).
  71. */
  72. public void setInputTextSize(float textSize)
  73. /**
  74. * The text color for the input content.
  75. */
  76. public void setInputTextColor(int textColor)
  77. /**
  78. * Set the input content type.
  79. */
  80. public void setInputType(int inputType)
  81. /**
  82. * Set prompt message.
  83. */
  84. public void setHint(String hintString)
  85. /**
  86. * Set the left tag icon.
  87. */
  88. public void setInputImage(Drawable drawable)
  89. /**
  90. * Get the left tag icon.
  91. */
  92. public AUImageView getInputImage()
  93. /**
  94. * Set the color of the prompt message.
  95. */
  96. public void setHintTextColor(int textColor)
  97. /**
  98. * Set the maximum input length of the input box.
  99. *
  100. * @param maxlength If the value is 0 or smaller, the length is not restricted.
  101. */
  102. public void setMaxLength(int maxlength)
  103. /**
  104. * The control for getting the Clear button.
  105. */
  106. public AUIconView getClearButton()
  107. /**
  108. * Get the setting of whether to show the Clear button.
  109. */
  110. public boolean isNeedShowClearButton() {
  111. return isNeedShowClearButton;
  112. }
  113. /**
  114. * Specify whether to show the Clear button. If the parameter is set to false, the Clear button will not be showed in any case.
  115. */
  116. public void setNeedShowClearButton(boolean isNeedShowClearButton)
  117. /**
  118. * Set the border style of the control, including upper, middle, lower, and independent.
  119. * This method is in the AULineGroupItemInterface API.
  120. * This method is automatically called when the control is used with LineGroupView.
  121. *
  122. * @param positionStyle Use the variables defined in AULineGroupItemInterface: TOP, CENTER, BOTTOM, NORMAL, LINE, and NONE.
  123. */
  124. @Override
  125. public void setItemPositionStyle(int positionStyle)
  126. /**
  127. * Get the input content type.
  128. */
  129. public int getInputType()

Code sample

 
  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 inherits AUInputBox and contains the following:

  • A IconView on the right to show icons or Unicode
  • A TextView on the right

Sample image

Dependency

See Quick start.

API description

 
  1. /**
  2. * Set the background of the rightmost functional button.
  3. * If the background of the Set button is empty, the functional button will not be showed, which is consistent with the AUInputBox function.
  4. */
  5. public void setLastImgDrawable(Drawable drawable)
  6. /**
  7. * Set the background of the rightmost functional button.
  8. * @param unicode
  9. */
  10. public void setLastImgUnicode(String unicode)
  11. /**
  12. * Specify whether the rightmost icon is visible.
  13. * @param visible
  14. */
  15. public void setLastImgBtnVisible(boolean visible)
  16. /**
  17. * Set listening on the rightmost functional button.
  18. */
  19. public void setLastImgClickListener(View.OnClickListener l)
  20. /**
  21. * Set the rightmost text.
  22. * @param lastText
  23. */
  24. public void setLastTextView(String lastText)
  25. /**
  26. * Get the rightmost TextView.
  27. *
  28. * @return Get the rightmost TextView.
  29. */
  30. public AUTextView getLastTextView()
  31. /**
  32. * Get the rightmost IconView.
  33. * @return
  34. */
  35. public AUIconView getLastImgBtn()

Code sample

 
  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 inherits AUInputBox and contains a text button used for sending the SMS verification code on the right.

Sample image

Dependency

See Quick start.

API description

 
  1. /**
  2. * Set the callback for the Send button clicking event.
  3. * @param callback When a user clicks the Send button, the OnSendCallback.onSend() method will be called back.
  4. */
  5. public void setOnSendCallback(OnSendCallback callback)
  6. /**
  7. * Reset the current time to zero.
  8. */
  9. public void currentSecond2Zero()
  10. /**
  11. * Set the current time.
  12. */
  13. public void setCurrentSecond(int current)
  14. /**
  15. * Get the current time.
  16. */
  17. public int getCurrentSecond()
  18. /**
  19. * Get the Send button.
  20. */
  21. public AUButton getSendCodeButton()
  22. /**
  23. * The release timer for business calling.
  24. */
  25. public void releaseTimer()
  26. /**
  27. * Start countdown for the button.
  28. */
  29. public void scheduleTimer()
  30. public interface SendButtonEnableChecker {
  31. public boolean checkIsEnabled();
  32. }
  33. /**
  34. * This method sets the method used to detect whether SendButton is available.
  35. * If this method detects that the button is unavailable, the button is dimmed when the updateSendButtonEnableStatus method is called.
  36. * Otherwise, the button is available when the updateSendButtonEnableStatus method is called according to the countdown logic.
  37. * The button is available only when all checks are available, or it will be dimmed.
  38. */
  39. public void setSendButtonEnableChecker(SendButtonEnableChecker checker)
  40. /**
  41. * Update the SendButton availability state based on the internal state of SendButtonEnableChecker and CheckCodeSendBox.
  42. * The button is available only when all checks are available, or it will be dimmed.
  43. */
  44. public void updateSendButtonEnableStatus()
  45. /**
  46. * Get SendResultCallback.
  47. */
  48. public SendResultCallback getSendResultCallback()

Sample code

  • 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. // The RPC request to the server for a verification code.
  6. boolean resendSmsRpcSuccess = true;
  7. if (resendSmsRpcSuccess) {
  8. // Start countdown when the verification code is successfully sent.
  9. callback.onSuccess();
  10. // The verification code is received.
  11. Toast.makeText(InputActivity.this, "收到验证码: 123456", Toast.LENGTH_SHORT)
  12. .show();
  13. textCodeInputBox.setText("123456");
  14. Log.d(TAG, "输入的验证码为: " + textCodeInputBox.getInputedText());
  15. } else {
  16. // Failed to send the verification code. Enable the Send button again.
  17. callback.onFail();
  18. }
  19. }
  20. });

Custom properties

The following table describes custom attribute parameters of the three components.

Property Description Type
inputName The input content name. String, Reference
inputHint The prompt content of the input box. String, Reference
maxLength The maximum length of the input content. Integer
inputType The input content type. Enum, including textNormal, textNumber, textDecimal, and textPassword
inputImage The image to the left of the input box. Reference
listItemType The background type of an item. Enum, including top, center, bottom, normal, line, and none
input_rightIconUnicode The right-side icon. String, Reference
input_rightIconDrawable The right-side image. Reference
input_rightText The right-side hyperlink text. String, Reference