Construction of non-high cells (1), construction of high Cells

Construction of non-high cells (1), construction of high Cells

 

I. interface Setup 1. determine the development mode. If the interface is fixed, you can use some of the content on the xib interface to be unfixed, and use the pure code cell Method for Development (we use the combination of pure code and xib) 2. partition hierarchy 2.1 how to divide? Hide effects by function: under certain conditions, some controls must be hidden together, so that they can be placed in the same module (if these controls are together) 2.2 The analysis interface shows that the cell's middleView and commentView are not sure whether to display them. Therefore, the cell is constructed using a pure code method. 3. when creating a cell, the custom cell 3.1 adds all the modules that may be displayed to the cell and Adds all the modules (Controls) that may appear to the cell, then, determine whether some modules (Controls) display or hide 3.2. Based on the server data, determine whether some modules hide 3.3. Where can I create a cell? Using the registration method, the underlying layer will automatically call the initWithStyle method to create the cell 4. one module and one module build 4.1 split the cell into four modules. For example, 4.2 First finishes processing all the content (build the interface) and business logic of a module, processing Method of the next module 4.3 Module: first set up the interface, and then process the interface business logic 4.4 advantages: the business logic is clear and not easy to confuse 2. topView module development 1. xib build interface 1.1 what are the controls on the analysis interface to build 1.2 custom uiview and create xib? After describing the interface, add the interface to the cell. 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 and convert all to create a view model object for the view Model The model attribute of the view model is used to receive the model and save the view model to the array. 3. in the View model, when is the frame and height of the cell subcontrol 3.1 calculated when the model is converted to the view model? Where is the 3.2 calculated? Override the set Method of the model attribute of the view model, calculate the frame and height of the cell in the method, and define the attribute to save, because when the model is switched to the view model, the model will be passed to the model attribute of the view model. The underlying layer will trigger the model Attribute set Method of the view model, in this case, the height of the 3.3 cell is calculated. The height of the cell is the maximum Y value of the last control in the Y axis. 4. how to display data 4.1? After creating a cell by defining the view model attributes in a custom cell, retrieve the corresponding view model from the array and assign values to the view model attributes of the cell (trigger the set Method of the view model) 4.2 How does the model receive data? In the set Method of cell view model attributes, set the frame and cell height of the cell (directly from the view model) directly assign values to the data of the view model (the set Method that triggers the model) to override the set Method of the model, and then assign values to the UI elements on the interface, in this way, you can see the data on the interface. note: The 5.1 cell will be recycled. After setting a certain attribute, you must remember that restoring the 5.2 run will report some inexplicable constraint conflicts because the system's automatic stretch constraint conflicts, cancel. the middleView module builds the middleView module in many different styles. We can use xib to build different styles of middleView, and then decide which style of middleView to Display Based on the server data. Note: we must hide the middleView of other styles and restore them elsewhere to prevent circular reference. We can divide the middleView into four styles as needed: 1. textView style, that is, there is no middleView. This style can be hidden without displaying middleView (hiding pictureView, videoView, and voiceView), and the height of the frame is not calculated. 2. pictureView Style

 

