Non-high cell construction (2), high cell Construction

Non-high cell construction (2), high cell Construction

 

I. the commentView style set up by the commentView module is divided into two types: 1. xib build interface 1.1 because the comment style is basically the same, we can use the same xib to process 1.2 most popular comments use a label to build 1.3 The content below is different 1.3.1 text style comments, we can also set the label constraint to a fixed spacing between the left and right sides and the above, so that the height will scale with the content, the premise is to set the label to 0 rows. the height is fixed. First, add a view to the position of the text comment. (based on the data, determine the comment display style at that time. The above part is the same) add a label and a button to the view. Note the following: to separate the image and text of a button, you only need to set the padding of the internal sub-control. If there is a restriction on the view under the label, do not conflict with the view setting constraint under the button, in short, if one of them is set, do not set 2 for the other. request Data 2.1 when setting model attributes, we need to process the data

 

2.2 we can see that we need to get the username first to get the top_cmt array, and then get the user dictionary 2.3. We are used to model-oriented development, so we get the first element (dictionary) of the top_cmt array, convert it to model 2.4, and then retrieve the user dictionary in the dictionary, when converting to another model 2.5, we need to first customize two models 2.6. We 'd better define a model attribute in the outermost model to save an inner model (item0 is also the comment model) why? When retrieving the attribute of the inner layer model, because the hierarchy is too deep, you need to write a long piece of code for such optimization. When obtaining the attribute of the inner layer model, this makes it easy for many users to convert the dictionary in the array attribute in the model to a set method that overwrites the array element in the model, as long as they get the dictionary element in the array, assign a value to this attribute in the model to be rigorous. Determine whether the array is empty.

1 // call 2-(void) setTop_cmt :( NSArray *) top_cmt3 {4 _ top_cmt = top_cmt; 5 if (top_cmt.count) {6 _ commentItem = comment; 7} 8} 9

 

3. In the outer model, how does one convert the dictionary (or dictionary attribute) in the array attribute of the model into a model? There are two ways to convert the first method to 3.1. Manually use the MJ framework to convert the second method to 3.2, so that the MJ framework will automatically help us to convert it, (the premise is that the MJ framework knows the type of model to convert the attributes in the model.) 3.3 How does the MJ framework automatically help us convert the internal model? MJExtension: if there is a model in the model, MJExtension will automatically help you convert @ property (nonatomic, strong) XTUserItem * user; because we will tell MJ framework when defining this dictionary, which type of model does the dictionary belong to? MJExtension: if an array exists in the model and the array is a dictionary, MJExtension will not automatically convert the dictionary from the array to the model, however, you need to tell him which type of model to convert the dictionary in the array. 3.4 how to tell MJ to convert the dictionary in the array to which type of model.

1 // key: Which array needs to be converted 2 + (NSDictionary *) mj_objectClassInArray3 {4 return @ {@ "top_cmt": @ "XTCommentItem"}; 5} 6

 

3.5 MJExtension bottom layer implementation 3.5.1 MJ bottom layer is to use KVC to assign values to the model to traverse the key in the model, and then find the corresponding value in the dictionary to assign values to the key 3.5.2 Use kvc to assign values, there may be no key values in the dictionary in the model, but the key in the model must have a corresponding value in the dictionary. Otherwise, an error will be reported that the MJ framework does not have this problem. The underlying implementation of kvc: http://www.jianshu.com/p/45cbd324ea65 KVC is through [item setValuesForKeysWithDictionary: dict] This method, the dictionary into the model setValuesForKeysWithDictionary: underlying implementation of convenient dictionary all Key Value values. assign a value to the corresponding key and value to [dict enumerateKeysAndObjectsUsingBlock: ^ (id _ Nonnull key, id _ Nonnull obj, BOOL * _ Nonnull stop) {assign setValuesForKeysWithDictionary to the corresponding key and value: setValue: forKeyPath: [item setValue: obj forKeyPath: key];}]; setValue: forKeyPath: underlying implementation: setValue: forKeyPath: 1. compare the key value with the current attribute to see if there is a set method with the same key value. if yes, call the set method. 2. if no, compare it again. Is there any member attribute with the same key value? If yes, assign a value directly. 3. if no, compare it again. Is there any member attribute with the same key value and underlined? If yes, assign a value directly. 4. if not, setValue :( id) value forUndefinedKey: 5 is called. if not, an error is reported. 3.5.3 kvc requires that the key-worthy data type defined in the model must be the same as the data type of the value corresponding to the key in the dictionary. Otherwise, an error is reported in the 3.5.4 MJ framework, the ability to automatically convert the Data Types of some key values to the Data Types of the values corresponding to the keys in the dictionary (the premise is that these two data types can be converted to each other) 4. calculate the frame and height of the cell sub-control in the view Model

