iOS UI Overview

iOS User Interface Overview

Point, Pixel

Frame Base

Auto Layout

Framework

UIKit framework

UIResponder

UIApplication

AppDelegate

UIViewController

UIView

let topView: UIView = UIView(frame: CGRect(x: 15, y: 15, width: self.view.frame.width-30, height: 100))

참고. CGRect?

let topView: UIView = UIView(frame: CGRect(x: 15, y: 15, width: self.view.frame.width-30, height: 100))

topView.frame = CGRect(origin: CGPoint(x: 30, y: 30), size: CGSize(width: 100, height: 100))
topView.backgroundColor = UIColor.yellow
topView.layer.borderWidth = 8
topView.layer.borderColor = UIColor.black.cgColor
//UIColor라는 class 안에 black이라는 프로퍼티가 있고, cgColor로 변환
topView.layer.cornerRadius = 20
self.view.addSubview(topView)

UILabel

exploreLabel.frame = CGRect(x: 0, y: 160, width: self.view.frame.size.width, height: 60)
exploreLabel.textColor = .white
exploreLabel.text = "Explore"
exploreLabel.font = UIFont.systemFont(ofSize: 46, weight: .heavy)
exploreLabel.textAlignment = .center
// MARK -- Generate Kinfolk Logo
logoLabel = UILabel(frame: CGRect(x: 16, y: 36, width: self.view.frame.width-32, height: 20))

// MARK -- addSubview의 위치는 상관 없으나, 그래도 변수 선언하고 바로 추가하기
gnbView.addSubview(logoLabel)
    
logoLabel.text = "Kinfolk"
logoLabel.textAlignment = .left
logoLabel.font = UIFont.systemFont(ofSize: 16) 
logoLabel.textColor = UIColor.darkGray
logoLabel.shadowColor = UIColor.darkGray
        

// MARK -- UIFont.Weight : ultraLight, thin, light, regular, medium, semibold, bold, heavy, black
logoLabel.font = UIFont.boldSystemFont(ofSize: 16)
logoLabel.font = UIFont.systemFont(ofSize: 16, weight: UIFont.Weight.heavy)

// MARK -- Custom Font type
logoLabel.font = UIFont(name: "Font Name", size: 16)

Attributed Text (swift4)

import UIKit
class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        updateUI()
    }
 
    func updateUI() {
        
        let text = "Hello World"

        let attributes = [
            NSAttributedStringKey.foregroundColor: UIColor.black,
            NSAttributedStringKey.underlineStyle: 1,
            NSAttributedStringKey.strokeWidth: 2,
            NSAttributedStringKey.kern: 4
            ] as [NSAttributedStringKey : Any]

        let attStr = NSAttributedString(string: text, attributes: attributes)
        label.attributedText = attStr
        label.font = UIFont.systemFont(ofSize: 20)
    }

}

UIImageView

exploreImg.image = #imageLiteral(resourceName: "Background-1")
exploreImg.alpha = 0.6
exploreImg.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height)
exploreImg.contentMode = .scaleToFill
let contentImageView: UIImageView = UIImageView()
contentModuleView.addSubview(contentImageView)
contentImageView.frame = CGRect(x: 8, y: 8, width: 359, height: 359)
contentImageView.image = UIImage(named: "fritzHansen_04.jpg")
contentImageView.contentMode = UIViewContentMode.scaleAspectFill // contentMode (UIView의 속성)
        
// MARK -- image가 isHighlighted 
contentImageView.isHighlighted = true
contentImageView.highlightedImage = UIImage(named: "fritzHansen_02.jpg")
contentImageView.isUserInteractionEnabled = true

UIControl

UIButton

exitIcon = UIButton(frame: CGRect(x: self.view.frame.size.width/2-15, y: self.view.frame.size.height-46, width: 30, height: 30))
exitIcon.setTitle("Exit", for: .normal)
exitIcon.setTitleColor(.white, for: .normal)
exitIcon.titleLabel?.font = UIFont.systemFont(ofSize: 12)
exitIcon.addTarget(self, action: #selector(didTapExitButton), for: .touchUpInside)

// addTarget에 추가할 함수 : 화면 내리기
@objc func didTapExitButton(_ sender: UIButton) {
	dismiss(animated: true, completion: nil)
}
let btn: UIButton = UIButton(type: .custom) // Default: Custom
view.addSubview(btn)
btn.setTitle("normal", for: .normal) 
btn.setTitleColor(.black, for: .normal)
btn.setTitle("highlight", for: .highlighted)
btn.setTitleColor(.black, for: .highlighted)//
btn.setTitle("selected", for: .selected) 
btn.setTitleColor(.black, for: .selected)
btn.addTarget(self, action: #selector(ViewController.btnClick), for: .touchUpInside) 
btn.backgroundColor = .white
btn.frame = CGRect(x: magazineFooterView.frame.width/2-50, y: magazineFooterView.frame.height-50, width: 100, height: 20)

- sender.isSelected

@objc func btnClick(_ sender: UIButton) {
    if sender.isSelected {
        sender.isSelected = false
    }else {
        sender.isSelected = true
    }
}

UI Text Field

Textfields property

// UITextField 는 1줄 입력이 default
sendMsgTxtField = UITextField(frame: CGRect(x: 0, y: view.frame.size.height-50, width: view.frame.size.width, height: 50 ))
self.view.addSubview(sendMsgTxtField)
sendMsgTxtField.borderStyle = .line
sendMsgTxtField.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
sendMsgTxtField.textColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
sendMsgTxtField.placeholder = "Kinfolk에게 의견을 보내주세요😊"

/****UITextfield Protocol 채택 및 delegate 사용*****/
sendMsgTxtField.delegate = self
sendMsgTxtField.adjustsFontSizeToFitWidth = true
sendMsgTxtField.minimumFontSize = 6
sendMsgTxtField.clearsOnBeginEditing = true

UITextField.layer

func designTextField(_ textField: UITextField) {
    textField.layer.cornerRadius = 3
    textField.layer.borderColor = UIColor.lightGray.cgColor
    textField.layer.borderWidth = 1/UIScreen.main.scale // 딱 1px
}

참고. UIView에 animate 효과 주기

UIView.animate(withDuration: 0.1, animations: {
        self.usernameTextField.frame.origin.x -= 10
        self.passwordTextField.frame.origin.x -= 10
    }, completion: { _ in
        UIView.animate(withDuration: 0.1, animations: {
            self.usernameTextField.frame.origin.x += 20
            self.passwordTextField.frame.origin.x += 20
        }, completion: { _ in
            UIView.animate(withDuration: 0.1, animations: {
                self.usernameTextField.frame.origin.x -= 10
                self.passwordTextField.frame.origin.x -= 10
            })
        })
    })
}