全部产品
云市场

图标组件

更新时间:2019-09-26 18:40:11

  • AUIconView 为 iconfont 矢量图控件,使用方式与 UIimage 类似。
  • iconfont 图片控件(可以类似当做 imageview 来使用)实际是通过 string 的 drawrect 功能画出的 image 对象。

    注意:目前只支持正方形的矢量图。

  • iconfont 相当于是加载了一个字体,一个字体对应了多张图片,每个图片有一个 unicode 码,所以可以设置 text 为对应的 unicode 码,并调用 string 的 drawInRect 方法将 iconfont 渲染出来。
  • 每个 iconfont 集合实际就是一个 ttf 字体文件,因此可以加载多个 ttf 字体文件,每个 ttf 字体文件有一个名称,默认为 AntUI 的 ttf 字体,名称为 auiconfont。

效果图

icon

接口说明

  1. // AntUI 默认 iconfont 名称
  2. #define kICONFONT_FONTNAME (@"auiconfont")
  3. // AntUI 默认 iconfont 路径
  4. #define kICONFONT_FONTPATH (@"APCommonUI.bundle/iconfont/auiconfont")
  5. /**
  6. iconfont 图片控件(可以类似当做 imageview 来使用)
  7. 实际是通过 string 的 drawrect 功能画出的 image 对象,
  8. 注意目前只支持正方形的矢量图
  9. iconfont 相当于是加载了一个字体,一个字体对应了多张图片,每个图片有一个 unicode 码,
  10. 所以可以设置 text 为对应的 unicode 码,并调用 string 的 drawInRect 方法将 iconfont 渲染出来。
  11. 每个 iconfont 集合实际就是一个 ttf 字体文件,因此可以加载多个
  12. ttf 字体文件,每个 ttf 字体文件有一个名称,默认为 AntUI 的 ttf 字体
  13. 名称为 auiconfont。
  14. */
  15. @interface AUIconView : UIImageView
  16. @property (nonatomic, strong) UIColor *color; // 矢量图颜色(默认蚂蚁蓝)
  17. @property (nonatomic, strong) NSString *name; // 矢量图名称
  18. @property (nonatomic, strong) NSString *fontName; // 矢量图字库名称
  19. /**
  20. 初始化方法
  21. @param frame 视图 frame
  22. @param name iconfont 图片名称
  23. @return AUIconView实例
  24. */
  25. - (instancetype)initWithFrame:(CGRect)frame name:(NSString *)name;
  26. /**
  27. 初始化方法
  28. (如果该种 iconfont 字体已经加载过,则不需要传入 fontPath 也可以渲染)
  29. @param frame 视图 frame
  30. @param name iconfont 图片名称
  31. @param fontName iconfont 字体名称
  32. @return AUIconView 实例
  33. */
  34. - (instancetype)initWithFrame:(CGRect)frame name:(NSString *)name fontName:(NSString *)fontName;
  35. /**
  36. 获取 iconView 的 size
  37. @return 如果是 iconfont,返回的是 iconfont 的 size,如果是普通的 imageview 返回的是 image 的 size
  38. */
  39. - (CGSize)iconViewSize;
  40. @end
  41. @interface UIImage (AUIconFont)
  42. /**
  43. 注册 iconfont(只需要调用一次)
  44. @param fontName iconfont 字体名称
  45. @param fontPath iconfont 路径(如 @"AntUI.bundle/iconfont/auiconfont")
  46. */
  47. + (void)registerIconFont:(NSString *)fontName fontPath:(NSString *)fontPath;
  48. /**
  49. 获取一个正方形矢量图(长和宽相等)
  50. @param name 名称
  51. @param width 大小
  52. @param color 图像颜色,传 nil,默认为蚂蚁蓝
  53. @return 正方形矢量图
  54. */
  55. + (UIImage *)iconWithName:(NSString *)name
  56. width:(CGFloat)width
  57. color:(UIColor *)color;
  58. /**
  59. 获取一个正方形矢量图(长和宽相等)
  60. @param name 名称
  61. @param fontName 矢量字体名称
  62. @param width 大小
  63. @param color 图像颜色,传 nil,默认为蚂蚁蓝
  64. @return 正方形矢量图
  65. */
  66. + (UIImage *)iconWithName:(NSString *)name
  67. fontName:(NSString *)fontName
  68. width:(CGFloat)width
  69. color:(UIColor *)color;
  70. @end

代码示例

  1. // 使用 AUIconView
  2. AUIconView *view = [[AUIconView alloc] initWithFrame:CGRectZero name:_array[indexPath.row]];
  3. view.tag = 1;
  4. view.size = CGSizeMake(30, 30);
  5. view.origin = CGPointMake(100, 10);
  6. view.color = RGB(0x2b91e2);
  7. [cell.contentView addSubview:view];
  8. // 单独使用 image 的扩展
  9. self.image = [UIImage iconWithName:self.name fontName:self.fontName width:width color:self.color];