IOS 9 App development tutorials Using code to add buttons to beautify buttons

IOS 9 App development tutorial using Code Add button Beautify button rich user interface

A lot of controls and views are available in iOS9 to enrich the user interface, and for these views and controls we have made a brief introduction to the previous chapter. In this chapter we will explain these views in detail.

Use a button in iOS9 to receive user input

Buttons are the most commonly used and simplest controls in iOS apps, which are commonly used to respond to user click events, as shown in 2.1. In Figure 2.1, the blue rectangle is a button with the title "Login". After iOS 7 the button is just a piece of plain text, without outlines, borders, background colors, or other decorative features (for the sake of aesthetics, many of the buttons in the application still have backgrounds, just like the buttons in Figure 2.1). The UIButton class is generally used to implement buttons. This section will focus on adding buttons, beautifying buttons, and how to implement button responses.

Figure 2.1 QQ Login Interface

Using code to add buttons in iOS9

Because the way to add views using the Edit interface is simple, it is not covered. Here, you can directly explain how the code is added. Using code to add a button to the main view is the same as the steps explained in section 1.3.3. You first need to instantiate a button object using the UIButton class, then set the position and size, and finally add the button object to the main view using the Addsubview () method. (Because the view is added in the same way, you will omit the use of code to add the view.) ）。

Example 2-1 the following will add a button object with a background color of orange to the main view. The code is as follows:

• Import UIKit
• Class Viewcontroller:uiviewcontroller {
• Override Func Viewdidload () {
• Super.viewdidload ()
• Additional setup after loading the view, typically from a nib.
• Add a Button object
• Let Button=uibutton (Frame:cgrectmake (143, 241, in.))
• Button.backgroundcolor=uicolor.orangecolor ()
• Self.view.addSubview (Button)
• }
• ......
• }

When you run the program, you see the effect shown in 2.2.

Figure 2.2 Running effect

Note: The orange area shown in Figure 2.2 is actually the added button.

IOS9 in the landscaping button

Beautify the button to make it plain is to set the properties of the button, there are two ways to set the button's properties: One is to use the property inspector in the editing interface, and the other is to use code to set it. Here's how to set up a button using code.

1. Set the appearance of the button

Setting the button's appearance is actually the setting for the button's title, image, and so on. Table 2-1 lists some of the properties that are commonly used to set the appearance of buttons.

Table 2-1 Common Properties

Under Example 2-2, a button is added to the main view. The caption of this button is I am button, and the color of the caption is black. The code is as follows:

• Import UIKit
• Class Viewcontroller:uiviewcontroller {
• Override Func Viewdidload () {
• Super.viewdidload ()
• Additional setup after loading the view, typically from a nib.
• Add a Button object
• Let Button=uibutton (Frame:cgrectmake (135, 241, 97, 30))
• button.settitle ("I am Button", forState:UIControlState.Normal) //Set Caption
• Button.settitlecolor (Uicolor.blackcolor (), forState:UIControlState.Normal) //Set title color
• Self.view.addSubview (Button)
• }
• ......
• }

When you run the program, you see the effect shown in 2.3.

2. Setting the state of the button

In example 2-2, when you set the caption and color of a button, you need to set the state of the button to indicate what the button's title and title color look like in a certain state. For example, Uicontrolstate.normal represents a state of a button. For such a view like a button, a view that can accept user input is also called a control. These controls all have their own state. Table 2-2 gives the developer a detailed description of the control's state.

Table 2-2 Status of the control

3. Set the type of the button

The buttons are in a variety of forms. For example, in the Address Book, the button to add a new contact is a plus sign, an exclamation mark when you view the details of a call, and so on. The implementation of these buttons can be implemented using Uibuttontype when instantiating button objects. The contents of Uibuttontype are shown in table 2-3.

Table 2-3 contents of Uibuttontype

"Example 2-3" The following will add two different style buttons in the main view. The code is as follows:

• Import UIKit
• Class Viewcontroller:uiviewcontroller {
• Override Func Viewdidload () {
• Super.viewdidload ()
• Additional setup after loading the view, typically from a nib.
• Add a Button object
• Let Button1=uibutton (TYPE:UIBUTTONTYPE.CONTACTADD)
• Button1.center=cgpointmake (190, 250)
• Self.view.addSubview (button1)
• Add a Button object
• Let Button2=uibutton (type:UIButtonType.DetailDisclosure)
• Button2.center=cgpointmake (190, 450)
• Self.view.addSubview (Button2)
• }
• ......
• }

When you run the program, you see the effect shown in 2.4.

Figure 2.3 Run effect Figure 2.4 run effect

Implementing a button response in iOS9

The main button is to implement the user interaction, that is, to implement the response. The way buttons implement responses can be divided into two different types of buttons: one is the response of the edit interface to add a button implementation, and the other is the response that is implemented using the Code add button.

1. Edit Interface Add button implementation response

Using the Edit interface to add buttons allows you to use drag to implement a button response, which is also the simplest way to implement a response.

"Example 2-4" The following will implement the Tap button to change the function of the main view background color. The following steps are described:

(1) Create a single View application template type project, named Uibutton-response.

(2) Open the Main.storyboard file and set the size of the main view to iphone 4.7-inch. Drag a button control from the view library into the main master to set the title to tap Me,change View Color.

