Swifter {Swift Developer}

메뉴

UIKit 기본 요소들 이해하기

1. 레이블(UILabel)

문자를 표시하고자 할 때 이용한다. 냉장고나 사물함에 들어가는 통이나 특정 물건에 용도등을 구분하게 위해 스티커 종이로 명칭을 쓰고 붙이던 것을 레이블이라고 이야기하듯 아이폰 앱에서도 물건의 이름을 표시하거나 어떤 설명을 표시할 때 사용한다. 단 사용자는 볼 수만 있고 조작은 안된다.

uilabel-001

 

Interface Builder에서 조작방법

화면에 배치한 레이블은 문자를 더블클릭하면 Interface Builder속성들이 표시된다.

uilabel-002 ullabel-003

  • Text: 문자
  • Color: 문자색
  • Font: 문자에 사용되는 글꼴 종류와 크기
  • Alignment: 문자의 배치
  • Lines: 최대행수

 

코딩에서 조작방법

1) 문자설정 (var text: String?)

Text속성에 표시할 문자열을 설정한다.

2) 문자색 설정 (var textColor: UIColor!)

textColor속성에서 문자색을 설정한다. 설정하려는 색상은 UIColor로 지정한다.

3) 배치 설정(var textAlignment: NSTextAlignment)

textAlignment 속성에서 배치하는 방법을 설정하며 설정하려는 배치방법은 NSTextAlignment로 지정한다.

  • Center : 가운데 배치
  • Left: 왼쪽 배치
  • Right: 오른쪽 배치

4) 글꼴 및 크기 설정(var font: UIFont!)

font속성에서 문자의 글꼴 및 크기를 설정한다. 설정하려는 글꼴은 UIFont로 지정한다. 기본적으로 [UIFont (name: “글꼴명”, size: <문자크기>)에서 글꼴을 지정하고 [UIFont.systemFontOfSize(<문자크기>로 선언하면 시스템글꼴을 기본 사용하고 문자크기만 조절하게 된다.

5) 최대 행수 설정(var numberOfLines: Int)

numberOfLines 속성에서 레이블에 표시할 최대행수를 설정한다. 기본값은 1이다. 0으로 하면 라벨에 표시가능한 줄수를 제한없이 표시할 수 있다.

 

  1. 버튼 (UIButton)

버튼은 사용자가 누르면 무엇인가를 실행할 때 사용한다. 사용자가 버튼을 누르면 버튼에 연결된 메소드가 실행된다.

Interface Builder에서 조작방법

uibutton-001uibutton-002 uibutton-003

Attributes Inspector에서 버튼에 대한 속성을 설정할 수 있다.

  • Title: 버튼 표시 문자
  • Font: 표시될 문자의 글꼴 종류와 크기
  • TextColor: 글자 색상
  • Image: 버튼에 표시되는 이미지
  • Background: 버튼 배경이미지
  • Type: 버튼 종류
  • State Config: 버튼 상태에 따라 어떤 표시를 할지 설정

Type에 따라 버튼이 여러가지로 표시가 변경된다. 단, 버튼은 한번 만들면 타입을 변경할 수 없다.

  • Custom: 직접 디자인한 버튼을 만들때 사용함
  • System: 표준 버튼
  • Detail Disclosure: 상세화면으로 이동하는 (i)버튼
  • Info Light: (i)버튼
  • Info Dark: (i)버튼
  • Add Contact: 추가시 (+)qjxms

State config는 일반적으로 Default으로 될 수 없다. 버튼 터치중이거나 선택되었을 때 유효하지 않는 경우 표시는 자동으로 변경될 수 있도록 한다.

하지만, 스스로 각 상태표시를 변경하려면 State config에 상태를 선택하고 Title, TextColor, Image, Background등을 변경하여 설정이 가능하다.

  • Default: 일반 표시
  • Hgihlighted: 버튼을 터치중의 표시
  • Selected: 선택될 때 표시
  • Disabled: 버튼이 선택되지 않았을 때 표시

코딩에서 조작방법

1) 문자 설정 (func setTitle(title: String?, forState state: UIControlState) )

버튼 문자를 설정하려면 setTitle메소드로 문자열과 버튼상태를 설정한다. 버튼상태는 UIControlState로 지정한다.

  • UIControlState.Normal : 정상상태
  • UIControlState.Highligted : 버튼 터치할 때
  • UIControlState.Selected : 선택될 때
  • UIControlState.Disabled : 사용안할 때

2) 유/무효 설정 ( var enabled: Bool)

enabled 속성에서 버튼의 유/무효를 설정하고 기본값은 true이다.

3) 선택할 경우 설정 (var selected: Bool)

