マガジンのカバー画像

SwiftUIでいこう!

229
SwiftUIで簡単、プログラミング! 少しずつ理解していきます。
運営しているクリエイター

2021年10月の記事一覧

SwiftUIでいこう!- スタンフォード大学Lecture 5: Properties Layout @ViewBuilder

SwiftUIでいこう!- スタンフォード大学Lecture 5: Properties Layout @ViewBuilder

この回ではアクセスコントロールの追加、構造体名の変更、計算プロパティ(computed property)でコードをスリムに、あとはGeometryReader でレイアウトを決めていきます。

まずprivate(set)を理解する必要があります。読み取り専用とすることができます。

アクセスコントロールを説明して変更していきます。

typealiasを使ってわかりやすいコードとしています。

もっとみる
SwiftUIでいこう!- スタンフォード大学Lecture 4: Game Logic 2

SwiftUIでいこう!- スタンフォード大学Lecture 4: Game Logic 2

初めに作っていたContentViewのコードをViewModelで置き換えてカードを表示できるようになりました。

神経衰弱ゲームなので、タップしてカードを裏返し、正解の判定などゲームとして遊べる部分の実装をしていきます。

構造体CardView()で以下カードの状態を決めています。

card.isFaceUp

の真偽で表、裏を表示させるようにしています。

if card.isFac

もっとみる
SwiftUIでいこう!- スタンフォード大学Lecture 4: Game Logic

SwiftUIでいこう!- スタンフォード大学Lecture 4: Game Logic

続いて先に作ってあるContentView等にMVVMで作ったクラスを使って修正していきます。

まず、起動するファイルを決めている以下の構造体を作っていきます。

import SwiftUI@mainstruct SampleAppApp: App { var body: some Scene { WindowGroup { ContentView()

もっとみる
SwiftUIでいこう!- スタンフォード大学Lecture 3: MVVM

SwiftUIでいこう!- スタンフォード大学Lecture 3: MVVM

神経衰弱ゲームを構造を考えながら組み上げていきます。

Model, ViewModel , Viewの3つの構造を作って機能させます。MVVMについては以下のサイトがわかりやすく紹介されています。

このゲームをMVVMで組み上げます。まずViewの役割を持つCntentView()以外の基本的部品を見ていきましょう。

基本の構造//Model

modelは部品の構造を書き出していきます。今

もっとみる
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 5 Grid。

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 5 Grid。

HStackで横向きにカードを並べていましたが、ここで下の方にもカードを並べたいのでHStackからLazyVGridに変更します。

GridItem()

を入れ込むことで行を決めます。

LazyVGrid(columns:[GridItem(),GridItem(),GridItem(){ ForEach(emojis[0..<emojicount], id:

もっとみる
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 4 ボタン配置など。

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 4 ボタン配置など。

絵文字の数を決める変数を作ります。

var emojicount = 4

これで絵文字の数をコントロールします。

ForEach(emojis[0..<emojicount], id: \.self){emoji in CardView(content:emoji) }

絵文字を増やしたり、減らしたりするボタンを作ります。

もっとみる
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 3

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 3

"CardView()"をうまく使う
いろんな絵文字に対応するため変数を作ります。

var content:String

変数"content"に入れた絵文字データが反映されるようにします。

Text(content)

変数の部分を変更したもの全文は以下となります。

struct CardView:View { var content:String @State var

もっとみる
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 2

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 2

"struct CardView"を作りこみstruct CardView:View { var body: some View{ ZStack{ RoundedRectangle(cornerRadius: 25.0) .stroke(lineWidth: 3) Text("✈️").foregroundColo

もっとみる
SwiftUIでいこう!- スタンフォード大学Lecture 2 - 1

SwiftUIでいこう!- スタンフォード大学Lecture 2 - 1

"struct CardView:View"で機能をまとめる
続きをやっていきます。Lecture 1の最後で以下の表示となっています。

カードをたくさん表示することが必要なのでまずはは、今表示しているものを分割、水平方向(左右両方:横方向)に増やしていきます。

横方向に向け増やしたい場合は"HStack"を使います。これを使って、

HStack{ ZStack{

もっとみる
SwiftUIでいこう!- スタンフォード大学に学ぶ。 - Lecture 1

SwiftUIでいこう!- スタンフォード大学に学ぶ。 - Lecture 1

2021年版が公開されているのででザッとやっていきたいと思います。神経衰弱ゲーム作りが題材となっていてSwiftUIで説明されています。

Lecture1:今回作るゲームの内容とXcodeの全体的な使い方を解説していき、大まかな流れを理解していく感じです。使うソフトはXcode12.5beta3版で新しいプロジェクトを作っていき、その内容についての講義になっています。シミュレーターで確認しながら

もっとみる