[iOS] 인스타그램 클론 코딩을 해보자!(3) - 버튼 생성&꾸미기

 

✅ 오늘 공부한 내용

- 버튼에 radius 속성 주기
- 버튼 텍스트에 다른 컬러 적용하기
- back button 구현하기

 

---

  버튼에 radius 속성 주기  

1️⃣ 새로운 Swift 파일을 생성한 뒤 다음과 같은 코드를 작성한다.

💡 @IBInspectable을 이용하여 inspector 영역에 새로운 속성을 추가하는 것이다!

import UIKit

@IBDesignable
extension UIView {      //extension으로 UIView 확장
    
    // 📌 @IBInspectable: inspector 영역에서 해당 인터페이스 요소의 속성을 변경할 수 있게 하는 것
    @IBInspectable var cornerRadius: CGFloat {
        // 연산 프로퍼티
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

 

인스펙터 영역에 새롭게 내가 만든 속성이 추가된 것을 확인할 수 있다😊

 

 

2️⃣ 속성을 이용해 값을 적용한다.

두 가지 방법이 있다!

(1) 인스펙터 영역에 새로 생긴 부분에서 직접 값 주기

(2) 코드로 작성하기

    override func viewDidLoad() {
        super.viewDidLoad()

        // border-radius 속성을 코드로 구현
        loginButton.layer.cornerRadius = 8
    }

 

 

---

  버튼 텍스트에 다른 컬러 적용하기  

1️⃣ 새로운 Swift 파일을 생성하고, 메서드를 작성한다.

import UIKit


// 하나의 버튼 안에 있는 텍스트 컬러 구분

extension UIViewController{
    func generateButtonAttribute(_ button: UIButton,
                                 texts: String...,
                                 fonts: UIFont...,
                                 colors: UIColor...) -> NSMutableAttributedString{
        
        //UIButton에 입력한 text를 가져오기
        guard let wholeText = button.titleLabel?.text else{ fatalError("버튼에 텍스트가 없음")}
        
        //폰트들
        let customFonts: [UIFont] = fonts
        
        //설정하고자 하는 String의 NSRanges
        let customTextsRanges = texts.indices.map { index in
            (wholeText as NSString).range(of: texts[index])
        }
        
        //설정하고자 하는 색상들
        let customColors = colors
        
        //attribute 객체 생성
        let attributedString = NSMutableAttributedString(string: wholeText)
        
        //텍스트에 맞는 설정 추가
        texts.indices.forEach{ index in
            attributedString.addAttribute(.font,
                                          value: customFonts[index],
                                          range: customTextsRanges[index])
            
            attributedString.addAttribute(.foregroundColor,
                                          value: customColors[index],
                                          range: customTextsRanges[index])
        }
        return attributedString
    }
}

** 메서드의 자세한 속성은 추후 공부하기로 한다!

 

2️⃣ 값을 적용한다.

    @IBOutlet weak var isSignupButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupAttributes()
    }

 

 
    private func setupAttributes() {
        
        // isSignupButton
        // 한 label에 있는 텍스트 컬러 다르게 하기
        
        let text1 = "계정이 없으신가요?"
        let text2 = "가입하기"
        
        let font1 = UIFont.systemFont(ofSize: 18)
        let font2 = UIFont.boldSystemFont(ofSize: 18)
        
        let color1 = UIColor.darkGray
        let color2 = UIColor.systemPink
        
        let attributes = generateButtonAttribute(self.isSignupButton, texts: text1, text2, fonts: font1, font2, colors: color1, color2)
        
        
        self.isSignupButton.setAttributedTitle(attributes, for: .normal)
    }

 

 

---

  Backbutton 구현하기  

1️⃣ View를 선택하고,Top Bar의 속성을 변경해준다. (영역 확보)

 

2️⃣ navagation item - bar button item을 차례로 추가해준다.

 

3️⃣ 뒤로가기 버튼에 코드를 구현해준다.

    @IBAction func backButtonDidTapped(_ sender: UIBarButtonItem) {
        
        // 뒤로가기
        self.navigationController?.popViewController(animated: true)
    }

 

4️⃣ 뒤로가기 슬라이드가 동작할 수 있도록 코드를 구현한다.

    override func viewDidLoad() {
        super.viewDidLoad()

        // 버그 수정
        // 슬라이드로 뒤로가기 구현
        self.navigationController?.interactivePopGestureRecognizer?.delegate = nil
    }

 

 

실행 화면