[부스트코스]iOS 프로그래밍 강좌에 대한 정리글입니다.
[부스트코스]iOS 프로그래밍 Booster 2기 활동 글입니다.
인터페이스 요소에는 다양한 것들이 존재합니다. 그 중 자주 사용하는 버튼, 레이블, 슬라이더에 대해 알아보겠습니다. 이들은 각각 UIButton, UILabel, UISlider 클래스를 통해 사용할 수 있습니다.
버튼
버튼은 UIButton 클래스를 통해 사용자의 터치나 슬라이더에 반응해서 코드를 실행할 수 있도록 하는 컨트롤 요소입니다.
Xcode 에서 버튼을 사용하기 위해서는 먼저 버튼을 생성하고, 버튼과 메서드를 연결해야 하는데, 이 방법에 대해서는 이전 포스트 에서 다룬 바 있습니다.
버튼의 상태
버튼에는 상태가 있습니다. 처음에 생성될 때는 default 이며, 사용자가 버튼을 상호작용하는 것에 따라 highlighted, focused, selected, disabled 가 될 수 있습니다. 두 가지 이상의 상태를 가질 수도 있습니다.
버튼의 프로퍼티와 메서드
처음 버튼을 생성할 때 버튼의 유형을 정할 수 있습니다. 이에 따라 버튼의 모습과 동작이 달라집니다. init 메서드나 Attribute inspector 를 통해서 지정할 수 있습니다. 보통 Custom 이나 System 을 사용합니다.
enum UIButtonType: Custom // Custom 유형으로 지정그 외에도 여러가지 프로퍼티가 있습니다. 다음은 버튼의 대표적인 프로퍼티입니다.
var titleLabel: UILabel? // 버튼 타이틀 레이블
var imageView: UIImageView? // 버튼의 이미지 뷰
var tintColor: UIColor! // 버튼 타이틀과 이미지의 틴트 컬러다음은 버튼의 대표적인 메서드들입니다. for 매개변수로 버튼의 상태를 받아서, 해당 상태일 때 수행하도록 되어 있습니다.
func setTitle(String?, for: UIControlState) // 해당 상태 버튼의 문자열 설정
func title(for: UIControlState) -> String? // 해당 상태 버튼의 문자열을 반환
func setImage(UIImage?, for: UIControlState) // 해당 상태 버튼의 이미지 설정
func image(for: UIControlState) -> UIImage? // 해당 상태 버튼의 이미지 변환
func setBackgroundImage(UIImage?, for: UIControlState) // 해당 상태 버튼의 백그라운드 이미지 설정
func backgroundImage(for: UIControlState) -> UIImage? // 해당 상태 버튼의 백그라운드 이미지 반환
func setTitleColor(UIColor?, for: UIControlState) // 해당 상태 버튼의 문자열 색상 설정
func setAttributedTitle(NSAttributedString?, for: UIControlState) // 해당 상태 버튼의 attributed 문자열 설정레이블
레이블은 UILabel 클래스를 통해 텍스트를 보여주는 뷰 입니다.
레이블의 프로퍼티
레이블은 프로퍼티를 통해 내용, 색상, 폰트 등을 지정할 수 있습니다. 코드를 통해 값을 설정하거나, inspector 를 통해 값을 설정할 수 있습니다. 자주 사용하는 코드들에 대해 다루어 보겠습니다.
먼저 문자열입니다. text 를 사용하게 되면 모든 문자열이 동일한 속성으로 표시됩니다. 반면에 attributedText 를 사용하면 NSAttributed 클래스를 통해 문자열 중 특정 부분만 변경할 수 있습니다. 더 자세한 정보를 위해서는 Apple 개발자 문서 를 참조하시기 바랍니다.
var text: String? // 레이블이 표시할 문자열
var attributedText: NSAttributedString? // 속성 문자열문자열의 정렬 방식도 정할 수 있습니다. textAlignment 는 가로 정렬 방식입니다. 값으로는 left, right, center, justified, natural 를 사용합니다.
baselineAdjustment 는 수직 정렬 방식입니다. 값으로는 alignBaselines, alignCenters, none 가 있습니다. alignBaselines 는 문자가 작아졌을 때 기존 문자열의 기준선에 맞춥니다. alignCenters 는 문자가 작아졌을 때 작아진 문자의 중앙선에 맞춥니다. none 은 문자가 작아졌을 때 기존 문자열의 위쪽 선에 맞춥니다.
var textAlignment: NSTextAlignment // 가로 정렬 방식
var baselineAdjustment: UIBaselineAdjustment // 세로 정렬 방식lineBreakMode 프로퍼티를 사용하여 경계선을 벗어나는 문자열을 어떻게 처리할지 프로퍼티로 결정할 수 있습니다. 기본 설정값은 byTruncatingTail 으로 끝쪽 텍스트를 자르고 … 으로 표시합니다. byTruncatingMiddle 는 가운데 텍스트를 자르고 … 으로 표시합니다. byTruncatingHead 는 앞쪽 텍스트를 자르고 … 으로 표시합니다. 이 값들은 보통 한줄일 경우 사용합니다. 만약 여러줄일 경우 byCharWrapping 을 통해 글자 단위로 줄 바꿈을 결정할 수도 있고 byWordWrapping 을 통해 단어 단위로 줄 바꿈을 결정할 수도 있습니다.
var lineBreakMode: NSLineBreakMode이 외에도 여러 프로퍼티들이 있습니다.
var textColor: UIColor! // 문자 색상 설정
var font: UIFont! // 문자 폰트 설정
var numberOfLines: Int // 문자를 나타내는 최대 라인 수 설정UISlider
슬라이더는 UISlider 클래스를 통해 연속된 값 중에서 특정 값을 선택하기 위한 컨트롤 요소입니다.
슬라이더 프로퍼티
var minimumValue: Float, var maximumValue: Float // 슬라이더의 양끝의 값
var value: Float // 슬라이더의 현재 값
var isContinuous: Bool // Thumb 가 이동할 때 계속 이벤트를 호출할 지, Thumb 를 뗏을 때 이벤트를 호출할 지 결정합니다.
var minimumValueImage: UIImage?, var maximumValueImage: UIImage? // 슬라이더 양끝의 이미지
var thumbTintColor: UIColor? // thumb의 틴트 색상
var minimumTrackTintColor: UIColor?, var maximumTrackTintColor: UIColor? // thumb를 기준으로 앞쪽 트랙과 뒤쪽 트랙의 틴트 색상슬라이더 메서드
func setValue(Float, animated: Bool) // 슬라이더의 현재 값을 설정
func minimumTrackImage(for: UIControlState) -> UIImage? // 해당 상태의 최소 이미지를 반환
func setMinimumTrackImage(UIImage?, for: UIControlState) // 해당 상태의 최소 이미지 설정
func maximumTrackImage(for: UIControlState) -> UIImage? // 해당 상태의 최대 이미지 반환
func setMaximumTrackImage(UIImage?, for: UIControlState) // 해당 상태의 최대 이미지 설정
func thumbImage(for: UIControlState) -> UIImage? // 해당 상태의 Thumb 이미지 반환
func setThumbImage(UIImage?, for: UIControlState) // 해당 상태의 Thumb 이미지 설정