iOS - 뷰, 컨텐츠

뷰와 컨텐츠

 

   뷰 : 컨텐츠 출력

      문자 기반의 컨텐츠 다루기

         - 뷰 : UILabel
         - 컨텐츠 : String

   
      이미지 기반의 컨텐츠 다루기

         - 뷰 : UIImageView
         - 컨텐츠 : UIImage

 

레이블

   
   문자 기반의 컨텐츠

      컨텐츠 : String
      뷰 : UILabel

   속성

      출력 컨텐츠 - 텍스트
      글자 색과 폰트
      정렬 방식과 출력 줄 수
      LIne Break, Auto Shrink
      그림자

   폰트

      폰트
      텍스트 스타일

   다이나믹 타입

      다이나믹 텍스트
      사용자 설정에 따라 글자 크기가 변경

   컨텐츠와 뷰의 크기

  
    레이블 크기, 컨텐츠 크기

         글자가 필요로 하는 크기
         폰트, 크기, 글자 수로 결정
         Size to Fit Content ( cmd버튼 + =버튼,  Editor- Size to Fit Content )

       글자 일부 생략

         Line Break
         생략 위치 설정

      글자 크기 조절

         Autoshrink
         최소 크기 / 비율 지정

      여러 줄로 표현

         Lines 속성으로 설정
         줄 바꾸는 방식( Word Warp, Character Wrap )
         0 - 크기에 맞춰서 줄 표현

   코드로 작성하기

      UILabel 클래스

      레이블의 컨텐츠

         var text : String?
        
         ex )

let label = UILabel(frame: CGRect(x: 50, y:50, width: 200, height: 50))
label.text = "Hello World"
self.view.addSubview(label)

      컨텐츠로 크기 정하기 : func sizeToFit()

let label = UILabel(frame: CGRect(x: 50, y: 150, width: 0, height: 0))
label.text = "Size zero Label"
label.sizeToFit()

      정렬

var textAlignment: NSTextAlignment

      문자열 생략

var lineBreakMode: NSLineBreakMode

      Auto shrink

var adjustsFontSizeToFitWidth: Bool
var minimumScaleFactor: CGFloat

      문자열 줄 수

var numberOfLines: Int

      폰트 클래스 : UIFont

var font: UIFont!

 

     폰트 객체 생성

func systemFont(ofSize fontSize: CGFloat) -> UIFont
func boldSystemFont(ofSize fontSize: CGFloat) -> UIFont
init?(name fontName: String, size fontSize: CGFloat)

      샘플 코드

let font1 = UIFont.systemFontOfSize(15)
let font2 = UIFont(name: "Marker Felt", size: 20)

 

   다이나믹 타입

      다이나믹 타입 적용 폰트 생성
      
      폰트 스타일 

class func preferredFont(forTextStyle style: UIFontTextStyle) -> UIFont

      샘플 코드

label.font = UIFont.preferredFont(forTextStyle: .headline)
label.text = "헤드라인 스타일"

   커스텀 폰트

      1 . 폰트 추가
          시스템에서 제공하지 않는 폰트 사용
          폰트 내장 - 폰트 파일을 프로젝트에 추가

 

      2. plist 설정

     
         1. plist 설정
         2. Add Row
         3, Fonts provided by application
             폰트 추가

      폰트 객체 얻기

label.font = UIFont(name: "Arial Black", size: 25)

 

   이미지 리소스

      이미지 관련 클래스

         이미지 뷰(UIImageView)
         이미지(UIImage)

      앱 UI의 이미지

         앱과 함께 배포
         번들(Bundle) : 앱 배포 패키지

      사용자 컨텐츠 이미지

         이미지 라이브러리 내 이미지
         기기에 다운로드 된 이미지
         네트워크를 이용한 접근

  
       프로젝트에 이미지 파일로 준비

      
         리소스 추가 옵션 다이얼 로그

            Copy items if needed
            Create groups : 그룹 생성, 폴더 구조 무시
            Create folder references : 폴더 구조 유지
            Add to targets : 애플리케이션 타겟 선택

         기기 적용 이미지 파일
         이미지 이름에 배율 입력

            기기에 맞는 이미지 자동 적용
            비 레티나 모델 : 이미지 이름
            레티나 모델 : 이미지 이름@2x
            레티나 모델(5.5인치) : 이미지 이름@3x

 

      애셋 : 프로젝트 리소스 관리

            앱 아이콘(App Icon)
            이미지 셋(Image Set)
            런치 이미지(Launch Image)
            데이터

 

   이미지 뷰

      이미지 뷰를 추가하여 하나의 이미지를 State로 상태 값을 바꾸면서 두가지 뷰로 사용 가능

   뷰의 컨텐츠 모드

         Content Mode로 크기 / 비율 수정
         Scale To Fill - 뷰에 가득 참
         Aspect Fit - 비율 유지
         


      뷰 클리핑 속성         

         clip to Bounds 속성으로 벗어나는 화면 막을 수 있음

 

      코드로 다루기

      
         번들로 배포되는 이미지

            이미지 셋 이름, 파일 이름(png는 확장자 생략 가능)으로 생성
            자동으로 기기에 맞는 이미지 사용(@2x, @3x 모델)

if let image = UIImage(named: "like_button") {
   let imageView = UIImageView(image: image)
   self.view.addSubView(imageView)
}

            이미지가 위치한 경로에서 이미지 객체 얻기

let path = "이미지 경로"
let image = UIImage(contentsOfFile: path)

 

            Data로 이미지 다루기

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) {
   imageView.image = image
}

 

             뷰의 컨텐츠 모드

var contentMode: UIViewContentMode

             클리핑 - 뷰를 벗어나는 부분을 표시안하기

var clipToBounds: Bool