【SwiftUI】初心者向け！文字の色・太さ・フォントを変えるには

この記事の概要

SwiftUIでラベルの文字（Text）の種類・色・太さを変更する方法を、この記事にまとめました。

目次

  • この記事の概要
  • 目次
  • SwiftUIって？
  • プロジェクトをビルドする
  • 文字の内容を変える
  • 文字の種類を変える
  • 文字の色を変える
  • 文字の太さを変える
  • まとめ
  • 参考文献

Swift UIって？

米Appleは6月3日（日本時間6月4日未明）にカリフォルニア州サンノゼで開催したイベント「WWDC19」にて、Swift言語を用いて効率的にユーザーインターフェイスを定義できるUIフレームワーク「Swift UI」を発表しました。
引用：https://www.publickey1.jp/blog/19/appleswift_uiuiwwdc19.html

SwiftUIを従来のSwiftと比較して、やはり着目すべきなのは「ライブプレビュー機能」の実装でしょうか。従来のSwiftと比べて、ビルド時間が大幅に少なくなると思います！

プロジェクトをビルドする

Swiftの上部メニューバーの[Project]>[New Project]より、[Single View App]を選択します。
※今回は分かりやすさ重視で、この[Single View App]を選択していますが、ここで選択するものは基本的に、自分のニーズに合致するアプリを選択するようにしましょう。

[図1-1] Single View Appを選択する 



その後、[Product Name]に任意のプロジェクト名を入力します。
※ここでの[Product Name]は、好きな名前にして構いません。ただし、英数字のみを使い、ひらがな・カタカナ・漢字・記号などを使うのは避けましょう。

名前をつけ終わったら、[User Interface]内にあるドロップダウンリストをクリックし、[ Swift UI ]を選択します。

[図1-2] プロジェクト名とSwift UI を指定してビルド

すると、こんな画面が立ち上がったと思います。
[図1-3] プロジェクト起動画面

文字の内容を変える

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!!")
    }
}

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

最初のコードはこんな感じだと思います。

一番最初のグレーの「//」で囲まれた部分（※これをコメントアウト、と言います）は不要なので削除しちゃいましょう。
続いて、5行目に着目。

  Text("Hello, World!!")

このTextというところに着目します。Swift UIでは、「"  " (ﾀﾞﾌﾞﾙｸｫｰﾃｰｼｮﾝ)」で囲まれた部分を、文字列として認識します。試しに、Hello, World!!を別の文字列に変えてみましょう。

Text("ハイキュー!!")

すると、右側のiphoneのライブプレビュー画面が、変わったのが分かりますでしょうか。
[図2] Textの文字列を変える
ナンバリング版SwiftだとUILabelで定義していたものが、今回からはTextに置き換わるみたいです。

文字の種類を変える


Textの文字の種類を変えるには、.fontプロパティを使用します。

最初のコードに戻ります。
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!!")
    }
}

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

Textの下に .font(.title)を入れてみましょう。
struct ContentView: View {
    var body: some View {
        Text("Hello, World!!")
    }
}


struct ContentView: View {
    var body: some View {
        Text("ハイキュー!!")
            .font(.title)
    }
}

そうすれば、ライブプレビューの文字が若干大きくなると思いますので、そうなれば成功です。

文字の色を変える
Textの文字の色を変えるには、.foregroundColorプロパティを使用します。

今回はピンク色にしてあげたいので、.foregroundColor()プロパティの中にColor.pinkと入れてあげます。
struct ContentView: View {
    var body: some View {
        Text("Hello, World!!")
　　　　　　　 .foregroundColor(Color.pink)
    }
}


こちらも、ライブプレビューで文字の色がピンク色になると思います。色が変わりましたでしょうか？

文字のフォントを変える

文字のフォントを変更するためには、.fontweight()プロパティを使用します。.fontweight()プロパティの中に(.heavy)を使用することで、今回は太字になったと思います。
struct ContentView: View {
    var body: some View {
        Text("ハイキュー!!")
            .fontWeight(.heavy)
        
    }
}

ライブプレビュー画面で確認が取れましたか？

ちなみに、プロパティは以下のように併用することもできます。
[図3]Textにプロパティを併用する

これで今回の記事は終わりです！お疲れ様でした。

まとめ

ちなみに、文字の種類・太さ・色を変えるために今回はコードを書きましたが、別にわざわざコードを書かなくても、サイドバーにあるこのドロップダウンリストからなら簡単に変更できますよ！

[図4]ドロップダウンリストからプロパティを入れる

ナンバリング版Swiftより、ラベルの書式設定が直感的かつ簡単にできるところがありがたいな、と思いました。コードも簡潔で読みやすいので、冗長にならなくていいですね。ナンバリング版Swiftだと、ラベルに名前を定義してあげて、サイクルの中でプロパティを設定してあげなくちゃいけなかったので、どうしてもコードが長くなってしまいますが、SwiftUIならそんな心配はいらなさそう！


参考文献

・Swift UI Tutorials Creating And Combining Views- Apple
・Apple、新フレームワーク「Swift UI」発表。簡潔なコードとドラッグ＆ドロップでUIを構築、デバイスでの即時プレビュー。WWDC19

