全部产品

条目组件

更新时间:2020-11-24 17:59:30

  • AUListItem 是根据 UED 新需求完成的控件系列,与原 APCommonUI 中的 APTableView 控件不互通。
  • AUListItem 包括新的四种 ListItem,支持的元素如下表:
AUListItem 主标题 副标题 左图标 右图标 定制大小的左图标 选中时显示
checkmark
最右的辅助箭头图标
AUSingleTitleListItem YES️ YES YES️ YES YES️ YES YES️
AUDoubleTitleListItem YES️ YES YES️ YES️ YES️
AUCheckBoxListItem YES️ —️ —️ YES️
AUSwitchListItem YES️ —️ —️ —️

效果图

  • AUSingleTitleListItem

  • AUDoubleTitleListItem

  • AUCheckBoxListItem

  • AUSwitchListItem

依赖

AUListItem 的依赖如下:

  1. import <UIKit/UIKit.h>

接口说明

共用接口

Model 层面:

设置多个 delegate,主要是为了规范外部业务方传参,有些元素不支持展示,外部也无法传参。比如,在 AUDoubleTitleListItem 中右边的图标不存在,则 AUDoubleTitleListItemModelDelegate 不会包含 rightImage 参数。

  1. AUListItemProtocols.h
  2. /**
  3. AUSingleTitleListItem 可以设置和访问的数据项
  4. */
  5. @protocol AUSingleTitleListItemModelDelegate <NSObject>
  6. @property (nonatomic, copy) NSString *subtitle; //副标题
  7. @property (nonatomic, strong) UIImage *leftImage; //左边图片
  8. @property (nonatomic, strong) UIImage *rightImage; //右边文字前的图片
  9. @property (nonatomic, strong) UIImage *rightAssistImage; //右边文字后的图片
  10. @property (nonatomic, assign) CGSize leftimageSize; //左边图片大小可定制,不设置使用默认大小 22
  11. @property (nonatomic, assign) CGSize rightAssistImageSize; //右边文字后的图片大小可定制,不设置使用默认大小 22
  12. @end
  13. /**
  14. AUDoubleTitleListItem可以设置和访问的数据项
  15. */
  16. @protocol AUDoubleTitleListItemModelDelegate <NSObject>
  17. @property (nonatomic, copy) NSString *subtitle; //副标题
  18. @property (nonatomic, strong) UIImage *leftImage; //左边图片
  19. @property (nonatomic, assign) CGSize leftimageSize; //左边图片大小可定制,不设置使用默认大小
  20. @property (nonatomic, copy) NSString *timeString; //右边时间
  21. @property (nonatomic, copy) NSString *rightAssistString; //右边辅助信息,默认居中
  22. @property (nonatomic, assign) NSInteger subtitleLines; //辅助标题行数,(业务方必须指定具体行数)
  23. //@property (nonatomic, assign) BOOL showAccessory; //是否展示辅助图标
  24. @end
  25. /**
  26. AUCheckBoxListItem可以设置和访问的数据项
  27. */
  28. @protocol AUCheckBoxListItemModelDelegate <NSObject>
  29. //@property (nonatomic, assign) BOOL showAccessory; //是否展示辅助图标
  30. @end
  31. /**
  32. AUMultiListItemDelagate 可以设置和访问的数据项
  33. */
  34. @protocol AUMultiListItemDelagate <NSObject>
  35. @property (nonatomic, copy) NSString *subtitle; //副标题
  36. @property (nonatomic, strong) UIImage *leftImage; //左边图片
  37. //@property (nonatomic, assign) CGSize leftimageSize; //左边图片
  38. @property (nonatomic, assign) BOOL showAccessory; //是否展示辅助图标
  39. @property (nonatomic, assign) NSInteger subtitleLines; // 设置副标题的行数
  40. @end
  41. /**
  42. AUMultiListBottomAssistDelagate 可以设置和访问的数据项
  43. */
  44. @protocol AUMultiListBottomAssistDelagate <NSObject>
  45. @property (nonatomic, strong) NSString *originalText; // 文字来源
  46. @property (nonatomic, strong) NSString *timeDesc; // 时间信息描述
  47. @property (nonatomic, strong) NSString *othersDesc; // 其他描述信息
  48. @end
  49. /**
  50. AUParallelTitleListItem可以设置和访问的数据项
  51. */
  52. @protocol AUParallelTitleListItemModelDelegate <NSObject>
  53. @property (nonatomic, copy) NSString *subtitle; //标题二
  54. @property (nonatomic, copy) NSString *describe; //描述一
  55. @property (nonatomic, copy) NSString *subDescribe; //描述二
  56. @end
  57. /**
  58. AULineBreakListItem可以设置和访问的数据项
  59. */
  60. @protocol AULineBreakListItemModelDelegate <NSObject>
  61. @property (nonatomic, copy) NSString *subtitle; //副标题
  62. @end
  63. /**
  64. AUCouponsItemDelagate 可以设置和访问的数据项
  65. */
  66. @protocol AUCouponsItemDelagate <NSObject>
  67. @property (nonatomic, copy) NSString *subtitle; // 副标题
  68. @property (nonatomic, strong) UIImage *leftImage; // 左边图片
  69. @property (nonatomic, strong) UIImage *leftImageUrl; // 左边图片链接
  70. @property (nonatomic, strong) NSString *assistDesc; // 文字辅助说明
  71. @property (nonatomic, assign) NSInteger totalWidth; // 设置卡片宽度
  72. @end
  73. /**
  74. TTTAttributeLabelDelagate 富文本协议
  75. */
  76. @protocol TTTAttributeLabelDelagate <NSObject>
  77. @property (nonatomic, copy) NSString *attributeText; // 富文本内容
  78. @property (nonatomic, copy) NSString *linkText; // 富文本链接文案
  79. @property (nonatomic, copy) NSString *linkURL; // 富文本跳转链接
  80. @end
  81. AUListItemModel.h
  82. import "AUListItemProtocols.h"
  83. @interface AUListItemModel : NSObject
  84. @property (nonatomic, copy) NSString *title; //主标题
  85. @property (nonatomic, assign) UIEdgeInsets separatorLineInset; //可设置分隔线离 cell 的左、右距离
  86. @end

