관리 메뉴

김종권의 iOS 앱 개발 알아가기

[iOS - swift] 1. lineSpacing, lineHeight 개념 (#baselineOffset) 본문

iOS 응용 (swift)

[iOS - swift] 1. lineSpacing, lineHeight 개념 (#baselineOffset)

jake-kim 2023. 10. 23. 01:35

1. lineSpacing, lineHeight 개념 (#baselineOffset)

2. 특정 문자열 사이 간격 조절 방법 (#lineSpacing 고급)

lineSpacing과 lineHeight 개념

  • lineSpacing: 문자열이 2줄 이상이 될 때, 이 두 줄 간격을 의미 (default는 0)
  • lineHeight: baselineOffset으로 구현하고 문자열 1줄에 대해서 바로 적용되며, 문자열을 가지고 있는 뷰 (UILabel, UITextView, UITextField)등의 높이

cf) lineHeightMultiple 개념

  • lineHeightMultiple는 폰트 크기에 비례하여 height값을 늘려주는 값
  • ex) lineHeightMultiple이 1.2이면 font 크기의 1.2배 height 증가

lineSpacing 구체적으로 알아보기

  • "ABC\nabc"라는 문자열이 있을때, A와 B와 C 문자열의 lineSpacing이 다른 경우 어느것이 적용될까?
    • 라인의 첫번째 문자열 기준으로 lineSpacing이 결정
    • 또 다른 특성) 라인 첫 번째 문자열이 lineSpacing을 적용하려는 range에 속해있으면 해당 라인 다음 줄을 lineSpacing값이 적용되고, 첫 번째 문자열이 속해있지 않으면 무시되는 속성이 존재 (다음 포스팅 글 참고)
let text = "ABC\nabc"
let attributedString = NSMutableAttributedString(string: text)

// A, B, C 문자 각각에 대해 다른 lineHeight 설정
let rangeA = (text as NSString).range(of: "A")
let paragraphStyleA = NSMutableParagraphStyle()
paragraphStyleA.lineSpacing = 1
attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyleA, range: rangeA)

let rangeB = (text as NSString).range(of: "B")
let paragraphStyleB = NSMutableParagraphStyle()
paragraphStyleB.lineSpacing = 20
attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyleB, range: rangeB)

let rangeC = (text as NSString).range(of: "C")
let paragraphStyleC = NSMutableParagraphStyle()
paragraphStyleC.lineSpacing = 100
attributedString.addAttribute(NSAttributedString.Key.paragraphStyle, value: paragraphStyleC, range: rangeC)

label.attributedText = attributedString

(만약 "A"문자열의 lineSpacing을 10으로 하고 "B"의 lineSpacing을 500으로 하면?)

  • 첫번째 문자열이 A이므로 lineSpacing은 10으로 적용

A는 10, B는 500

(A의 lineSpacing에 500을 부여하면 바로 적용됨)

A는 500, B는 10

lineHeight 구체적으로 알아보기

  • "ABC"라는 문자열이 있을때, A와 B와 C 문자열의 lineHeight가 다른 경우 어느것이 적용될까?
    • 문자열이 lineHeight에 따라서 자동으로 변하며, 각각 독립적으로 적용되고 가장 큰 lineHeight값 기준으로 뷰가 변동
    • 만약 첫번째 글자의 lineHeight가 1이고 세번째 글자의 lineHeight가 2이면 첫번째 글자는 반 잘려서 표출
    • (첫번째 글자는 세번째 글자의 크기와 독립적이므로 첫번째 글자의 크기에만 정렬하기 때문)
  • lineHeight는 baselineOffset으로 구현
let text = "ABC"
let attributedString = NSMutableAttributedString(string: text)

// A, B, C 문자 각각에 대해 다른 lineHeight 설정
let rangeA = (text as NSString).range(of: "A")
attributedString.addAttribute(NSAttributedString.Key.baselineOffset, value: 5, range: rangeA)

let rangeB = (text as NSString).range(of: "B")
attributedString.addAttribute(NSAttributedString.Key.baselineOffset, value: 10, range: rangeB)

let rangeC = (text as NSString).range(of: "C")
attributedString.addAttribute(NSAttributedString.Key.baselineOffset, value: 15, range: rangeC)

label.attributedText = attributedString

lineHeight에 따라 text크기 변경하고 첫번째 글자가 잘려보이게 노출

* 전체 코드: https://github.com/JK0369/ExLineSpacingHeight

Comments