iOS-StackView

스텍뷰는 크기가 없고 안에 내용물을 채워줘야한다. 

전화화면을 실습해보았다

 

 

 Horizontal 스텍뷰에 Vertical 스텍뷰를 넣고 

간격을 줘서 만들었다.

 

 

이제 버튼을 동그랗게 만들어보자(빈부분은 크기를 위해 view로 채웠다.)

 

 

// 인터페이스 빌더에서 디자인 바로 확인 가능하게 함
@IBDesignable
class CircleButton : UIButton {
    
    // 인스펙터 패널에서 사용될 수 있도록 설정하는것
    @IBInspectable var cornerRadius : CGFloat = 0 {
       
        // 값이 설정되면 didset 호출 (프로퍼티 옵저버)
        didSet {
            layer.cornerRadius = cornerRadius
            // UI 화면 변경되는 부분을 불 수 있음
            layer.masksToBounds = cornerRadius > 0
            
            
        }
    }
}

커스텀 클래스를 만들고 다음과 같이 하면된다. 

그럼 인스펙터 영역에 cornerRadius 커스텀하는 부분이 만들어진다. 

 

하는중에 @IBDesignal 관해서 에러가 떴다 구글링좀 하다가 실패해서 일단 다시 네모 버튼으로 진행했다. 

 

이제 레이블과 버튼의 액션을 만들어준다.

 

 

이렇게 버튼이 많을때 Outlet 변수를 일일히 설정해주는건 매우 귀찮다 그래서 

 

OutletCollection 으로 버튼 하나를 생성후에 나머지 버튼만 이어주면 여러 버튼이 

하나의 Outlet 변수와 연결된다.

 

 

  var phoneNumberString = "" {
        didSet {
            // DispactchQueue GCD 개념으로 따로 빼서 공부해야 할드읏
            DispatchQueue.main.async { [weak self] in
                
                guard let self = self else {return}
                self.phoneNumberLabel.textColor = .black
                self.phoneNumberLabel.text = self.phoneNumberString
                
            }
        }
    }

 @objc fileprivate func onNumberBtnClicked( sender : UIButton) {
        guard let inputString = sender.titleLabel?.text else {return}
        phoneNumberString.append(inputString)
    }

 

 

버튼클릭시 titleLabel을 phoneNumberString에 넣고 phoneNumberLabel 에 나타낸다. 

 

 

override func viewDidLoad() {
        super.viewDidLoad()
        
        for btnItem in phoneNumberBtns {
            btnItem.addTarget(self, action: #selector(onNumberBtnClicked(sender:)), for: .touchUpInside)
        }
        
        phoneCallBtn.addTarget(self, action: #selector(onPhoneCallBtnClicked(_ :)), for: .touchUpInside)
    }

 

 

버튼 클릭이벤트 처리 

 

 

완료