Starting from scratch, I learned iOS development (4): IOS controls (1), Image view, text field, keyboard

To put it short, thank you for your attention. This article has been written for a long time. I will continue to learn about IOS. I will use 2 to 3 articles to learn some common controls on the iPhone, including Image view, text field, keyboard, Slider, and so on. This article covers the use of imageview and keyboard. After completion, it is as follows:

1) create a new project, select "single view application", name it "control fun", and save it.
Some steps similar to those in the previous chapters have been completed since the beginning of this article and will not be done any more. For example, create a new project here.

2) Add imageview
Select bidviewcontroller. XIB in project navigator, find the Image view in the object library, and drag it into the iPhone view.
After the Image view is dragged into the iPhone view, the image view will stretch the interface filled with the entire iPhone (except for the top status bar ).

(According to my guess, many apps will display an image when they are started. It should take a few seconds to stop. Of course, the status bar at that time is also covered .)
You can adjust the size of the imageview at a total of 8 points on the four sides of the imageview. Place the cursor over a certain point to adjust the size of the imageview. The adjusted imageview is as follows:

It doesn't matter what the length and width are, because the actual size of the uploaded image will prevail.

3) upload an image to the project. The entire process is simple. Select an image and drag it to the supporting Files folder in the project navigator.

After you open the mouse, a dialog box will pop up asking you how to process this image. We select the destination checkbox and copy the image to the project. Retain the default values for other items.

4) add images to imageview
Select the added imageview and find the image in "Image view" in attributes inspector.

Click the drop-down button. The uploaded image is displayed in the drop-down list and selected. The image is displayed in the imageview.

5) resize the image
By default, the image is stretched to the same size as imageview. The display mode of the image is controlled by the model attribute of imageview. The model attribute is located in the View column of attributes inspector.

The model value is "scale to fill", which is full of the entire imageview.

For processing the image size and display mode, the iPhone recommends that you provide images of the appropriate size (that is, the size of the image is the same as the size of the image to be displayed on the iPhone, the CPU of the iPhone is not needed for more processing, which helps the program to run quickly and reduce CPU consumption). If the same image needs to be displayed in two sizes, then you can upload two images to the program.

6) Adjust the original size of the imageview to the image.
First, select the image. The status of the first selected image is the same as that in 4). Then, click the image again, and a circle of gray borders will appear around the image.

Select editor> size to fit content in the menu bar, so that the imageview will be automatically adjusted to the same size as the original image.

At last, adjust the display position of the imageview.

7) add two labels and two textfields.
Label has already mentioned in the previous article that textfield looks like in the Object Library:

The adding process is relatively simple. For details, refer to the first two articles. The following describes the effects of adding label and textfield. The arrangement of label and testfield mainly depends on the blue guides.

8) Rename the label and adjust the textfield size.

In the left-side Navigation Pane, replace the text of the two labels with the name and number respectively, and right them to the right (select both the two labels and choose editor> align> right edges on the menu bar ), the two textfields are extended to a proper width.

9) add placeholder text to textfield
Placeholder text is a prompt text. It is displayed in an empty textfield by default. When textfield obtains the focus and enters the content, placeholder text disappears automatically. When all content is deleted, placeholder text will appear again.
Select the first textfield, find the placeholder in attribute inspector, and enter "Type A name"

Enter "type A number" for the placeholder of the second textfield.

You can run the program (command + r) to see how the actual placeholder text works.

Now, all the interface la S have been completed. Next, we will go to the Code stage and learn how to call the iPhone virtual keyboard.

10) virtual keypad
If you run the program in step 1, you will find that when textfield gets the focus, a virtual keyboard pops up.

But what the second textfield expects is that it can only enter numbers and cannot enter other characters. Therefore, you need to change the type of the virtual keyboard, select the second textfield, and find the keyboard in attribute inspector, change its type to "Number pad"

Run the program again to get the focus of the second text field. A virtual numeric keyboard appears.

Now, a new problem occurs again. How can we hide the keyboard after the input is complete? When you click the "return" button on the virtual keyboard, it will call an event called "did end on exit event". We can associate an action with this event, when this event is triggered, call Action to hide the keyboard. The following describes how to hide the keyboard.

