投稿

ラベル（Text）が付いた投稿を表示しています

【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にサブタイトルを導入しよう まず、ライブプレビュー画面になっている方は、スマホの横に青い円ボタン...
コメントを投稿
続きを読む

【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...
コメントを投稿
続きを読む

【SwiftUI】alignment(左寄せ・右寄せ)が効かない

イメージ
この記事の概要 VStack内のTextの.multilineTextAlignmentプロパティが、全然効かなくて、色々と試行錯誤をしました。とりあえずはそれっぽい仕様が出来たのですが、あまり有効な手段ではないです。※この問題に対する解決法は現在調査中です。分かり次第追記します。 目次 この記事の概要 目次 やろうとしたこと コード全文 対処法 懸念点 まとめ 参考文献 やろうとしたこと この記事を執筆した2020年3月23日現在、週刊少年ジャンプ連載の古舘春一さん原作のアニメ「ハイキュー!!」シリーズの、4期にあたる「ハイキュー!! TO THE TOP」が放送されていたので、SwiftUIの練習がてら、このアニメを紹介する簡単なアプリケーションのUIを、実装しようとした。 [図1]現在のライブプレビュー画面 ©古舘春一／集英社・「ハイキュー!!」製作委員会・MBS さて見て分かる通り、すべての要素が中央揃えになっていることが分かるだろうか。自分はこのデザインはあまり意図しておらず、Text:作品概要の位置を左寄せに、Text:絶賛放送中の位置を右寄せにしようとした。 コード全文 import SwiftUI struct ContentView : View {     var body : some View {         VStack (alignment: . center , spacing: 10.0 ) {             Text ( "ハイキュー!! TO THE TOP" )                 . font (. title )                 . fontWeight (. black )                 . f...
コメントを投稿
続きを読む