All Products
Search
Document Center

Mobile Platform as a Service:Item component

Last Updated:Mar 16, 2022

AUListItem is a series of controls designed based on the new UED requirements. It cannot be used interchangeably with the APTableView control in the original APCommonUI because most UED styles are different.

AUListItem contains four ListItems. The following table lists the elements supported by them respectively.

AUListItem

Title

Subtitle

Left icon

Right icon

Left icon in a customized size

Show a checkmark

when selected

Rightmost assistant arrow

AUSingleTitleListItem

YES️

YES

YES️

YES

YES️

YES

YES️

AUDoubleTitleListItem

YES️

YES

YES️

-

YES️

-

YES️

AUCheckBoxListItem

YES️

-

-️

-

-️

-

YES️

AUSwitchListItem

YES️

-

-️

-

-️

-

-️

Sample images

  • AUSingleTitleListItem

    5
  • AUDoubleTitleListItem

    6
  • AUCheckBoxListItem

    7
  • AUSwitchListItem

    8

Dependency

The dependency of AUListItem is as follows:

import <UIKit/UIKit.h>

API description

Common APIs

Model layer

Multiple delegates are set to standardize parameter transfer by external clients. For elements that are not supported, external clients cannot transfer the corresponding parameters. For example, AUDoubleTitleListItem does not support the right icon. Therefore, AUDoubleTitleListItemModelDelegate does not contain the rightImage parameter.

AUListItemProtocols.h
    /**
Data items that can be set and accessed in AUSingleTitleListItem.
*/
@protocol AUSingleTitleListItemModelDelegate <NSObject>

@property (nonatomic, copy)      NSString   *subtitle;          // The subtitle.
@property (nonatomic, strong)    UIImage    *leftImage;         // The left-side image.
@property (nonatomic, strong)    UIImage    *rightImage;        // The image before the text on the right side.
@property (nonatomic, strong)    UIImage    *rightAssistImage;  // The image after the text on the right side.
@property (nonatomic, assign)    CGSize  leftimageSize;         // You can set the size of the left-side image. Default size: 22.
@property (nonatomic, assign)    CGSize  rightAssistImageSize;  // You can set the size of the image after the text on the right side. Default size: 22.

@end


/**
Data items that can be set and accessed in AUDoubleTitleListItem.

*/
@protocol AUDoubleTitleListItemModelDelegate <NSObject>

@property (nonatomic, copy)      NSString   *subtitle;          // The subtitle.
@property (nonatomic, strong)    UIImage    *leftImage;         // The left-side image.
@property (nonatomic, assign)    CGSize  leftimageSize;         // You can set the size of the left-side image. The default size is used if you do not set this parameter.
@property (nonatomic, copy)      NSString   *timeString;        // The time displayed on the right side.
@property (nonatomic, copy)      NSString   *rightAssistString; // The auxiliary information on the right side, which is centered by default.
@property (nonatomic, assign)    NSInteger subtitleLines;       // The number of auxiliary subtitle lines, which must be specified by the client.
//@property (nonatomic, assign)   BOOL    showAccessory;        // Whether to display the auxiliary icon.

@end

/**
Data items that can be set and accessed in AUCheckBoxListItem.

*/
@protocol AUCheckBoxListItemModelDelegate <NSObject>
//@property (nonatomic, assign)   BOOL    showAccessory;          // Whether to display the auxiliary icon.

@end

/**
Data items that can be set and accessed in AUMultiListItemDelagate.

*/
@protocol AUMultiListItemDelagate <NSObject>

@property (nonatomic, copy)   NSString *subtitle;          // The subtitle.
@property (nonatomic, strong) UIImage    *leftImage;       // The left-side image.
//@property (nonatomic, assign) CGSize    leftimageSize;   // The size of the left-side image.
@property (nonatomic, assign) BOOL    showAccessory;       // Whether to display the auxiliary icon.
@property (nonatomic, assign) NSInteger subtitleLines;     // Set the number of subtitle lines.

@end


/**
Data items that can be set and accessed in AUMultiListBottomAssistDelagate.

*/
@protocol AUMultiListBottomAssistDelagate <NSObject>

