All Products
Search
Document Center

List item component

Last Updated: Jul 16, 2021

AUListItem is a list item component, including the following controls:

  • AUSingleTitleListItem
  • AUDoubleTitleListItem
  • AUCheckBoxListItem
  • AUSwitchListItem
  • AUMultiListItem
  • AUParallelTitleListItem
  • AULineBreakListItem

Sample images

AUSingleTitleListItem

AUDoubleTitleListItem

AUCheckBoxListItem

AUSwitchListItem

Dependency

See Quick start.

API description

Basic APIs

 
  1. /**
  2. * Set the item type, including upper, medium, and lower.
  3. *
  4. * @param positionStyle AULineGroupItemInterface.NORMAL TOP BOTTOM CENTER LINE NONE
  5. */
  6. public void setItemPositionStyle(int positionStyle)
  7. /**
  8. * Specify whether the arrow on the right is visible.
  9. * @param isVisible
  10. */
  11. public void setArrowVisibility(boolean isVisible)

AUParallelListItem

 
  1. /**
  2. * Set the text in four positions simultaneously.
  3. * @param leftText
  4. * @param leftSubText
  5. * @param rightText
  6. * @param rightSubText
  7. */
  8. public void setParallelText(String leftText, String leftSubText, String rightText, String rightSubText)
  9. /**
  10. * Set the main text on the left.
  11. * @param leftText
  12. */
  13. public void setLeftText(String leftText)
  14. /**
  15. * Set the main text on the right.
  16. * @param rightText
  17. */
  18. public void setRightText(String rightText)
  19. /**
  20. * Set the auxiliary text on the left.
  21. * @param leftSubText
  22. */
  23. public void setLeftSubText(String leftSubText)
  24. /**
  25. * Set the auxiliary text on the right.
  26. * @param rightSubText
  27. */
  28. public void setRightSubText(String rightSubText)

AULineBreakListItem

 
  1. /**
  2. * Set the text on the left and right.
  3. * @param left
  4. * @param right
  5. */
  6. public void setText(String left, String right)
  7. /**
  8. * Get the left TextView.
  9. * @return
  10. */
  11. public AUTextView getLeftText()
  12. /**
  13. * Get the right TextView.
  14. * @return
  15. */
  16. public AUTextView getRightText()

Public APIs

 
  1. /**
  2. * Set the size of the icon image.
  3. */
  4. public void setIconSize(float width, float height)
  5. /**
  6. * Get the main text on the left.
  7. * @return
  8. */
  9. public CharSequence getLeftText()
  10. /**
  11. * Set the main text on the left.
  12. * @param text
  13. */
  14. public void setLeftText(CharSequence text)
  15. /**
  16. * Set the color of the main text on the left.
  17. * @param color
  18. */
  19. public void setLeftTextColor(int color)
  20. /**
  21. * Get the view of the left-side image.
  22. * @return
  23. */
  24. public AURoundImageView getLeftRoundImageView()
  25. public AUImageView getLeftImageView()
  26. /**
  27. * Set the left-side image.
  28. * @param resId
  29. */
  30. public void setLeftImage(int resId)
  31. /**
  32. * Set the left-side image.
  33. * @param drawable
  34. */
  35. public void setLeftImage(Drawable drawable)
  36. /**
  37. * Set visibility when setLeftImage is set in the API.
  38. * If setLeftImage is called after this API is called, the system will reset the visibility.
  39. *
  40. * @param vis View.GONE
  41. */
  42. public void setLeftImageVisibility(int vis)
  43. /**
  44. * Get text information on the left.
  45. * @return
  46. */
  47. public AUTextView getLeftTextView()
  48. }

