UILabelやUITextFieldなどで箇条書きをきれいに表示する

概要

iOSのUILabelやUITextで箇条書きテキストを表示したい場合の実装例です。

単純に実装すると以下のBeforeのようにインデントや適切な行間がなく見辛くなってしまいますが、これをAfterのようにきれいに表示できます。

Before	After

実装方法

XcodeのPlaygroundで実行可能なコードサンプルです。

import UIKit
import PlaygroundSupport
let text = "※以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下「ソフトウェア」）の複製を取得するすべての人に対し、ソフトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブライセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。※上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。※ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。"

let label = UILabel()
let bulletString = "※"

// 段落のインデント幅を決定するよりも前にフォントサイズを設定する
var attributes = [NSAttributedString.Key: Any]()
attributes[.font] = UIFont.systemFont(ofSize: 10)

// 段落設定で段落のインデント幅、段落間の余白を設定する
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.headIndent = (bulletString as NSString).size(withAttributes: attributes).width
paragraphStyle.paragraphSpacing = 8
attributes[.paragraphStyle] = paragraphStyle

// PlaygroundやXIBで日本語フォントが正しく表示されない問題の対応
attributes[kCTLanguageAttributeName as NSAttributedString.Key] = "ja"

let bulletedListText = text
    .split(separator: "※")
    .map { bulletString + $0}
    .joined(separator: "\n")
label.attributedText = NSAttributedString(string: bulletedListText, attributes: attributes)
label.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
label.textColor = .label
label.backgroundColor = .systemBackground
label.numberOfLines = 0

PlaygroundPage.current.liveView = label