@property (nonatomic, strong) NSString *originalText;    // The source of the text.
@property (nonatomic, strong) NSString *timeDesc;        // The time description.
@property (nonatomic, strong) NSString *othersDesc;      // Other description.

@end


/**
Data items that can be set and accessed in AUParallelTitleListItem.

*/
@protocol AUParallelTitleListItemModelDelegate <NSObject>
@property (nonatomic, copy)      NSString   *subtitle;          // Title 2
@property (nonatomic, copy)      NSString   *describe;          // Description 1
@property (nonatomic, copy)      NSString   *subDescribe;       // Description 2

@end


/**
Data items that can be set and accessed in AULineBreakListItem.

*/
@protocol AULineBreakListItemModelDelegate <NSObject>
@property (nonatomic, copy)      NSString   *subtitle;          // The subtitle.
@end


/**
Data items that can be set and accessed in AUCouponsItemDelagate.

*/
@protocol AUCouponsItemDelagate <NSObject>

@property (nonatomic, copy)   NSString *subtitle;          // The subtitle.
@property (nonatomic, strong) UIImage    *leftImage;       // The left-side image.
@property (nonatomic, strong) UIImage    *leftImageUrl;    // The URL of the left-side image.
@property (nonatomic, strong) NSString *assistDesc;        // The text assisted description.
@property (nonatomic, assign) NSInteger totalWidth;        // Set the width of the card.

@end


/**
The rich text protocol of TTTAttributeLabelDelagate.

*/

@protocol TTTAttributeLabelDelagate <NSObject>

@property (nonatomic, copy)   NSString *attributeText;             // The rich-text content.
@property (nonatomic, copy)   NSString *linkText;                  // The rich-text link text.
@property (nonatomic, copy)   NSString *linkURL;                   // The URL of the rich-text content.

@end


AUListItemModel.h
import "AUListItemProtocols.h"
@interface AUListItemModel : NSObject
@property (nonatomic, copy)      NSString   *title;                 // The title.
@property (nonatomic, assign)   UIEdgeInsets    separatorLineInset; // You can set the margin between the left-side and right-side separation lines and the cell.
@end

View layer

AUBaseListItem.h:

@interface AUBaseListItem : UITableViewCell
// The following data items are open so that external clients can set extra properties, such as the title color.
@property(nonatomic,strong) UILabel *titleLabel;
@property(nonatomic,strong) UIView *separatorLine;
/**
The initialization function.
@param reuseIdentifier The reuse identifier.
@param block          The block imported externally. Generally, title and leftimage are set in this block externally.
@return                Return a self instance.
*/
- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier  model:(void(^)(AUListItemModel*model))block;
/**
Return the cell height.
@return             Return the cell height.
*/
+ (CGFloat)cellHeight ;
@end

#ifdef AUBaseListItem_protected
// This identifier is open only to the subclass. Before importing AUBaseListItem in the subclass, set AUBaseListItem_protected to 1.
@interface AUBaseListItem ()
@property (nonatomic,strong) AUListItemModel* baseModel;
@end

#endif
/**
Generally, a client simply needs to call the initWithReuseIdentifier:model: method in the AUBaseListItem subclass to meet the requirement.
Here, independent methods oriented to parameters such as title are provided.
All parameters, except title, are implemented in the subclass and isolated from each other.
*/
@interface AUBaseListItem (Extensions)
/**
Set the title.
@param title The title string.
*/
- (void)setTitle:(NSString* )title;

/**
The method for getting the title.
@return Return the title string.
*/
- (NSString*)title ;

/**
Set the spacing between the separation line and the left or right side of a cell.
@param separatorLineInset UIEdgeInsets parameter
*/
- (void)setSeparatorLineInset:(UIEdgeInsets)separatorLineInset;

/**
Get the inset of the separation line.
@return Return the inset of the separation line.
*/
- (UIEdgeInsets)separatorLineInset;

AUSingleTitleListItem

typedef NS_ENUM(NSInteger, AUSingleTitleListItemStyle) {
AUSingleTitleListItemStyleDefault,  // Height: 92; icon: 58.
AUSingleTitleListItemStyleValue1,   // Height: 110; icon: 72.
};

@interface AUSingleTitleListItem : AUBaseListItem

