All Products
Search
Document Center

Icon component

Last Updated: May 25, 2021

AUIconView is an iconfont vector graphic control which implements the functions of TextView and ImageView simultaneously.

The iconfont control (can be used as TextView) actually defines special Unicode characters to map a type of images and font through the TTF font file of TextView. That is, the function of iconfont is equivalent to the effect of loading a font that maps multiple images, in which each image has a Unicode character.

Each iconfont set is actually a TTF font file. Therefore, multiple TTF font files can be loaded. Each TTF font file has a name. The default TTF font file name of the AntUI is auiconfont.

Sample image

Dependency

For how to add dependency, follow the relevant instructions in Quick Start.

Icon resources

Resource ID Corresponding name
com.alipay.mobile.antui.R.string.iconfont_more More
com.alipay.mobile.antui.R.string.iconfont_cancel Cancel
com.alipay.mobile.antui.R.string.iconfont_voice Voice
com.alipay.mobile.antui.R.string.iconfont_collect_money Collect money
com.alipay.mobile.antui.R.string.iconfont_back Back
com.alipay.mobile.antui.R.string.iconfont_user_setting User settings
com.alipay.mobile.antui.R.string.iconfont_user User
com.alipay.mobile.antui.R.string.iconfont_add Add
com.alipay.mobile.antui.R.string.iconfont_praise Like
com.alipay.mobile.antui.R.string.iconfont_map Map
com.alipay.mobile.antui.R.string.iconfont_checked Select
com.alipay.mobile.antui.R.string.iconfont_notice Announcement
com.alipay.mobile.antui.R.string.iconfont_add_user Add User
com.alipay.mobile.antui.R.string.iconfont_comment Comment
com.alipay.mobile.antui.R.string.iconfont_selected Select
com.alipay.mobile.antui.R.string.iconfont_bill Bill
com.alipay.mobile.antui.R.string.iconfont_pulldown Pull down
com.alipay.mobile.antui.R.string.iconfont_scan Scan
com.alipay.mobile.antui.R.string.iconfont_list List
com.alipay.mobile.antui.R.string.iconfont_delete Delete
com.alipay.mobile.antui.R.string.iconfont_share Share
com.alipay.mobile.antui.R.string.iconfont_search Search
com.alipay.mobile.antui.R.string.iconfont_complain Complain
com.alipay.mobile.antui.R.string.iconfont_qrcode QR code
com.alipay.mobile.antui.R.string.iconfont_unchecked Deselect
com.alipay.mobile.antui.R.string.iconfont_right_arrow Right arrow
com.alipay.mobile.antui.R.string.iconfont_help Help
com.alipay.mobile.antui.R.string.iconfont_group_chat Group chat
com.alipay.mobile.antui.R.string.iconfont_contacts Contact
com.alipay.mobile.antui.R.string.iconfont_setting Settings
com.alipay.mobile.antui.R.string.iconfont_phone_book Address book
com.alipay.mobile.antui.R.string.iconfont_phone_contact Contacts

API description

 
  1. /**
  2. * Set the image resource ID.
  3. * @param resId
  4. * @return
  5. */
  6. @Override
  7. public AUIconView setImageResource(int resId) {
  8. if (resId == 0) {
  9. return this;
  10. }
  11. clearView();
  12. initImageView();
  13. imageView.setImageResource(resId);
  14. this.addView(imageView);
  15. return this;
  16. }
  17. /**
  18. * Set the image resource drawable.
  19. * @param drawable
  20. * @return
  21. */
  22. @Override
  23. public IconfontInterface setImageDrawable(Drawable drawable)
  24. /**
  25. * Set the iconfont color.
  26. * @param color
  27. * @return
  28. */
  29. public AUIconView setIconfontColor(int color)
  30. /**
  31. * Set the ColorStateList for the iconfont color.
  32. * @param color
  33. * @return
  34. */
  35. public AUIconView setIconfontColorStates(ColorStateList color)
  36. /**
  37. * Set the view size, in the unit of px.
  38. *
  39. * @param size
  40. */
  41. public AUIconView setIconfontSize(float size)
  42. /**
  43. * Set the iconfont resource or text of the view.
  44. * @param text
  45. * @return
  46. */
  47. @Override
  48. public AUIconView setIconfontUnicode(String text)

Sample code

  • Set the icon information:
 
  1. AUIconView iconView = (AUIconView) convertView.findViewById(R.id.icon_view);
  2. iconView.setIconfontUnicode(iconUnicode);
  3. //For example
  4. //iconView.setIconfontUnicode(getResources().getString(com.alipay.mobile.antui.R.string.iconfont_phone_contact));
  • Set the icon color:
 
  1. <com.alipay.mobile.antui.iconfont.AUIconView
  2. android:id="@+id/icon_view"
  3. android:layout_width="@dimen/size"
  4. android:layout_height="@dimen/size"
  5. app:iconfontColor="@com.alipay.mobile.antui:color/AU_COLOR_APP_GREEN"
  6. app:iconfontUnicode="@com.alipay.mobile.antui:string/iconfont_back"/>
  7. //or:
  8. iconView.setIconfontColor(color)
  9. iconView.setIconfontColorStates(colorStateList)