AUSingleTitleListItem

 
  1. /**
  2. * Set the Select button on the right.
  3. * @param checked
  4. */
  5. public void setItemChecked (boolean checked)
  6. /**
  7. * Set text information on the right.
  8. * @param text
  9. */
  10. public void setRightText(CharSequence text)
  11. /**
  12. * Set the color of the text on the right.
  13. * @param color
  14. */
  15. public void setRightTextColor(int color)
  16. /**
  17. * Set the right-side image.
  18. */
  19. public void setRightImage(int resId)
  20. public void setRightImage(Bitmap bitmap)
  21. public void setRightImage(Drawable drawable)
  22. /**
  23. * Get the view of the text on the right.
  24. * @return
  25. */
  26. public AUTextView getRightTextView()
  27. /**
  28. * Get the view of the right-side image.
  29. * @return
  30. */
  31. public AUImageView getRightImageView()
  32. /**
  33. * Set text information on the right.
  34. * @param text
  35. */
  36. public void setRightButtonText(CharSequence text)
  37. /**
  38. * Get the button.
  39. * @return
  40. */
  41. public AUProcessButton getProcessButton()
  42. /**
  43. * Set the button clicking listener.
  44. * @param listener
  45. */
  46. public void setButtonClickListener(OnClickListener listener)
  47. /**
  48. * Set the style on the right.
  49. * @param type AUAbsListItem.TEXT_IMAGE AUAbsListItem.BUTTON
  50. */
  51. public void setRightType(int type)

AUCheckBoxListItem

 
  1. /**
  2. * Get the check icon on the left.
  3. * @return
  4. */
  5. public AUCheckIcon getLeftCheckIcon()
  6. /**
  7. * Set the icon state.
  8. * @param status AUCheckIcon.STATE_CHECKED|STATE_UNCHECKED|STATE_DISABLED
  9. */
  10. public void setCheckstatus(int status)
  11. /**
  12. * Get the check state.
  13. * @return
  14. */
  15. public int getIconState()

AUSwitchListItem

 
  1. /**
  2. * Set switch status listening.
  3. * @param onCheckedChangeListener
  4. */
  5. public void setOnSwitchListener (CompoundButton.OnCheckedChangeListener onCheckedChangeListener)
  6. /**
  7. * Get the switch.
  8. * @return
  9. */
  10. public AUSwitch getSwitch()
  11. /**
  12. * Return the switch status.
  13. * @return Indicates whether the switch is enabled.
  14. */
  15. public boolean isSwitchOn()
  16. /**
  17. * Set the switch status.
  18. * @param status
  19. */
  20. public void setSwitchStatus(boolean status)
  21. /**
  22. * Set the state to enable or disable.
  23. * @param enabled
  24. */
  25. public void setSwitchEnabled(boolean enabled)

AUDoubleTitleListItem

 
  1. /**
  2. * Set the auxiliary text on the left.
  3. * @param text
  4. */
  5. public void setLeftSubText(CharSequence text)
  6. /**
  7. * Set the text on the right.
  8. * @param text
  9. */
  10. public void setRightText(CharSequence text)
  11. /**
  12. * Set the font and color of the text on the right.
  13. * @param color
  14. */
  15. public void setRightTextColor(int color)
  16. /**
  17. * Get the view of the text on the right.
  18. * @return
  19. */
  20. public AUTextView getRightTextView()
  21. /**
  22. * Get the view of the auxiliary text on the left.
  23. * @return
  24. */
  25. public AUTextView getLeftSubTextView()
  26. /**
  27. * Set text information on the right.
  28. * @param text
  29. */
  30. public void setRightButtonText(CharSequence text)
  31. /**
  32. * Get the button.
  33. * @return
  34. */
  35. public AUProcessButton getProcessButton()
  36. /**
  37. * Set the button clicking listener.
  38. * @param listener
  39. */
  40. public void setButtonClickListener(OnClickListener listener)
  41. /**
  42. * Set the style on the right.
  43. * @param type AUAbsListItem.TEXT_IMAGE AUAbsListItem.BUTTON
  44. */
  45. public void setRightType(int type)

