[Swift 기초 개념] UIButton Class

[Swift 기초 개념] UIButton Class

Apple 공식 웹의 UIKit - UIButton에 대한 문서를 보고 번역하며 정리한 내용입니다. 자세한 내용은 글 아래편에 번역하여 올려두었고, 다음에 나올 내용은 본문의 내용을 간략하게 정리한 것입니다.

원문 : https://developer.apple.com/documentation/uikit/uibutton

---

UIButton

UIButton은 UIControl Class를 상속하는 Class이다.

버튼을 만들 때 필요한 목적에 맞는 type을 결정해줘야 한다. Title, Image 같은 content를 배치하여 버튼을 구성해줄 수 있고, 해당 속성에 대한 property를 제공한다.

버튼의 Action

버튼에 대한 반응으로 세 가지 시그니처가 있고, 자신의 목적에 맞는 적절한 것을 골라 사용하면 된다.

@IBAction func doSomething()

@IBAction func doSomething(sender: UIButton)

@IBAction func doSomething(sender: UIButton, forEvent event: UIEvent)

버튼의 상태

버튼은 5개의 상태 (state) 을 가지고, 이에 대한 개별적인 설정을 해주어야 한다.

1. Default
2. Highlighted
3. Focused
4. Selected
5. Disabled

만약 개별적으로 설정해주지 않고 Default 상태에 대한 것만 설정해두면 Xcode가 알아서 적절한 값을 집어넣는다.

버튼의 구성요소

버튼은 크게 Title ( 문자 ), Foreground Image ( 이미지 ), Background Image ( 배경 이미지 ) 로 구성된다. 또한 이를 꾸밀 수 있는 다양한 속성도 UIButton에 함께 제공된다.

---

UIButton 공식문서 번역

UIButton은 UIControl Class를 상속하는 Class이다.

class UIButton : UIControl

버튼을 누르거나 선택하면, 해당 버튼은 그와 연결된 액션을 수행한다. TextLable, Image 등의 방식으로 해당 버튼의 목적을 알릴 수 있다. 애플리케이션의 디자인에 맞게 버튼의 모양과 색상 등을 수정할 수 있다. Interface Builder 또는 Interface에 대한 코드를 작성해 버튼을 추가할 수 있다.

버튼을 Interface에 추가할 때는 다음과 같은 순서를 따른다.

1. 버튼을 만들면서 Type을 정한다.
2. 이미지나 텍스트를 추가하고, 그에 맞게 버튼의 크기를 설정한다.
3. 하나 이상의 Action을 버튼에 추가한다.
4. 레이아웃에 대한 버튼의 크기나 위치를 결정한다.
5. 접근성에 대한 정보와 언어에 대한 정보를 추가한다. ( 이는 부수적인 작업인 듯 보인다 )

버튼을 눌렀을 때 반응하기

Button은 사용자가 버튼을 눌렀을 때 애플리케이션에게 이를 알리기 위해 Target-Action 디자인 패턴을 이용한다. 버튼을 누르면 바로 대응되는 이벤트를 실행하기 보다는, 버튼에 메서드를 연결해두고 어떤 이벤트 트리거가 메서드를 호출했는지 지정한다(알린다). 런타임중에, 버튼은 모든 입력 이벤트를 다루고, 이에 반응해 메서드를 호출한다.

Interface Builder에서 연결하거나 add Target(_:action:for:)메서드를 이용해 버튼과 액션을 연결할 수 있다. 액션 메서드는 3가지의 시그니처 중 하나를 따르면 된다. 버튼이 눌렸을 때의 응답으로 적절한 정보를 전달할 시그니처를 선택하면 된다.

@IBAction func doSomething()

@IBAction func doSomething(sender: UIButton)

@IBAction func doSomething(sender: UIButton, forEvent event: UIEvent)

버튼의 형태 설정

버튼의 타입은 기본적인 형태와 행동을 결정한다. 버튼을 생성할 때 init(type:) 메서드를 이용하거나 StoryBoard 파일에서 버튼의 타입을 결정해줘야 한다. 가장 흔히 사용되는 버튼 타입은 Custom 또는 System 타입이고, 필요에 따라 다른 타입을 사용해주면 된다.

Note