@property(nonatomic,strong) UILabel *subtitleLabel;
@property(nonatomic,strong) UIImageView *leftImageView;
@property(nonatomic,strong) UIImageView *rightImageView;
@property(nonatomic,strong) UIImageView *rightAssistImageView;

/**Important
The initialization function.

@param reuseIdentifier The reuse identifier.
@param block           The block imported externally. Generally, title and leftimage are set in this block externally.

@return                Return a self instance.
*/
- (instancetype)initWithReuseIdentifier:(NSString*)reuseIdentifier model:(void(^)(AUListItemModel<AUSingleTitleListItemModelDelegate>*model))block  __deprecated_msg("Do not use this method because it will be discarded.");



/**
Set all data required for showing a cell.

@param block The block to be transferred.
*/
- (void)setModelBlock:(void(^)(AUListItemModel<AUSingleTitleListItemModelDelegate>*model))block;


/**
The initialization function.

@param reuseIdentifier The reuse identifier.
@param style The custom style. For more information, see AUSingleTitleListItemStyle.
@return Return a self instance.
*/
- (instancetype)initWithReuseIdentifier:(NSString*)reuseIdentifier customStyle:(AUSingleTitleListItemStyle)style;



/**
Return a height based on the style.

@param style
@return Return a custom style. For more information, see AUSingleTitleListItemStyle.
*/
+ (CGFloat)cellHeightForStyle:(AUSingleTitleListItemStyle)style;

@end

AUDoubleTitleListItem

typedef NS_ENUM(NSInteger, AUDoubleTitleListItemStyle) {
    AUDoubleTitleListItemStyleDefault, // Has a left icon; height: 120 px; icon: 76.
    AUDoubleTitleListItemStyleValue1,  // Has no left icon; height: 120 px.
    AUDoubleTitleListItemStyleValue2,  // Has a left icon; height: 144 px; icon: 88.
};

@interface AUDoubleTitleListItem : AUBaseListItem<AUDoubleTitleListItemModelDelegate, TTTAttributeLabelDelagate>

@property(nonatomic,strong) UILabel *subtitleLabel;
@property(nonatomic,strong) UIImageView *leftImageView;
@property(nonatomic,strong) UILabel* timeLabel;
@property(nonatomic,strong) UILabel *rightAssistLabel;


/**
 Set all data required for showing a cell.

 @param block The block to be transferred.
 */
- (void)setModelBlock:(void(^)(AUListItemModel<AUDoubleTitleListItemModelDelegate, TTTAttributeLabelDelagate>*model))block;

/**
 The initialization function.

 @param reuseIdentifier The reuse identifier.
 @param style The custom style. For more information, see AUDoubleTitleListItemStyle.
 @return Return a self instance.
 */
- (instancetype)initWithReuseIdentifier:(NSString*)reuseIdentifier customStyle:(AUDoubleTitleListItemStyle)style;


/**
 Return a height aaccording to the style.

 @param style The custom style. For more information, see AUDoubleTitleListItemStyle.
 @return Return the cell height.
 */
+ (CGFloat)cellHeightForStyle:(AUDoubleTitleListItemStyle)style;



/**
 Return a dynamic height according to the style.

 @param style The custom style. For more information, see AUDoubleTitleListItemStyle.
 @param block The data model. For more information, see AUDoubleTitleListItemModelDelegate.
 Note: 1. The method must transfer a exact value of model.accessoryType.
          2. If line feeds are required, use subtitleLines to specify the number of lines.
 @return Return the cell height.
 */
+ (CGFloat)cellHeightForStyle:(AUDoubleTitleListItemStyle)style
                   modelBlock:(void(^)(AUListItemModel<AUDoubleTitleListItemModelDelegate, TTTAttributeLabelDelagate>*model))block;

@end

AUCheckBoxListItem

@protocol AUCheckBoxListItemDelegate <NSObject>

/**
 The callback to be triggered when the check box status changes.

 @param item The check box instance.
 */
- (void)checkboxValueDidChanged:(AUCheckBox *)item;// Take the tag of the cell as the tag of the item.

@end

@interface AUCheckBoxListItem : AUBaseListItem<AUCheckBoxListItemModelDelegate>