AUMultiListItem

 
  1. /**
  2. * Add an extended view to the left.
  3. * @param view
  4. */
  5. public void addLeftAssistantView(View view)
  6. /**
  7. * Set the auxiliary text on the left.
  8. * @param text
  9. */
  10. public void setLeftSubText(CharSequence text)
  11. /**
  12. * Get the subtitle text.
  13. * @return
  14. */
  15. public AUEmptyGoneTextView getLeftSubTextView()

Custom properties

Property Description Type
listItemType Sets the position style. Normal/Top/Bottom/Center/Line/None
listLeftText The text on the left. String, Reference
listLeftSubText The auxiliary text on the left. String, Reference
listLeftTextSize The font size of the text on the left. Dimension
listLeftSubTextSize The font size of the auxiliary text on the left. Dimension
listLeftTextColor The color of the text on the left. Color, Reference
listLeftSubTextColor The color of the auxiliary text on the left. Color, Reference
listLeftImage The left-side icon. Reference
listLeftImageWidth The width of the left-side image. Dimension, Reference
listLeftImageHeight The height of the left-side image. Dimension, Reference
listShowArrow Whether to show the arrow on the right. Boolean
listArrowType Arrow orientation Arrow_right/Arrow_down/Arrow_up
listRightText The text on the right. String, Reference
listRightSubText The auxiliary text on the right. String, Reference
listRightType The style on the right. Text_image/Button
listRightImage The right-side image. String, Reference
listShowCheck The checking image on the right. Boolean

Note:

  • Note: The following code sample(XML) shows the properties supported in each control.
  • If you need to use the background color changing effect, add the android:clickable="true" property.
  • The height of the control, the width and height of the left image are custom based on business requirements.

Sample code

Imported:xmlns:app="http://schemas.android.com/apk/res/com.alipay.mobile.antui"

AUParallelListItem

 
  1. <com.alipay.mobile.antui.tablelist.AUParallelTitleListItem
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:clickable="true"
  5. app:listItemType="top"
  6. app:listLeftText="标题一"
  7. app:listLeftSubText="内容一"
  8. app:listRightText="标题二"
  9. app:listRightSubText="内容二"
  10. app:listShowArrow="false" />
  11. <com.alipay.mobile.antui.tablelist.AUParallelTitleListItem
  12. android:layout_width="match_parent"
  13. android:layout_height="wrap_content"
  14. android:clickable="true"
  15. app:listItemType="center"
  16. app:listLeftText="标题一"
  17. app:listLeftSubText="内容一"
  18. app:listRightSubText="内容二"
  19. app:listShowArrow="false" />
  20. <com.alipay.mobile.antui.tablelist.AUParallelTitleListItem
  21. android:layout_width="match_parent"
  22. android:layout_height="wrap_content"
  23. android:clickable="true"
  24. app:listItemType="center"
  25. app:listLeftText="标题一"
  26. app:listLeftSubText="内容一"
  27. app:listRightText="标题二"
  28. app:listShowArrow="false" />

AULineBreakListItem

 
  1. <com.alipay.mobile.antui.tablelist.AULineBreakListItem
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. app:listItemType="top"
  5. app:listLeftText="主体信息"
  6. app:listRightText="单行文字过多,换行与左侧文字间距保持30px"/>
  7. <com.alipay.mobile.antui.tablelist.AULineBreakListItem
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. app:listItemType="center"
  11. app:listLeftText="单行文字过多,换行与右侧文字间距保持30px"
  12. app:listRightText="详细信息"/>
  13. <com.alipay.mobile.antui.tablelist.AULineBreakListItem
  14. android:layout_width="match_parent"
  15. android:layout_height="wrap_content"
  16. app:listItemType="center"
  17. app:listLeftText="单行文字"
  18. app:listRightText="详细信息"/>
  19. <com.alipay.mobile.antui.tablelist.AULineBreakListItem
  20. android:layout_width="match_parent"
  21. android:layout_height="wrap_content"
  22. app:listItemType="bottom"
  23. app:listLeftText="单行文字过多,换行与右侧文字间距保持30px"
  24. app:listRightText="单行文字过多,换行与右侧文字间距保持30px"/>

