Implementing a common custom UITableviewCell

Keywords: less github

I. Introduction of Functions
Firstly, the effect map is shown.

The implementation styles are as follows:

  1. Title + Arrow;
  2. Title + Subtitle + Arrow
  3. Title + Subtitle
  4. Title
  5. Picture + Title + Arrow
  6. Pictures + Titles

Next, I will explain how to implement such a multi-functional, reusable and more flexible custom UITableViewCell through Masonry automatic adaptation:
1. Look at the project structure first:

Use CocoaPods to manage third-party libraries (and then write a separate blog about how to install CocoaPods and problems arising from installation, please pay attention!) In this project, I only imported Masonry third-party libraries, other libraries can be imported if necessary.

2. Look at the macros defined in the pch file

#ifndef PrefixHeader_pch
#define PrefixHeader_pch
//Here are the macro definitions for automatic adaptation that can be ignored without automatic adaptation
#define WS(weakSelf)  __weak __typeof(&*self)weakSelf = self;
//define this constant if you want to use Masonry without the 'mas_' prefix
#define MAS_SHORTHAND
//define this constant if you want to enable auto-boxing for default syntax
#define MAS_SHORTHAND_GLOBALS
/**
 *  RGB Value mode
 */
#define RGBA(r,g,b,a)     [UIColor colorWithRed:(r)/255.0f green:(g)/255.0f blue:(b)/255.0f alpha:a]
#define RGB(r,g,b)          RGBA(r,g,b,1)
#Define COLOR_DETAIL RGB (109, 116, 121)//CELL Description Color
/**
 *  Font size settings
 */
#define FONT(RatioFont)     [UIFont systemFontOfSize:RatioFont]
#Define COLOR_TITLE RGB (41, 46, 49)//CELL Title Color
// Include any system framework and library headers here that should be included in all compilation units.
// You will also need to set the Prefix Header build setting of one or more of your targets to reference this file.
#ifdef __OBJC__
#import "Masonry.h"

#endif
#endif /* PrefixHeader_pch */
  • The Masonry adaptation method has been standardized to make it easier to adapt. Of course, this is only a personal preference. If you are not used to it, you can use your own method to adapt.
  • Define RGB color, input parameters corresponding to RGB to customize various colors, compared with [UIColor redColor]; more flexible, more arbitrary;
  • Font is a macro for setting font size. Setting font size can be passed directly into font size.

3. Cell Implementation
<1>. In our CommonTableViewCell.h file, we expose a method to set up a cell, so that different parameters are passed in when invoking. The code is as follows. (The annotations are clear enough to explain O()O one by one):

/**
 cell Method for Exposure Setting
 @param imageName Input image name
 @param title Title
 @param subTitle Subheading
 @param isHas Are there arrow s?
 */
-(void)setCellInfoWithHeaderImage:(NSString *)imageName withTitle:(NSString *)title withSubTitle:(NSString *)subTitle withArrow:(BOOL )isHas;

<2>. In our CommonTableViewCell.m file, UI interface layout and implementation settings are implemented:

  • Add the required controls
@property (nonatomic, strong)UIImageView *headerImageView;  //  Title picture
@property (nonatomic, strong)UILabel *titleLabel;  //  Title
@property (nonatomic, strong)UILabel *subTitleLabel; //  Subheading
@property (nonatomic, strong)UIImageView *arrowImageView; // arrow pictures
  • Initialize our custom cell:
//  Here we take away the methods of building UI and adapting to make the code more readable and less cluttered.
 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]){
        [self bulidUI]; //  Build UI
        [self autoLayout]; //  UI Interface Control Adaptation
    }
    return self;
}
  • BulidUI (here you can also choose to load lazily)
-(void)bulidUI{
    //  Add image headerImage
    self.headerImageView = [[UIImageView alloc] init];
    [self.contentView addSubview:self.headerImageView]; 
    //  Add Title Label
    self.titleLabel = [[UILabel alloc] init];
    self.titleLabel.font = [UIFont systemFontOfSize:14];
    self.titleLabel.textColor = [UIColor blackColor];
    [self.contentView addSubview:self.titleLabel];
    //  Add subtitle subTitleLabel
    self.subTitleLabel = [[UILabel alloc] init];
    self.subTitleLabel.textColor = [UIColor lightGrayColor];
    self.subTitleLabel.textAlignment = NSTextAlignmentRight;
    self.subTitleLabel.font = [UIFont systemFontOfSize:12];
    [self.contentView addSubview:self.subTitleLabel];
    //  Add arrow
    self.arrowImageView = [[UIImageView alloc] init];
    [self.contentView addSubview:self.arrowImageView];
}
  • autoLayout Automation
