IOS UI Basics 08

• Custom Equal Height cell

    // 创建自定义cell添加子控件的方法initWithStyle(note:子控件要添加到contentView上)    - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier NS_AVAILABLE_IOS(3_0);    // 传统创建自定义view添加子空间的方法    //- (instancetype)initWithFrame:(CGRect)frame // 自定义xib时调用的方法 //- (void)awakeFromNib; //- (instancetype)initWithCoder:(NSCoder *)coder // 布局子控件 - (void)layoutSubviews { [super layoutSubviews]; } //设置数据 - (void)setXX:(模型数据类型 *)XX

• Masonry

  • The masonry layout of the child control frame is easier to understand and better readable.
  • You need to import 2 macros and masonry header files before using masonry

   Remove prefix#define Mas_shorthandCan receive data type parameters#define Mas_shorthand_globals#import"Masonry.h"-(Instancetype) Initwithstyle: (Uitableviewcellstyle) style Reuseidentifier: (NSString *) reuseidentifier{if (Self = [Super Initwithstyle:style Reuseidentifier:reuseidentifier]) {The usual spacingCGFloat margin =10;CGFloat contentvieww = Cgrectgetwidth (Self. Contentview. frame);CGFloat CONTENTVIEWH = Cgrectgetheight (Self. Contentview. frame);1. PictureUiimageview *icon_imageview = [[Uiimageview alloc] init]; [Self. Contentview Addsubview:icon_imageview];Icon_imageview.backgroundcolor = [Uicolor Bluecolor];Self.icon_imageview = Icon_imageview; [Icon_imageview makeconstraints:^ (Masconstraintmaker *make) {//make.left.equalTo (self.contentView.left). offset (margin); //make.top.equalTo (self.contentView.top). offset (margin); make .top.left.equalTo (self.contentview) .offset (margin); Make.bottom.equalto (self< Span class= "hljs-variable" >.contentview.bottom) .offset ( -margin); Make.width.equalto (80);}]; }                 

