【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 つまり、自分自身の解釈だと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 =
続きを読む