AUSingleTitleListItem

 
  1. <com.alipay.mobile.antui.tablelist.AUSingleTitleListItem
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:clickable="true"
  5. app:listItemType="top"
  6. app:listLeftText="单行列表"
  7. app:listRightText="详细内容" />
  8. <com.alipay.mobile.antui.tablelist.AUSingleTitleListItem
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content"
  11. android:clickable="true"
  12. app:listItemType="center"
  13. app:listLeftText="单行文字过多,换行与右侧文字间距保持30px"
  14. app:listRightText="详细信息" />
  15. <com.alipay.mobile.antui.tablelist.AUSingleTitleListItem
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content"
  18. app:listItemType="center"
  19. app:listLeftText="单项选择列表"
  20. app:listShowCheck="true" />
  21. <com.alipay.mobile.antui.tablelist.AUSingleTitleListItem
  22. android:layout_width="match_parent"
  23. android:layout_height="wrap_content"
  24. app:listItemType="center"
  25. app:listLeftImage="@drawable/image"
  26. app:listLeftText="正常图片"
  27. app:listShowArrow="false" />
  28. <com.alipay.mobile.antui.tablelist.AUSingleTitleListItem
  29. android:layout_width="match_parent"
  30. android:layout_height="wrap_content"
  31. app:listItemType="center"
  32. app:listLeftImage="@drawable/image"
  33. app:listLeftImageSizeType="size_large"
  34. app:listLeftText="大图片"
  35. app:listShowArrow="false" />
  36. <com.alipay.mobile.antui.tablelist.AUSingleTitleListItem
  37. android:layout_width="match_parent"
  38. android:layout_height="wrap_content"
  39. android:clickable="true"
  40. app:hasRound="true"
  41. app:listItemType="center"
  42. app:listLeftImage="@drawable/image"
  43. app:listLeftImageHeight="36dp"
  44. app:listLeftImageWidth="36dp"
  45. app:listLeftText="自定义图片大小"
  46. app:listShowArrow="false" />
  47. <com.alipay.mobile.antui.tablelist.AUSingleTitleListItem
  48. android:layout_width="match_parent"
  49. android:layout_height="wrap_content"
  50. android:clickable="true"
  51. app:listItemType="center"
  52. app:listLeftText="标题"
  53. app:listRightImage="@drawable/image"
  54. app:listRightText="内容展示加长" />
  55. <com.alipay.mobile.antui.tablelist.AUSingleTitleListItem
  56. android:id="@+id/button_item"
  57. android:layout_width="match_parent"
  58. android:layout_height="wrap_content"
  59. app:listItemType="bottom"
  60. app:listLeftImage="@drawable/image"
  61. app:listLeftText="标题"
  62. app:listRightText="试一试"
  63. app:listRightType="button"/>