애플리케이션에 있는 모든 버튼의 형태를 설정하기 위해서는 'appearance proxy object ( = 형태 대리 object … 형태를 대신 설정할 수 있는 object )'를 사용해주면 된다. UIButton 클래스는 애플리케이션의 모든 버튼의 형태를 설정할 수 있는 appearance() 클래스 메서드를 따른다.

버튼의 상태

버튼은 그 형태를 결정할 수 있는 다섯 개의 상태로 나뉜다.

1. Default
2. Highlighted
3. Focused
4. Selected
5. Disabled

Default 상태는 버튼을 인터페이스에 올렸을 때의 기본적인 상태이다. 버튼은 활성화되었지만 사용자가 버튼과 상호작용을 하지 않는 상태이다. 여기서 사용자가 만약 버튼을 tap하는 동작을 한다면, 버튼의 상태는 Highlighted가 된다.

버튼을 설정해줄때는 Interface Builder 이든 코드를 통해 작성해줬든 각 분리된 상태에 대한 속성을 정해줘야한다. Interface Builder에서는 'Attribute Inspector' 에 있는 'State Config control'에서 적절한 상태를 고르고 다른 속성들을 설정해주면 된다. 만약 특정 상태에 대한 속성을 설정해주지 않으면 UIButton 클래스가 알아서 적절한 기본 값들을 넣어줄 것이다.

예를 들어, disabled button은 보통 어두운 톤을 가지고있고 눌러도 아무런 반응을 보이지 않는다. adjustsImageWhenHighlighted, adjustsImageWhenDisabled 같은 다른 특성( property ) 들은 특정한 상황에서 기본 값을 원하는 값으로 바꿔주면 된다.

버튼의 구성요소

버튼은 'Title 문자열' 또는 개발자가 정한 'Image'로 구성된다. 이 요소들은 버튼이 자동으로 UILabel, UIImageView 객체를 만드는데 사용된다. 개발자는 이러한 객체에 'titleLabel'이나 'imageView property'를 이용해 접근 가능하고 값을 직접 수정할 수 있다. 이러한 클래스의 메서드들은 버튼의 글이나 이미지를 설정하기 위한 편리한 간편한 방법들도 제공한다.

일반적으로, 개발자는 버튼을 문자나 이미지, 크기등을 이용해 설정 가능한다. 버튼은 또한 설정한 요소들 뒤에 깔릴 배경이미지도 가질 수 있다. 문자와 이미지를 동시에 버튼에 나타내는 것도 물론 가능하다. 지정된 property를 이용하면 해당 요소들에 접근이 가능하다.

버튼의 구성요소들은 문자, 이미지, 형태에 대한 속성들을 상태마다 구분지어서 설정해줘야 한다. 특정 상태에 대한 요소들을 customize 해주지 않으면 버튼들은 Default 상태의 값들을 가져와 사용할 것이고 적절한 값들을 알아서 더할 것이다. 예를 들어, 각 상태에 대한 custom image를 따로 설정해 놓지 않으면, image를 이용한 버튼을 선택하여 highlighted 상태가 되면 default 상태의 이미지 위에 강조효과만 나타날 것이다.

색상 ( tintColor )

tintColor property를 이용하면 버튼의 색상을 결정할 수 있다. 이 속성은 버튼의 이미지와 문자의 색을 정한다. 만약 색상을 명시적으로 결정하지 않는다면, 'superView'의 색상을 따른다. ( 여기서 superView는 화면 단위인 View에서 상위 View를 말한다 )

공간 삽입 ( Edge Insets )

개발자가 만든 Custom / System 버튼에서 구성요소 주위에 공간을 만들거나 줄이고 싶다면 'Insets'를 이용하면 된다. 버튼의 문자를 위한 insets인 'titleEdgeInsets', 이미지를 위한 'imageEdgeInsets', 그리고 두 요소 모두를 위한 'contentEdgeInsets' 등의 분리된 insets 들이 있다. 이를 적용하면 insets는 버튼의 해당 요소의 사각형 ( 버튼의 위치를 결정하는데 사용 ) 에 작용한다.

Insets은 주로 화면 분할이나 레이아웃 설정에 이용되는 속성으로 보입니다. 이를 버튼에 적용한다는 것은 버튼 내에서 요소끼리의 위치를 설정한다던가, 요소를 버튼 중간 또는 원하는 위치에 배치하기 위해 빈 공간을 넣는다는 의미로 보이네요.

