iOS 9應用開發教程之顯示編輯文本標籤文本框

iOS 9應用開發教程之顯示編輯文本標籤文本框

ios9顯示、編輯文本

iOS,常常會看到一些文本的顯示。文字就是這些不會說話的設備的嘴巴。經過這些文字,能夠很清楚的指定這些設備要表達的信息。本節將主要講解在iOS中,用來顯示和編輯文本的三個視圖:標籤、文本框和文本視圖。ios

ios9只讀文本——標籤

標籤視圖是一個只讀的文本視圖,它用於在應用程序中爲用戶顯示少許的信息,如圖2.16所示。在此圖中文字的顯示使用的就是標籤視圖。標籤視圖通常使用UILabel類實現。swift

2.16  美容相機併發

【示例2-6】如下就是經過標籤視圖顯示一首詩的效果。代碼以下:ide

  • import UIKit字體

  • class ViewController: UIViewController {spa

  •     override func viewDidLoad() {.net

  •         super.viewDidLoad()設計

  •         // Do any additional setup after loading the view, typically from a nib.日誌

  •         //添加標籤對象mytitleorm

  •         let mytitle=UILabel(frame: CGRectMake(88, 100, 198, 58))

  •         mytitle.font=UIFont.boldSystemFontOfSize(44)                            //設置字體:粗體

  •         mytitle.textAlignment=NSTextAlignment.Center                         //設置對齊方式

  •         mytitle.text="送友人"

  •         self.view.addSubview(mytitle)

  • //添加標籤對象verse1

  •         let verse1=UILabel(frame: CGRectMake(44, 197, 303, 63))

  •         verse1.font=UIFont.systemFontOfSize(24)                                   //設置字體

  •         verse1.textAlignment=NSTextAlignment.Center

  •         verse1.text="青山橫北郭,白水繞東城。"

  •         self.view.addSubview(verse1)

  • //添加標籤對象verse2

  •         let verse2=UILabel(frame: CGRectMake(44, 268, 303, 63))

  •         verse2.font=UIFont.systemFontOfSize(24)

  •         verse2.textAlignment=NSTextAlignment.Center

  •         verse2.text="此地一爲別,孤蓬萬里徵。"

  •         self.view.addSubview(verse2)

  • //添加標籤對象verse3

  •         let verse3=UILabel(frame: CGRectMake(44, 339, 303, 63))

  •         verse3.font=UIFont.systemFontOfSize(24)

  •         verse3.textAlignment=NSTextAlignment.Center

  •         verse3.text="浮雲遊子意,落日故人情。"

  •         self.view.addSubview(verse3)

  • //添加標籤對象verse4

  •         let verse4=UILabel(frame: CGRectMake(44, 410, 303, 63))

  •         verse4.font=UIFont.systemFontOfSize(24)

  •         verse4.textAlignment=NSTextAlignment.Center

  •         verse4.text="揮手自茲去,蕭蕭班馬鳴。"

  •         self.view.addSubview(verse4)

  •     }

  • ……

  • }

此時運行程序,會看到如圖2.17所示的效果。

2.17  運行效果

注意:標籤視圖默認是顯示一行的,可是,也能夠將標籤的內容顯示爲多行。

【示例2-7】如下將爲在標籤中顯示多行內容。代碼以下:

  • import UIKit

  • class ViewController: UIViewController {

  •     override func viewDidLoad() {

  •         super.viewDidLoad()

  •         // Do any additional setup after loading the view, typically from a nib.

  •         let verse=UILabel(frame: CGRectMake(20, 191, 333, 196))

        verse.text="       像陽光同樣的人,像陽光同樣的事,像陽光同樣的愛,像陽光同樣的慈悲,世界上遍地都是。一聲溫暖的問候,一個甜甜的微笑,一句簡單的祝福,一回小小的幫助,一次善意的舉動,無不是咱們生命的陽光。咱們何不把它們收藏起來,讓它照耀咱們的人生路,溫暖咱們須要溫暖的心裏?心底的陽光多了,本身就是個太陽,還有什麼風雨大到可以澆滅太陽?"

  •         self.view.addSubview(verse)

  •     }

  • ……

  • }

此時運行程序,會看到如圖2.18所示的效果。在圖中能夠看到標籤中只顯示了一行文本內容,並無將全部的內容顯示出來。爲了解決這一問題,iOS提供了一個顯示多行的屬性numberOfLines,這樣一來,標籤中要顯示的內容就能夠以多行的形式所有顯示出來。在此示例中,咱們的標籤內容須要9行才能夠顯示出來,因此在代碼中添加如下內容:

  • verse.numberOfLines=9

此時運行程序,會看到如圖2.19所示的效果。

2.18  運行效果                         2.19  運行效果

單行讀寫文本——文本框

文本框是一種常見的單行讀寫文本視圖,簡單的說就是輸入控件,例如一種登陸界面要求用戶輸入用戶名和密碼等,如圖2.1所示。文本框通常使用UITextField實現。

