全部产品
云市场
云游戏

图标组件

更新时间:2020-06-19 14:55:09

AUIconView 为 iconfont 矢量图控件,可以同时实现 TextView 及 ImageView 的功能。

iconfont 图片控件(可当做 TextView 来使用)实际是通过 TextView 的 TTF 字体文件,定义特殊的 Unicode 码对应一类图片字体。也就是说,iconfont 相当于是加载了一个字体,一个字体对应了多张图片,每个图片有一个 Unicode 码。

每个 iconfont 集合实际就是一个 TTF 字体文件,因此可以加载多个 TTF 字体文件。每个 TTF 字体文件有一个名称,默认 AntUI 的 TTF 字体文件名称为 auiconfont。

效果图

依赖

参见 快速开始

图标资源

资源 ID 对应的示例名称
com.alipay.mobile.antui.R.string.iconfont_more 更多
com.alipay.mobile.antui.R.string.iconfont_cancel 取消
com.alipay.mobile.antui.R.string.iconfont_voice 语音
com.alipay.mobile.antui.R.string.iconfont_collect_money 收款
com.alipay.mobile.antui.R.string.iconfont_back 返回
com.alipay.mobile.antui.R.string.iconfont_user_setting 用户设置
com.alipay.mobile.antui.R.string.iconfont_user 用户
com.alipay.mobile.antui.R.string.iconfont_add 添加
com.alipay.mobile.antui.R.string.iconfont_praise 点赞
com.alipay.mobile.antui.R.string.iconfont_map 地图
com.alipay.mobile.antui.R.string.iconfont_checked 勾选
com.alipay.mobile.antui.R.string.iconfont_notice 公告
com.alipay.mobile.antui.R.string.iconfont_add_user 添加用户
com.alipay.mobile.antui.R.string.iconfont_comment 评论
com.alipay.mobile.antui.R.string.iconfont_selected 选择
com.alipay.mobile.antui.R.string.iconfont_bill 账单
com.alipay.mobile.antui.R.string.iconfont_pulldown 下拉
com.alipay.mobile.antui.R.string.iconfont_scan 扫描
com.alipay.mobile.antui.R.string.iconfont_list 列表
com.alipay.mobile.antui.R.string.iconfont_delete 删除
com.alipay.mobile.antui.R.string.iconfont_share 分享
com.alipay.mobile.antui.R.string.iconfont_search 搜索
com.alipay.mobile.antui.R.string.iconfont_complain 投诉
com.alipay.mobile.antui.R.string.iconfont_qrcode 二维码
com.alipay.mobile.antui.R.string.iconfont_unchecked 取消勾选
com.alipay.mobile.antui.R.string.iconfont_right_arrow 右箭头
com.alipay.mobile.antui.R.string.iconfont_help 帮助
com.alipay.mobile.antui.R.string.iconfont_group_chat 群聊
com.alipay.mobile.antui.R.string.iconfont_contacts 联系人
com.alipay.mobile.antui.R.string.iconfont_setting 设置
com.alipay.mobile.antui.R.string.iconfont_phone_book 通讯录
com.alipay.mobile.antui.R.string.iconfont_phone_contact 手机联系人

接口说明

  1. /**
  2. * 设置图片资源 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. * 设置图片资源 drawable
  19. * @param drawable
  20. * @return
  21. */
  22. @Override
  23. public IconfontInterface setImageDrawable(Drawable drawable)
  24. /**
  25. * 设置 iconfont 颜色
  26. * @param color
  27. * @return
  28. */
  29. public AUIconView setIconfontColor(int color)
  30. /**
  31. * 设置 iconfont 颜色 ColorStateList
  32. * @param color
  33. * @return
  34. */
  35. public AUIconView setIconfontColorStates(ColorStateList color)
  36. /**
  37. * 设置 view 的大小,单位 px
  38. *
  39. * @param size
  40. */
  41. public AUIconView setIconfontSize(float size)
  42. /**
  43. * 设置 view 的 iconfont 资源或文本
  44. * @param text
  45. * @return
  46. */
  47. @Override
  48. public AUIconView setIconfontUnicode(String text)

代码示例

  • 设置图标的信息:
  1. AUIconView iconView = (AUIconView) convertView.findViewById(R.id.icon_view);
  2. iconView.setIconfontUnicode(iconUnicode);
  3. //例如
  4. //iconView.setIconfontUnicode(getResources().getString(com.alipay.mobile.antui.R.string.iconfont_phone_contact));
  • 设置图标的颜色:
  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)