1 if (item. commentItem) {// first judge whether there are the most popular comments. If there are comments, 2 CGFloat commentH = 42 is required. For voice comments, the height is determined. Note 3: in the future, you only need to determine whether the string contains any content, use length 4 if (item. commentItem. content. length) {// content, that is, text comment 5 calculates the comment height based on the text height. 6 NSString * totalStr = [NSString stringWithFormat: @ "% @: % @", item. commentItem. user. username, item. commentItem. content]; 7 textH = [totalStr sizeWithFont: [UIFont systemFontOfSize: 17] constrainedToSize: CGSizeMake (textW, MAXFLOAT)]. height; 8 commentH = 21 + textH; 9} 10 CGFloat commentW = textW; 11 CGFloat commentX = margin; 12 CGFloat commentY = _ cellH; 13 _ commentViewFrame = CGRectMake (commentX, commentY, commentW, commentH); 14 _ cellH = CGRectGetMaxY (_ commentViewFrame) + margin; 15}

5. based on the number of elements in the top_cmt array, you can determine whether the commentView is displayed or whether the element conversion model in the array exists. the establishment of the bottomView module is relatively simple, so I will not introduce it in detail. xib build interface 2. request Data 2.1 View Interface documentation, use afn to send a network request 2.2 when the network request is successful, convert the data to model 2.3 define attributes in the model (first customize the Model) view the data to be used on the interface, and then find the attribute definition of the definition data to the model. 2.3 The Custom view model. The view model contains the model (that is, the attribute of a model is defined in the view model) 2.4 traverse the model, convert all to create a view model object for the view model. Use the model attributes of the view model to receive the model and save the view model to the array. 3. in the View model, compute the frame and height of the cell sub-control to a fixed value. The height of the cell is the maximum Y value of the last control in the Y axis. 4. display Data 4.1: display data in the same way. Here we mainly process the data 4.2. When the number of comments or likes exceeds 10 thousand, we need to process the data 4.2.1 over 10 thousand, divide the total number by 10 thousand, and the resulting number is retained with a decimal point, which is xx. x 4.2.2 if the total number is 0, it is displayed on the interface, and the effect is poor. We need to perform some processing. If the data is 0, we will display the placeholder text on the interface.

1 Process Data Source Code 2-(void) setItem :( XTThemeItem *) item 3 {4 [super setItem: item]; 5 6 [self setButton: _ dingView count: item. ding title: @ "like"]; 7 [self setButton: _ caiView count: item. cai title: @ "Step"]; 8 [self setButton: _ blank view count: item. repost title: @ "Forward"]; 9 [self setButton: _ commentView count: item. comment title: @ "comment"]; 10} 11 12-(void) setButton :( UIButton *) button count :( NSInteger) count title :( NSString *) how to extract a method from title13 {14: first copy the source code to be extracted into the method. If there is nothing to add, something that needs to be determined by the outside world should be written as a parameter, let the outside world pass in 15 CGFloat valueF = 0; 16 NSString * str = title; 17 if (count> 10000.0) {18 valueF = count/10000.0; 19 str = [NSString stringWithFormat: @ "%. 1f thousand ", valueF]; 20 str = [str stringByReplacingOccurrencesOfString :@". 0 "withString: @" "]; 21} else if (count> 0) {22 str = [NSString stringWithFormat: @" % ld ", count]; 23} 24 [button setTitle: str forState: UIControlStateNormal]; 25} 26

 

3. process the cell appearance details. 1. The cell selected style is ugly. How can we cancel it? 1.1 set a cell attribute.

     self.selectionStyle = UITableViewCellSelectionStyleNone;

1.2 where can I write code? Write in the cell Initialization Method

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

 

2. How can we set the split line to a little wider? First, we need to cancel the system split line.

 self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

2.1 Add a custom split line to the bottom of the cell and set the height and color to achieve the effect of the split line. 2.2 set the frame of the cell to reduce the height of the cell by a value, the reduced part shows the background color. You only need to set the background color to set the split line. Note: the reduced value must be added when setting the height of the cell, otherwise, the cell may be compressed.

1 set frame source code 2-(void) setFrame :( CGRect) frame3 {4 frame. origin. y + = 10; 5 frame. size. height-= 10; 6 Note: You must call the super Method 7 [super setFrame: frame]; 8}

2.3 set the background image for the cell through the backgroundView attribute to set the background image for the cell. You only need to set the UIImageView for the backgroundView of the cell. After the settings are complete, the background image edge is somewhat ugly, it is very likely that the image is stretched. We need to process the image and set the stretched area of the image, and then set the background image of the cell.

1. Set the source code of the cell background image. 2. UIImage * image = [UIImage imageNamed: @ "mainCellBackground"]. 3. process image: Set the stretched area. 4. image = [image stretchableImageWithLeftCapWidth: image. size. width * 0.5 topCapHeight: image. size. height * 0.5]; 5 6 self. backgroundView = [[UIImageView alloc] initWithImage: image];