【Swift】UILableの一部の文字だけを太字や色の変更を行う方法

【Swift】UILableの一部の文字だけを太字や色の変更を行う方法

どうもふっさんです。

今回はUILabelの一部の文字だけを太字にしたり、文字色の変更を行う方法について書いていきたいと思います。

UILabelの一部の文字を太字、色の変更を行う

太字にする

まずは全文ソースコード。

UILabelに設定したテキストは「明日は雨が降る」という文章で、この文字列の中の「明日」という2文字を太字に設定しています。

 

上記のValueでフォントサイズを設定し、rangeで装飾する文字列の位置を設定しています。

今回の場合「明日は雨が降る」なので、rangeの指定は「0文字目から数えて2文字装飾する」という範囲指定になります。

要はrange(文字を装飾し始める位置, そこから何文字)という設定方法になります。

 

文字色を変更する

さきほどの全文ソースコードに以下のコードを追加してあげると「雨」の文字色を変更できます。

このrangeの指定も上記に書いた設定方法と同じです。

 

両方設定すると以下のようになります。

文章の一部を太字、文字色の変更

 

[おまけ]文章が動的に決まる場合の装飾方法

今回装飾した文字列は「明日は雨が降る」という短い文章でしたが、もしタイトルと内容に分けられる日記や何かしらの記事の場合、タイトルも内容も文字列自体がその日記や記事ごとに長さが違ってきます。

この場合文章自体を(改行)などで分けて、太字にしたい部分だけを取得するような方法をご紹介します。

 

例としては日記アプリを作るとして、日記にはタイトルと内容があり、タイトルだけ太字にしたいという場合。

ユーザーがタイトルと内容を決めるので、アプリ自体は太字にする部分を動的に取得しなければなりません。

やり方的にはタイトルと内容を入力する部分を分けるという方法などがあげられますが、あまりスマートじゃないので、一行目がタイトルで二行目以降が内容としましょう!

下は例なので、UILabelに日記のような文章を代入してご紹介します!

UILabelのテキストに設定されている文章を、改行がある位置で文章を分解します。(プログラムでの改行は「\n」)

文章自体は配列で分割されるので、タイトルにしたい一行目は配列の0番目に格納されます。

なので、文章全体の0文字目からタイトルにしたい一行目の文字数分太字にするというプログラムとなっています。

このように行ってあげれば、タイトルが動的に変更されようとも、コードが自動的にタイトルだけを太字にしてくれるようになるというわけですね!

 

ちなみに実行画面は以下のようになります!

UILabelの文章を改行で分割

 

まとめ

基本的に開発では文章自体が動的に決まることが多いので、おまけの部分はよく使うかもしれません!

実際ふっさんも開発で書いたのはおまけにあるようなコードでした。

まぁ簡単なので、サクッと理解しちゃってください!

 

iPhoneアプリ開発Tipsカテゴリの最新記事