selected 속성에서 버튼을 선택하거나 선택하지 않을 경우 설정으로 기본값은 false이다.

 

Action에서 설정방법

1) 버튼을 누를때 메소드 실행 (Touch Up Inside)

Assistant Editor에 연결시 [Action]의 Event에서 [Touch Up Inside]를 선택하면 버튼이 터치될 때 메소드가 실행된다.

uibutton-004

 

  1. 스위치 (UISwitch)

스위치는 설정 여부를 선택할 때 사용한다. On/Off 전환용이다.

uiswitch-001

Interface Builder에서 조작방법

선택시 Attributes Inspector에서 속성을 설정할 수 있다.

uiswitch-002

  • State: On/Off 상태
  • On Tint On할 때 배경색
  • Thumb Tint: 손잡이 색상

코딩에서 조작방법

1) On/Off 설정 (var on: Bool)

On속성에서 On/Off를 설정한다.

2) ON버튼 색상 설정 (var onTintColor: UIColor?)

onTintColor속성에서 설정버튼 색상을 설정하며 색상은 UIColor로 지정한다.

3) 손잡이 색상 설정 (var thumbTintColor: UIColor?)

thumbTintColor속성에 슬라이더 색상을 설정한다. 색상은 UIColor로 지정한다.

 

Action에서 설정방법

1) 스위치 조작될 때 메소드 실행 (value Changed)

Assistant Editor에 연결시 [Action]의 Event에서 Value Changed를 선택하면 스위치가 조작시 메소드가 실행된다.

uiswitch-003

 

  1. 슬라이더 (UISlider)

슬라이더는 밀어서 값을 선택할 때 사용한다. 노브를 슬라이드시키는 것으로 값이 변경된다.

UISlider-001

Interface Builder에서 조작방법

UISlider-002

  • Value: Minimum : 최소값
  • Value: Maximum : 최대값
  • Value: Current: 현재값
  • Min Image: 최소측에 표시하는 이미지
  • Max Image: 최대측에 표시하는 이미지
  • Min Track Tint: 손잡이 왼쪽바 색상
  • Max Track Tint: 손잡이 오른쪽바 색상
  • Continuous: 슬라이드 중에서도 값을 리턴해줄지를 설정하는 것으로 NO로 설정하면 값이 들어온다.

 

코딩에서 조작방법

1) 최소값, 최대값, 현재값을 설정 (var minimumValue, maximumValue, value: Float)

minimumValue속서엥서 슬라이더 최소값을 설정하고 maximumValue속성에서는 슬라이더 최대값을 설정한다. Value속성은 슬라이더 값을 설정한다. 단, 최대/최소값은 Double형이 아닌 Float형이기 때문에 주의하자.

2) 손잡이 왼쪽, 오른쪽 막대 색상 설정 (var minimumTrackTintColot, maximumTrackTintColor: UICOlor?)

minimumTrackTintColor속성에서 슬라이더를 왼쪽바 색상을 설정하고 maximumTrackTintColor 속성에서 오른쪽바색상을 설정한다. 색상은 UIColor로 지정한다.

3) 슬라이드를 사용하는 중에 값을 리턴할지 설정 (var continuous: Bool)

continuous속성에서 슬라이드 중간값을 리턴할지를 설정할 수 있다.

Action에서 설정방법

1) 슬라이드가 사용될 때 메소드 실행 (Value Changed)

[Action]의 Event에서 Value Changed를 선택하면 슬라이드가 사용될 떄 메소드가 실행된다.

UISlider-003

 

5. 텍스트필드 (UITextField)

텍스트필드는 키보드에서 한줄의 텍스트를 입력시 사용한다. 문자를 입력하기 위한 요소로 누르면 키보드가 자동으로 표시되어 사용자가 키보드를 사용하여 텍스트를 입력할 수 있다.

UITextField-001

Interface Builder에서 조작방법

화면에 배치한 텍스트필드는 문자를 더블클릭하자.

UITextField-002

  • Text: 문자
  • Color: 문자색상
  • Font: 글꼴 종류와 크기
  • Alignment: 배치 방법
  • Placeholder: 입력전 설명문자
  • Keyboard: 입력에 사용하는 키보드 종류
  • Return Key: 리턴키 종류

 

Keyboard종류를 선택하면 아래와 같다.

Default

UITextField-003

URL

UITextField-004

Number Pad

UITextField-005

Return Key도 용도에 따라 다양하게 설정이 가능하다.

Go (전송)

UITextField-006

코딩에서 조작방법

1) 문자 설정 (var text: String?)

text속성에 텍스트필드에 미리 입력해두려는 문자열을 설정할 수 있다.

