iOS의 UILabel의 크기 그대로 Hiragino Sans의 qyjp와 É의 상하가 눈에 띄지 않게 한다

도전



운영 환경: iOS10~12

UILabel의 Hiragino Sans를 직접 지정하여 【영어만】이라고 하는 경우, 아래와 같이 qyjp나 É의 상하가 단절되기도 합니다.


label.font = UIFont(name: "HiraginoSans-W3", size: fontSize)!
label.text = "Font TestgpÉ"

【AutoLayout이나 sizeThatFits() 상의 사이즈를 변경하지 않고】, 그리기 영역을 넓혀 아래와 같이 하고 싶다



대응 방법



상하에 gutter(스페이스)를 확보하고, 묘화 영역을 넓히는 것으로 대응.
AutoLayout의 크기를 변경하지 않으려면 alignmentRectInsets
import UIKit

class VerticalGutterLabel: UILabel {

  /// フォントサイズの1/6のgutterを計算
  private var verticalGutter: CGFloat {
    guard let font = self.font else {
      return 4.0 //font未指定の時の値。だいたい4.0確保しておけばOKなのでそうしておく
    }
    return ceil(font.pointSize / 6.0)
  }

  /// サイズ(描画領域)を大きくする
  override var intrinsicContentSize: CGSize {
    var size = super.intrinsicContentSize
    size.height += verticalGutter * 2
    return size
  }

  /// 描画領域を大きくした分、描画位置を調整
  override func drawText(in rect: CGRect) {
    super.drawText(in: UIEdgeInsetsInsetRect(rect, UIEdgeInsets(top: verticalGutter,
                                                                left: 0.0,
                                                                bottom: verticalGutter,
                                                                right: 0.0)))
  }

  /// 描画領域を大きくした分の部分をAutoLayout上で加算されないように相殺する処理
  override var alignmentRectInsets: UIEdgeInsets {
    let alignmentRectInsets = super.alignmentRectInsets
    return UIEdgeInsets(top: alignmentRectInsets.top + verticalGutter,
                        left: alignmentRectInsets.left,
                        bottom: alignmentRectInsets.bottom + verticalGutter,
                        right: alignmentRectInsets.right)
  }

  /// alignmentRectInsetsの影響でsizeThatFits(sizeToFit含む)が小さくなってしまうのを相殺する処理
  override func sizeThatFits(_ size: CGSize) -> CGSize {
    var size = super.sizeThatFits(size)
    size.height += verticalGutter * 2
    return size
  }
}

수정 내용의 설명은 VerticalGutterLabel 의 코멘트 참조

참고로 한 정보
h tps : // s c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 20985085 / 우이 베 lcー오 콘텐 t 이오 s

대응시의 주의! !



그리기 영역을 넓히고 있으므로 backgroundColor 등의 그리기 영역도 퍼져 있으므로 주의! !



"HiraginoSans"로 직접 지정하는 이유



Zeplin이라는 툴을 디자인 지시에 사용하고 있습니다만,
Zeplin에서 지정한 글꼴 크기를 그대로 설정해도
시스템 폰트( systemFont(ofSize:) 이나 boldSystemFont(ofSize:) )라면 작아져 버리는 문제가 있었기 때문입니다.

Zeplin에서의 폰트 사이즈와 "HiraginoSans"직접 지정시의 폰트 사이즈가 일치하고 있었기 때문에 "HiraginoSans"직접 지정하고 있습니다.

잘 모르겠지만, 시스템 폰트 지정의 경우는 "HiraginoSans"의 본래의 폰트 사이즈보다 작게 표시하고 있을까. . 라고 생각합니다.

다음 기사는



내일, 먹어 로그 AdventCalendar11일째는 @itume씨로부터의 「PORO와 어른이 된 나」입니다.

좋은 웹페이지 즐겨찾기