AUDoubleTitleListItem

 
  1. <com.alipay.mobile.antui.tablelist.AUDoubleTitleListItem
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:clickable="true"
  5. app:listItemType="center"
  6. app:listLeftSubText="支付宝使用航班提醒等服务。"
  7. app:listLeftText="标题一"
  8. app:listRightText="10:30"
  9. app:listShowArrow="false" />
  10. <com.alipay.mobile.antui.tablelist.AUDoubleTitleListItem
  11. android:layout_width="match_parent"
  12. android:layout_height="wrap_content"
  13. android:clickable="true"
  14. app:listItemType="center"
  15. app:listLeftImage="@drawable/testapp_icon"
  16. app:listLeftSubText="说明文本"
  17. app:listLeftText="正常图片" />
  18. <com.alipay.mobile.antui.tablelist.AUDoubleTitleListItem
  19. android:layout_width="match_parent"
  20. android:layout_height="wrap_content"
  21. android:clickable="true"
  22. app:listItemType="center"
  23. app:listLeftImage="@drawable/testapp_icon"
  24. app:listLeftImageSizeType="size_large"
  25. app:listLeftSubText="说明文本"
  26. app:listLeftText="大图片"
  27. app:listRightText="10:30"
  28. app:listShowArrow="false" />
  29. <com.alipay.mobile.antui.tablelist.AUDoubleTitleListItem
  30. android:layout_width="match_parent"
  31. android:layout_height="wrap_content"
  32. android:clickable="true"
  33. app:listItemType="bottom"
  34. app:listLeftImage="@drawable/testapp_icon"
  35. app:listLeftImageSizeType="size_multi"
  36. app:listLeftSubText="全球未来机场计划”是指未来游客在海外机场,支付宝使用航班提醒等服务。"
  37. app:listLeftText="图文列表图片"
  38. app:listShowArrow="false" />
  39. <com.alipay.mobile.antui.tablelist.AUDoubleTitleListItem
  40. android:layout_width="match_parent"
  41. android:layout_height="wrap_content"
  42. android:clickable="true"
  43. app:listItemType="center"
  44. app:listLeftImage="@drawable/image"
  45. app:listLeftImageSizeType="size_large"
  46. app:listLeftSubText="说明文本"
  47. app:listLeftText="大图片"
  48. app:listRightText="试一试"
  49. app:listRightType="button" />
  50. <com.alipay.mobile.antui.tablelist.AUDoubleTitleListItem
  51. android:id="@+id/testLitItem"
  52. android:layout_width="match_parent"
  53. android:layout_height="wrap_content"
  54. android:layout_marginBottom="20dp"
  55. android:layout_marginTop="10dp"
  56. android:clickable="true"
  57. app:listItemType="normal"
  58. app:listLeftImage="@drawable/testapp_icon"
  59. app:listLeftImageHeight="70dp"
  60. app:listLeftImageWidth="70dp"
  61. app:listLeftSubText="点击button设置type"
  62. app:listLeftText="自定义图片大小" />

AUCheckBoxListItem

 
  1. <com.alipay.mobile.antui.tablelist.AUCheckBoxListItem
  2. android:layout_width="match_parent"
  3. android:layout_height="wrap_content"
  4. android:clickable="true"
  5. app:listItemType="top"
  6. app:listLeftText="多项选择列表" />
  7. <com.alipay.mobile.antui.tablelist.AUCheckBoxListItem
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:clickable="true"
  11. app:checkIconState="checked"
  12. app:listItemType="center"
  13. app:listLeftText="多项选择列表" />
  14. <com.alipay.mobile.antui.tablelist.AUCheckBoxListItem
  15. android:layout_width="match_parent"
  16. android:layout_height="wrap_content"
  17. android:clickable="true"
  18. app:checkIconState="cannot_uncheck"
  19. app:listItemType="bottom"
  20. app:listLeftText="多项选择列表" />
  21. <com.alipay.mobile.antui.tablelist.AUCheckBoxListItem
  22. android:layout_width="match_parent"
  23. android:layout_height="wrap_content"
  24. android:clickable="true"
  25. app:checkIconState="cannot_check"
  26. app:listItemType="bottom"
  27. app:listLeftText="多项选择列表" />

AUSwitchListItem

 
  1. <com.alipay.mobile.antui.tablelist.AUSwitchListItem
  2. android:layout_width="match_parent"
  3. android:layout_height="48dp"
  4. app:listItemType="top"
  5. app:listLeftText="标题" />
  6. <com.alipay.mobile.antui.tablelist.AUSwitchListItem
  7. android:id="@+id/disable_switch_list_item"
  8. android:layout_width="match_parent"
  9. android:layout_height="48dp"
  10. app:listItemType="bottom"
  11. app:listLeftText="标题" />