(3) Use the icon in the three view mode of the settings editor to adjust the Xcode interface to the effect shown in 2.5. This process is explained in the previous chapters.

Figure 2.5 Tuning the Xcode interface

(4) Holding down the CTRL key to drag the button object in the interface, a blue line will appear, drag the Blue Line to the blank of the Viewcontroller.swift file, as shown in 2.6.

Figure 2.6 Ctrl + Drag the button object in the interface

(5) When you release the mouse, the dialog box that declares the associated socket variable will pop up (explained in the previous section), as shown in 2.7.

Figure 2.7 Popup declaration associated with a Socket variable dialog box

(6) Set the connection option to action, which indicates that an action is associated, and the name is set to Tapbutton, indicating that the associated action name is tapbutton,2.8.

Figure 2.8 Filling out a dialog box

Note: The name here can be arbitrary.

(7) Click the Connect button to see the code shown in the Viewcontroller.swift file in 2.9.

Figure 2.9 Action

At this point, when the user taps the button, a method called Tapbutton () is triggered.

Note: This is done in conjunction with an action declaration and an association, and a way to first declare an action-related association. Declaring an action can use the keyword ibaction. The keyword can tell the interface of the story panel that this method is an action and can be triggered by a control. The syntax for declaring an action is as follows:

• @IBAction func action name (parameter: parameter type) {
• }

2.10, which is the declaration code of the action written in the Viewcontroller.swift file.

Figure 2.10 The actions declared

Note: After the action is declared, a small, hollow circle appears in front of the code, which indicates that the action has not been associated.

Once you've declared your actions, you can associate them, using the tools in the adjustment window to tweak the Xcode interface. Adjust it to the same effect as in Figure 2.5.

Then, holding down the CTRL key while dragging the button object in the interface, a blue line will appear, associating the Blue line with the action in the file Viewcontroller.swift, as shown in 2.11.

Figure 2.11 Associated actions

Finally, after releasing the mouse, the button object is associated with the success of the action, when the small white circle in front of the action becomes a small, solid circle, which indicates that the action has been associated with the same effect as in Figure 2.9.

(8) Open the Viewcontroller.swift file and write the code that will implement the button's response. The code is as follows:

• Import UIKit
• Class Viewcontroller:uiviewcontroller {
• var isyellow:bool=false
• @IBAction func Tapbutton (sender:anyobject) {
• Determines whether the background of the main view is yellow
• if (Isyellow) {
• Self.view.backgroundcolor=uicolor.whitecolor () //Set the background color of the main view
• Isyellow=false
• }else{
• Self.view.backgroundcolor=uicolor.yellowcolor ()
• Isyellow=true
• }
• }
• ......
• }

Running the program at this point will first see a 2.12 effect. When the tap Me,change View color button is tapped, the background of the main display turns yellow, as shown in 2.13. When you tap the tap me,change View Color button again, the background color of the master will change back to the original white.

Figure 2.12 Run effect Figure 2.13 Run effect

2. Using code to add a button implementation response

Using the buttons added by the code, the implementation response needs to use the Addtarget (_:action:forcontrolevents:) method, which has the following syntax:

• Func AddTarget (_ Target:anyobject?,
• Action Action:selector,
• forControlEvents controlevents:uicontrolevents)

Among them, the parameters are described as follows:

• Target: Represents the destination object. It is the sender of the action message.
• Action: Represents the selector, which is used to identify the action message. It cannot be considered empty.
• ControlEvents: Represents a control event. There are 19 kinds of control events in iOS, as shown in table 2-4.

Table 2-4 Control Events

"Example 2-5" The following will implement the Tap button to change the function of the main view background color. The code is as follows:

• Import UIKit
• Class Viewcontroller:uiviewcontroller {
• var iscyan:bool=false
• Override Func Viewdidload () {
• Super.viewdidload ()
• Additional setup after loading the view, typically from a nib.
• Add a Button object
• Let Button=uibutton (Frame:cgrectmake (90, 545, 225, 30))
• Button.settitle ("Tap Me,change View Color", forState:UIControlState.Normal)//Set the caption of the button
• Button.settitlecolor (Uicolor.blackcolor (), forState:UIControlState.Normal)//Set the color of the button caption
• Self.view.addSubview (Button)
• Implementing a button response
• Button.addtarget (Self, Action: "Tapbutton", ForControlEvents:UIControlEvents.TouchUpInside)
• }
• Func Tapbutton () {
• Determines whether the background color of the main view is cyan
• if (Iscyan) {
• Self.view.backgroundcolor=uicolor.whitecolor ()
• Iscyan=false
• }else{
• Self.view.backgroundcolor=uicolor.cyancolor ()
• Iscyan=true
• }
• }
• ......
• }

Running the program at this point will first see a 2.14 effect. When the tap Me,change View color button is tapped, the background of the master is changed to cyan, as shown in 2.15. When you tap the tap me,change View Color button again, the background color of the master will change back to the original white.

Figure 2.14 Run effect figure 2.15 Run effect

This article is selected from:IOS 9 Application Development Basic Tutorial University bully internal information, reproduced please indicate the source, respect the technology respect the IT person!

IOS 9 App development tutorials Using code to add buttons to beautify buttons