[iOS] UIkit 오브젝트 라이브러리 살펴보기(UILabel, UIButton, UITextField, UIImageView, UISwitch, UISegmentedControl)

ios UI 요소들에 대해서 간단히 살펴보기

 

xcode 스토리 보드 파일에서 오른쪽 상단 + 버튼 또는 (command + shift + L)을 사용하면 오브젝트 라이브러리를 띄울 수 있다

xcode 왼쪽 상단의 + 버튼

띄워진 object Library 창

Object Library 창에서 요소(예를 들면 Label)를 스토리보드의 뷰컨트롤러 위로 드래그 하면 생성할 수 있다

 

UILabel

왼쪽은 xcode, 오른쪽은 시뮬레이터

Label은 코드로 속성을 수정하거나 인스펙터 창에서 간단하게 속성 조정이 가능하다

인스펙터 창은 위에서 Object Library 창을 열기위한 + 버튼 오른쪽의 전자레인지 닮은 네모 버튼을 클릭하거나 (command + option + 0)으로 열 수 있다

여러가지 탭이 나오는데 Attributes inspector 창에서 속성들을 선택해서 수정할 수 있다 

위 이미지에서는 각각 Text, Color, Font, Alignment, Line, Line Break 속성들을 조정해보았다

시뮬레이터에서 직관적으로 어떤 것들이 조정되었는지 확인 가능

 

UIbutton 

UIButton의 속성 중에 Type을 각각 Sytem(기본), Detail, Info Light, Info Dark, Add Contact, Close로 변경했다

직관적으로 보았을 때 info, add, X 아이콘이 왼쪽에 생성 된 것을 볼 수 있다

 

Todo : Detail, info Light, info Dark의 차이점은 무엇일까? 

Todo : System과 close는 크기 수정이 가능한데, Detail과 info 버튼들은 크기 수정이 불가능할까?

 

위는 UIbutton의 

Style 속성을 Plain, Gray, Tinted, Filled 로 변경

Title 속성을 Plain, Attributed로 변경

Subtitle 속성을 Plain으로 두고 값 추가, Attributed로 두고 값 추가 (위 이미지에 오타 존재)

Alignment 속성을 Automatic, Leading, Center, Trailing으로 변경

Foreground 속성을 AccentColor, Yellow로 변경

Background 속성을 AccentColor, Purple로 변경 한 이미지

 

Todo : Title 속성의 Plain과 Attributed의 차이는?

Todo : Subtitle 속성의 Plain과 Attributed의 차이는?

Todo : Alignment 속성이 명확하게 차이가 나지 않는 이유는?

 

UITextField

위는 UITextField에 모두 lorem ipsum 값을 입력한 후 속성을 변경한 이미지

Text 속성에 Plain

Text 속성에 Attributed(오른쪽 정렬)

Font 속성 변경

Alignment 속성 변경(오른쪽 정렬)

Placeholder 속성에 값 입력

Border Style 속성을 수정

Clear Button 속성을 'is always visable'로 변경

Keyboard Type 을 수정(시뮬레이터에서 해당 textField에 커서 올린 후 키보드 확인 하면 알 수 있음)

return key 속성을 수정

Secure Text Entry 속성을 수정

 

 

 

UIImageView

위는 UIImageView에 image를 넣고 
content Mode 속성을 각각 Aspect Fit, Aspect Fill로 설정한 이미지

 

UISwitch, UISegmentedControl

위에서부터

UISwitch 

State 속성을 Off

On Tint 속성을 Brown 색깔로

Thumb Tint 속성을 Brown 색깔로

 

SegmentedControl

Selected Tint 속성을 Brown 색깔로

Segment 속성을 Segment 0에서 Segment 1 - Second로

title 속성에 값을

image 속성에 이미지를

입력한 이미지

 

Todo : segment 속성은 어떤 차이를 만들어낼까?