UITextViewに背景色を設定したい!!
しかも、そのテキストは可変(ユーザ入力)です!!
となった時に、なかなかに細かい設定をやらなければならなかった…というお話ですw
色んな記事を読み漁って、実機テスト(iOS15.7とiOS16.6.1)をやってみて…。
これで大丈夫そうかしら?という判断なのでよろしくお願いしますm(_ _)m
1つ目。
テキストの装飾は、attributedTextで行う
ですね。
textview.attributedText = "あいうえお"
だけで良いのかな〜と思ったら…w
プレースホルダーが出たままになるのでご注意下さい!!
textview.text = "あいうえお"
も設定は必要のようですΣ(・□・;)
追記!
ダークモード対応必須です!
カスタムしてない状態で、そのままダークモードで表示してみると…全ての文字が黒表示で見えない状態になりましたw
対策が必要ですねσ(^_^;)
if UITraitCollection.current.userInterfaceStyle == .dark {
// ダークモード対応
} else {
// ライトモード対応
}
2つ目。
テキストの装飾設定はキーを付けてあげると後々楽になる
背景色を設定した後に出てくるのが…。
何処に設定したか?ですよね。
これの検索を容易にするために、自身でキーを作ってあげるとやりやすいです^_^
これは以下の記事を参考にして下さい。
【初心者向け】NSAttributedStringをcustomKeyで自在に操る話【Swift 4】 - Qiita
3つ目。
ユーザ指定範囲を背景色設定する
ユーザが指定した範囲は以下で調べることが出来ます。
textview.selectedRange
この範囲を活用して背景色を付ける、消すことが出来ます。
以下の記事が参考になります。
swiftで文字装飾!【Textfiled・Textview・label】NSMutableAttributedString
追記!
これもダークモード対応必須でしたw
白文字に背景色…。背景色によっては全然見えなくなるので要注意ですw
4つ目。
入力時に装飾が引っ張られて見える現象が勃発!
可変なので、背景色を設定後にも文字を入れることはあると思います。
背景色を設定した後ろにも勝手に背景色を設定したかのような見え方になります。
でも実は背景色設定してないので、2つ目のキーが付与されていないんですよね。
これをどうするか?になるんですよね。
私が想定するパターンが
・新規入力文字は、背景色を消した状態にする
・新規入力文字は、背景色を付けた状態にする
前者も後者も手を加えなきゃあかんので、まずはカーソル位置を特定する必要が出てきます。
カーソル位置の取得は以下の記事を参照下さい。
SwiftのUITextiVewでキャレットの現在位置を取得する。 - プログラムを書こう!
カーソル位置が特定出来れば、後は入力前と入力後の文字カウントの誤差で特定出来るかと思います^_^
追記!
上記のことをしなくても、カーソル位置の特定はこれで出来ましたw
textview.selectedRange.location
5つ目。
文字数カウントはUTF-16で行う
これが一番大変でしたww
絵文字もガッツリと許容だったのでw
絵文字は文字数カウントにバラツキが発生するので、UTF-16でカウントしていくのが良さそうです。
textview.text.utf16.count
6つ目。
設定した内容を保存する
何処に背景色を設定したか?の特定は、2つ目のHPを参照して下さい^_^
開始位置と設定数がこれで特定出来るので、次回以降の表示もユーザが指定した背景色設定になります!
追記!
背景色以外にも装飾を付ける場合
NSAttributedString.Key("backgroundcolor")
これを付ける分だけ宣言しないと
textview.enumerateAttribute
でどの装飾分の範囲が欲しいのか?がごちゃ混ぜになり訳わからなくなりますw
一発で分かるやり方あれば知りたいです(°▽°)
ざっくりいうとこんな感じで、背景色だけではなく、太文字設定も行えるようになりますので付けたいものをどんどん足していく流れになりますね^ ^
少しでも参考になれば嬉しいです!
追記!
斜体について。
swiftにあるイタリックにする技があるのですが
UIFont.italicSystemFont(ofSize: 20)
これは英数字のみ対応のようで、日本語(ひらがな、カタカナ、漢字)は対象外とのことw
だから色んな記事で見かけたのですが、日本語だけ真っ直ぐだったんですねぇ〜。
なので、斜体は諦めま〜す( ̄▽ ̄)
ではでは!