inblog logo
|
๐ŸŽ
    iOS

    [UIKit] UILabel

    Jan 17, 2024
    [UIKit] UILabel
    1. UILabel์— Inner Padding ์ถ”๊ฐ€ํ•˜๋Š” ๋ฒ•2. UILabel์— Hyperlink ๋„ฃ๋Š” ๋ฒ•3. ํ–‰๊ฐ„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฒ•

    1. UILabel์— Inner Padding ์ถ”๊ฐ€ํ•˜๋Š” ๋ฒ•

    • UILabel์€ ๋‚ด๋ถ€ ํ…์ŠคํŠธ(์ปจํ…์ธ )์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ์„œ Intrinsic Content Size๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค.
    • ์ด์— ๋”ฐ๋ผ, ๋ณ„๋„์˜ ๊ฐ’ ์„ค์ •์ด ์—†๋‹ค๋ฉด ์ปจํ…์ธ ์˜ ๋ณ€ํ™”์— ๋”ฐ๋ผ์„œ ํฌ๊ธฐ๊ฐ€ ๋™์ ์œผ๋กœ ๋ณ€ํ™”ํ•œ๋‹ค.
     
    1. Inner Padding์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ
    • ๊ฐ„๋‹จํ•œ ์ปค์Šคํ…€ Toast๋ฅผ ์ œ์ž‘ํ•  ๊ฒฝ์šฐ, Inner Padding์„ ํ†ตํ•ด ๋ณ„๋„์˜ ๋ฐฐ๊ฒฝ View์—†์ด ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ์Œ
      • notion image
        ์ด๋ฏธ์ง€ ์ถœ์ฒ˜
    • ์œ„ UI๋ฅผ ์ œ์ž‘ํ•˜๋Š”๋ฐ 2๊ฐ€์ง€ ๋ฐฉ์‹ ์ •๋„๋ฅผ ์ƒ๊ฐํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.
    1. ๋ฐฐ๊ฒฝ View + Label ์กฐํ•ฉ
      1. โ†’ ๋‚ด๋ถ€ ์š”์†Œ์˜ ํฌ๊ธฐ + ์›ํ•˜๋Š” Padding ํฌ๊ธฐ๋กœ ๋ฐฐ๊ฒฝ View์˜ ๋ ˆ์ด์•„์›ƒ์„ ์„ค์ •ํ•ด์ค˜์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์›€ ๋ฐœ์ƒ
    1. Label + Inner Padding
      1. โ†’ Label ์ž์ฒด์˜ Inner Padding์„ ์„ค์ •ํ•˜๋ฉด ์ด๋ฅผ Intrinsic Content Size๋กœ ์ธ์‹ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ถ”๊ฐ€์ ์ธ ๋ ˆ์ด์•„์›ƒ ์„ค์ •์ด ํ•„์š” ์—†์Œ
        โ†’ ๋‹จ, ์ด๋ฏธ์ง€๊ฐ€ ๋“ค์–ด๊ฐ€๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์ถ”๊ฐ€ UI๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ๊ฒฝ์šฐ์— ์œ ์—ฐํ•˜๊ฒŒ ๋Œ€์‘ํ•˜์ง€ ๋ชปํ•  ์ˆ˜ ์žˆ์Œ.
     
    1. ๊ตฌํ˜„
      1. final class PaddingLabel: UILabel { var padding: UIEdgeInsets = .zero override func drawText(in rect: CGRect) { super.drawText(in: rect.inset(by: padding)) } override var intrinsicContentSize: CGSize { let superContentSize = super.intrinsicContentSize let width = superContentSize.width + padding.left + padding.right let height = superContentSize.height + padding.top + padding.bottom return CGSize(width: width, height: height) } }
    • drawText() : UILabel์˜ ํ…์ŠคํŠธ๊ฐ€ ๊ทธ๋ ค์งˆ ๋•Œ, ํ…์ŠคํŠธ์˜ ์†์„ฑ ๋ณ€๊ฒฝ
    • padding ํ”„๋กœํผํ‹ฐ ์ถ”๊ฐ€ ํ›„ ์ด๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ
    • intrinsicContentSize ์˜ค๋ฒ„๋ผ์ด๋”ฉ inset ๊ฐ’์„ ๋”ํ•ด์ค€๋‹ค.
    • drawText()๋Š” ํ…์ŠคํŠธ๋ฅผ ๊ทธ๋ฆฌ๋Š” ๋ฉ”์„œ๋“œ์ด๋ฉฐ, padding์„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ๋‹ค๊ณ  ํ•ด์„œ UILabel ์ž์ฒด์˜ ํฌ๊ธฐ๊ฐ€ ๋ณ€ํ™”ํ•˜์ง€๋Š” ์•Š๋Š”๋‹ค.
      • ๋”ฐ๋ผ์„œ, drawText()๋งŒ ์‹คํ–‰ํ•  ๊ฒฝ์šฐ ํ…์ŠคํŠธ๊ฐ€ ์ค‘๋žต๋œ๋‹ค.
      • UILabel ์ž์ฒด์˜ ํฌ๊ธฐ๋Š” ๊ณ ์ •๋˜์–ด ์žˆ๋Š”๋ฐ ๋‚ด๋ถ€์˜ Text๋งŒ ์ปค์กŒ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
    • ๋”ฐ๋ผ์„œ, UILabel์˜ intrinsicContentSize ๋˜ํ•œ padding ๊ฐ’ ๋งŒํผ ์กฐ์ •ํ•ด์ค„ ํ•„์š”๊ฐ€ ์žˆ๋‹ค.
     
    [์ฐธ๊ณ ]
    • https://www.wwdcnotes.com/notes/wwdc13/220/
    • https://zeddios.tistory.com/603

    2. UILabel์— Hyperlink ๋„ฃ๋Š” ๋ฒ•

    • Hyperlink : ๋‹ค๋ฅธ ๋งํฌ๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋Š” ์ฐธ์กฐ ๊ณ ๋ฆฌ
    • ํ…์ŠคํŠธ ๋‚ด๋ถ€์— Hyperlink๋ฅผ ๋„ฃ์„ ์ˆ˜ ์žˆ๋Š” UILabel ์„œ๋ธŒ ํด๋ž˜์Šค ์ƒ์„ฑ
     
    1. NSAttributedString ์ƒ์„ฑ
    • NSAttributedString: ํŠน์ • ์†์„ฑ(ํ•˜์ดํผ ๋งํฌ, ์ƒ‰์ƒ)์„ ์ถ”๊ฐ€ํ•œ ๋ฌธ์ž์—ด
    • read-only ์ด๋‹ค. ๋ฐ˜๋ฉด, NSMutableAttributedString ๋Š” ์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
    • hyperlink ์†์„ฑ์„ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด NSAttributedString ํ‚ค ๊ฐ’์„ ํ™•์žฅ
      • extension NSAttributedString.Key { static let hyperlink = NSAttributedString.Key("hyperlink") }
     
     
    [์ฐธ๊ณ ]
    • https://augmentedcode.io/2020/12/20/opening-hyperlinks-in-uilabel-on-ios/

    3. ํ–‰๊ฐ„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฒ•

    • UILabel์€ ๋‚ด๋ถ€์ ์œผ๋กœ ํ–‰๊ฐ„์„ ์กฐ์ •ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜์ง€ ์•Š์Œ
    • text ํ”„๋กœํผํ‹ฐ์— ์ž๊ฐ„์ด ํ–‰๊ฐ„๋œ String์„ ํ• ๋‹นํ•ด์•ผ๋จ
    • ์กฐ์ •๋œ String โ†’ NSMutableAttributedString
     
    lineSpacing
    • ๋ฌธ์ž์—ด ๊ฐ„์˜ ํ–‰๊ฐ„
    lineHeightMultiple
    • ๊ธฐ์กด ํ–‰๊ฐ„์˜ ๋ฐฐ์ˆ˜
     
    lineHeight
     
    let label = UILabel() let text = "์ƒ˜ํ”Œ ๋ฌธ์ž์—ด" label.attributedText = lineSpacingText(text) func lineSpacingText(_ txt: String) -> NSAttributedString { let style = NSMutableParagraphStyle() style.lineSpacing = 4 //๋ฌธ์ž์—ด ๊ฐ„์˜ ๊ฐ„๊ฒฉ let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 15, weight: .regular), .paragraphStyle: style ] return NSMutableAttributedString(string: txt, attributes: attributes) } func lineHeightMultipleText(_ txt: String) -> NSAttributedString { let style = NSMutableParagraphStyle() style.lineHeightMultiple = 1.4 //๊ธฐ์กด ํ–‰๊ฐ„์˜ ๋ฐฐ์ˆ˜ let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 15, weight: .regular), .paragraphStyle: style ] return NSMutableAttributedString(string: txt, attributes: attributes) } func lineHeightText(_ txt: String) -> NSAttributedString { let style = NSMutableParagraphStyle() style.minimumLineHeight = 21 style.maximumLineHeight = 21 //๋ฌธ์ž์—ด ์ž์ฒด์˜ ๋†’์ด let attributes: [NSAttributedString.Key: Any] = [ .font: UIFont.systemFont(ofSize: 15, weight: .regular), .paragraphStyle: style ] return NSMutableAttributedString(string: txt, attributes: attributes) }
    Share article

    ๐ŸŽ

    RSSยทPowered by Inblog