-(void)autoLayout{
        //  Restrict Head Pictures
    [self.headerImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.offset(10);
        make.centerY.equalTo(self.contentView.mas_centerY);
        make.height.equalTo(21);
        make.width.equalTo(21);
    }];
    //  Constraints on titles
    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.headerImageView.mas_trailing).offset(10);
        make.height.equalTo(21);
        make.centerY.equalTo(self.contentView.mas_centerY);
        make.trailing.equalTo(self.subTitleLabel.mas_leading).offset(-10);
    }];
    //  Constraints on subheadings
    [self.subTitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.titleLabel.mas_trailing).offset(10);
        make.height.equalTo(21);
        make.centerY.equalTo(self.contentView.mas_centerY);
        make.trailing.equalTo(self.arrowImageView.mas_leading).offset(-10);
    }];
    //  Restrict arrow
    [self.arrowImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.trailing.equalTo(self.contentView.mas_trailing).offset(-10);
        make.width.equalTo(8);
        make.height.equalTo(13);
        make.centerY.equalTo(self.contentView.mas_centerY);
    }];
}
  • The Method of Setting cell Display
- (void)setCellInfoWithHeaderImage:(NSString *)imageName withTitle:(NSString *)title withSubTitle:(NSString *)subTitle withArrow:(BOOL)isHas {
    if (imageName.length<=0){ //  Judging whether a head photograph exists
        [self.titleLabel mas_updateConstraints:^(MASConstraintMaker *make) {
           make.leading.offset(10); //  No header photos, update constraints, heading to the left at this time
        }];
    }
    if (subTitle.length>0) { //  Determine whether subheadings exist or not, or update constraints
        [self.titleLabel mas_updateConstraints:^(MASConstraintMaker *make) {
            make.width.mas_greaterThanOrEqualTo(80);  //  Set header width
        }];
        [self.subTitleLabel mas_updateConstraints:^(MASConstraintMaker *make) {
            make.width.mas_greaterThanOrEqualTo(80); //  Setting Subtitle Width
        }];
    }
    if (!isHas){  //  Determine if there is an arrow
        [self.subTitleLabel mas_updateConstraints:^(MASConstraintMaker *make) {
           make.trailing.equalTo(self.contentView.mas_trailing).offset(-10);
        }];
    }
    self.headerImageView.image = [UIImage imageNamed:imageName];
    self.titleLabel.text = title;
    self.subTitleLabel.text = subTitle;
    //  Here our arrow image can be placed locally, read directly, of course, can also be passed in outside, just need to add parameters to the exposure method, you can refer to the same judgment as the head image.
    self.arrowImageView.image = [UIImage imageNamed:@"ic_arrow right"]; 
}

4. Implementation method:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    // create object 
    CommonTableViewCell *commonTableViewCell = [tableView dequeueReusableCellWithIdentifier:@"commonTableViewCellIdentifier"];
    if (!commonTableViewCell){
        commonTableViewCell = [[CommonTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"commonTableViewCellIdentifier"];
    }
    switch (indexPath.row) {
            case 0:{
               [commonTableViewCell setCellInfoWithHeaderImage:@"" withTitle:@"Title xxxxxxxx34r34253452345235324" withSubTitle:@"" withArrow:YES];
            }
            break;
        case 1:{
            [commonTableViewCell setCellInfoWithHeaderImage:@"" withTitle:@"Title 45235345453453245" withSubTitle:@"Subheading 3453453453453452 fgfghffjjjfghjfghjfgjfghjfghj3452345234523" withArrow:YES];
        }
            break;
        case 2:{
            [commonTableViewCell setCellInfoWithHeaderImage:@"" withTitle:@"Title" withSubTitle:@"Subheading" withArrow:NO];
        }
            break;
        case 3:{
            [commonTableViewCell setCellInfoWithHeaderImage:@"" withTitle:@"Title" withSubTitle:@"" withArrow:NO];
        }
            break;
        case 4:{
            [commonTableViewCell setCellInfoWithHeaderImage:@"per_printer" withTitle:@"Title" withSubTitle:@"Subheading" withArrow:YES];
        }
            break;
        case 5:{
            [commonTableViewCell setCellInfoWithHeaderImage:@"per_printer" withTitle:@"Title" withSubTitle:@"" withArrow:YES];
        }
            break;
        default:
            break;
    }
    return commonTableViewCell;

}

So far, we have talked about the layout and implementation of this public cell. Next, there are several other types of custom cells in our project. If you are interested, you can see them for yourself. Xiaobai will not go into details here.

The above engineering code has been uploaded to GitHub, welcome criticism and correction, and more welcome star!

Posted by quadlo on Fri, 05 Apr 2019 11:27:30 -0700