11) Create an outlet
In this example, imageview and label do not change when the program is running, so you do not have to create an outlet for them. We only need to create an outlet for two textfields.
Here we will not repeat the steps for creating an outlet in detail. If you need it, you can refer to my previous article, which describes how to create an outlet.
After the outlet is created, the bidviewcontroller. H is as follows:

#import <UIKit/UIKit.h>@interface BIDViewController : UIViewController@property (weak, nonatomic) IBOutlet UITextField *nameField;@property (weak, nonatomic) IBOutlet UITextField *numberField;@end

Bidviewcontroller. m

#import "BIDViewController.h"@implementation BIDViewController@synthesize nameField;@synthesize numberField;......

We added two outlets pointing to textfield, named namefield and numberfield respectively.

12) manually add an action
In the previous chapter, we add action in the same way as adding outlet. In this chapter, manually add action.
A) declare an action in bidviewcontroller. h: textfielddoneediting

#import <UIKit/UIKit.h>@interface BIDViewController : UIViewController@property (weak, nonatomic) IBOutlet UITextField *nameField;@property (weak, nonatomic) IBOutlet UITextField *numberField;- (IBAction)textFieldDoneEditing:(id)sender;@end

B) implement the textfielddoneediting method at the end of bidviewcontroller. M.

- (IBAction)textFieldDoneEditing:(id)sender{    [sender resignFirstResponder];}

(The following is my personal understanding of resignfirstresponder. If there are any mistakes, I hope you can correct them. Thank you !)
Note "resignfirstresponder". firstresponder indicates the control that is being interacted with the user. textfield is interacting with the user. In this case, it is firstresponder. Resignfirstresponder means giving up the first responder, that is, textfield does not interact with the user, so the textfield will not get the focus at this time, so the keyboard will naturally disappear.

13) Associate action
Select the first text field and open connections Inspector. The 6th icons (the rightmost icon)

Find the "did end on exit" method in connections inspector and move the cursor to the small circle on the right. A plus sign appears in the small circle.

Hold down the left mouse button and drag it to the file's owner. A small window will pop up, showing the action owned by the file's owner.

Select textfielddoneediting, so that "did end on exit" is associated with the textfielddoneediting method.

Run the program here to see the effect. after entering the text in the first text field, click the "return" button on the virtual keyboard and the keyboard disappears.

But the second textfield calls the numeric keyboard without the "return" key. How can we hide the keyboard? One way is to focus the first textfield again, call up the general virtual keyboard, and click "return" to hide the keyboard. However, this method is too cumbersome and impractical, what if we don't have the first textfield? Isn't it sad? Fortunately, things are not so bad. We use another method to make the keyboard disappear. When we click any blank area on the screen (including the non-active controls such as imageview and label, that is, static controls ), this operation is relatively simple and highly feasible to remove the keyboard.

14) implementation principle
First look at objects

This is a tree chart of the control layout. All the controls we add are placed on a root view. This view is invisible, but it is full of the entire iPhone screen, what we need to do is write an action, hoping to make the event carried by this view call this action to hide the keyboard. However, the root view type is uiview.
(Identity inspector)
Uiview has no event, so there is no association with action. Therefore, we need to change the uiview type of the Root View to uicontrol, and uicontrol is a subclass of uiview, which contains all the features of uiview, and there is the event we need, so this change is very reasonable and feasible.

Select the Root View in objects and change the uiview to uicontrol in identity inspector.

The types in objects also change.

15) create another action: backgroundtap
Bidviewcontroller. h

- (IBAction)backgroundTap:(id)sender;

Bidviewcontroller. m

- (IBAction)backgroundTap:(id)sender{    [nameField resignFirstResponder];    [numberField resignFirstResponder];}

16) Associate action
Select the root control and switch to connections inspector. Because we want to hide the keyboard by clicking anywhere, we select the touch down event.

Drag the left mouse button to the file's owner and select backgroundtap action. The association is complete.

Compile and run the program again, enter a number in the second textfield, and click anywhere on the screen. The virtual keyboard disappears.

So far, all functions have been developed.

Control fun