[CHAPTER 5] 뷰에 나타내기 (3)

UIColor

---

UIColor를 사용하여 색상을 지정합니다.

미리 지정된 색상이 존재합니다.

 let green = UIColor.green

 RGB, HSB나 패턴(반복되는 이미지)을 통해 생생이 가능합니다.

 

UIView의 배경색

아래 변수를 통하여 배경색을 지정합니다.

var backgroundColor: UIColor // we used this for our Concentration buttons

 

알파값(투명도) 지정

알파값은 0.0(완전 투명) ~ 1.0(완전 불투명) 값을 가질 수 있습니다.

let semitransparentYellow = UIColor.yellow.withAlphaComponent(0.5)

 

뷰에 투명도를 적용하기

뷰의 opaque(불투명) 변수값을 false로 설정해야합니다.(기본 true)

var opaque = false

 

뷰 전체에 투명도 지정하기

alpha값을 지정하여 투명도를 지정할 수 있습니다.

var alpha: CGFloat

 

 

Layers

---

UIView 아래에는 CALayer라는 Drawing 메카니즘이 있다.

자주 사용되진 않지만 유용한 내용들이 있습니다.

UIView에서 아래 변수를 통해 접근이 가능합니다.

var layer: CALayer

CA = Core Animation을 뜻합니다.

 대부분 애니메이션은 CALayer 접근 없이 UIView를 통해 사용이 가능합니다.

실제 UIView 애니메이션 동작들은 layer를 통해 처리되는 내용들입니다.

유용한 변수들은 아래와 같습니다.

var cornerRadius: CGFloat // 모서리 반지름(둥근 사각형으로 만들수 있다.)
var borderWidth: CGFloat // 테두리 두께
var borderColor: CGColor? // 테두리 색상

BorderColor가 CGColor로 되어있습니다.

CALayer의 메커니즘이 UIKit 레이어알에서 그리고 코어 그래픽 위에서 이뤄지기 때문입니다. 

UIColor의 cgColor 변수를 사용하여 얻을 수 있습니다.

 

View Transparency(투명도)

---

뷰가 겹쳐져 있고 투명도를 가진 경우

subviews 리스트에서 앞이 있는 경우 먼저 그려집니다.(0 인덱스가 가장 먼저 그려집니다.)

낮은 인덱스의 것들이 먼저 그려지고 높은 인덱스의 뷰들이 그위에 그려집니다.

뷰의 순서를 조절하면 그려지는 순서도 변경됩니다.

 

뷰의 계층과 무관하게 숨기기

isHidden 이라는 변수 값을 true로 변경하면 숨기기 처리가 됩니다.

var isHidden: Bool

서브뷰 리스트에는 존재하나 화면에 표시되지 않고 제스처도 인식되지 않습니다.

 

 

Drawing Text

---

화면에 텍스트를 놓을때 주로 UILabel를 사용합니다.

 

View의 Draw(Rect) 함수내에서는 NSAttributedString를 사용합니다.

let text = NSAttributedString(string: “hello”) // probably would set some attributes too 
text.draw(at: aCGPoint) // or draw(in: CGRect)
let textSize: CGSize = text.size // how much space the string will take up

 

NSAttributedString내의 문자열 범위를 지정하는 방법

NSRange에는 NSString과 String 타입을 대응하는 init 함수가 있습니다.

NSAttributedString은 NSString을 사용하며,

NSString과 String 타입은 문자열을 관리하는 방식이 다릅니다.(유니코드 인코딩 방식, 인덱싱)

NSRange는 NSString에서 사용될 범위를 가리킵니다.

let pizzaJoint = "café pesto"
var attrString = NSMutableAttributedString(string: pizzaJoint)
let firstWordRange = pizzaJoint.startIndex..<pizzaJoint.indexOf(" ")!
let nsrange = NSRange(firstWordRange, in: pizzaJoint) // convert Range<String.Index> 
attrString.addAttribute(.strokeColor, value: UIColor.orange, range: nsrange)

 

 

Font

---

UI 요소인 UILable, UIButton등을 통해 폰드 설정이 가능합니다.

iOS 폰트에서 선호 폰트라는 개념이 중요합니다.

열종류의 선호 폰트 카테고리가 있습니다.(본문폰트, 제목폰트, 캡선폰트 등)

이러한 선호 폰트들 중에 텍스트에 쓸 하나의 폰트를 선택해야합니다.

인터페이스 빌더의 속성 인스펙터탭에서 설정이 가능합니다.

폰트 메뉴에서 설정이 가능합니다.

 

코드를 통해서 폰트를 간단히 구하는 방법입니다.

원하는 텍스트 스타일을 전달하여 선호 폰트를 얻을 수 있는 UIFont 함수가 있습니다.

static func preferredFont(forTextStyle: UIFontTextStyle) -> UIFont

아래와 같은 스타일들이 있습니다.

