All Products
Search
Document Center

Title bar component

Last Updated: Sep 07, 2021

AUTitleBar provides a title bar with a Back button, title text, a progress bar, a left button (text and icon), and a right button (text and icon).

Sample image

The AUTitleBar control with white background is provided by default.

Dependency

See Quick start.

API description

 
  1. /**
  2. * Set the button drawable.
  3. * @param iconView
  4. * @param resId
  5. */
  6. public void setBtnImage(AUIconView iconView, int resId) ;
  7. /**
  8. * Set the button size and color.
  9. * @param iconView
  10. * @param size
  11. * @param color
  12. */
  13. public void setIconFont(AUIconView iconView, int size, int color);
  14. /**
  15. * Get the Back button.
  16. * @return
  17. */
  18. public AUIconView getBackButton() ;
  19. /**
  20. * Get the left button.
  21. * @return
  22. */
  23. public AURelativeLayout getLeftButton() ;
  24. /**
  25. * Get the right button.
  26. * @return
  27. */
  28. public AURelativeLayout getRightButton() ;
  29. /**
  30. * Get the loading icon.
  31. * @return
  32. */
  33. public AUProgressBar getProgressBar() ;
  34. /**
  35. * Get the title text view.
  36. * @return
  37. */
  38. public AUTextView getTitleText() ;
  39. /**
  40. * Get the title container.
  41. * @return
  42. */
  43. public AURelativeLayout getTitleContainer() ;
  44. /**
  45. * Get the title bar area.
  46. * @return
  47. */
  48. public AURelativeLayout getTitleBarRelative() ;
  49. @Override
  50. public void setBackgroundDrawable(Drawable backgroundDrawable) ;
  51. /**
  52. * Set the progress circular.
  53. * @param progressDrawable
  54. */
  55. public void setProgressBarDrawable(Drawable progressDrawable) ;
  56. /**
  57. * Set the text and style of the title. If you need to use the default text and style, set text, textsize, and textcolor to null or 0.
  58. * @param text
  59. * @param textSize
  60. * @param textColor
  61. */
  62. public void setTitleText(String text, int textSize, int textColor) ;
  63. /**
  64. * Set the title text.
  65. * @param text
  66. */
  67. public void setTitleText(String text) ;
  68. /**
  69. * Set the value of resource, size, and color of the Back button. Keep the default value if the value is null or 0.
  70. * @param drawable
  71. * @param size
  72. * @param color
  73. */
  74. public void setBackBtnInfo(Object drawable, int size, int color);
  75. /**
  76. * Set the resource of the Back button.
  77. * @param drawable
  78. */
  79. public void setBackBtnInfo(Object drawable);
  80. /**
  81. * Set the resource, size, and color of the left button. Keep the default value if the value is null or 0.
  82. * @param drawable
  83. * @param size
  84. * @param color
  85. * @param isText
  86. */
  87. public void setLeftBtnInfo(Object drawable, int size, int color, boolean isText);
  88. /**
  89. * Set the resource of the left button.
  90. * @param drawable
  91. */
  92. public void setLeftButtonIcon(Drawable drawable);
  93. public void setLeftButtonIcon(String unicode);
  94. public void setLeftButtonText(String text);
  95. /**
  96. * Set the color and size of the left button.
  97. * @param size
  98. * @param color
  99. * @param isText
  100. */
  101. public void setLeftButtonFont(int size, int color, boolean isText);
  102. /**
  103. * Set the resource, size, and color of the right button. Keep the default value if the value is null or 0.
  104. * @param drawable
  105. * @param size
  106. * @param color
  107. * @param isText
  108. */
  109. public void setRightBtnInfo(Object drawable, int size, int color, boolean isText) ;
  110. /**
  111. * Set the resource of the right button.
  112. * @param drawable
  113. */
  114. public void setRightButtonIcon(Drawable drawable);
  115. public void setRightButtonIcon(String unicode);
  116. public void setRightButtonText(String text);
  117. /**
  118. * Set the color and size of the right button.
  119. * @param size
  120. * @param color
  121. * @param isText
  122. */
  123. public void setRightButtonFont(int size, int color, boolean isText);
  124. /**
  125. * Make the progress bar start rotation.
  126. */
  127. public void startProgressBar();
  128. /**
  129. * Make the progress bar stop and disappear.
  130. */
  131. public void stopProgressBar() ;
  132. /***
  133. * Default processing of the gradual change during sliding. Use the default value for totalHeight.
  134. * @param currentHeight The current height.
  135. */
  136. public void handleScrollChange(int currentHeight);
  137. /***
  138. * Default processing of the gradual change during sliding.
  139. *
  140. * @param totalHeight The total height.
  141. * @param currentHeight The current height.
  142. */
  143. public void handleScrollChange(int totalHeight, int currentHeight) ;
  144. /**
  145. * Set the pattern color (white) with transparent background.
  146. */
  147. public void setColorWhiteStyle();
  148. /**
  149. * Set the pattern color with white background.
  150. */
  151. public void setColorOriginalStyle();
  152. /**
  153. * Make the Back button not displayed.
  154. */
  155. public void setBackButtonGone();
  156. /**
  157. * Add a search box (input is not allowed) used only for visual adjustment.
  158. * @param search
  159. */
  160. public void setTitle2Search(String search);
  161. /**
  162. * Convert the search box into a title.
  163. */
  164. public void setSearch2Title();
  165. /**
  166. * The font color in the search box is set to black and the background is set to white.
  167. */
  168. public void setSearchColorOriginalStyle();
  169. /**
  170. * The font color in the search box is set to white and the background is set to transparent.
  171. */
  172. public void setSearchColorTransStyle();
  173. /**
  174. * Add a red dot to the left icon.
  175. * @param flagView
  176. */
  177. public void attachFlagToLeftBtn(AUWidgetMsgFlag flagView);
  178. /**
  179. * Add a red dot to the right icon
  180. * @param flagView
  181. */
  182. public void attachFlagToRightBtn(AUWidgetMsgFlag flagView) ;
  183. /**
  184. * Add a red dot to the targetView.
  185. * @param targetView
  186. * @param flagView
  187. */
  188. public void attachFlagView(AURelativeLayout container, View targetView, AUWidgetMsgFlag flagView;

Custom properties

Property Description Type
backgroundDrawable The whole background of the title bar. Reference
backIconColor The color of the back arrow. Color, Reference
titleText Title text. String, Reference
titleTextSize The font size of the title. Dimension, Reference
titleTextColor The font color of the title. Color, Reference
leftIconResid ID of the .png or .jpg image corresponding to the left icon. Reference
leftIconUnicode The Unicode character of the left icon. String, Reference
leftIconColor The color of the left icon. Color, Reference
leftIconSize The size of the left icon. Dimension, Reference
leftText Content of the left text. String, Reference
leftTextColor The color of the left text. Color, Reference
leftTextSize The size of the left text. Dimension, Reference
rightIconResid ID of the .png or .jpg image corresponding to the right icon. Reference
rightIconUnicode The Unicode character of the right icon. String, Reference
rightIconColor The color of the right icon. Color, Reference
rightIconSize The size of the right icon. Dimension, Reference
rightText Content of the right text. String, Reference
rightTextColor The color of the right text. Color, Reference
rightTextSize The size of the right text. Dimension, Reference

Sample code

In the following sample code, the reference path of aui is: xmlns:aui=”http://schemas.android.com/apk/res/com.alipay.mobile.antui“.

Basic usage

 
  1. <com.alipay.mobile.antui.basic.AUTitleBar
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:layout_marginTop="10dp"
  5. aui:aui_titleText="标题"
  6. aui:aui_titleTextSize="@dimen/AU_TEXTSIZE2"
  7. aui:aui_titleTextColor="#f64219"
  8. aui:leftIconUnicode="@string/iconfont_user_setting"
  9. aui:rightText="测试2"/>

Transparent scrolling

 
  1. <com.alipay.mobile.antui.basic.AUTitleBar
  2. android:id="@+id/title_bar"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content"
  5. aui:rightIconUnicode="@string/iconfont_user_setting"
  6. aui:aui_titleText="透明标题测试" />
 
  1. titleBar.handleScrollChange(testImg.getMeasuredHeight(), 0);
  2. testScroll.setScrollViewListener(new AUScrollViewListener() {
  3. @Override
  4. public void onScrollChanged(ScrollView scrollView, int x, int y, int oldx, int oldy) {
  5. titleBar.handleScrollChange(y);
  6. }
  7. });

Title with a red dot

 
  1. <com.alipay.mobile.antui.basic.AUTitleBar
  2. android:id="@+id/progress_title"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:layout_marginTop="10dp"
  6. aui:aui_titleText="带刷新标题"
  7. aui:leftIconUnicode="@string/iconfont_scan"
  8. aui:rightIconUnicode="@string/iconfont_more"/>
 
  1. AUTitleBar processBar = (AUTitleBar) findViewById(R.id.progress_title);
  2. processBar.startProgressBar();
  3. WidgetMsgFlag j = new WidgetMsgFlag(this);
  4. j.showMsgFlag();
  5. processBar.attachFlagToLeftBtn(j);
  6. WidgetMsgFlag i = new WidgetMsgFlag(this);
  7. i.showMsgFlag(12);
  8. processBar.attachFlagToRightBtn(i);