(iOS) UIControl - Button

UIControl - Button

 

Text Button

 

Button Types

Xcode에서 기본타입으로 제공하는 버튼종류들은 총 6가지이다.

• System : 스토리보드 라이브러리에서 버튼을 추가하면 나타나는 디폴트타입
• Detail Disclosure : 부가정보를 modal 혹은 popOver형태로 표시할때 사용된다.
• Info Light : 상세정보 구성
• Info Dark : 상세정보 구성
• Add Contract : 데이터를 추가할때 사용된다.
• Close (ios 13부터 제공) : 화면을 닫거나, 작업취소에 사용된다.

 

State

사용자의 터치 이벤트 혹은 속성이 바뀔때 상태(state)값이 바뀐다. 총 4가지의 상태가 있다.

• Default
• Highlighted
• Selected
• Disabled

Attribute Inspector에서 State Config에서 각 상태가 되었을때에 대한 옵션들을 선택할 수 있다. State Config를 바꾼다고 해서 버튼의 속성이 바뀌는게 아니다. 상태를 바꾸려면 State Config가 아니라, 가장 밑에 State를 바꿔줘야한다.

그리고 State는 동시에 여러가지를 적용시킬 수 있다.

@IBOutlet weak var btn: UIButton!

btn이라는 버튼의 상태를 바꾸려면

btn.isSelected = true
btn.isHighlighted.toggle()   // 토글 메소드도 있다.

 

titleLabel - text , textColor

btn.titleLabel?.text = "Changed"    // 적용 안됨!!
button.titleLabel?.textColor = .black // 적용 안됨!!

버튼의 타이틀이나, 타이틀의 색깔을 변경할때는 위 코드처럼 직접 접근하여 값을 넣는것을 허용되지 않는다. setTitleColor(_title: String?, for: UIControl.State) 와 setTitle(_title: String?, for: UIControl.State)메서드를 사용해야한다.

btn.setTitleColor(.blue, for: .normal) // 이렇게 해야 적용된다!
btn.setTitle("change", for: .normal) // 이렇게 해야 적용된다!

 

Image Button (Custom)

Xcode에서 기본제공되는 textButton이 아닌 직접 이미지를 선택하여 버튼을 생성할 수 있다. 이때 이미지는 titleLabel의 왼쪽에 표시된다.

let normalImage = UIImage(named: "<이미지 이름>")
btn.setImage(normalImage, for: .normal)

system 기본제공 이미지

 

 

만약 버튼과 titleLabel의 위치를 바꾸고싶다면 stackView와 image View를 적절히 사용하면 된다.

1. Image View에 버튼으로 사용될 이미지를 넣는다.
2. 일반 Label과 image View의 대략적인 위치를 배치한 뒤 StackView로 묶는다.
3. StackView에 다시 View를 임베드시킨다.
4. View 전체를 덮는 Button을 넣어준다. (이때 Button에는 title이 없으면 안된다. 투명한 버튼을 씌워주는 느낌)

Document outline의 각 컨트롤들의 순서는 위와 같아야한다. (제약도 적절히 잘 설정해야한다.)