UIButton

Panther·2021년 9월 24일

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

"A control that executes your custom code in response to user interactions."

사용자 상호작용에 응답해 커스텀 코드를 실행하는 컨트롤입니다.

Declaration

@MainActor class UIButton : UIControl

Overview

버튼을 탭하거나 초점을 갖고 있는 버튼을 선택하면 버튼은 버튼에 붙은 모든 액션을 수행합니다. 텍스트 레이블, 이미지, 혹은 둘 모두를 사용해서 버튼의 목적과 소통할 수 있습니다. 버튼의 모양은 설정이 가능하기 때문에 앱 디자인에 일치시키도록 버튼 색상을 입히거나 제목 형식을 지정할 수 있습니다. 코드 작성 혹은 인터페이스 빌더를 사용해서 인터페이스에 버튼을 추가할 수 있습니다.

인터페이스에 버튼을 추가할 때 아래 단계를 수행해야 합니다.

생성 시점에 버튼의 타입을 설정해야 합니다.
제목 스트링 혹은 이미지를 제공해야 합니다. 컨텐트에 적합하게 버튼 크기를 조정해야 합니다.
하나 혹은 하나 이상의 액션 메소드를 버튼에 연결해야 합니다.
인터페이스에서 버튼의 크기 및 위치를 제어하기 위해 오토 레이아웃 규칙을 설정해야 합니다.
접근성 정보 및 로컬화된 스트링을 제공해야 합니다.

Important
macOS 11에서 작동하는 Mac Catalyst로 빌드된 앱은 buttonType이 UIButton.ButtonType.system일 때와 UI idiom이 UIUserInterfaceIdiom.mac일 때, 버튼의 addGestureRecognizer(_:) 메소드 호출 시 예외를 반환합니다.

Respond to Button Taps

버튼은 사용자가 버튼을 탭할 때 앱에게 알려주기 위한 타깃 액션 디자인 패턴을 사용합니다. 터치 이벤트를 직접 처리하는 것보다 버튼에 액션 메소드를 할당할 수 있고 어떤 이벤트 트리거가 메소드에 호출할지를 선언할 수 있습니다. 런타임 시점에 버튼은 들어오는 모든 터치 이벤트를 처리하고 응답으로 메소드들을 호출합니다.

addTarget(_:action:for:) 메소들르 사용해서 액션 메소드에 버튼을 연결할 수 있고, 인터페이스 빌더에서 연결을 생성해서 액션 메소드에 버튼을 연결할 수 있습니다. 액션 메소드의 시그니처는 Listing 1에 나오는 세 가지 형태 중 한 가지를 취할 수 있습니다. 버튼 탭에 응답하기 위해 필요한 정보를 제공하는 형태를 선택하시기 바랍니다.

Listing 1 Action methods for buttons

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

Configure a Button’s Appearance

버튼의 타입은 기본적인 모양과 동작을 정의합니다. init(type:) 메소드를 사용해서 생성 시점에 버튼의 타입을 구체화할 수 있으며, 스토리보드 파일에서도 버튼의 타입을 구체화할 수 있습니다. 버튼 생성 후에는 타입을 변경할 수 없습니다. 가장 일반적으로 사용되는 버튼 타입은 Custom과 System 타입이지만, 필요한 경우 다른 타입을 사용할 수도 있습니다.

Note
앱에서 모든 버튼의 모양을 설정하려면 모양 프록시 객체를 사용해야 합니다. UIBitton 클래스는 appearance() 클래스 메소드를 사용할 수 있으며, 이 클래스 메소드는 앱에 있는 모든 버튼에 대한 모양 프록시를 가져오기 위해 사용할 수 있는 메소드입니다.

Button States

버튼은 모양을 결정하는 다섯 가지 상태를 가지며, default, highlighted, focused, selected, disabled가 다섯 가지입니다. 인터페이스에 버튼을 추가할 때 버튼은 초기에 default 상태이며, 버튼은 활성화된 상태이고 사용자가 버튼에 상호작용하지 않았음을 의미합니다. 사용자가 버튼에 상호작용할 때 버튼의 상태는 다른 값으로 변경됩니다. 예를 들어 사용자가 제목을 갖는 버튼을 탭할 때 버튼은 highlighted 상태로 이동합니다.

버튼을 코드 작성 혹은 인터페이스 빌더를 사용해서 설정하는 경우 각 상태 각각에 대한 특성을 구체화할 수 있습니다. 인터페이스 빌더에서 적합한 상태를 선택하기 위해 특성 인스펙터에 있는 State Config 컨트롤을 사용할 수 있으며, 이후 다른 특성을 설정할 수 있습니다. 특정 상태로 특성을 구체화하지 않는 경우 UIButton 클래스는 합리적인 default 동작을 제공합니다. 예를 들어 비활성화된 버튼이 정상적으로 흐려지고, 탭되었을 때 강조를 표시하지 않습니다. adjustsImageWhenHighlighted, adjustsImageWhenDisabled와 같은 이 클래스의 다른 속성은 default 동작을 특정 케이스로 교체할 수 있도록 해줍니다.

