【SwiftUI】 タイトルTextの下にサブタイトルTextをつける / Textの間に余白を入れる

この記事の概要

SwiftUIで、.subheadLineプロパティを使って、サブタイトルを設定すると同時に、VStackや Hstackの使い方もマスターします。

目次

  • この記事の概要
  • 目次
  • 前回からの変更点
  • タイトルTextにサブタイトルを導入しよう
  • サブタイトルにHStackViewを導入してViewを分割しよう
  • 余白を入れよう
  • まとめ

前回からの変更点

よくよく考えたら、ハイキュー!!のロゴってオレンジじゃん.........

ということで修正
            Text("ハイキュー!!")
                .font(.title)
                .fontWeight(.heavy)
                .foregroundColor(Color.pink)

から、
            Text("ハイキュー!!")
                .font(.title)
                .fontWeight(.heavy)
                .foregroundColor(Color.orange)

に修正。

タイトルTextにサブタイトルを導入しよう

まず、ライブプレビュー画面になっている方は、スマホの横に青い円ボタンがあると思うので、それをクリックしましょう。そのボタンをクリックすれば、再生ボタンみたいなアイコンになると思うので、そうなっていれば大丈夫です〜！

続いて、ハイキュー!!のテキストをクリックします。ここで注意しなくちゃいけないのは、普通にクリックするのではなく、「⌘commandキー+クリック」でクリックすることです。普通にクリックしても、出てこないので要注意してください。


[図1]クリックすると出てくるリスト

こんな画面が出てきましたらですね、[Embed in Vstack]をクリックしてあげます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("ハイキュー!!")
                    .font(.title)
                    .fontWeight(.heavy)
                .foregroundColor(Color.orange)
        }
    }
}

そしたら、TextなどがVStackブロックで囲まれると思います。上記コードになっていれば正解です。押し間違えたり、コードが違う！って方は、⌘+Zでやり直しましょう。

上記コードの.foregroundColor(Color.orange)というコードの下に空白行を1行挿入します。そしたら、XCodeの右上にある[+]ボタンをタップしましょう。

[図1-2] +ボタン
そしたらこんな画面が出てくると思うので、[Text]を選択してあげます。
[図1-3]Textを挿入
struct ContentView: View {
    var body: some View {
        VStack {
            Text("ハイキュー!!")
                    .font(.title)
                    .fontWeight(.heavy)
                .foregroundColor(Color.orange)
            Text("TO THE TOP")
        }
    }
}

自動挿入されたTextに「TO THE TOP」を挿入してあげます！

サブタイトルにHStackViewを導入してViewを分割しよう

続いてTO THE TOP textを、⌘command+クリックしてあげます。
[図2] Embed in HStack
そしたら例の如く、こんなリストが出てくるので[Embed in HStack]をクリックしてあげます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("ハイキュー!!")
                    .font(.title)
                    .fontWeight(.heavy)
                .foregroundColor(Color.orange)
            HStack {
                Text("TO THE TOP")
            }
        }
    }
}

すると、Text("TO THE TOP")が、ブロック{}で囲まれると思いますので、Text("TO THE TOP")の下に1行空白を開けて、XCode右上の+ボタンを押して、Textを挿入してあげましょう。手順は上に書いた通りです。

私は、絶賛放送中というTextを挿入しました。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("ハイキュー!!")
                    .font(.title)
                    .fontWeight(.heavy)
                .foregroundColor(Color.orange)
            HStack {
                Text("TO THE TOP")
                Text("絶賛放送中")
            }
        }
    }
}

余白を挿入しよう

[図3] Subheadlineを挿入
TO THE TOPと絶賛放送中の二つのTextを用意したら、その二つのラベルをクリックしましょう。前回の記事でも紹介した通り、Textの各種プロパティは右のメニューのドロップダウンでいじることができるので、そこでいじっちゃいましょう。

二つのTextのfontを、.subheadlineに設定します。

            HStack {
                Text("TO THE TOP")
                    .font(.subheadline)
                Text("絶賛放送中")
                    .font(.subheadline)
            }

設定したら上記コードのような感じになると思いますので、

            HStack {
                Text("TO THE TOP")
                    .font(.subheadline)
　　　　　　　　　 Spacer()
                Text("絶賛放送中")
                    .font(.subheadline)
            }

二つのTextの間にSpacer()を挿入してあげます。

またVStackをクリックした上で、サイドメニューの今、青くなっているボタンを押します。こうすることで、VStackの中の要素（今回はText）の寄せ（左寄せ、中央揃え、右寄せ）などを設定することができます。

[図4] Alignmentの設定
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("ハイキュー!!")
                .font(.title)
                    .fontWeight(.heavy)
                .foregroundColor(Color.orange)
            HStack {
                Text("TO THE TOP")
                    .font(.subheadline)
                Spacer()
                Text("絶賛放送中")
                    .font(.subheadline)
            }
        }
　　　　//ここに .padding()を追加
    }
}


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

ここまでコードがかけたらもう一息！

Vstackのブロック外に、.padding()プロパティを追加してあげます。.paddingの値を、
[図4] paddingの値の設定
このように変更してあげることもできます！

ここまでやると、
[図4-2] Paddingを設定したらいい感じ

こんな感じで、いい感じにできていたら成功です！
お疲れ様でした。

まとめ

今回のコードをまとめると、こんな感じです！
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 0.0) { //spacingの値は任意
            Text("ハイキュー!!")
                .font(.title)
                .fontWeight(.heavy)
                .foregroundColor(Color.orange)
            HStack {
                HStack {
                    Text("TO THE TOP")
                        .font(.subheadline)
                    Spacer()
                    Text("絶賛放送中")
                }
            }
        }
    .padding()
    }
}

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

個人的に余白自動設定が、SwiftUIで導入されたことがありがたいですね。ナンバリング版SwiftだとパーツひとつひとつにConstraiantsを設定しなくちゃいけなくて、失敗したらすぐにConstraiants矛盾が起きて、レイアウト崩れが起きましたからね〜

前回の記事までにやった内容と比較すると、一気に難易度があがりましたが、一歩一歩着実にプロパティを付与することで、ちゃんと理解できました！

ではまた。

今回学習したこと

  1. VStackの使い方
  2. HStackの使い方
  3. padding(), Spacer()の設定方法

参考資料

・Swift UI Tutorial : Creating and Combining Views - Apple
https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

コメント

コメントを投稿

このブログの人気の投稿

【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つ 三番目の階層は半角スペー...
続きを読む