IOS apps are very focused on user experience, and in some ways the success of an app has a very important relationship with the beauty of the UI and the interaction design of the app
As iOS development has evolved so far, there are roughly three schools of UI creation:
1. Use code to write UI and layout
2. Use Xib files to organize the UI
3. Use storyboards
For the pros and cons of all three and the scenarios they are used in, please go to the code to write UI, xiB and StoryBoard, and some tips for Interface Builder
xib
Xib is a visual file, just like we draw on a piece of paper, and we can drag a UI control onto the piece of paper
The creation of a xib
First we’ll create a template project based on the Single View Application.
Then we Cmd+n to create an empty Xib file
This allows us to drag a control from the right sidebar to the white space.
This completes the creation of the XIB file. Actually both xiB and storyboard are resource files in XML format. We can switch display format by right-clicking xib file ->Open As.
However, for VC and View creation we are a little bit different, when we create UIViewController and its subclasses we just check also Create XIb when we create the file File, so that once the class file is created, it will naturally be associated with the XIB file created with it.
To create UIView and its subclasses, separate the subclass file from the xib file, and associate the most important files with the xib file.
We click into xiB file, select the class option of custom class under the third button (Show the identity Inspect) in the right sidebar, write the xiB file corresponding to the class file name in the input box, and finally press Enter to Ok
Init method for loading XIB files
UIViewController normally loads xiB files using the following methods:
- (instancetype)initWithNibName:(nullable NSString *)nibNameOrNil bundle:(nullable NSBundle *)nibBundleOrNil;
UIView subclass XIBs are usually loaded using the following method, which returns an array. In iOS development, the array returned only has one element, so we just fetch its first element. I.e., [0].
- (NSArray *)loadNibNamed:(NSString *)name owner:(id)owner options:(NSDictionary *)options;
** Note :** about NibName in load method:
The NIB is actually an encrypted file of the XIB compiled by Xcode, and Xcode cannot be opened properly after compilation, while the storyboard dc file generated after compilation cannot be opened, and both files are stored in the main bundle of the app.
Simply use xiB
The simple use of xiB is mostly a brief introduction to the right sidebar
When we click into the XIB file, in the right sidebar we see six tags:
one
The first tag: Show the File Inspector. This tag mainly describes the basic information about xiB files. It is not used in general, so you do not need to modify it.
two
Second tag: Show Quick Help Inspector. This TAB is a quick help message, which is basically an introduction to a control in the Apple API.
three
The third tag: Show the Identity Inspector. Under this label, we mainly make some marks. One of the most commonly used is the Custom Class, which uses this tag to associate xiB files with our own Class files
four
Fourth tag: Show the Attributes Inspector. This tag is the one we use most often, and we usually use it for control property Settings. For example, set some of the simulator’s dimensions, colors and so on. The content of this tag (a settable property) varies from control to control.
five
Fifth tag: Show the Size Inspector. This tag is related to setting the frame, which is mainly related to the size.
six
Number six: Show the Connections Inspector. This tag is mainly responsible for the xiB file and the class source file interaction, will be commonly known as “wire “, in the XIB control properties and triggered actions, can be dragged to the class source file, using the code for the next operation. This will be described next.
On AutoLayout
AutoLayout is introduced in iOS6, because the screen of iPhone5 increases from 3.5 inches to 4 inches, which makes it a problem to use frame for UI design in the development, so AutoLayout comes into being.
The main use for setting up the automatic layout in the XIB is the four labels in the bottom right corner
one
The first TAB :Stack. This is a new feature that Xcode7 introduced in iOS9 to manage constraints on all its subviews.
two
The second TAB, Align, manages the mapping of views. From top to bottom: left and right, up and down, horizontal, vertical alignment, etc.
three
The third tag :Pin. It is used to add constraints to a single view. The small red triangle can select the relative reference view to which the constraint is added. Constrain to Margin if checked, the reference edge is not the actual superview edge, usually a reference edge minus 20 from the superview edge. Aspect Ratio is setting its own Aspect Ratio, and Equal Width/Height is setting Equal Width or Height relative to other controls. This option can be set when dragging onto another Control by holding down the Control key.
four
Fourth tag :Resolve autoLayout Issue. This tag is used to reset autolayout. This tag can be used on the selected view or all views that have this view as their parent, for example :Update Frame. This tag is used to Update the UI, for example, if we set automatic layout, we can use this option to Update its position. Clear Constraint, used to Clear all constraints.
Pay attention to
If we use autoLayout autoLayout, then the Frame changes we made in ViewDidLoad and ViewWillLayoutSubviews added after iOS5 won’t work. This is because ViewWillLayoutSubviews is called after ViewDidLoad, which means that the frame is rearranged by autoLayout after it takes effect.
So in that case, if we want to change the frame we have to change it in ViewDidLayoutSubviews, or drag the automatic layout as a property and change it in code.
There are many aspects of AutoLayout that need to be figured out during development, but this is just a primer.
About wired – XIB use Cases
create
The wiring associates the XIB file with the source file of the class. We simply simulate the requirements of a login interface.
We need to start the program from the Xib file we created, so we can delete the ViewController class file and the main.storyboard file provided by the system. And then Main under Main Interface.
We create a pair of class files RootViewController and check also Create XIB file to create the corresponding XIB file.
Then we import the.h file of RootViewController in the appDelegate. We create Windows as large as the screen and specify the window root view controller as our own controller. Finally, set window to the main window and make it visible.
Let’s write the following code in this method
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
RootViewController *rootVC = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];
self.window.rootViewController = rootVC;
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
Copy the codeOnce you’ve done that, the program launches and you’re presented with your own controller
Attribute set
Next we design the UI in the XIB file. We drag two Label controls and two TextField controls. Note that to make it easy to add constraints, we set constraints for each control we drag. For example, we set constraints on two labels as follows:
Add constraints to other controls in the same way.
The parameters in the constraint Settings above are for demonstration only and have nothing to do with the effect in this article
Next we set the text for Label and Button, and the placeholder text for TextField.
The Label and Button text can also be set by double-clicking the control.
We can set the color of the control using the background property of the View child tag under the Show the Attributes Inspect tag.
Other attributes, such as text size, color, etc., can be tested by yourself.
Drag the control to properties
We can associate the controls in the Xib as properties or methods in our code by holding down the Control key, which is called IBOutLet and IBAction.
1. Let’s first set Xcode to display on the component screen.
Second button. Find the class file associated with the XIb file.
2. You can then drag the control to properties or methods
The association of attributes is as shown above.
We associate button click events as methods, as shown below.
Once the association is complete, you can see it under the Show The Connections Inspector TAB.
Set the agent
We can also use Xib to set up the proxy. We set up a proxy for the usernameTextField to implement responsive control over the keyboard.
Code setup section
To demonstrate that Spaces dragged as properties can be manipulated with code, we rounded the username button with code. And change the text displayed on the UserName Label to show UserName.
In the viewDidLoad method of RootViewController
self.nameLabel.text = @"UserName"; / / cut fillet self. NameLabel. Layer. The cornerRadius = 4; self.nameLabel.layer.masksToBounds = YES;Copy the codeThe effect is as follows:
Set keyboard response events
Compliance agreement:
We set usernaeTextField to be the first responder on the keyboard
[_nameTextField becomeFirstResponder];
In order to achieve continuous keyboard response we need to determine the current responder, that is, we need to distinguish between the two textfields. So we’re going to set a tag value for usernameTextField
Implement proxy protocol methods
-(BOOL)textFieldShouldReturn:(UITextField *)textField{
// [_usernameTextField resignFirstResponder];
if (textField.tag == 1000) {
[_passWordTextField becomeFirstResponder];
}else{
[_passWordTextField resignFirstResponder];
}
return YES;
}
Copy the codeImplement button click events
Above we have associated methods for UIButton click events, now we implement methods. Here we simulate the event of clicking a button to change the background color and recycle the keyboard event.
Implement click events:
- (IBAction)btnClick:(id)sender {
[_usernameTextField resignFirstResponder]
[_passWordTextField resignFirstResponder];
NSLog(@"Successful landing."); The self. The backgroundColor = [UIColor colorWithRed: arc4random () % 256/255.0 green: arc4random () % of 256/255.0 Alpha blue: arc4random () % 256/255.0:1); }Copy the codeEnd result:
Last
These are some of the notes I took while learning visual programming for Xib. Learning materials are mainly from Jane book two liangzi, one Xib a day, because of the author’s limited level, if there is any question or mistake, welcome to exchange, correct, I will be very grateful.