Content

버튼의 컨텐트는 구체화한 제목 스트링 혹은 이미지로 구성됩니다. 구체화한 컨텐트는 버튼 자체에서 관리되는 UILabel 및 UIImageView 객체를 설정하기 위해 사용됩니다. titleLabel 혹은 imageView 속성을 사용해서 이와 같은 객체에 접근할 수 있으며, 이 속성들의 값을 직접 수정할 수도 있습니다. 이 클래스의 메소드는 스트링 혹은 이미지의 모양을 설정하기 위한 간편 단축경로 역시 제공합니다.

제목 혹은 이미지를 사용해서 버튼을 설정할 수 있으며, 그에 따라 버튼의 크기를 설정할 수 있습니다. 버튼은 구체화한 컨텐트 뒤에 위치하는 백그라운드 이미지 역시 가질 수 있습니다. Figure 2에서 보이는 모양을 나타내도록 버튼에 이미지 및 제목 모두를 구체화하는 것도 가능합니다. 나타나는 속성을 사용해서 버튼의 현재 컨텐트에 접근할 수 있습니다.

Figure 2 Providing a title and image for a button

버튼의 컨텐트를 설정할 때 상태 각각에 대해 제목, 이미지, 모양 특성을 구체화해야 합니다. 특정 상태에 대해 컨텐트를 커스터마이징하지 않으면 버튼은 Default 상태와 관련이 있는 값을 사용하고, 모든 적합한 커스터마이징을 추가합니다. 예를 들어 highlighted 상태에서 이미지 기반 버튼은 커스텀 이미지가 제공되지 않은 경우 기본값 이미지의 상단에서 강조를 그립니다.

Tint Color

tintColor 속성을 사용해서 커스텀 버튼 틴트를 구체화할 수 있습니다. 이 속성은 버튼 이미지 및 텍스트의 색상을 설정합니다. 명시적으로 틴트 색상을 설정하지 않는 경우 버튼은 슈퍼뷰의 틴트 색상을 사용합니다.

Edge Insets

커스텀 혹은 시스템 버튼에서 컨텐트 주변에 공간을 추가하거나 삭제하기 위해 inset을 사용할 수 있습니다. 버튼의 제목(titleEdgeInsets), 이미지(imageEdgeInsets), 둘 모두(contentEdgeInsets) 각각에 inset을 구체화할 수 있습니다. 적용되는 경우 inset은 버튼의 상응하는 컨텐트 사각형애 영향을 미치며, 버튼의 위치를 결정하기 위한 오토 레이아웃 엔진에 의해 사용됩니다.

정보, 연락처, 디스클로저 버튼에 edge inset을 조정할 이유가 없어야 합니다.

Interface Builder Attributes

Table 1은 인터페이스 빌더에서 버튼에 대해 설정할 수 있는 핵심 특성을 리스트로 보여주고 있습니다.

Table 1 Core attributes

Attribute	Description
Type	버튼 타입입니다. 이 특성은 다른 버튼 특성들에 대한 기본값 설정을 결정합니다. 이 특성의 값은 런타임 시점에 변경될 수 없지만, `buttonType` 소성을 사용해서 접근할 수 있습니다.
State Config	상태 셀렉터입니다. 이 컨트롤에서 값을 선택한 후 버튼 속성의 변경사항은 구체화된 상태에 적용됩니다.
Title	버튼의 제목입니다. 보통의 스트링 혹은 특성이 있는 스트링으로 버튼의 제목을 구체화할 수 있습니다.
(Title Font and Attributes)	버튼의 제목 스트링에 적용하기 위한 폰트 및 기타 특성입니다. 특정 설정 옵션은 버튼 제목에 구체화한 보통의 스트링 혹은 특성이 있는 스트링에 따라 달라집니다. 보통의 스트링의 경우 폰트, 텍스트 색상, 그림자 색상을 커스터마이징할 수 있습니다. 특성이 있는 스트링의 경우 정렬, 텍스트 방향, 들여쓰기, 하이픈, 기타 다른 옵션을 구체화할 수 있습니다.
Image	버튼의 포어그라운드 이미지입니다. 보통 버튼의 포어그라운드에 템플릿 이미지를 사용하지만, Xcode 프로젝트에 있는 다른 이미지를 구체화할 수도 있습니다.
Background	버튼의 백그라운드 이미지입니다. 백그라운드 이미지는 제목 및 포어그라운드 이미지 뒤에 표시됩니다.

Table 2는 버튼의 모양에 영향을 미치는 특성을 리스트로 보여주고 있습니다.

Table 2 Appearance attributes