2.1 What are the components of the analysis interface and how to build the interface? When loading an image: a gif icon is set up with ImageView. The progress bar can be placed in the text section of a view. For an image, use ImageView. For text, use label or button, when you need to interact with the user and use a button to display the image: The image is set up with an ImageView. The following picture is displayed with a button (including images and text, background images, and user interaction, only buttons can be used. Because the interface is fixed, you can use xib to set up 2.2 to add pictureView to cel 2.3 request data 2.4 calculate the frame and height of the cell sub-control in the view model 2.4.1 first determine what type of data the returned type is NSInther, the readability is too bad. You can define enumeration to replace it. the readability is good.

1 typedef enum : NSUInteger {2     XTThemeItemTypeAll = 1,3     XTThemeItemTypeVideo = 41,4     XTThemeItemTypeVoice = 31,5     XTThemeItemTypePicture = 10,6     XTThemeItemTypeText = 297 } XTThemeItemType;

 

Note: The shortcut for defining enumeration is enum.

 

2.4.2 if the image is of the text type, you do not need to calculate 2.4.3. If the actual image height is too high, we define an attribute in the model to record whether the image is a large image 2.4.4 and set a fixed height for the big image, you do not need to display all the big charts.

1 // middleView: the calculation method is the same. 2 // The Frame 3 if (item. type! = XMGThemeItemTypeText) {4 CGFloat middleW = textW; 5 CGFloat middleH = middleW/item. width * item. height; 6 if (middleH> XTScreenH) {// large image 7 middleH = 300; 8 item. is_bigPicture = YES; 9} 10 CGFloat middleX = margin; 11 CGFloat middleY = _ cellH; 12 _ middleViewFrame = CGRectMake (middleX, middleY, middleW, middleH ); 13 _ cellH = CGRectGetMaxY (_ middleViewFrame) + margin; 14}

 

2.5 run and find that, if it is a big image, the image will be compressed, Which is ugly. How can this problem be solved? ImageView is filled with images by default. It is used to stretch or compress the image to the size of the entire ImageView and set the ImageView content mode. It is not allowed to compress the content mode of UIViewContentModeTop 2.6. Although the image is not compressed, however, the image cannot be filled with ImageView (empty on both sides). How can this problem be solved? UIViewContentModeTop is displayed on the top of the ImageView by default, but it does not stretch or compress. We need to stretch or compress the image first, then you can set UIViewContentModeTop to 2.7. How can I perform image stretching or compression? You can use a drawing to generate a new drawing or compress the picture 2.8. How to draw? 2.8.1 enable image context 2.8.2 draw image 2.8.3 obtain new image 2.8.4 disable image context 2.9 optimize image processing performance 2.9.1 drawing is required for each set image, which may lead to repeated drawing, poor performance, how to optimize it? Cache the processed image to the disk (sandbox). How can I cache the image from the disk 2.9.2 next time I set this image? It is too difficult to write your own method. SDImageCache. h has a method to cache the image and directly calls its method for caching.

1 [[SDImageCache nvidimagecache] storeImage: image forKey: item. image0]; 2 Note: to import the header file: # import <SDImageCache. h>

 

2.9.3 how do I remove images from a disk? The SDImageCache. h method is also called to obtain

        UIImage *image = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.image0];

Note: The key value is the url of the image.

2.10 how to set the progress bar when loading images? 2.10.1 when we need to set up a function module, we need to first find out if there is a framework for this function module. If there is a framework, we can directly use 2.10.2 if not, find a module with similar functions to modify 2.10.3. How can I find a framework?

 

 

