iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
自我挑戰組

來寫看看app好了! Swift探索之旅系列 第 12

Day#12 登入畫面(1)

前言

確定畫面都可以正確呈現與轉換後,我們來正式實作登入的畫面。

Nav

LoginViewController

我們新增一個nav,title為登入,且把背景色設成白色。
並在navbar新增右上方的按鈕為註冊,當點下的時候會套用方法didTapRegister

diidTapRegitser會新增一個viewcontroller,並放到receiver stack中。

override func viewDidLoad() {
    super.viewDidLoad()
    title = "Sign In"
    view.backgroundColor = .white

    navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Sign Up",
                                                        style: .done,
                                                        target: self,
                                                        action: #selector(didTapRegister))
}

// push the register controller to screen
@objc private func didTapRegister(){
    let vc = RegisterViewController()
    vc.title = "Create Account"
    navigationController?.pushViewController(vc, animated: true)
}

Logo

我們要放上登入的logo,因此在asset中右鍵新增一個image set,命名為logo並將我們想要的圖片放上去。

接著在同一個view controller中加上剛剛的圖片。使用UIImageView可以呈現一個或多張image於畫面上。

LoginViewController

private let imageView: UIImageView = {
    let imageView = UIImageView()
    imageView.image = UIImage(named: "Logo")
    imageView.contentMode = .scaleAspectFit
    return imageView
}()

接著在viewDidLoad加上

view.addSubview(imageView)

確保imageView有被加到畫面上!

最後一個小細節,是關於圖片尺寸計算的方法,但是在此計算有點麻煩,在程式管理上也不是那麼正確(?),因此我們可以寫一個extension,把所有計算的規則放在extension中。

因此可以在resource中新增一個swift檔案,就命名為Extensions。

Extensions

import Foundation
import UIKit

extension UIView {
    public var width: CGFloat {
        return self.frame.size.width
    }

    public var height: CGFloat {
        return self.frame.size.height
    }

    public var top: CGFloat {
        return self.frame.origin.y
    }

    public var bottom: CGFloat {
        return self.frame.size.height + self.frame.origin.y
    }

    public var left: CGFloat {
        return self.frame.origin.x
    }

    public var right: CGFloat {
        return self.frame.size.width + self.frame.origin.x
    }
}

其中的長寬就是畫面的長寬。而frame.origin是上一層(父層)的相對座標。

LoginViewController

最後我們回到login畫面,可以使用剛剛的計算方式去加上圖片。

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    let size = view.width/3
    imageView.frame = CGRect(x: (view.width-size)/2,
                             y: 20,
                             width: size,
                             height: size)
}

結語

可喜可賀,明天會繼續把登入畫面的輸入欄位加上~
過1/3,繼續加油!

參考資料

  1. iOS Fundamentals: Frames, Bounds, and CGGeometry

若上述內容有誤或可以改進的部分,歡迎留言以及提出任何指教~
謝謝 १|˚–˚|५


上一篇
Day#11 測試畫面
下一篇
Day#13 登入畫面(2)
系列文
來寫看看app好了! Swift探索之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言