2) 입력전 입력박스안에 설명문 표시 (var placeholder: String?)

placeholder속성에서 문자가 입력되지 않은 상태에서 나오는 메시지 문자열을 설정할 수 있다.

3) 문자 색 설정 (var textColor: UIColor?)

textColor속성에서 문자색을 설정한다. 색상은 UIColor로 설정한다.

4) 배경색 설정 (var backgroundColor: UIColor?)

backgroundColor속성에서 배경색을 설정한다.

5) 배치 설정 (var textAlignment: NSTextAlignment)

textAlignment 속성에서 배치 설정을 한다. 배치는 NSTextAlignment로 지정한다.

  • NSTextAlignment.Center 가운데
  • NSTextAlignment.Left 왼쪽
  • NSTextAlignment.Right 오른쪽

6) 글꼴 및 크기 설정 (var font: UIFont?)

font 속성에서 문자 글꼴 및 크기를 설정한다.

[UIFont(name: “<글꼴명>”, size: <크기>)]에서 글꼴을 지정할 수 있고 [UIFont.systemFontOfSize(크기)]에서 시스템글꼴 크기를 지정할 수 있다.

7) 키보드 종류 설정 (var keyboardType: UIKeyboardType)

keyboardType 속성에서 입력시 사용하는 키보드 종류를 설정할 수 있다. 키보드 종류는 UIKeyboardType으로 지정한다.

  • UIKeyboardType.Default : 기본
  • UIKeyboardType.ASCIICapable: 문자입력
  • UIKeyboardType.URL: URL입력
  • UIKeyboardType.EmailAddress: 이메일 입력
  • UIKeyboardType.NumberPad: 숫자입력용
  • UIKeyboardType.PhonePad: 전화번호 입력용

 

8) 리턴키 설정 (var returnType: UIReturnKeyType)

returnKeyType속성에서 입력시 사용하는 리턴키 종류를 지정할 수 있다. 리턴키 종류는 UIReturnKeyType으로 지정한다.

  • UIReturnKeyType.Default
  • UIReturnKeyType.Go
  • UIReturnKeyType.Join
  • UIReturnKeyType.Next
  • UIReturnKeyType.Search
  • UIReturnKeyType.Send
  • UIReturnKeyType.Done

 

Action에서 설정방법

1) 리턴키 눌렀을 때 메소드 실행 (Did End On Exit)

UITextField-007

[Action]의 Event에서 [Did End On Exit]를 선택하면 리턴키를 눌렀을 때 메소드가 실행되게 된다. 엔터키를 누르면 자동으로 키보드는 사라진다.

2) 키보드 사라지게 하기

[Action]의 Event에서 [Did End On Exit]를 선택하면 엔터키를 누르면 자동으로 키보드가 사라지지만 다른 행동을 준비하고 싶은 경우 resignFirstResponder()메소드를 사용한다.

 

6. 텍스트뷰(UITextView)

텍스트뷰는 긴 텍스트를 표시하거나 입력할 때 사용한다. 긴 텍스트를 표시하기 위한 요소로 긴 텍스트를 넣으면 자동으로 스크롤바가 생겨 스크롤할 수 있다.

UITextView-001

Interface Builder에서 조작방법

Attributes Inspector에서 속성을 설정할 수 있다.

UITextView-002

  • Text: 문자내용
  • Color: 텍스트 색상
  • Font: 글꼴 종류와 크기
  • Alignment: 배치 방법
  • Background: 배경
  • Editable: 편집 가능 여부
  • Keyboard: 입력에 사용되는 키보드 종류
  • Return Key: 리턴키 종류

 

코딩에서 조작방법

1) 문자 설정 (var text: String!)

text속성에 텍스트뷰에 미리 보여줄 문자내용을 설정할 수 있다.

2) 문자 색상 설정 (var textColor: UIColor?)

textColor속성에서 문자색상을 설정한다. 색상은 UIColor로 지정한다.

3) 배경색 설정 ( var backgroundColor: UIColor?)

backgroundColor속성에서 배경색을 설정한다. 색상은 UIColor로 지정한다.

4) 배치 설정 (var textAlignment: NSTextAlignment)

textAlignment 속성으로 배치할 수 있고 NSTextAlignment로 배치위치를 지정한다.

  • NSTextAlignment.Center 가운데
  • NSTextAlignment.Left 왼쪽
  • NSTextAlignment.Right 오른쪽

5) 글꼴 및 크기 설정 (var font: UIFont?)

font 속성에서 문자 글꼴 및 크기를 설정한다.

[UIFont(name: “<글꼴명>”, size: <크기>)]에서 글꼴을 지정할 수 있고 [UIFont.systemFontOfSize(크기)]에서 시스템글꼴 크기를 지정할 수 있다.