Interface Builder Attributes

주요 속성들

1. Type : 버튼의 타입. 이 속성은 다양한 버튼 속성에 대한 기본 값을 결정한다. 이 속성의 값은 실행중에는 바꿀 수 없지만 button Type property를 이용해 접근할 수 있다.
2. State Config : 버튼의 상태. 여기서 특정 상태를 고른다음, 그 상태에 대한 값들을 적용할 수 있다.
3. Title : 버튼의 제목 ( 문자열 ). 버튼의 제목을 원하는 문자열로 설정할 수 있다.
4. Title Font and Attributes : 버튼의 Title을 원하는 설정으로 바꿀 수 있다. 폰트, 색상, 음영, 줄맞춤, 방향, 들여쓰기, 기타 등등의 설정이 가능하다.
5. Image : 버튼의 앞에 나오는 이미지 ( Foreground )
6. Background : 버튼의 뒤에 나오는 이미지. Title, Foreground image 뒤에서 보여진다.

버튼의 형태에 영향을 미치는 속성

1. Shadow Offset : 버튼의 그림자에 대한 값.

   그림자는 title 문자열에만 영향을 미친다. 버튼의 상태가 highlighted가 되었을 때, 또는 에서 다른 값으로 변했을 때에 대한 그림자에 대한 값을 바꿔줄 수 있다. titleLabel object에 대한 shadowOffsetproperty를 코드를 통해 설정해줄 수 있다. reversesTitleShadowWhenHighlighted property를 이용하면 highlighting 에 대한 설정을 해줄 수 있다.

2. Drawing : 버튼의 이미지에 대한 행동.

   showsTouchWhenHighlighted 옵션이 설정되어있는 경우, 사용자가 터치한 버튼의 부분에 하얗게 빛이 나도록 한다.

   adjustsImageWhenHighlighted 옵션이 설정되어있는 경우, highlighted 상태일 때 버튼의 이미지는 어두워진다.

   adjustsImageWhenDisabled 옵션이 설정되어있는 경우, 버튼이 비활성화 상태일 때 어두워진다.

3. Line Break : 버튼의 문자의 줄맞춤에 대한 옵션. 이 속성을 사용하면 버튼의 title이 남은 공간을 어떻게 활용할 지에 대해 설정할 수 있다.

버튼의 공간에 영향을 미치는 속성

1. Edge : 버튼의 전체적인 구성요소, title, 이미지에 대한 구분되는 insets를 설정할 수 있다.
2. Inset : Inset의 값 ( 여백의 크기 ). 양의 값은 버튼의 중심에 가까워지게 하고, 음의 값은 버튼의 중심에 멀어지게 한다. 이러한 값들에 런타임 중에 contentEdgeInsets, titleEdgeInsets, imageEdgeInsets property를 이용해 접근할 수 있다.

버튼의 Interface Builder 속성과 관련된 더 자세한 설명은 UIControl, UIView 문서에서 확인할 수 있다.

Internationalization ( 언어설정 )

버튼을 internationalizing 하기 위해서는 버튼의 title에 대한 localized 문자열을 설정해주면 된다.

Interface를 구축할 때 storyboard를 이용하려면, Xcode의 기본 internationalizating feature 을 따라 설정을 해주면된다. localization을 추가하면, Xcode는 이를 위한 string file을 만들어준다.

Interface를 구축할 때 코드를 통해 작성을 해주려면, system's built-in support를 이용해 localized file을 올려주면 된다.

더 자세한 내용은 Internationalization and Localization Guide 에서 확인할 수 있다.

접근성 ( Accessibility )

버튼은 기본 설정 값에 의해 접근성을 가진다. 이는 버튼과 유저 사이의 상호작용에 대한 접근성을 가진다. 만약 VoiceOver같은 기능을 활성화 하려면 접근성에 대해 사용자에게 묻게된다. 사용자가 버튼을 눌렀을 때 버튼의 title은 접근성에 대한 label로 덮어지고 전달하고자 하는 내용이 생성된다.

Accessibility Programming Guide for iOS 에서 자세한 내용을 살펴볼 수 있다.