Week1 IOS

Font의 line height 설정

문제 상황

디자인에서 전달해준 폰트에 line height, letter spacing(글자 간격) 값 존재.

UIFont에 lineHeight 속성은 있지만 get-only 프로퍼티라서 변경하지 못하고, UIFont 자체에 설정하는 다른 방법도 없음.

해결 과정

UILabel 혹은 NSAttributedString에다가 메소드 구현해야함

UILabel에 한다면 UIButton의 title에는 적용하지 못할까봐 걱정했는데,

버튼의 titleLabel 속성도 UILabel이라 적용 가능

→ UILabel의 extension에 구현하기로 결정

사전 지식 : Font Metrics

우리가 볼 건 line height랑 baseline

func setupLetterSpacing(_ spacing: CGFloat) {
        guard let text else { return }

        let letterSpacing = font.pointSize * spacing

        let attributes: [NSAttributedString.Key: Any] = [
            .kern: letterSpacing,
        ]
        let attributedString = NSAttributedString(
            string: text,
            attributes: attributes
        )

        attributedText = attributedString
    }
}

UILabel의 line height 설정하기

NSAttributedString을 이용

NSAttributedString 생성자 중 어트리뷰트를 적용할 문자열과 어트리뷰트를 받아서 인스턴스 생성해주는 NSAttributedString(string:,attributes:) 존재

이 attributes에 line height 설정해서 전달해줄건데

1. NSMutableParagraphStyle()을 생성해서 최소 line height와 최대 line height를 설정
2. 앞의 font metric 중에 baseline에 offset 줄 수 있음. baselineOffset을 (lineHeight - font.lineHeight) / 2)로 계산
   1. (lineHeight - font.lineHeight) / 2 는 (설정하고자 하는 line height)에서 (폰트의 기존 line height)를 빼주고 나누기 2를 해주어 텍스트가 라벨의 y축 기준 중간에 오도록 해주는 것.

설정한 두 attribute를 NSAttributedString.Key 중에서 .paragraphStyle과 .baselineOffset에 대한 value로 전달하고

label의 attributedText 속성에 어트리뷰트를 적용한 문자열인 attributedString 을 할당해주면 끝

아래는 전체 코드입니다

extension UILabel {
    func setupLineHeight(_ lineHeight: CGFloat) {
        guard let text else { return }

        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.minimumLineHeight = lineHeight
        paragraphStyle.maximumLineHeight = lineHeight

        let attributes: [NSAttributedString.Key: Any] = [
            .paragraphStyle: paragraphStyle,
            .baselineOffset: (lineHeight - font.lineHeight) / 2
        ]
        let attributedString = NSAttributedString(
            string: text,
            attributes: attributes
        )

        attributedText = attributedString
    }
}

사용 예시

label.font = Fonts.mediumBody1
label.setupLineHeight(FontLineHeights.mediumBody1)

• 참고
  • UILabel line height 설정하기 https://kunkunwoo.tistory.com/232
  • UIFont Metrics https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html
  • NSAttributedString.Key https://developer.apple.com/documentation/foundation/nsattributedstring/key
  • UILabel의 attributedText https://developer.apple.com/documentation/uikit/uilabel/1620542-attributedtext

UINavigationBar

UINavigationBar | Apple Developer Documentation

(개념 정리)

**UINavigationBar**는 일반적으로 앱의 화면 상단에 위치하며 화면 간의 탐색을 제어하는 데 사용되는 UI 컴포넌트이다.

**UINavigationBar**는 주로 **UINavigationController**와 함께 사용되며, **UINavigationController**는 연결된 **UINavigationBar**를 생성, 표시, 관리합니다. 또한 이는 UINavigationController 스택에 푸시된 **UIViewController**의 속성을 사용하여 **UINavigationBar**에 표시할 내용을 제어합니다.

1. 코드나 Interface Builder에서 **UINavigationController**를 생성합니다.
2. UINavigationController 객체의 navigationBar 속성을 사용하여 **UINavigationBar**의 외관을 설정합니다.
3. UINavigationController 스택에 푸시하는 각 **UIViewController**의 타이틀과 navigationItem 속성을 설정하여 **UINavigationBar**의 내용을 제어합니다.

**UINavigationBar**에 대한 내용을 설정하거나 제어하려면, UINavigationItem 인스턴스를 사용하여 표시할 버튼이나 커스텀 뷰를 지정합니다. 또한 **UINavigationBar**는 UINavigationItem 객체의 스택을 관리하며, 이 스택의 가장 위에 있는 아이템이 현재 **UINavigationBar**에 표시되는 내용을 나타냅니다. pushItem(_:animated:) 메소드를 사용하여 새로운 네비게이션 아이템을 스택에 푸시하고, popItem(animated:) 메소드를 사용하여 스택에서 아이템을 팝 할 수 있습니다.