【示例2-8】如下經過使用文本框實現QQ中添加帳號的功能。具體操做步驟以下:

1)建立一個Single View Application模板類型的項目,命名爲UITextField

2)打開Main.storyboard文件,對主視圖進行設計,效果如圖2.20所示。

須要添加的視圖以及對它們的設置如表2-5所示。 

2-5  對視圖對象的設置

2.20  主視圖的效果

3)打開ViewController.swift文件,編寫代碼,此代碼實現的功能是帳號的添加。代碼以下:

  • import UIKit

  • class ViewController: UIViewController {

  •     override func viewDidLoad() {

  •         super.viewDidLoad()

  •         // Do any additional setup after loading the view, typically from a nib.

  •         //添加輸入帳號的文本框

  •         let accountnumber=UITextField(frame: CGRectMake(0, 116, 375, 50))

  •         accountnumber.borderStyle=UITextBorderStyle.RoundedRect       //設置文本框的邊框風格

  •         accountnumber.placeholder="QQ/手機號/郵箱"                             //設置文本框的佔位符

  •         self.view.addSubview(accountnumber)

  •         //添加輸入密碼的文本框

  •         let password=UITextField(frame: CGRectMake(0, 165.5, 375, 50))

  •         password.borderStyle=UITextBorderStyle.RoundedRect

  •         password.placeholder="密碼"

  •         self.view.addSubview(password)

  •     }

  • ……

  • }

此時運行程序,會看到如圖2.21所示的效果。當開發者輕拍文本框後,會自動彈出鍵盤,如圖2.22所示。

2.21  運行效果                               2.22  運行效果

多行讀寫文本——文本視圖

文本視圖也是輸入控件,與文本框不一樣的是,文本視圖可讓用戶輸入多行,如圖2.23所示。在此圖中字符串「說點什麼吧」這一區域就是使用文本視圖實現的,用戶能夠在此區域中寫大量的文本內容。通常文本框視圖使用UITextView實現。

2.23  寫日誌

【示例2-9】如下將使用文本視圖實現QQ中寫說說並發表的功能。具體的操做步驟以下:

1)建立一個Single View Application模板類型的項目,命名爲UITextView

2)打開Main.storyboard文件,對主視圖進行設計,效果如圖2.24所示。

須要添加的視圖以及對它們的設置如表2-6所示。

2-6  對視圖對象的設置

2.24  主視圖的效果

3)打開ViewController.swift文件,編寫代碼,此代碼實現的功能是寫說說並發表的功能。代碼以下:

  • import UIKit

  • class ViewController: UIViewController,UITextViewDelegate {

  •     let wtv=UITextView(frame: CGRectMake(0, 97, 375, 232))

  •     let rtv=UITextView(frame: CGRectMake(0, 372, 375, 232))

  •     let label=UILabel(frame: CGRectMake(3, 105, 123, 21))

  •     override func viewDidLoad() {

  •         super.viewDidLoad()

  •         // Do any additional setup after loading the view, typically from a nib.

  •         self.view.addSubview(wtv)                             //添加文本視圖

  •         label.text="說點什麼吧..."                                 //設置標籤的文本內容

  •         label.enabled=false                                         //禁用標籤

  •         label.backgroundColor=UIColor.clearColor()

  •         wtv.delegate=self                                             //設置文本視圖的委託

  •         self.view.addSubview(label)

  •         self.view.addSubview(rtv)

  •         rtv.backgroundColor=UIColor.clearColor()

  •         rtv.editable=false                                                       //禁用文本視圖

  •         rtv.hidden=true                                                  //隱藏文本視圖

  • }

  • //監聽文字改變的消息

  • func textViewDidChange(textView: UITextView) {

  •     //判斷文本視圖的內容是否爲空

  •         if(wtv.text==""){

  •             label.text="說點什麼吧..."

  •         }else{

  •             label.hidden=true

  •         }

  • }

  • //隱藏鍵盤

  •     @IBAction func cancel(sender: AnyObject) {

  •          wtv.resignFirstResponder()

  • }

  • //發表說說,隱藏鍵盤

  •     @IBAction func issue(sender: AnyObject) {

  •         rtv.hidden=false

  •         rtv.text=wtv.text                                                           //設置文本視圖的文本內容

  •         wtv.resignFirstResponder()

  •     }

  • ……

  • }

運行程序後,會看到如圖2.25所示的效果。當開發者輕拍文本視圖後,會自動彈出鍵盤,如圖2.26所示。

2.25  運行效果                                2.26  運行效果

當開發者在文本視圖中輸入內容後,字符串「說點什麼吧」就會自動消失,如圖2.27所示。當輕拍發表按鈕後,在文本視圖中寫入的內容就會顯示在另外一個文本視圖中,而且鍵盤消失,如圖2.28所示。

2.27  運行效果                                 2.28  運行效果

本文選自:iOS 9應用開發基礎教程大學霸內部資料,轉載請註明出處,尊重技術尊重IT人!

相關文章
相關標籤/搜索