• Custom unequal-height cell

     Add child controls (add the child controls that are likely to appear)-(Instancetype) Initwithstyle: (Uitableviewcellstyle) style Reuseidentifier: (NSString *) ReuseidentifierLayout sub-space frame-(void) Layoutsubviews {[Super Layoutsubviews]; }Sets the data displayed by the child control-(void) SETXX: (model data type *) XXScenario 1: The height of all cells is calculated clearly before Heightforrowatindexpath: method invocation/** * Returns the specific height of each row of cells */-(CGFloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) indexpath{jxstatus *status =Self. Statuses[indexpath. row];CGFloat margin =10;CGFloat cellheight =0;AvatarCGFloat IconX = margin;CGFloat icony = margin;CGFloat ICONWH =30;CGRect iconimageviewframe = CGRectMake (IconX, Icony, ICONWH, ICONWH);TextCGFloat textx = IconX;CGFloat texty = Cgrectgetmaxy (iconimageviewframe) + margin;CGFloat TEXTW = [UIScreen mainscreen]. Bounds. Size. Width-2 * TEXTX;Cgsize textmaxsize = Cgsizemake (TEXTW, maxfloat);Nsdictionary *textattrs = @{nsfontattributename: [Uifont systemfontofsize:14]};CGFloat texth = [status. text Boundingrectwithsize:textmaxsize options:nsstringdrawinguseslinefragmentorigin attributes:textAttrs context:Nil. Size. Height;CGRect text_labelframe = CGRectMake (Textx, texty, TEXTW, texth);Image matchingif (status. picture) {CGFloat PICTUREWH =100;CGFloat Picturex = TEXTX;CGFloat Picturey = Cgrectgetmaxy (text_labelframe) + margin;CGRect pictureimageviewframe = CGRectMake (Picturex, Picturey, PICTUREWH, PICTUREWH); Cellheight = Cgrectgetmaxy (pictureimageviewframe); }else {cellheight = Cgrectgetmaxy (text_labelframe); Cellheight + = margin;return cellheight;}Scenario 2: Calculate the cell height in the model and return the height directly from the model-(CGFloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) indexpath{jxstatus *status =Self. Statuses[indexpath. row];Return status. Cellheight;}Model data#import<UIKit/UIKit.h>@interfaceJxstatus:NSObject/**** text \ Picture Data ****//** Name * *@property (Nonatomic,CopyNSString *name;/** Text */@property (Nonatomic,CopyNSString *text;/** Avatar */@property (Nonatomic,CopyNSString *icon;/** Picture */@property (Nonatomic,CopyNSString *picture;/** is a member * *@property (Nonatomic,AssignBOOL VIP;/**** Frame Data ****//** the frame * * of the Avatar@property (Nonatomic,AssignCGRect Iconframe;/** Nickname of Frame */@property (Nonatomic,AssignCGRect Nameframe;/** member's Frame */@property (Nonatomic,AssignCGRect Vipframe;/** Text Frame */@property (Nonatomic,AssignCGRect TextFrame;Frame *//** with picture@property (Nonatomic,AssignCGRect Pictureframe;Height of/** cell */@property (Nonatomic,AssignCGFloat cellheight;@end#import"JXStatus.h"@implementationjxstatus-(CGFloat) cellheight{if (_cellheight = =0) {CGFloat margin =10;AvatarCGFloat IconX = margin;CGFloat icony = margin;CGFloat ICONWH =30;Self. Iconframe = CGRectMake (IconX, Icony, ICONWH, ICONWH);Nickname (name)CGFloat Namey = icony;CGFloat NameX = Cgrectgetmaxx (Self. iconframe) + margin;Calculate the size occupied by the textNsdictionary *nameattrs = @{nsfontattributename: [Uifont systemfontofsize:17]};Cgsize namesize = [Self. Name Sizewithattributes:nameattrs];Self. Nameframe = (CGRect) {{NameX, Namey}, namesize};Member iconif (Self. vip) {CGFloat VIPW =14;CGFloat viph = namesize. Height;CGFloat vipy = Namey;CGFloat vipx = Cgrectgetmaxx (Self. nameframe) + margin;Self. Vipframe = CGRectMake (vipx, vipy, VIPW, VIPH); }TextCGFloat textx = IconX;CGFloat texty = Cgrectgetmaxy (Self. iconframe) + margin;CGFloat TEXTW = [UIScreen mainscreen]. Bounds. Size. Width-2 * TEXTX;Cgsize textmaxsize = Cgsizemake (TEXTW, maxfloat);Nsdictionary *textattrs = @{nsfontattributename: [Uifont systemfontofsize:14]};CGFloat texth = [Self. text Boundingrectwithsize:textmaxsize options:nsstringdrawinguseslinefragmentorigin attributes:textAttrs context:Nil. Size. Height;Self. TextFrame = CGRectMake (Textx, texty, TEXTW, texth);Image matchingif (self.picture) {cgfloat picturewh = 100; cgfloat Picturex = TEXTX; cgfloat Picturey = Cgrectgetmaxy (self .textframe) + margin; self.pictureframe = CGRectMake (PictureX, PictureY, PICTUREWH, PICTUREWH); _cellheight = Cgrectgetmaxy (self.pictureFrame);} else {_cellheight = Cgrectgetmaxy (self .textframe); } _cellheight + = margin; } return _cellheight;}  @end             

• Automatic layout
  • Add child controls in Main.storyboard, set constraints
  • Set the data displayed by the child control
    • -(void) SETXX: (model data type *) XX
  • Automatic cell height calculation in viewdidload

    // 告诉tableView所有cell的真实高度是自动计算（根据设置的约束来计算）self.tableView.rowHeight = UITableViewAutomaticDimension;// 告诉tableView所有cell的估算高度self.tableView.estimatedRowHeight = 44;

IOS UI Basics 08