Attribute	Description
Shadow Offset	버튼 그림자의 offset 및 동작입니다. 그림자는 제목 스트링에만 영향을 미칩니다. 버튼 상태가 `highlighted` 상태로 변경되거나 이 상태로부터 돌아올 때 그림자의 강조를 변경시키려면 Reverses on Highlight 옵션을 활성화해야 합니다. 버튼의 `titleLabel` 객체 `showdowOffset` 속성을 사용해서 코드 작성을 통해 offset을 설정할 수 있습니다. `reversesTitleShadowWhenHighlighted` 속성을 사용해서 강조 동작을 설정할 수 있습니다.
Drawing	버튼의 드로잉 동작입니다. Shows Touch On Highlight(`showsTouchWhenHighlighted`) 옵션이 활성화된 경우 버튼은 사용자가 터치하는 버튼의 부분에 흰색 글로우를 추가합니다. When the Highlighted Adjusts Image(`adjustsImageWhenHighlighted`) 옵션이 활성화된 경우 버튼 이미지는 강조된 상태로 진입할 때 어두워집니다. Disabled Adjusts Image(`adjustsImageWhenDisabled`) 옵션이 활성화된 경우 이미지는 버튼이 비활성화될 때 흐려집니다.
Line Break	버튼의 텍스트에 대한 라인 브레이킹 옵션입니다. 사용 가능한 공간에 맞춰지도록 어떻게 버튼의 제목이 수정될지를 결정하기 위해 이 특성을 사용하시기 바랍니다.

Table 3은 버튼에 대한 edge inset을 리스트로 보여주고 있습니다. 버튼 컨텐트에 대한 사각형을 변경하기 위해 edge inset을 사용할 수 있습니다.

Table 3 Edge inset attributes

Attribute	Description
Edge	설정할 수 있는 edge inset입니다. 버튼의 전반적 컨텐트, 컨텐트의 제목, 컨텐트의 이미지에 대해 각각의 edge inset을 구체화할 수 있습니다.
Inset	inset 값입니다. 양의 값은 상응하는 edge를 줄이며, 버튼의 중심을 더 가깝게 이동시킵니다. 음의 값은 edge를 확장시키며 버튼의 중심으로부터 멀어지도록 이동합니다. `contentEdgeInsets`, `titleEdgeInsets`, `imageEdgeInsets` 속성을 사용해서 런타임 시점에 이 값에 접근할 수 있습니다.

버튼의 상속된 인터페이스 빌더 특성에 대한 정보는 UIControl 및 UIView를 보시기 바랍니다.

UIControl
https://developer.apple.com/documentation/uikit/uicontrol
https://velog.io/@panther222128/UIControl

UIView
https://developer.apple.com/documentation/uikit/uiview
https://velog.io/@panther222128/UIView

Internationalization

버튼을 internationalize하려면 버튼의 제목 텍스트에 로컬화된 스트링을 구체화해야 합니다. (버튼의 이미지를 적합한 형태로 로컬화할 수도 있습니다.)

인터페이스를 빌드하기 위해 스토리보드를 사용하는 경우 프로젝트가 지원하는 localization을 설정하려면 Xcode의 기본 internationalization 기능을 사용하시기 바랍니다. localization을 추가하는 경우 Xcode는 해당 localization을 위한 스트링 파일을 생성합니다. 인터페이스를 코드 작성으로 설정하는 경우 로컬화된 스트링과 리소스를 위한 시스템의 내장된 지원을 사용하시기 바랍니다. 인터페이스를 localization하는 것에 대한 정보는 Internationalization and Localization Guide를 보시기 바랍니다.

Internationalization and Localization Guide
https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/Introduction/Introduction.html#//apple_ref/doc/uid/10000171i

Accessibility

버튼은 기본값으로 접근 가능한 상태입니다. 버튼에 대한 기본값 접근성 특성은 버튼 및 사용자 상호작용 활성화입니다.

보이스오버가 기기에서 활성화된 경우 접근성 레이블, 특성, 힌트가 사용자에게 읊어집니다. 버튼의 제목은 접근성 레이블을 덮어씁니다. 이는 레이블에 대한 커스텀 값을 설정해도 그러하며, 보이스오버는 제목의 값을 소리냅니다. 보이스오버는 사용자가 버튼을 한 번 탭하면 이 정보를 말합니다. 예를 들어 사용자가 카메라에서 옵션 버튼을 탭하면 보이스오버는 아래 문장을 소리냅니다.

"Options. Button. Shows additional camera options."

iOS 컨트롤을 접근 가능하도록 만드는 것에 대한 정보는 UIControl에 있는 접근성 정보를 보시기 바랍니다. 인터페이스를 접근 가능하도록 만드는 것에 대한 일반적인 정보는 Accessibility Programming Guide for iOS를 보시기 바랍니다.

UIControl
https://developer.apple.com/documentation/uikit/uicontrol
https://velog.io/@panther222128/UIControl

Accessibility Programming Guide for iOS
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008785

UIButton

Declaration

Overview

Respond to Button Taps

Configure a Button’s Appearance

Button States

Content

Tint Color

Edge Insets

Interface Builder Attributes

Internationalization

Accessibility

See Also

Controls

UIControl

UIColorWell

UIDatePicker

UIPageControl

UISegmentedControl

UISlider

UIStepper

UISwitch

Global Volume Setting Methods

UIColorWell

0개의 댓글