[SWIFT] UIButton, UILabel, UITextField 코드로 추가하기 (기존 UI위치 복사하기)

[UI 추가하기]

스토리보드상에 추가한 UI들을 직접 코드로 추가하는 경우다. 나같은 경우에는 하나의 뷰 안에 같은 유형의 UI가 동일한 자리에 있어야할 경우(하나는 hidden으로 되어 있으며, 보이는 UI를 누르면 Hidden시키고, Hidden된 UI를 보여줘야하는 경우)에 사용했다. 이 외에도 그냥 코드로 추가하는 사람이 편하다면 그렇게 하면 된다. 핵심은 간단하다.

UIXXX

즉, XXX에는 UI의 종류.. 버튼이나 텍스트필드, 라벨 등이 들어가게 된다. 코드를 보자.

        let explainLabel2 =
        UILabel(frame: CGRect(x: explainLabel.frame.minX, y: explainLabel2.frame.minY, width: explainLabel.frame.width, height: explainLabel.frame.height))
        explainLabel2.center = CGPoint(x: explainLabel.center.x, y: explainLabel.center.y)
        explainLabel2.text = "인증 번호를 입력하세요"
        explainLabel2.textColor = UIColor.gray
        
        let authButton2 = UIButton(frame: CGRect(x: authButton.frame.minX, y: authButton.frame.minY, width: authButton.frame.width, height: authButton.frame.height))
        authButton2.center = CGPoint(x: authButton.center.x, y: authButton.center.y)
        authButton2.setTitle("abc", for: .normal)
        authButton2.setTitleColor(authButton.titleColor(for: .normal), for: .normal)
        authButton2.setTitleColor(authButton.titleColor(for: .highlighted), for: .highlighted)
        authButton2.addTarget(self, action: #selector(authButton2Clicked), for: .touchUpInside)
        
        let phoneText2 = UITextField(frame: CGRect(x: phoneText.frame.minX, y: phoneText.frame.minY, width: phoneText.frame.width, height: phoneText.frame.height))
        phoneText2.center = CGPoint(x: phoneText.center.x, y: phoneText.center.y)
        phoneText2.borderStyle = UITextBorderStyle.roundedRect
    
        self.view.addSubview(explainLabel2)
        self.view.addSubview(authButton2)
        self.view.addSubview(phoneText2)

즉, 모든 것은 UIXXX로시작해서, addSubview로 끝나게 된다. UIXXX로 해당 UI를 만들고, 속성등을 지정한다. 위의 코드는 버튼, 라벨, 텍스트 필드가 갖고 있는 가장 기본적인 속성들을 설정한 것이다. 버튼의 경우 setTileColor를 통해 평소 보이는 색과.. 클릭했을 때(Hilighted)의 색을 지정해야 어색하지 않으며, addTarget은 셀렉터를 이용하여 사용자가 설정한 함수(파라미터는 전달 안 됨)를 실행함으로써.. 스토리보드의 버튼을 Action으로 연결했을 때와 같은 설정을 하는 것이다.

텍스트필드의 borderStyle이 있어야 기본 텍스트 필드의 모습을 갖춘다. 저 부분이 없다면 텍스트 필드는 눈에는 보이지 않게 된다. (해당 지점 클릭하면 정상적으로 키보드는 올라옴)

기본 화면, 휴대폰 번호를 입력하세요(라벨), 번호를 입력하는 곳(텍스트필드), 인증(버튼)으로 되어있으며

인증 버튼 클릭시 UI 세개를 변경할 것이다. 위의 설명 라벨은 제외

클릭 후 화면, 인증 번호를 입력하라는 라벨과 abc라는 버튼, 그리고 보이는 것에 차이는 없지만 텍스트 필드도 변경되었다.