iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Software Development

30天iOS APP開發系列 第 3

[Day 03] UI更新

第一步

點選ViewController.swift,若有要更新UI的程式碼碼寫在這邊即可。
ViewController.swift
預計程式流程如下:使用者按下按鈕->呼叫按鈕的function(@IBAction func change())->若按下送出則呼叫改變label的function(func changeLabel())。

建立一個label變數

建立一個變數用來控制畫面中的label,但此時該變數尚未與實際畫面中的label連結
變數與實際畫面元件連結請參閱最後一段

@IBOutlet weak var labelTitle: UILabel!

建立一個按鈕按下後的function

利用alertController建立一個彈出視窗,並且新增兩個UIAlertAction分別為取消及送出
其中UIAlertAction的handler為按下後要呼叫的function

@IBAction func change()
{
    //建立跳出視窗,抬頭為『改變』,顯示訊息為『你確定要改變Title嗎?』
    let alertController = UIAlertController(title: "改變",
        message: "你確定要改變Title嗎?",
        preferredStyle: UIAlertControllerStyle.alert)

    // 建立取消按鈕
    let cancelBtn = UIAlertAction(
        title: "取消",
        style: UIAlertActionStyle.cancel,
        handler: nil)
    alertController.addAction(cancelBtn)

    // 建立送出按鈕
    //headler為按下送出後所要執行的function,這裡要執行的function為changeLabel()
    let sendBtn = UIAlertAction(
        title: "送出",
        style: UIAlertActionStyle.default,
        handler: {(UIAlertAction) in self.changeLabel()})
    alertController.addAction(sendBtn)

    // 顯示提示框
    present(alertController,animated: true,completion: nil)
}

建立changeLabel()

func changeLabel()
{
    labelTitle.text = "我已經改變!"
    //直接修改label的值即可
}

連結IBOutlet

將變數label與實際元件連結
可以選擇在Xcode中右上方的兩個小圈圈,將畫面分割為左右兩邊,並且將另一編設為Main.storyboard
分割畫面
在@IBOutlet weak var labelTitle: UILabel!的左方有一個空心的圈圈,拉住該圈圈至想要連結的label即可
連結變數與實際元件

連結IBAction

同上,要將IBAction連結至畫面中的按鈕,連結後按下按鈕即可執行該function
連結IBAction及按鈕

實際成果

(不知為何轉成GIF一直失敗...只好放上youtube連結)
成果影片

最終程式碼

//
//  ViewController.swift
//  Earthquake
//
//  Created by HUNGHAOMING on 2017/12/7.
//  Copyright © 2017年 CGLab. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var labelTitle: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func change()
    {
        //建立跳出視窗
        let alertController = UIAlertController(title: "改變",
            message: "你確定要改變Title嗎?",
            preferredStyle: UIAlertControllerStyle.alert)
        
        // 建立取消按鈕
        let cancelBtn = UIAlertAction(
            title: "取消",
            style: UIAlertActionStyle.cancel,
            handler: nil)
        alertController.addAction(cancelBtn)
        
        // 建立送出按鈕
        let sendBtn = UIAlertAction(
            title: "送出",
            style: UIAlertActionStyle.default,
            handler: {(UIAlertAction) in self.changeLabel()})
        alertController.addAction(sendBtn)
        
        // 顯示提示框
        present(alertController,animated: true,completion: nil)
    }
    
    func changeLabel()
    {
        labelTitle.text = "我已經改變!"
    }
}


參考資料

UI變更
新增提示框
IBOutlet and IBAction


上一篇
[Day 02] UI處理
下一篇
[Day 04] 將APP實際灌入device
系列文
30天iOS APP開發6
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言