1-(void) awakeFromNib 2 {3 _ progressView. progressLabel. textColor = [UIColor whiteColor]; 4 _ progressView. progressTintColor = [UIColor whiteColor]; 5 _ progressView. roundedCorners = 10; 6 7 _ progressView. progressLabel. text = [NSString stringWithFormat: @ "%. 1f % ", 0.0*100]; 8 _ progressView. progress = 0; 9} 10 11-(void) setItem :( XMGThemeItem *) item12 {13 _ item = item; 14 15 // set image 16 UIImage * image = [[SDImageCache nvidimagecache] imageFromDiskCacheForKey: item. image0]; 17 if (image) {if there is an image set directly, and set the progress to 100% 18 _ imageView. image = image; 19 _ progressView. progressLabel. text = [NSString stringWithFormat: @ "%. 1f % ", 1.0*100]; 20 _ progressView. progress = 1; 21} else {if there is no image, set the progress to 0 and then download the 22_progressview image. progressLabel. text = [NSString stringWithFormat: @ "%. 1f % ", 0.0*100]; 23 _ progressView. SS = 0; 24 // download the network image 25 [_ imageView sd_setImageWithURL: [NSURL URLWithString: item. image0] placeholderImage: nil options: SDWebImageRetryFailed progress: ^ (NSInteger receivedSize, NSInteger expectedSize) {26 progress is the size of the downloaded file/total file size 27 CGFloat progress = 1.0 * receivedSize/expectedSize; 28 run discovery, progress is sometimes-0, print the total file size. The start value is-0. When the value is-0, 29 is returned. Note: This block is frequently called, so returen does not matter for once. 30 if (expectedSize <0) return; 31 _ progressView. ProgressLabel. text = [NSString stringWithFormat: @ "%. 1f % ", progress * 100]; 32 _ progressView. progress = progress; 33 34} completed: ^ (UIImage * image, NSError * error, SDImageCacheType cacheType, NSURL * imageURL) {35 36 if (! Item. is_bigPicture) return; 37 38 // generate a new stretched image 39 CGFloat w = XMGScreenW-20; 40 CGFloat h = w/item. width * item. height; 41 42 // enable image context 43 uigraphicsbeginimagecontextwittions (CGSizeMake (w, h), NO, 0); 44 // plot 45 [image drawInRect: CGRectMake (0, 0, 0, w, h)]; 46 // obtain the context image 47 image = UIGraphicsGetImageFromCurrentImageContext (); 48 // Save the image to the sandbox 49 [[SDImageCache nvidimagecache] storeImage: image forKey: it Em. image0]; 50 // close the context 51 UIGraphicsEndImageContext (); 52 53 _ imageView. image = image; 54}]; 55} 56 determines whether the GIF image Displays 57 _ gifView Based on the server data. hidden =! Item. is_gif; 58 determine whether to display 59 _ seeBigButton. hidden = according to the saved attributes! Item. is_bigPicture; 60 61 if (item. is_bigPicture) {62 _ imageView. contentMode = UIViewContentModeTop; 63 _ imageView. clipsToBounds = YES; 64} else {65 _ imageView. contentMode = UIViewContentModeScaleToFill; 66 _ imageView. clipsToBounds = NO; 67} 68}

 

3. videoView style and voiceView Style

 

3.1 because these two modules are basically the same, the solution is similar: When copying the created xib view to another xib, the corresponding link will also be copied, you must delete these connections before using them.

 

3.2 According to the type, you only need to set the picture of the intermediate button to set up the 3.3 xib interface, and add the page to the cell. 3.4 request data. 3.5 calculate the frame and height of the cell sub-control in the view model. 3.6. When setting data in the videoView or voiceView model, why is it necessary to process the data 3.6.2? The time data returned by the server is in seconds. You need to display 3.6.3 at. How can this problem be solved?

1     NSInteger minute = item.voicetime / 60;2     NSInteger second = item.voicetime % 60;3     self.timeLabel.text = [NSString stringWithFormat:@"%02ld:%02ld",minute,second];

 

4. In the set Method of cell model attributes, set whether the frame of each module of middleView is hidden.

1 // middleView 2 if (vm. item. type = XMGThemeItemTypePicture) {// picture 3 _ pictureView. hidden = NO; 4 _ videoView. hidden = YES; 5 _ voiceView. hidden = YES; 6 7 _ pictureView. item = vm. item; 8 _ pictureView. frame = vm. middleViewFrame; 9 10} else if (vm. item. type = XMGThemeItemTypeVideo) {// video 11 _ pictureView. hidden = YES; 12 _ videoView. hidden = NO; 13 _ voiceView. hidden = YES; 14 15 _ videoView. item = vm. item; 16 _ videoView. frame = vm. middleViewFrame; 17} else if (vm. item. type = XMGThemeItemTypeVoice) {// audio 18 _ pictureView. hidden = YES; 19 _ videoView. hidden = YES; 20 _ voiceView. hidden = NO; 21 22 _ voiceView. item = vm. item; 23 _ voiceView. frame = vm. middleViewFrame; 24 25} else {26 _ voiceView. hidden = YES; 27 _ pictureView. hidden = YES; 28 _ videoView. hidden = YES; 29}