【SwiftUI入門】Textの文字色を変える
この記事の目次
Text
SwiftUIとは何かについて説明したところで、実際にSwiftUIを使ってみましょう。
まずはTextについてやっていこうと思います。
以前にTextの文字を変えることはやったので、今回はもう少しだけ発展的な文字の色を変える方法についてやっていこうと思います。
まずは、Xcodeを開いてください。
Xcodeを開いたら、『Create a new Xcode project』を押してください。
『iOS』,『Single VIew App』を押して、『Next』を押しましょう。
するとプロジェクトの詳細を聞かれます。
Product Nameに『ChangeTextColor』と入力して、
『Next』を押しましょう。
すると保存する場所が聞かれるので、
保存したい場所を指定して、『Create』を押しましょう。
するとプロジェクトが作られます。
最初に記述されているコードでどのような表示になるのか確認してみましょう。
右から二番目のボタンを押してください。
その後に『Canvas』を押すことで
Resumeが表示されます。
Resumeを押しましょう。
すると、現在開かれているコードのプレビューが表示されます。
プレビューを見てみると『Hello, World!』という文字列が表示されていますね。
これは
| Text(“Hello, World!”) |
と対応しています。
Text()という関数は引数にとった文字列を表示させます。
この関数はSwiftUIを取り込むことにより使えるようになります。
| import SwiftUI |
と記述することでSwiftUIを取り込むことができます。
次に以前にもやったことですが、『Hello, World!』から『Hello, SwiftUI!』へと表示を変更してみましょう。
『World』の部分を
『SwiftUI』に変えるだけです。
コードを変更すると連動してプレビューの表示も変わります。
変わらない場合は、先ほどと同じ手順でプレビューを表示しなおしてください。
では、この文字列の色を変更してみましょう。
プレビューの『Hello, SwiftUI!』と表示されているテキストの上で『command(⌘)キー』を押した状態でクリックをしてみてください。
するとこのような画面が表示されるので、
『Show SwiftUI Inspector…』を押しましょう。
すると、細かな編集ができるようになります。
今回は色を変更したいので、『Color』を押して、
好きな色に変更してみてください。
今回は緑色にしようと思うので、『Green』を選択します。
すると文字の色が緑色に変わります。
コードを見てみると、テキストに
| .foregroundColor(Color.green) |
が追加されたのが分かりますね。
このようにプレビューから見た目を変更すると、それに対応したコードが追加されます。
今回の場合はTextに文字色を変える『.foregroundColor』が追加されました。
『.foregroundColor』のように『.~』を付け足すことでUIの変更をするもの『モディファイア』と呼びます。
また、逆にコードを記述することで見た目を変えることもできます。
試しにコードを変えて文字色を紫に変更してみましょう。
『Green』と記述されている部分を
『purple』に変更しましょう。
すると文字の色が紫色になりますね。
SwiftUIではこのようにして文字の色を変更することができます。