コメント

コメントを投稿

このブログの人気の投稿

【Unity】シーンギズモがデフォルトで表示されない時

イメージ
こんにちは。 先日から Unityを触り始めている私（てぃー）です。 さて、  Unityではデフォルトで表示されている「シーンギズモ」ですが、 新規プロジェクトを立ち上げたところ、表示されていなくて困りました。 ggっても解決策が出てこない...どころか、 シーンギズモっていう単語を使っているページ・解説しているページが出てこない！笑（unity 3dのofficial documentを除く） そう言う訳でちょっと困りましたので、解決策を簡単にまとめてみました〜。 ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ 　1. シーンギズモってそもそもなんやねん？って話 　2. 解決策 　3. まとめ 　1. シーンギズモってそもそもなんやねん？って話 [図]シーンギズモ シーンギズモはデフォルトのプロジェクトを立ち上げた時に、画面（画面というよりかはScene）の右上に出てくる図のような物体です。赤色・緑色・青色の三角コーンから成立しています。 シーンギズモはとても便利で、「y」とラベルが貼られた緑色のコーンをクリックすると、現在sceneで製作中のオブジェクトを上面から見ることが出来ます。 こう言う風に、[x],[y],[z]の、3つの軸からsceneを見ることができる優れものなんです。 　2. 発生している現象と解決策 [図]発生している現象 新規プロジェクトを作ろうとした時に、シーンギズモがデフォルトで表示されるようになるはずだ・・・と思いきや、表示されていなくて困りました。 前述したとおり、色々探したんですが解決策が見つからなくて困った・・・。 [図]解決策 で、どうやって解決したかというと。 [scene]バーにある[2D]ボタンを押すことです！ sceneの上部を見ると、デフォルトだと[Shaded]ってなってる場所と、電球やらなんやらのアイコンがある場所のちょうど間に、[2D]ボタンがありますよね！ これがオンになっていると、シーンギズモは出てこないみたいです。 　3. まとめ でも、なんで2Dモードがオンになってたんだろう・・・と考えていたのですが、 そういえば自分、このプロジ
続きを読む

【Swift4】argument passed to call that takes no arguments の解決策

イメージ
今日、Swiftでじゃんけんアプリを作っていた時に、この「 argument passed to call that takes no argument s 」というエラーが出たのでエラーが出た状況と解決策をまとめていこうと思う。 argument passed to call that takes no arguments ◇ 目次 ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ ◇ 　1. 実現しようとした事 　2. Argument Passed to call that takes no argumentsとはどんなエラー？　 　3. 解決策     4. まとめ 　1. 実現しようとした事 [図] myJankenViewControllerで発生したエラーの詳細  import UIKit   class myJankenViewController: UIViewController {       var selectedNumber: Int ( arc4random ( 2 ))                              !   Argument passed to call that takes no arguments     （以下省略）  } 「グー」「チョキ」「パー」の３種類の出目をCPUが出してくれる、そんなじゃんけんアプリを作っていたのだが、 相手のCPUの出目をarc4random関数で指定してあげようと思ったところ、このようなエラーが出てしまった。 　2.  Argument Passed to call that takes no arguments とはどんなエラー？　 日本語訳してみると、「 呼び出すために渡される引数は引数を取りません 」というのが妥当だろうか。 技術用語マシマシの英文翻訳は本当に難しい・・・orz つまり、自分自身の解釈だとclass直下に書く変数（今回はselectedNumber）は、viewDidLoad()や@IBAction func関数などで、呼び出される事がほとんどだと思う。 そんな変数を定義する時なおかつarc4randomを使うのであれば
続きを読む

【Swift4】iOSシミュレータでカメラとフォトライブラリが起動しない？試してみてわかったこと

イメージ
この記事の概要 以前同様の問題が発生したためにteratailに投稿したことがあるのだが、ここでももう一度まとめておこうと思う。一応、2018/11/19に私が投稿したteratailの記事を貼っておくので、 興味のある方はご一読ください。 iOSシミュレータでカメラとフォトライブラリが起動しない (https://teratail.com/questions/159144) 目次 この記事の概要 目次 実現したいこと 問題 解決策1:シミュレーターでうまく行かない場合 解決策2:実機でうまく行かない場合 まとめ 参考文献 実現したいこと Swift4のプロジェクトで、カメラ機能の実装を行いたいと思った。また、撮影した写真をアプリから呼び出せるようにアクションコントローラーを追記して、もしエラーが発生しているようなのであれば例外処理エラーでユーザーに知らせる、といった機能を実装するために、プロジェクトを作成した。そのためにSwiftで以下のようなコードを書いた。 class AddItemViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {   (中略)   @IBAction func selectImage(){   let actioncontroller = UIAlertController(title: "画像を選択", message: "選択してください", preferredStyle: .actionSheet)   let cameracontroller = UIAlertAction(title: "カメラ", style: .default) { (action) in if UIImagePickerController.isSourceTypeAvailable(.camera) == true{  let picker = UIImagePickerController() picker.sourceType =
続きを読む