6) 편집 가능 여부 (var editable: Bool)

editable속성에서 편집할 수 있는지를 설정하며 Bool로 설정하고 true이면 편집 가능하고 false이면 편집할 수 없다. 편집 가능한 상태이면 텍스트뷰를 선택하면 자동으로 키보드가 나와 입력할 수 있게 된다.

7) 키보드 종류 설정 (var keyboardType: UIKeyboardType)

keyboardType 속성에서 입력시 사용하는 키보드 종류를 설정할 수 있다. 키보드 종류는 UIKeyboardType으로 지정한다.

8) 리턴키 설정 (var returnType: UIReturnKeyType)

returnKeyType속성에서 입력시 사용하는 리턴키 종류를 지정할 수 있다. 리턴키 종류는 UIReturnKeyType으로 지정한다.

Action에서 설정방법

1) 키보드 사라지게 하기

[Action]의 Event에서 [Did End On Exit]를 선택하면 엔터키를 누르면 자동으로 키보드가 사라지지만 다른 행동을 준비하고 싶은 경우 resignFirstResponder()메소드를 사용한다.

  1. 이미지뷰 (UIImageView)

이미지뷰는 이미지를 표시할 때 사용한다. 미리 프로젝트에 포함시킨 이미지나 웹사이트에 있는 이미지를 URL로 지정하여 표시가 가능하다.

uiimage-001

Interface Builder에서 조작방법

uiimage-002

Image: 이미지

Mode: 가로세로비율

  • Scale To Fill: 이미지를 이미지뷰에 맞는 크기로 확대, 축소한다. 가로세로 비율이 변경될 수 있기 때문에 이미지가 수직이 되거나 수평이될 수 있다.
  • Aspect Fit: 이미지의 가로세로비율은 변경하지 않고 이미지가 모두 표시되도록 확대, 축소한다. 이미지뷰의 상하좌우에 틈새가 날 수 있다.
  • Aspect Fill: 이미지 가로세로 비율은 변경하지 않고 이미지뷰에 틈새가 나지 않도록 확대, 축소한다. 이미지 상하 좌우가 이미지뷰에서 벗어날 수 있다.

 

코딩에서 조작방법

1) 이미지보기 (var image: UIImage?)

image속성에서 표시하는 이미지를 설정한다. Png, jpg등의 이미지파일을 볼 수 있지만, 이미지 파일 그대로를 설정하기 어렵다. [UIImage]는 프로그램에서 사용할 이미지데이터로 변환후 설정해야 한다.

이미지파일을 UIImage이미지데이터로 변환하여 그것을 이미지뷰에 표시하는 것으로만  한줄로 처리할 수 있다.

2) 가로세로 비율 설정 (var contentMode: UIViewContentMode)

contentMode속성에서 크기조절 타입을 설정한다. 확대축소 종류는 UIViewCOntentMode로 지정한다.

  • UIViewContentMode.ScaleToFill: 이미지를 이미지뷰에 맞게 크기로 확대축소한다.
  • UIViewContentMode.ScaleAspectFit: 이미지의 가로세로비율을 변경하지 않고 이미지 그대로 확대축소된다.
  • UIViewContentMode.ScaleAspectFill: 이미지의 가로세로비율을 변경하지 않고 이미지뷰에 틈새가 없도록 확대축소된다.

 

Action에서 설정방법

이미지뷰는 Action을 설정할 수 없다.

AssetCatalog 사용하기

앱은 기기에 따라 해상도나 배율이 변경된다. 가로세로 비율이 같아도 아이폰6는 2배의 해상도를 가지고 있고 아이폰6+는 3배 해상도를 가지고 있다. 이는 동일한 이미지 크기로 이미지를 보려면 아이폰6의 2배크기이지만 아이폰6+는 3배 크기의 이미지가 필요하다.

지정하지 않아도 하나의 이미지를 사용하여 확대축소를 하여 대응할 수 있도록 되어 있다. 그러나 2배에서 3배를 확대하면 약간 흐리게 보일 수 있다. 이를 해결하기 위해 각각의 해상도에 대해 다른 크기의 이미지를 준비하여 해상도에 따라 자동으로 이미지를 처리하도록 해주는 것이 준비되어 있다. 그것이 바로 AssetCatalog이다. 네비게이터 영역에서 “Assets.xcassets아이콘이 리소스카달로그이다. 이를 선택하면 AppIcon이 보인다. 아이콘도 기기별라 다른 크기를 제공해야 한다.

 

Facebook Comments

카테고리:   Swift, Swift Books

댓글

죄송하지만 댓글은 닫혀 있습니다.