티스토리 뷰

iOS

[iOS/Swift] 화면 구성 하기

XXIN-dev 2020. 7. 11. 15:34
import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var userButtonImage: UIButton!
    @IBOutlet weak var userLabel: UILabel!
    @IBOutlet weak var deleteButtonImage: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.'
        self.view.backgroundColor = .purple
        
        userLabel.text = "Byoonn"
        userLabel.font = UIFont.boldSystemFont(ofSize: 20)
        userLabel.textColor = .white
        
        deleteButtonImage.setBackgroundImage(UIImage(named: "xIcon"), for: .normal)
        
        userButtonImage.setBackgroundImage(UIImage(named: "boracay"), for: .normal)
        userButtonImage.layer.cornerRadius = 40
        userButtonImage.alpha = 0.5
        userButtonImage.layer.masksToBounds = true
    }

    @IBAction func didClickedButton(_ sender: Any) {
        let vc = UIViewController()
        vc.view.backgroundColor = .blue
        vc.modalPresentationStyle = .pageSheet
        self.present(vc, animated: true)
    }
    @IBAction func didActiveButton(_ sender: Any) {
        if userButtonImage.isHidden == true{
            userButtonImage.isHidden = false
        } else{
            userButtonImage.isHidden = true
        }
    }
    
}

해당 Label과 Button은 StoryBoard에서 위치를 먼저 잡아준 후에 사용했음.

 

    @IBOutlet weak var userButtonImage: UIButton!
    @IBOutlet weak var userLabel: UILabel!
    @IBOutlet weak var deleteButtonImage: UIButton!

: StoryBoard에서 만든 Button과 Label를 Control(⌃)를 누르고 ViewController 창 코드에 옮기고 이름 설정

 

self.view.backgroundColor로 background의 색을 정할 수 있음 -> 보라색

Image View 통해서 background를 채워줘도 OK!

 

.text 는 Label, Button의 text 채우기가 가능

.font로 해당 Label, Button의 font 결정

.textColor로 text의 색 결정

.setBackgroundImageUIImage(named: )를 사용해서 Asset에 있는 이미지를 가지고 옴.  for : 는 UIImage의 상태를 나타내는 것으로 .normal로 설정해줬음

.layer.cornerRadius는 해당 버튼을 얼마큼 둥글게 할 것 인가를 나타냄

.alpha는 해당 버튼에 얼마나 불투명도를 줄 것 인가

.layer.masksToBounds는 해당 버튼의 Radius 된 부분 이외 부분을 안 보이게 설정해주는 것 -> true를 해주지 않으면 아무리 cornerRadius를 해줘도 계속 각진 상태로 남아있음.

 

@IBAction은 해당 Button를 눌렀을 때 실행되는 Action를 의미

 

didClickedButton : 누르면 다른 ViewController생성 -> 배경은 blue고 스타일은 pageSheet, 생길 때 animate가 존재

didActiveButton : 버튼을 눌렀을 때 userButtonImage가 숨겨져 있으면 false로 보이면 true로

 

Run했을 때 나타나는 이미지

나타나는 이미지나 아이콘은 Asset에 넣고 setBackgroundImage로 설정한 것!

링크
최근에 올라온 글
최근에 달린 댓글