IOS 9 App Development tutorial Display edit text label text box

Last Update:2015-08-11 Source: Internet

Author: User

Tags uikit

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

IOS 9 App Development tutorial Display edit text label text box iOS9 display, Edit TextOn ios, you will often see some text displayed. Words are the mouths of these dumb devices. With these words, you can clearly specify the information that these devices want to express. This section focuses on the three views that are used to display and edit text in ios: labels, text boxes, and text views.iOS9 read-only Text--tagsThe label view is a read-only text view that displays a small amount of information to the user in the application, as shown in 2.16. The display of the text in this illustration uses the label VIEW. The label view is typically implemented using the Uilabel class.Figure 2.16 Beauty Camera"example 2-6" Below is the effect of displaying a poem through a tabbed view. The code is as Follows: <ul> <li><li>Import UIKit</li></li> <li><li>Class Viewcontroller:uiviewcontroller {</li></li> <li><li>Override Func Viewdidload () {</li></li> <li><li>Super.viewdidload ()</li></li> <li><li>Additional setup after loading the view, typically from a nib.</li></li> <li><li>Add a Label object MyTitle</li></li> <li><li>Let Mytitle=uilabel (frame:cgrectmake (88, 100, 198, 58))</li></li> <li><li>mytitle.font=uifont.boldsystemfontofsize () //set font: Bold</li></li> <li><li>mytitle.textalignment=nstextalignment.center //set Alignment</li></li> <li><li>mytitle.text= "send a friend"</li></li> <li><li>Self.view.addSubview (mytitle)</li></li> <li><li>Add a Label object verse1</li></li> <li><li>Let Verse1=uilabel (frame:cgrectmake (44, 197, 303, 63))</li></li> <li><li>verse1.font=uifont.systemfontofsize (+) //set font</li></li> <li><li>Verse1.textalignment=nstextalignment.center</li></li> <li><li>verse1.text= "north of aoyama, White water around the east side." "</li></li> <li><li>Self.view.addSubview (verse1)</li></li> <li><li>Add a Label object Verse2</li></li> <li><li>Let Verse2=uilabel (frame:cgrectmake (44, 268, 303, 63))</li></li> <li><li>Verse2.font=uifont.systemfontofsize (24)</li></li> <li><li>Verse2.textalignment=nstextalignment.center</li></li> <li><li>Verse2.text= "here is a no, the solitary Peng wan." "</li></li> <li><li>Self.view.addSubview (verse2)</li></li> <li><li>Add a Label object verse3</li></li> <li><li>Let Verse3=uilabel (frame:cgrectmake (44, 339, 303, 63))</li></li> <li><li>Verse3.font=uifont.systemfontofsize (24)</li></li> <li><li>Verse3.textalignment=nstextalignment.center</li></li> <li><li>verse3.text= "floating Clouds wandering meaning, the Sunset. "</li></li> <li><li>Self.view.addSubview (verse3)</li></li> <li><li>Add a Label object Verse4</li></li> <li><li>Let Verse4=uilabel (frame:cgrectmake (44, 410, 303, 63))</li></li> <li><li>Verse4.font=uifont.systemfontofsize (24)</li></li> <li><li>Verse4.textalignment=nstextalignment.center</li></li> <li><li>Verse4.text= "waved himself to go, rustling Xiaoxiao. "</li></li> <li><li>Self.view.addSubview (verse4)</li></li> <li><li>}</li></li> <li><li>......</li></li> <li><li>}</li></li> </ul>When you run the program, you see the effect shown in 2.17.Figure 2.17 Running effectNote: The label view is displayed by default in one row, but you can also display the contents of the label as multiple Lines."example 2-7" The following will display multiple lines of content in the Label. The code is as Follows: <ul> <ul> <li>Import UIKit</li> <li>Class Viewcontroller:uiviewcontroller {</li> <li>Override Func Viewdidload () {</li> <li>Super.viewdidload ()</li> <li>Additional setup after loading the view, typically from a nib.</li> <li>Let Verse=uilabel (frame:cgrectmake (20, 191, 333, 196))</li> </ul> </ul>verse.text= "people like the sun, like the sun, like the sunshine of love, like the sunshine of mercy, the world is everywhere." A warm greeting, a sweet smile, a simple blessing, a small help, a gesture of goodwill, all is the sunshine of our Lives. Why don't we collect them, let it shine on our path, warm our hearts in need of warmth? The heart of the sun more, oneself is a sun, what is the wind and rain to be able to extinguish the sun? " <ul> <ul> <li>Self.view.addSubview (verse)</li> <li>}</li> <li>......</li> <li>}</li> </ul> </ul>When you run the program, you see the effect shown in 2.18. In the diagram you can see that only one line of text is displayed in the label and not all of the content is Displayed. To solve this problem, iOS provides an attribute numberoflines that displays multiple lines, so that the content that is displayed in the label can be displayed in more than one LINE. In this example, our label content takes 9 lines to display, so add the following in your code: <ul> <ul> <li>Verse.numberoflines=9</li> </ul> </ul>When you run the program, you see the effect shown in 2.19.Figure 2.18 Run effect Figure 2.19 Run effectSingle-line read-write text-text BoxA text box is a common single-line read-write text view, which is simply an input control, such as a login interface that requires the user to enter a user name and password, as shown in 2.1. Text boxes are generally implemented using UITEXTFIELD."example 2-8" The following by using a text box to achieve the function of adding accounts in QQ. The following are the Steps:(1) Create a single View application template type project, named Uitextfield.(2) Open the Main.storyboard file and design the main view, as shown in effect 2.20.The views that need to be added and the settings for them are shown in table 2-5.Table 2-5 settings for a View object Figure 2.20 Effect of the main view(3) Open the Viewcontroller.swift file, write code, The function of this code is to add the Account. The code is as Follows: <ul> <li><li>Import UIKit</li></li> <li><li>Class Viewcontroller:uiviewcontroller {</li></li> <li><li>Override Func Viewdidload () {</li></li> <li><li>Super.viewdidload ()</li></li> <li><li>Additional setup after loading the view, typically from a nib.</li></li> <li><li>Add a text box to enter your account</li></li> <li><li>Let Accountnumber=uitextfield (frame:cgrectmake (0, 116, 375, 50))</li></li> <li><li>Accountnumber.borderstyle=uitextborderstyle.roundedrect //set The border style of the text box</li></li> <li><li>accountnumber.placeholder= "QQ number/ Mobile phone number/ mailbox "// Set placeholder for text box</li></li> <li><li>Self.view.addSubview (accountnumber)</li></li> <li><li>Add a text box to enter a password</li></li> <li><li>Let Password=uitextfield (frame:cgrectmake (0, 165.5, 375, 50))</li></li> <li><li>Password.borderstyle=uitextborderstyle.roundedrect</li></li> <li><li>Password.placeholder= "password"</li></li> <li><li>Self.view.addSubview (password)</li></li> <li><li>}</li></li> <li><li>......</li></li> <li><li>}</li></li> </ul>When you run the program, you see the effect shown in 2.21. When the developer taps the text box, the keyboard automatically pops up, as shown in 2.22.Figure 2.21 Run effect figure 2.22 run effectMulti-line read-write Text--text ViewText view is also an input control, unlike a text box, where the text view allows the user to enter multiple lines, as shown in 2.23. In this figure, the string "say something." this area is implemented using text view, where users can write large amounts of text Content. The General text box view is implemented using UITEXTVIEW.Figure 2.23 Writing a log"example 2-9" The following will be used in the text view of QQ to write and publish the Function. The following steps are Described:(1) Create a single View application template type project, named Uitextview.(2) Open the Main.storyboard file and design the main view, as shown in effect 2.24.The views that need to be added and the settings for them are shown in table 2-6.Table 2-6 settings for a View objectFigure 2.24 Effect of the main view(3) Open the Viewcontroller.swift file, write the code, the function that this code implements is to write to say and publish Function. The code is as Follows: <ul> <li><li>Import UIKit</li></li> <li><li>Class Viewcontroller:uiviewcontroller,uitextviewdelegate {</li></li> <li><li>let wtv=uitextview (frame:cgrectmake (0, 375, 232))</li></li> <li><li>Let Rtv=uitextview (frame:cgrectmake (0, 372, 375, 232))</li></li> <li><li>Let Label=uilabel (frame:cgrectmake (3, 105, 123, 21))</li></li> <li><li>Override Func Viewdidload () {</li></li> <li><li>Super.viewdidload ()</li></li> <li><li>Additional setup after loading the view, typically from a nib.</li></li> <li><li>Self.view.addSubview (wtv)//add Text View</li></li> <li><li>label.text= "say something ..."//set the text content of the label</li></li> <li><li>Label.enabled=false//disable Label</li></li> <li><li>Label.backgroundcolor=uicolor.clearcolor ()</li></li> <li><li>Wtv.delegate=self//delegate to set text view</li></li> <li><li>Self.view.addSubview (label)</li></li> <li><li>Self.view.addSubview (rtv)</li></li> <li><li>Rtv.backgroundcolor=uicolor.clearcolor ()</li></li> <li><li>Rtv.editable=false//disable text View</li></li> <li><li>Rtv.hidden=true//hide text View</li></li> <li><li>}</li></li> <li><li>Listen for text change messages</li></li> <li><li>Func Textviewdidchange (textview:uitextview) {</li></li> <li><li>Determines whether the contents of the text view are empty</li></li> <li><li>If (wtv.text== "") {</li></li> <li><li>label.text= "say Something ..."</li></li> <li><li>}else{</li></li> <li><li>Label.hidden=true</li></li> <li><li>}</li></li> <li><li>}</li></li> <li><li>Hide keyboard</li></li> <li><li>@IBAction func Cancel (sender:anyobject) {</li></li> <li><li>Wtv.resignfirstresponder ()</li></li> <li><li>}</li></li> <li><li>Publish and say, hide the keyboard</li></li> <li><li>@IBAction Func issue (sender:anyobject) {</li></li> <li><li>Rtv.hidden=false</li></li> <li><li>Rtv.text=wtv.text//set text contents of text view</li></li> <li><li>Wtv.resignfirstresponder ()</li></li> <li><li>}</li></li> <li><li>......</li></li> <li><li>}</li></li> </ul>After you run the program, you see the effect shown in 2.25. When the developer taps the text view, the keyboard automatically pops up, as shown in 2.26.Figure 2.25 Run effect Figure 2.26 run effectWhen the developer enters content in the text view, the string "say something ..." will automatically disappear, as shown in 2.27. When you tap the publish button, the content that you write in the text view appears in another text view, and the keyboard disappears, as shown in 2.28.Figure 2.27 Run effect figure 2.28 run effectThis 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 tutorial Display edit text label text box

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More