- 뷰(View)는 iPhone의 화면 단위인 씬에 여러 종류의 컨텐츠(리소스)를 출력하는 용도이며 컨텐츠에 맞는 뷰를 선택하도록한다.
- 컨텐츠는 씬에 출력되는 구성단위이며, 문자 기반, 이미지 기반 등으로 구성할 수 있다.
- 아래는 뷰와 컨텐츠를 씬에 출력한 화면이다.
- 위 그림에서는 아래와 같은 컨텐츠로 구성된다.
- 레이블 : 문자 기반의 컨텐츠
- 이미지 뷰 : 이미지 기반의 컨텐츠
- 테이블 뷰 : 다수의 반복 컨텐츠
- 세그멘티드 컨트롤 : 화면 출력을 선택하는 컨텐츠
- 버튼 : 이벤트 발생 컨텐츠
- 컨텐츠 중에서 자주 사용되는 문자 기반의 컨텐츠와 이미지 기반의 컨텐츠 사용법을 알아보도록 한다.
- 문자 기반의 컨텐츠 다루기
- 뷰 : UILabel
- 컨텐츠 : String
- Storyboard에서 다루는 방법은 아래 그림의 속성에서 변경 가능하다.
- 코드로 다루는 방법 (뷰 : UILabel / 리소스 : String)
코드로 문자 기반 컨텐츠 다루는 방법 |
|---|
let label = UILabel(frame: CGRect(x:50, y:50, width:200, height:50))
label.text = "Hello World" // 출력할 문자
self.view.addSubView(label) // 뷰에 레이블 추가 |
- 다이나믹 타입 : 사용자 설정에 따라 글자 크기가 변경된다.
- iPhone 설정에 손쉬운 사용에 해당 기능이 있으며, 글자 크기를 조절한다.
- Storyboard에서는 텍스트 스타일로 설정해야 반영되며, 코드로는 UIFont.preferredFont 메소드로 설정해야 반영된다.
- 이미지 기반의 컨텐츠 다루기
- 뷰 : UIImageView
- 컨텐츠 : UIImage
- 이미지 리소스는 앱과 함께 배포할 수도 있고, 사용자가 카메라로 촬영한 이미지를 사용할 수도 있고, 기기 내에 다운로드 된 이미지를 사용할 수도 있고, 네트워크를 이용하여 접근할 수 있다.
- 앱과 함께 배포 : 프로젝트 내에 이미지 파일을 저장하여 사용하며, 코드로는 init 메소드에서 이미지 파일 이름이나 이미지 셋을 명시한다.
- 사용자가 카메라로 촬영한 이미지 사용 : API를 이용한다.
- 기기 내에 다운로드 된 이미지 사용 : init 메소드에서 파일 경로를 명시한다.
- 네트워크를 이용한 이미지 사용 : init 메소드에서 인터넷이나 파일 등의 경로를 Data 클래스로 명시한다.
- 이미지 리소스는 기기에 맞는 이미지로 자동 적용이 가능하며 이미지 이름을 달리하여 자동 적용된다.
- 비 레티나 모델 : 이미지 이름
- 레티나 모델 : 이미지 이름@2x
- 레티나 모델(5.5인치) : 이미지 이름@3x
- Storyboard에서 다루는 방법은 아래 그림의 속성에서 변경 가능하다.
- 코드로 다루는 방법 (뷰 : UIImageView / 리소스 : UIImage)
코드로 이미지 기반 컨텐츠 다루는 방법 |
|---|
// 번들로 배포되는 이미지
if let image = UIImage(named : "like_button") {
let imageView = UIImageView(image : image)
self.view.addSubView(imageView)
}
// 기기 내에 다운로드한 이미지
let path = "/Users/username/Downloads/cat.jpg"
if let image = UIImage(contentsOfFile : path) {
let imageView = UIImageView(image : image)
self.view.addSubView(imageView)
}
// 네트워크를 이용한 이미지
let urlStr = "http://lorempixel.com/400/200/cats"
if let url = URL(string : urlStr),
let data = try? Data(contentsOf : url),
let image = UIImage(data : data) {
let imageView = UIImageView(image : image)
self.view.addSubView(imageView)
}
// 아웃렛으로 이미지 연결
@IBOutlet weak var Test_Image : UIImageView!
if let image = UIImage(named: "Dolphine.jpeg") {
// 아웃렛으로 연결했을 때 이미지 연결
Test_Image.image = image
} |
출처 : https://tacademy.skplanet.com/
