iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Mobile Development

IOS 菜菜菜鳥30天挑戰系列 第 11

IOS 菜菜菜鳥30天挑戰 Day 11 button和label的搭配使用!

  • 分享至 

  • xImage
  •  

前面我們有試做過button的程式
那這次我們來點不一樣的,用storyboard搭配一些程式碼來寫今天的東西~

1.首先前面有提到過button要怎麼拉出來設置這邊就不再贅述,直接拉label出來(label是標籤的意思)
https://ithelp.ithome.com.tw/upload/images/20200917/20129679GAapAI3wEs.png

2.接下來我們要來排版,前有提到的約束和祕技來物盡其用!
https://ithelp.ithome.com.tw/upload/images/20200917/20129679qDuWD9Fn6b.png

3.然後現在我們要點擊右上角的這個“+”按鈕來新增頁面
https://ithelp.ithome.com.tw/upload/images/20200917/20129679OyJsCiXJSt.png

4.出現兩個頁面之後,點擊viewController.swift這個檔案(這個檔案就是用來寫程式碼的),這樣就可以用程式碼編輯了
https://ithelp.ithome.com.tw/upload/images/20200917/20129679VBr0dT0gAF.png
https://ithelp.ithome.com.tw/upload/images/20200917/20129679YYDGZdlbtC.png

5.接下來要讓storyboard中的元件和viewController.swift這個檔案有連結,所以我們要使用outlet和action,步驟是:在storyboard中點擊元件(button跟label)+control鍵,拖拉到viewdidload這段程式上面跟下面(看大括號)
https://ithelp.ithome.com.tw/upload/images/20200917/20129679JauFDsAIoG.png
https://ithelp.ithome.com.tw/upload/images/20200917/20129679ibMLKu7tJb.png

6.接完之後就會長這樣
https://ithelp.ithome.com.tw/upload/images/20200917/20129679RTBZUyC6FG.png
所謂的outlet就是讓他在程式檔案裡建立一個存在去對應storyboard的某個元件,讓我們可以對他的屬性做修改,action就是去事件發生執行的動作

7.每個元件有所謂的屬性,名字也是屬性的一種,那現在我透過程式對他們進行修改

    override func viewDidLoad() { //寫在viewDidLoad裡面
        super.viewDidLoad()
        testBtn.setTitle("點這裡", for: .normal) //把button的名字改成點這裡
        // Do any additional setup after loading the view.
    }

8.上面有提到action是動作,這邊我想要讓label在我點擊button的時候更換名字跟顏色,所以我寫了下面的程式

    @IBAction func changeNameAct(_ sender: Any) { //點擊的時候會做什麼
        testLabel.text = "我是你的第一個程式" //更換名字
        testLabel.textColor = #colorLiteral(red: 1, green: 0, blue: 0, alpha: 1) //變成紅色
    }

9.這就是成果啦
圖片


上一篇
IOS 菜菜菜鳥30天挑戰 Day-10 Auto Layout的123事-2
下一篇
IOS 菜菜菜鳥30天挑戰 Day-12 一頁viewController?兩頁viewController!
系列文
IOS 菜菜菜鳥30天挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言