IOS Development notes-Basic UI (6) Photo browser (controls are lazy loaded and data is separated from code using Plist files), iosplist

IOS Development notes-Basic UI (6) Photo browser (controls are lazy loaded and data is separated from code using Plist files), iosplist

Use UIImageView, UILabel, and UIButton to implement a comprehensive case study

Function Analysis

(1) Click the arrow to switch the sequence number, image, and description. (2) If the first image is displayed, the left arrow cannot be clicked. (3) If the last image is displayed, the right arrow cannot be clicked.

Step Analysis

(1) Build the UI (2) Click the listener button

Switch sequence number, image, and description

 

1. Interface Analysis

1> controls for attributes to be read or modified

// Serial number label

// Image

// Image Description

// Buttons on the left

// Button on the right

2> you need to add a listening method to the object that needs to listen for the response to the event.

// Buttons on the left

// Button on the right

Uiimage is an image, not a control. Its parent class is NSObject. UIImageView is a control for loading images. Its parent class is UIView.

Complete coding interface (Review memories)

# Import "ViewController. h "@ interface ViewController () // serial number tag @ property (nonatomic, strong) UILabel * noLabel; // image @ property (nonatomic, strong) UIImageView * icon; // image description @ property (nonatomic, strong) UILabel * descLabel; // The left button @ property (nonatomic, strong) UIButton * leftButton; // the right button @ property (nonatomic, strong) UIButton * rightButton; @ end @ implementation ViewController // initialization work // viewDidLoad is the method called after the view is loaded, in this method, initialize the View Controller-(void) viewDidLoad {[super viewDidLoad]; // instantiate the control // 1. Compile the serial number label UILabel * label = [[UILabel alloc] initWithFrame: CGRectMake (0, 20,320, 40)]; label. text = @ "1/5"; // center alignment label. textAlignment = NSTextAlignmentCenter; [self. view addSubview: label]; // records change self. noLabel = label; // 2. Image Control CGFloat imageW = 200; CGFloat imageH = 200; CGFloat imageX = (320-imageW)/2; CGFloat imageY = 80; // instantiate an image view UIImageView * imageView = [[UIImageView alloc] initWithFrame: CGRectMake (imageX, imageY, imageW, imageH)]; // instantiate an image UIImage * image = [UIImage imageNamed: @ "biaoqingdi"]; // display the image to imageView. image = image; [self. view addSubview: imageView]; // change self under the record. icon = imageView; // 3. Image Description label control UILabel * label1 = [[UILabel alloc] initWithFrame: CGRectMake (0,300,300, 80)]; label1.text = @ "sending "; // align label1.textAlignment = NSTextAlignmentCenter; [self. view addSubview: label1]; // records change self. descLabel = label1; // 4. Left button UIButton * leftBtn = [[UIButton alloc] init]; // set the background image of the button [leftBtn setBackgroundImage: [UIImage imageNamed: @ "left_normal"] forState: UIControlStateNormal]; [leftBtn setBackgroundImage: [UIImage imageNamed: @ "left_highlighted"] forState: Success]; // set the button size leftBtn. frame = CGRectMake (0, 0, 40, 40); // set the position of the button to leftBtn. center = CGPointMake (self. icon. frame. origin. x/2, self. icon. center. y); [self. view addSubview: leftBtn]; self. leftButton = leftBtn; // 5. UIButton * rightBtn = [[UIButton alloc] init]; // set the background image of the button [rightBtn setBackgroundImage: [UIImage imageNamed: @ "right_normal"] forState: UIControlStateNormal]; [rightBtn setBackgroundImage: [UIImage imageNamed: @ "right_highlighted"] forState: Success]; // you can specify the rightBtn button size. frame = CGRectMake (0, 0, 40, 40); // set the rightBtn button. center = CGPointMake (self. view. frame. size. width-self. icon. frame. origin. x/2, self. icon. center. y); [self. view addSubview: rightBtn]; self. leftButton = rightBtn;} @ end

The complete code is as follows:

# Import "ViewController. h "@ interface ViewController () // serial number tag @ property (nonatomic, strong) UILabel * noLabel; // image @ property (nonatomic, strong) UIImageView * icon; // image description @ property (nonatomic, strong) UILabel * descLabel; // The left button @ property (nonatomic, strong) UIButton * leftButton; // the right button @ property (nonatomic, strong) UIButton * rightButton; // image index. The default index is 0 @ property (nonatomic, assign) int index;/** set an image array */// The New Annotation can be explicitly translated into Chinese @ property (nonatomic, strong) NSArray * imageList;/* @ property automatically generates a set for us, get method declaration and implementation of the underlined member variable */@ end @ implementation ViewController // controls are lazily loaded // you do not need to instantiate the array in viewdidload every time, you only need to instantiate it as needed. // rewrite the get method-(NSArray *) imageList {// if it is null only when the getter method of imageList is called for the first time, then instantiate and create an array. In other cases, directly return the member variable if (_ imageList = nil) {// use the dictionary NSDictionary * dict1 =@{ @ "name ": @ "biaoqingdi", @ "desc": @ "emoticons"}; NSDictio Nary * dict2 = @ {@ "name": @ "bingli", @ "desc": @ "Medical Records"}; NSDictionary * dict3 =@ {@ "name ": @ "chiniupa", @ "desc": @ ""}; NSDictionary * dict4 ={ @ "name": @ "danteng", @ "desc ": @ "egg pain"}; NSDictionary * dict5 = @ {@ "name": @ "wangba", @ "desc": @ ""}; self. imageList = @ [dict1, dict2, dict3, dict4, dict5];} return _ imageList;} // initialization // viewDidLoad is the method called after the view is loaded, in this method, initialize the View Controller-(void) viewDidLoad {[Super viewDidLoad]; // instantiate the control // 1. Write the serial number label UILabel * label = [[UILabel alloc] initWithFrame: CGRectMake (0, 20,320, 40)]; // label. text = @ "1/5"; // center alignment label. textAlignment = NSTextAlignmentCenter; [self. view addSubview: label]; // records change self. noLabel = label; // 2. Image Control CGFloat imageW = 200; CGFloat imageH = 200; CGFloat imageX = (320-imageW)/2; CGFloat imageY = 80; // instantiate an image view. UIImageView * imageView = [[UIImageView alloc] initWithFrame: CGRectMake (imageX, imageY, imageW, imageH)]; // instantiate an image // UIImage * image = [UIImage imageNamed: @ "biaoqingdi"]; // display the image to imageView // imageView. image = image; // Add the image to view [self. view addSubview: imageView]; // change self under the record. icon = imageView; // 3. Image Description label control UILabel * label1 = [[UILabel alloc] initWithFrame: CGRectMake (0,300,300, 80)]; // label1.text = @ "sending "; // align Label1.textAlignment = NSTextAlignmentCenter; [self. view addSubview: label1]; // records change self. descLabel = label1; // 4. Left button UIButton * leftBtn = [[UIButton alloc] init]; // set the background image of the button [leftBtn setBackgroundImage: [UIImage imageNamed: @ "left_normal"] forState: UIControlStateNormal]; [leftBtn setBackgroundImage: [UIImage imageNamed: @ "left_highlighted"] forState: Success]; // set the button size leftBtn. fram E = CGRectMake (0, 0, 40, 40); // set the position of the button leftBtn. center = CGPointMake (self. icon. frame. origin. x/2, self. icon. center. y); [self. view addSubview: leftBtn]; // set the listener [leftBtn addTarget: self action: @ selector (leftClick) forControlEvents: UIControlEventTouchUpInside]; self. leftButton = leftBtn; // 5. UIButton * rightBtn = [[UIButton alloc] init]; // set the background image of the button [rightBtn setBackgroundImage: [UIImage imageNamed: @ "Right_normal"] forState: UIControlStateNormal]; [rightBtn setBackgroundImage: [UIImage imageNamed: @ "right_highlighted"] forState: Success]; // you can specify the rightBtn value. frame = CGRectMake (0, 0, 40, 40); // set the rightBtn button. center = CGPointMake (self. view. frame. size. width-self. icon. frame. origin. x/2, self. icon. center. y); [self. view addSubview: rightBtn]; // sets the listener [rightBtn addTarget: self acti On: @ selector (rightClick) forControlEvents: UIControlEventTouchUpInside]; self. rightButton = rightBtn; [self change];}-(void) change {// more self. index to display the serial number label, image, and description self. noLabel. text = [NSString stringWithFormat: @ "% d/% d", self. index + 1, 5]; self. icon. image = [UIImage imageNamed: self. imageList [self. index] [@ "name"]; self. descLabel. text = self. imageList [self. index] [@ "desc"]; self. leftButton. enabled = (Self. index! = 0); self. rightButton. enabled = (self. index! = 4);} // left-(void) leftClick {self. index --; [self change];} // right-(void) rightClick {self. index ++; [self change] ;}@ end

 

Summary:

/** Set an image array */

This is the New Annotation of xcode. When the mouse is floating, the Chinese annotation can be displayed explicitly.

 

Steps for creating a control by using a hand code

1> define control attributes. Note: The attributes must be strong, as shown below:

