カルボナーラ街道

計測と観察

SwiftUIのTextEditorのテキストの余白はどう調整する?

結論

UITextView.appearance().textContainerInset =
             UIEdgeInsets(top: 10, left: 50, bottom: 40, right: 20)  

開発環境

> xcodebuild -version
Xcode 13.1
Build version 13A1030d

記事中のスクリーンショット: iPhone 13 Pro Max / iOS15.0

背景

前にUITextViewのテキストの余白調整を行ったが、SwiftUIのTextEditorのテキストではどう余白調整をやるんだ?と思ったのでやる。

tokizuoh.hatenablog.com

前提

本記事の「TextEditorのテキスト」は以下とする。

  • ユーザーが入力したテキスト

ユーザーが入力したテキストの余白調整

f:id:tokizuoh:20220227095005p:plain

どうもTextEditorのドキュメントには載ってなかった。
調べたところ、stack overflowにたどり着いた。

You added padding to external frame, but need to indent internal text container. The possible solution (as TextEditor is actually UITextView) to use appearance.
https://stackoverflow.com/questions/64591082/add-horizontal-padding-to-texteditor-but-prevent-it-from-shifting-scrollbar-insi

ひとまず書かれている通りにやってみる。

import SwiftUI

struct ContentView: View {
    
    @State private var text: String = ""
    
    init() {
        // ここ
        UITextView.appearance().textContainerInset =
             UIEdgeInsets(top: 10, left: 50, bottom: 40, right: 20)  
    }
    
    var body: some View {
        ZStack(alignment: .center) {
            Color.gray
                .ignoresSafeArea()
            TextEditor(text: $text)
                .frame(width: 250,
                       height: 250)
            
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

f:id:tokizuoh:20220227100224p:plain

目的が叶えられた。
いや、まだ引っかかるポイントがある。

(as TextEditor is actually UITextView)
https://stackoverflow.com/questions/64591082/add-horizontal-padding-to-texteditor-but-prevent-it-from-shifting-scrollbar-insi

この出典を探す。 宿題。 以下で解決済み。

SwiftUIのTextEditorの実体がUIKitのUITextViewであることを確認する - カルボナーラ街道(beta)

参考