@property(nonatomic, assign, getter = isChecked) BOOL checked;// Set the check box to the selected state.
@property(nonatomic, assign, getter = isDisableCheck) BOOL disableCheck;// Specify whether to disable the check box.
@property(nonatomic, weak) id <AUCheckBoxListItemDelegate> delegate;

@end

AUSwitchListItem

@interface AUSwitchListItem : AUNBaseListItem

@property (nonatomic,strong)  UISwitch *switchControl;   // The switch control in a cell.

// Specify whether to show or hide the loading icon.
- (void)showLoadingIndicator:(BOOL)show;

@end

Custom properties

Property

Purpose

Type

title

The title.

NSString

titleLabel

The title label.

UILabel

subtitle

The subtitle.

NSString

subtitleLabel

The subtitle label.

UILabel

leftImage

The left-side icon.

UIImage

leftImageView

The view of the left-side icon.

UIImageView

rightImage

The right-side icon.

UIImage

rightImageView

The view of the right-side icon.

UIImageView

leftimageSize

The size of the left-side icon.

CGSize

timeString

The time string on the right.

NSString

timeLabel

The time label on the right.

UILabel

showMarkWhenSelected

Whether to show a checkmark for a selected cell.

BOOL

showAccessory

Whether to show an assistant icon.

BOOL

checked

Whether AUCheckBoxListItem is selected.

BOOL

disableCheck

Whether AUCheckBoxListItem is disabled.

BOOL

Note

Note: The following code sample shows the properties supported in each control.

Code sample

AUSingleTitleListItem

  • The recommended usage is as follows:

AUSingleTitleListItem*cell = [[AUSingleTitleListItem alloc] initWithReuseIdentifier:identifierSingle1 model:^(AUListItemModel<AUSingleTitleListItemModelDelegate> *model) {
                                                            model.title = @"Title";
                                                            model.subtitle = @"Subtitle";
                                                            model.showAccessory = YES;
                                                            model.XXX = XXXX;
                                                            // The supported properties are contained in AUListItemModel and AUSingleTitleListItemDelegate. For more information, see their API descriptions.
                                                    }];
  • You can also set the provided properties separately. The property names are the same as those in model in the preceding recommended usage.

AUSingleTitleListItem*cell = [[AUSingleTitleListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testsingle"];
cell.title = @"Subtitle";
  • Each element on the control can be set.

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

AUDoubleTitleListItem

  • The recommended usage is as follows:

AUDoubleTitleListItem*cell = [[AUDoubleTitleListItem alloc] initWithReuseIdentifier:identifierDouble3 model:^(AUListItemModel<AUDoubleTitleListItemModelDelegate> *model) {
                                                            model.title = @"Right icon not supported";
                                                            model.leftImage = [UIImage imageNamed:@"AntUI.bundle/ilustration_ap_expection_limit.png"];
                                                            model.leftimageSize = CGSizeMake(100, 100);
                                                            model.showAccessory = YES;

                                                            // The supported properties are contained in AUListItemModel and AUSingleTitleListItemDelegate. For more information, see their API descriptions.
                                                    }];
  • You can also set provided properties separately.

AUDoubleTitleListItem*cell = [[AUDoubleTitleListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testdouble"];
cell.leftImage = [UIImage imageNamed:@"AntUI.bundle/ilustration_ap_expection_limit.png"];
  • Each element on the control can be set.

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

AUCheckBoxListItem

  • The recommended usage is as follows:

AUCheckBoxListItem* cell = [[AUCheckBoxListItem alloc] initWithReuseIdentifier:identifierChecbkox model:^(AUListItemModel<AUCheckBoxListItemModelDelegate> *model) {
                                                            model.title = @"Selected by default";
                                                            model.showAccessory = NO;
                                                            // Only the preceding two properties can be set.
                                                    }];
cell.disableCheck = YES;// Set the check button to the disabled state.
  • You can also set provided properties separately.

AUCheckBoxListItem*cell = [[AUCheckBoxListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testcheck"];
cell.showAccessory =YES;
  • Each element on the control can be set.

AUCheckBoxListItem*cell = [[AUDoubleTitleListItem alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"testcheck"];
cell.titleLabel.text = @"Selected by default";

AUSwitchListItem

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