View 层面:

  1. AUBaseListItem.h
  2. @interface AUBaseListItem : UITableViewCell
  3. //以下开放出来为方便外部设置额外属性,如:主标题颜色
  4. @property(nonatomic,strong) UILabel *titleLabel;
  5. @property(nonatomic,strong) UIView *separatorLine;
  6. /**
  7. 初始化函数
  8. @param reuseIdentifier 重用标识
  9. @param block 外部传入的 block,一般外部会在此 block 中设置 title、leftimage 等
  10. @return 返回 self 实例
  11. */
  12. - (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier model:(void(^)(AUListItemModel*model))block;
  13. /**
  14. 返回 cell 高度
  15. @return 返回 cell 高度
  16. */
  17. + (CGFloat)cellHeight ;
  18. @end
  19. #ifdef AUBaseListItem_protected
  20. //只对子类开放,在子类中 import AUBaseListItem 之前,设置 AUBaseListItem_protected = 1
  21. @interface AUBaseListItem ()
  22. @property (nonatomic,strong) AUListItemModel* baseModel;
  23. @end
  24. #endif
  25. /**
  26. 业务方一般调用 AUBaseListItem 子类的【initWithReuseIdentifier:model:】方法即可满足需求
  27. 这里提供单独的 针对 title 等参数方法
  28. 除 title 外,都放在子类实现,访问隔断
  29. */
  30. @interface AUBaseListItem (Extensions)
  31. /**
  32. 设置主标题
  33. @param title 主标题字符串
  34. */
  35. - (void)setTitle:(NSString* )title;
  36. /**
  37. 主标题 get 方法
  38. @return 返回主标题字符串
  39. */
  40. - (NSString*)title ;
  41. /**
  42. 设置分割线距离 cell 左右的距离
  43. @param separatorLineInset UIEdgeInsets 参数
  44. */
  45. - (void)setSeparatorLineInset:(UIEdgeInsets)separatorLineInset;
  46. /**
  47. get分割线inset
  48. @return 分割线的inset
  49. */
  50. - (UIEdgeInsets)separatorLineInset;

AUSingleTitleListItem

  1. typedef NS_ENUM(NSInteger, AUSingleTitleListItemStyle) {
  2. AUSingleTitleListItemStyleDefault, // 高度 92,图标 58
  3. AUSingleTitleListItemStyleValue1, // 高度 110,图标 72
  4. };
  5. @interface AUSingleTitleListItem : AUBaseListItem
  6. @property(nonatomic,strong) UILabel *subtitleLabel;
  7. @property(nonatomic,strong) UIImageView *leftImageView;
  8. @property(nonatomic,strong) UIImageView *rightImageView;
  9. @property(nonatomic,strong) UIImageView *rightAssistImageView;
  10. /**重要
  11. 初始化函数
  12. @param reuseIdentifier 重用标识
  13. @param block 外部传入的 block,一般外部会在此 block 中设置 title、leftimage 等
  14. @return 返回 self 实例
  15. */
  16. - (instancetype)initWithReuseIdentifier:(NSString*)reuseIdentifier model:(void(^)(AUListItemModel<AUSingleTitleListItemModelDelegate>*model))block __deprecated_msg("预计废弃,请勿继续使用");
  17. /**
  18. 设置 cell 展示所需的所有数据
  19. @param block 传入的 block
  20. */
  21. - (void)setModelBlock:(void(^)(AUListItemModel<AUSingleTitleListItemModelDelegate>*model))block;
  22. /**
  23. 初始化函数
  24. @param reuseIdentifier 标识
  25. @param style 自定义的类型,详见 AUSingleTitleListItemStyle
  26. @return 返回self实例
  27. */
  28. - (instancetype)initWithReuseIdentifier:(NSString*)reuseIdentifier customStyle:(AUSingleTitleListItemStyle)style;
  29. /**
  30. 根据不同 style 返回不同高度
  31. @param style
  32. @return 自定义类型,详见AUSingleTitleListItemStyle
  33. */
  34. + (CGFloat)cellHeightForStyle:(AUSingleTitleListItemStyle)style;
  35. @end

AUDoubleTitleListItem

  1. typedef NS_ENUM(NSInteger, AUDoubleTitleListItemStyle) {
  2. AUDoubleTitleListItemStyleDefault, // 有左图,高度 120,图标 76 (单位:px)
  3. AUDoubleTitleListItemStyleValue1, // 无左图,高度 120,(单位:px)
  4. AUDoubleTitleListItemStyleValue2, // 有左图,高度 144,图标 88 (单位:px)
  5. };
  6. @interface AUDoubleTitleListItem : AUBaseListItem<AUDoubleTitleListItemModelDelegate, TTTAttributeLabelDelagate>
  7. @property(nonatomic,strong) UILabel *subtitleLabel;
  8. @property(nonatomic,strong) UIImageView *leftImageView;
  9. @property(nonatomic,strong) UILabel* timeLabel;
  10. @property(nonatomic,strong) UILabel *rightAssistLabel;
  11. /**
  12. 设置 cell 展示所需的所有数据
  13. @param block 传入的 block
  14. */
  15. - (void)setModelBlock:(void(^)(AUListItemModel<AUDoubleTitleListItemModelDelegate, TTTAttributeLabelDelagate>*model))block;
  16. /**
  17. 初始化函数
  18. @param reuseIdentifier 标识
  19. @param style 自定义的类型,详见 AUDoubleTitleListItemStyle
  20. @return 返回 self 实例
  21. */
  22. - (instancetype)initWithReuseIdentifier:(NSString*)reuseIdentifier customStyle:(AUDoubleTitleListItemStyle)style;
  23. /**
  24. 根据不同 style 返回不同高度
  25. @param style 自定义类型,详见AUDoubleTitleListItemStyle
  26. @return 返回cell高度值
  27. */
  28. + (CGFloat)cellHeightForStyle:(AUDoubleTitleListItemStyle)style;
  29. /**
  30. 根据不同 style 返回动态高度
  31. @param style 自定义类型,详见 AUDoubleTitleListItemStyle
  32. @param block 数据模型 详见 AUDoubleTitleListItemModelDelegate
  33. 需要注意:1. 该方法务必传入 model.accessoryType 的确切值;
  34. 2. 如果需要换行,请业务指定具体行数 subtitleLines
  35. @return 返回 cell 高度值
  36. */
  37. + (CGFloat)cellHeightForStyle:(AUDoubleTitleListItemStyle)style
  38. modelBlock:(void(^)(AUListItemModel<AUDoubleTitleListItemModelDelegate, TTTAttributeLabelDelagate>*model))block;
  39. @end

AUCheckBoxListItem

  1. @protocol AUCheckBoxListItemDelegate <NSObject>
  2. /**
  3. checkbox 状态变化,给外部的回调
  4. @param item checkbox 实例
  5. */
  6. - (void)checkboxValueDidChanged:(AUCheckBox *)item;// 取 cell 的 tag 作为 item 的 tag
  7. @end
  8. @interface AUCheckBoxListItem : AUBaseListItem<AUCheckBoxListItemModelDelegate>
  9. @property(nonatomic, assign, getter = isChecked) BOOL checked;//设置 checkbox 勾选状态
  10. @property(nonatomic, assign, getter = isDisableCheck) BOOL disableCheck;//是否禁用 checkbox
  11. @property(nonatomic, weak) id <AUCheckBoxListItemDelegate> delegate;
  12. @end

AUSwitchListItem

  1. @interface AUSwitchListItem : AUNBaseListItem
  2. @property (nonatomic,strong) UISwitch *switchControl; // cell 中的 switch 控件
  3. // 设置菊花为展示或者隐藏状态
  4. - (void)showLoadingIndicator:(BOOL)show;
  5. @end

自定义属性

属性名 用途 类型
title 主标题 NSString
titleLabel 主标题 Label UILabel
subtitle 副标题 NSString
subtitleLabel 副标题 Label UILabel
leftImage 左侧图标 UIImage
leftImageView 左侧图标 View UIImageView
rightImage 右侧图标 UIImage
rightImageView 右侧图标 View UIImageView
leftimageSize 左侧图标大小 CGSize
timeString 右侧时间字符串 NSString
timeLabel 右侧时间 Label UILabel
showMarkWhenSelected cell 被选中后,是否展示 checkmark BOOL
showAccessory 是否展示辅助图标 BOOL
checked 设置 AUCheckBoxListItem 是否选中状态 BOOL
disableCheck 设置 AUCheckBoxListItem 是否 disable 状态 BOOL

注:各控件支持使用的属性在下面代码示例中展示。

代码示例

AUSingleTitleListItem

  • 推荐用法:

    1. AUSingleTitleListItem*cell = [[AUSingleTitleListItem alloc] initWithReuseIdentifier:identifierSingle1 model:^(AUListItemModel<AUSingleTitleListItemModelDelegate> *model) {
    2. model.title = @"我是主标题";
    3. model.subtitle = @"我是副副副标题";
    4. model.showAccessory = YES;
    5. model.XXX = XXXX;
    6. //支持的属性包含在 AUListItemModel 以及 AUSingleTitleListItemDelegate 中,在上述接口说明中可查阅
    7. }];
  • 也可以单独设置某些提供的属性(与推荐用法中 model 中包含的保持一致):

    1. AUSingleTitleListItem*cell = [[AUSingleTitleListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testsingle"];
    2. cell.title = @"我是主标题";
  • 支持控件上各个元素的设置:

    1. AUSingleTitleListItem*cell = [[AUSingleTitleListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testsingle"];
    2. cell.titleLabel.backgroundColor = [UIColor redColor];

AUDoubleTitleListItem

  • 推荐用法:

    1. AUDoubleTitleListItem*cell = [[AUDoubleTitleListItem alloc] initWithReuseIdentifier:identifierDouble3 model:^(AUListItemModel<AUDoubleTitleListItemModelDelegate> *model) {
    2. model.title = @"我不支持设置右边图像";
    3. model.leftImage = [UIImage imageNamed:@"AntUI.bundle/ilustration_ap_expection_limit.png"];
    4. model.leftimageSize = CGSizeMake(100, 100);
    5. model.showAccessory = YES;
    6. //支持的属性包含在 AUListItemModel 以及 AUDoubleTitleListItemDelegate 中,在上述接口说明中可查阅
    7. }];
  • 也可以单独设置提供的属性:

    1. AUDoubleTitleListItem*cell = [[AUDoubleTitleListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testdouble"];
    2. cell.leftImage = [UIImage imageNamed:@"AntUI.bundle/ilustration_ap_expection_limit.png"];
  • 支持控件上各个元素的设置:

    1. AUDoubleTitleListItem*cell = [[AUDoubleTitleListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testdouble"];
    2. cell.leftImageView.image = [UIImage imageNamed:@"AntUI.bundle/ilustration_ap_expection_limit.png"];

AUCheckBoxListItem

  • 推荐用法:

    1. AUCheckBoxListItem* cell = [[AUCheckBoxListItem alloc] initWithReuseIdentifier:identifierChecbkox model:^(AUListItemModel<AUCheckBoxListItemModelDelegate> *model) {
    2. model.title = @"我默认被选中";
    3. model.showAccessory = NO;
    4. //只支持这两种设置
    5. }];
    6. cell.disableCheck = YES;//设置 check 按钮为 disable 状态
  • 也可以单独设置提供的属性:

    1. AUCheckBoxListItem*cell = [[AUCheckBoxListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testcheck"];
    2. cell.showAccessory =YES;
  • 支持控件上各个元素的设置:

    1. AUCheckBoxListItem*cell = [[AUDoubleTitleListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testcheck"];
    2. cell.titleLabel.text = @"我默认为被选中";

AUSwitchListItem

  1. AUSwitchListItem *switchCell = [[AUSwitchListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"switchCell"];
  2. AUListItemModel *model = _datas[indexPath.row];
  3. switchCell.titleLabel.text = model.title;
  4. switchCell.leftAccessorView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"certify.png"]];
  5. switchCell.leftAccessorType = AUListItemLeftAccessorTypeIcon;
  6. switchCell.switchControl.on = NO;
  7. UISwitch *switchView = (UISwitch *)switchCell.accessoryView;
  8. [switchView addTarget:self action:@selector(switchValueDidChanged:) forControlEvents:UIControlEventValueChanged];
  9. return switchCell;