@ Property (nonatomic, strong) UIImageView * icon;

 

2> implement lazy loading in the getter method of the attribute.

 

Benefits of lazy loading:

1> do not write all the code for creating an object in the viewDidLoad method, making the code more readable.

2> the getter method of each control is responsible for instantiation. The code is highly independent and loosely coupled.

 

Button status

Normal (normal STATE) refers to the enumerated constant corresponding to the default situation: When the UIControlStateNormal highlighted (highlighted state) button is pressed (the finger has not been released), the corresponding enumerated constant: UIControlStateHighlighted disabled (invalid state, if the enabled attribute is NO, it is in the disable State, which means that the button cannot be clicked with the corresponding enumerated constant: UIControlStateDisabled

Use the Plist file to refactor the project code:

Objective: To separate data from code (similar to writing data to xml files in java, data and code separation)

The previous Code, especially the dictionary, is still not well handled and seems too coupled. Data and code need to be separated. Here we will learn the attribute list file, property list

Create file

Local files, or xml files can be parsed on the network

 

In this way, you only need to modify the corresponding xml file. You do not need to open the code and modify the code.

// Control lazy loading // you do not need to instantiate the array in viewdidload every time. You only need to instantiate the array as needed-(NSArray *) imageList {// only when the getter method of imageList is called for the first time, if it is null, then instantiate and create an array. Otherwise, the member variable if (_ imageList = nil) is directly returned) {// bundle Package concept read-only NSString * path = [[NSBundle mainBundle] pathForResource: @ "imageDate" ofType :@". plist "]; NSLog (@" % @ ", path); // File indicates searching for the File _ imageList = [NSArray arrayWithContentsOfFile: path];} return _ imageList ;}

Summary:

1. Separate data from code. The method for loading Plist files is as follows:

Writing data directly in the code is not a reasonable practice. If the data is frequently changed, it is necessary to open the corresponding code frequently for modification, resulting in low code scalability. Therefore, you can consider storing frequently changed data in files for storage, after the program starts, it reads the latest data from the file. To change the data, directly modify the data file without modifying the code. Generally, you can use an attribute list file to store data such as NSArray or NSDictionary. The extension of this attribute list file is plist, which becomes a "Plist file"

NSString * path = [[NSBundle mainBundle] pathForResource: @ "ImageData" ofType: @ "plist"];

_ ImageList = [NSArray arrayWithContentsOfFile: path];

Tip: File is usually used in the method. The full path of the File must be passed as the parameter, as shown in the following full path:

/Users/dashuai/Library/Developer/CoreSimulator/Devices/83C611C9-DE98-4D02-BC64-D31C0403766E/data/Containers/Bundle/Application/E04713CF-A9D4-49D1-A934-B4093BCE5B3C/Image Browsing. App/imageDate. plist

 

2. To make UILabel wrap automatically, set Lines to 0.

 

3, UIButton and UIImageView

The same point can display different image differences. By default, UIButton can monitor click events. By default, UIImageView does not allow UIButton to display text in different States, how to Select UIButton for displaying images: You need to display images. After you click images, You need to perform some specific operations. UIImageView: you only need to display images. You do not need to do anything after you click images. Use of NSArray and NSDictionary When the image content is very large, the code "set content based on index" does not have scalability and needs to be changed frequently. to change the status quo, you can consider saving the image data to an array, there are many dictionaries in the array in order. A dictionary represents an image data, including the image name and image description.

@ Property (strong, nonatomic) NSArray * images;

Because only image data needs to be initialized once, it is initialized in the get method, and the attribute is initialized in the get method, which is called "lazy loading" \ "delayed loading"

 

/** Set an image array */

This is the New Annotation of xcode. When the mouse is floating, the Chinese annotation can be displayed explicitly.

 

Steps for creating a control by using a hand code

1> define control attributes. Note: The attributes must be strong, as shown below:

@ Property (nonatomic, strong) UIImageView * icon;

 

2> implement lazy loading in the getter method of the attribute.

 

Benefits of lazy loading:

1> do not write all the code for creating an object in the viewDidLoad method, making the code more readable.

2> the getter method of each control is responsible for instantiation. The code is highly independent and loosely coupled.

 

Button status

Normal (normal STATE) refers to the enumerated constant corresponding to the default situation: When the UIControlStateNormal highlighted (highlighted state) button is pressed (the finger has not been released), the corresponding enumerated constant: UIControlStateHighlighted disabled (invalid state, if the enabled attribute is NO, it is in the disable State, which means that the button cannot be clicked with the corresponding enumerated constant: UIControlStateDisabled