์ƒ์„ธ ์ปจํ…์ธ 

๋ณธ๋ฌธ ์ œ๋ชฉ

[์ฝ”๋“œ๋ฒ ์ด์ŠคUI] ์นด์šดํ„ฐ ์•ฑ ๊ฐœ๋ฐœ ๊ฐœ์ธ ๊ณผ์ œ, inset๊ณผ offset

๐ŸŽ iOS/Xcode

by AHN.Jihyeon 2024. 6. 26. 13:47

๋ณธ๋ฌธ

์นด์šดํ„ฐ ์•ฑ ์š”๊ตฌ ์‚ฌํ•ญ

 

 

 

 


๋ฐœ์ƒํ•œ ์˜ค๋ฅ˜1

 

 

1. ๊ฐ์†Œ ๋ฒ„ํŠผ์˜ ์œ„์น˜๊ฐ€ ์ œ๋Œ€๋กœ ์žกํžˆ์ง€ ์•Š์Œ.

์•„๋ž˜๋Š” ์‹œ๋„ํ•ด๋ดค๋˜ ํ…Œ์ŠคํŠธ.

inset(32)
inset(-32)
offset(-32)

 

 

.offset(-32) ๋กœ ์ˆ˜์ •.

 

 

 

2. ์ˆซ์ž ๋„์šฐ๋Š” ๋ผ๋ฒจ์ด ๋ณด์ด์ง€ ์•Š์Œ. 

→ ๋„์›Œ์กŒ์œผ๋‚˜ ์ˆซ์ž ์ž…๋ ฅ์ด ๋˜์–ด ์žˆ์ง€ ์•Š์•„์„œ ์ ์šฉ์ด ๋˜์ง€ ์•Š์€ ๊ฒƒ์ฒ˜๋Ÿผ ๋ณด์˜€์Œ.

 

 

 

๋ฐœ๊ฒฌํ•œ ์˜ค๋ฅ˜2

์ดˆ๊ธฐํ™”์˜ ์œ„์น˜๊ฐ€ ์ œ๋Œ€๋กœ ์žกํžˆ์ง€ ์•Š์Œ 

 

1. centerX์˜ ์œ„์น˜ ์„ค์ • ์•ˆ ๋ผ์—ˆ๋˜๊ฑฐ๋ผ ์ถ”๊ฐ€ํ•ด์„œ ํ•ด๊ฒฐ.

 

 

 

2. .inset(-60)์˜ ์œ„์น˜ ์„ค์ •์ด ์ž˜๋ชป ๋จ

 

 


์ตœ์ข… ์ฝ”๋“œ

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    let numLabel = UILabel()
    var number: Int = 0
    let minusButton = UIButton()
    let plusButton = UIButton()
    let resetButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    //UI์„ธํŒ… ๋ฉ”์„œ๋“œ
    private func configureUI(){
        view.backgroundColor = . black
        
        minusButton.backgroundColor = .red
        minusButton.setTitle("๊ฐ์†Œ", for: .normal)
        minusButton.setTitleColor(.white, for: .normal)
        minusButton.layer.cornerRadius = 8
        minusButton.addTarget(self, action: #selector(minusButtonTapped), for: .touchDown)
        
        numLabel.text = "\(number)"
        numLabel.textColor = .white
        numLabel.font = .boldSystemFont(ofSize: 45)
        numLabel.textAlignment = .center
        
        plusButton.backgroundColor = .blue
        plusButton.setTitle("์ฆ๊ฐ€", for: .normal)
        plusButton.setTitleColor(.white, for: .normal)
        plusButton.layer.cornerRadius = 8
        plusButton.addTarget(self, action: #selector(plusButtonTapped), for: .touchDown)
        
        resetButton.setTitle("์ดˆ๊ธฐํ™”", for: .normal)
        resetButton.setTitleColor(.white, for: .normal)
        resetButton.backgroundColor = .gray
        resetButton.layer.cornerRadius = 8
        resetButton.addTarget(self, action: #selector(resetButtonTapped), for: .touchDown)
        
        
        //view์— subview๋กœ ๋„ฃ์–ด์ค€๋‹ค.
        [minusButton, numLabel, plusButton, resetButton].forEach {view.addSubview($0)}
        
        
        //์ œ์•ฝ ์กฐ๊ฑด
        minusButton.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.height.equalTo(30)
            $0.centerY.equalTo(numLabel.snp.centerY)
//            $0.trailing.equalTo(numLabel.snp.leading).inset(32)
            $0.trailing.equalTo(numLabel.snp.leading).offset(-32)
        }
        
        numLabel.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.center.equalToSuperview()
        }
        
        plusButton.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.height.equalTo(30)
            $0.centerY.equalTo(numLabel.snp.centerY)
            $0.leading.equalTo(numLabel.snp.trailing).offset(-32)
        }
        
        resetButton.snp.makeConstraints {
            $0.width.equalTo(80)
            $0.height.equalTo(30)
            $0.centerX.equalToSuperview()
            $0.top.equalTo(numLabel.snp.bottom).offset(60)
        }
    }
    
    @objc
    private func minusButtonTapped() {
        number -= 1
        numLabel.text = "\(number)"
    }
    
    @objc
    private func plusButtonTapped() {
        number += 1
        numLabel.text = "\(number)"
    }
    
    @objc
    private func resetButtonTapped() {
        number = 0
        numLabel.text = "\(number)"
    }
}

 

๊ด€๋ จ๊ธ€ ๋”๋ณด๊ธฐ