【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 つ...
続きを読む

【Rails5】SyntaxError: (): mapping values are not allowed エラーの解決法

この記事の概要 SyntaxError: (<unknown>): mapping values are not allowed 上記エラーに対応するために調べたところ、.ymlファイルのインデントが原因であることがわかった。 目次 この記事の概要 目次 試そうとしたこと エラーの分析 ja.ymlを見てみる 解決策 まとめ 試そうとしたこと Rails5で簡単なTaskアプリケーションを作って学んでいたのだが、 SyntaxError: (<unknown>): mapping values are not allowed  エラーにハマった。 エラーの分析 can not load translations from /Users/*****/Task_App/config/locales/ja.yml: # ): mapping values are not allowed in this context at line 15 column 7 どうやらja.ymlにエラーがあるらしい。 ymlファイルは、エラーメッセージが日本語を出すためのrawファイルであり、 GitHubのrails-|18nリポジトリにあるファイルを適当にダウンロードしたものである。 ja.ymlなので日本語設定である。 en.ymlだと英語設定になる。 ja.ymlファイルを見てみる （中略） 　 　models: 　　 task: タスク 　 　attributes: 　　 task:          id: ID 　　 name: 名称 　　 description: 詳しい説明 　　 created_at: 登録日時 　　 updated_at: 更新日時 んー？ 15行目あたりにエラーがあるらしいが、特に変わったところは見当たらない。 何がおかしいのだろうかと思って色々と検索してみた。 解決策 どうやら、ymlファイルにはスペースの数が決まっているようだ。 一番最初の階層のスペースゼロだとすると、 最初の階層はスペース無し。二番目の階層は半角スペース2つ 三番目の階層は半角スペー...
続きを読む