public static let largeTitle: UIFont.TextStyle
public static let title1: UIFont.TextStyle
public static let title2: UIFont.TextStyle
public static let title3: UIFont.TextStyle
public static let headline: UIFont.TextStyle
public static let subheadline: UIFont.TextStyle
public static let body: UIFont.TextStyle
public static let callout: UIFont.TextStyle
public static let footnote: UIFont.TextStyle
public static let caption1: UIFont.TextStyle
public static let caption2: UIFont.TextStyle

중요한것은 위 폰트들은 가변 사이즈라는 것 입니다.

iOS 설정 - 접근성 - 더 큰 글자 메뉴를 통해 선호 폰트 크기를 변경시킬 수 있습니다.

폰트 크기에 따라 화면이 잘 배치되어야 하는데 이때 유용한 것이 오토레이아웃입니다.

 

나아가서

선호폰트는 폰트와 사이즈가 정해저 있습니다. 특별한 폰트나 이보다 작거나 큰것을 원한다면 어떻게 해야 할까요?

예를 들어 아래와 같은 폰트를 원합니다.

let font = UIFont(name: “Helvetica”, size: 36.0)

위 폰트는 설정에서 폰트 크기를 변경하여도 36 사이즈로 고정되어 있습니다.

이를 개선하기 위해서는 UIFontMetrics라는 클래스를 활용합니다.

폰트를 굵게하거나 기울임꼴로 만드는 작업을 할 수 있습니다.

UIFontMetrics의 scaledFont 함수를 사용하여 이를 처리할 수 있습니다.

let metrics = UIFontMetrics(forTextStyle: .body) // or UIFontMetrics.default
let fontToUse = metrics.scaledFont(for: font)

위 코드르 통해 사용자 설정이 적용된(크기가 변경된) 폰트를 전달받을 수 있습니다.

 

시스템 폰트

시스템 폰트는 버튼 제목 같은데서만 사용되는 폰트입니다.

static func systemFont(ofSize: CGFloat) -> UIFont
static func boldSystemFont(ofSize: CGFloat) -> UIFont

사용자가 만들었거나 요청한 컨텐츠에 대해서는 위 폰트가 아닌 선호 폰트를 사용합니다.

 

 

Drawing Images

---

이미지는 어떻게 그릴까요?

텍스트를 그릴시 UILabel을 써던 것 처럼 이미지는 UIImageView를 통하여 그립니다.

draw(CGRect) 함수내에서 그리기 위해서는 UIImage 객체가 필요합니다.

UIImage는 jpg, gif등 아무 이미지나 표현할 수 있습니다.

 

UIImage 생성하기

생성 방법 중 하나는 jpg 파일 등을 Assets.xcassets 파일에 넣는것 입니다.

named 뒤에 에셋의 이미지 이름을 넣어주면 됩니다.

let image: UIImage? = UIImage(named: "foo")

 

파일 시스템내 파일을 이용한 생성

파일 시스템 내에 존재하는 이미지 파일들을 사용할 수 있습니다.

let image: UIImage? = UIImage(contentsOfFile: pathString)
let image: UIImage? = UIImage(data: aData) // raw jpg, png, tiff, etc. image data

 

전역 함수를 통한 생성

UIGraphicsBeginImageContext를 통하여 선이나 곡선을 그린 뒤 캡쳐가 가능합니다.

 

UIImage가 있다면 화면에 그리가 가능합니다.

let image: UIImage = ...
image.draw(at point: aCGPoint) // the upper left corner put at aCGPoint 
image.draw(in rect: aCGRect) // scales the image to fit aCGRect 
image.drawAsPattern(in rect: aCGRect) // tiles the image into aCGRect

 

 

Bound가 바꼇을때 다시 그리기

---

기본적으로 UIView의 bounds가 변경되었을시 다시 그리지 않습니다.

대신 존재하는 이미지가 bounds 크기에 맞춰 스케일됩니다.

주로 이미지가 으깨지게 됩니다.

 

이런 방법 주로 원하지 않을것 입니다.

UIView에는 이러한 상황에서 처리를 위한 설정값이 존재합니다.

var contentMode: UIViewContentMode

 

UIViewContentMode

이미지 크기를 조정하고 싶은 않을때(비트만 유지 / 크기는 변경하지 X)

.left/.right/.top/.bottom/.topRight/.topLeft/.bottomRight/.bottomLeft/.center

 

뷰에 맞춰 크기조절을 하고 싶을때( 비트를 줄이거나 늘림 / .scaleToFill가 기본값)

.scaleToFill/.scaleAspectFill/.scaleAspectFit // .scaleToFill is the default

 

 

draw(CGRect)를 호출하여 다시 그리기를 원할때

.redraw

 

 

Bounds 변경시 서브뷰?

bounds가 변경되었을 시 서브뷰들을 재배치하기를 원할것입니다.

대개 오토레이아웃 제약사항을 통해 재배치가 될 것입니다.

혹은 bound 변경시 아래 함수를 override하여 수동으로 재배치를 진행 할 수 있습니다.

override func layoutSubviews() {
      super.layoutSubviews()
      // reposition my subviews’s frames based on my new bounds
}