マガジンのカバー画像

SwiftUIでいこう!

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

#stanford

SwiftUIでいこう!- スタンフォード大学Lecture 8: Animation Demonstration

SwiftUIでいこう!- スタンフォード大学Lecture 8: Animation Demonstration

カードを並べて2枚ずつ開けて行ってマッチすればカードを消していくという操作ができてきました。次にアニメーション をつけて見栄えを良くしていきます。

最終的にはカードの配置をする画面、カードを配るボタン、シャッフルボタン、リスタートのボタンを以下のように配置していきその内容を書いていきます。

gameBodyにはランダムに並んだカード。

deckBodyにはカードを配るように一枚が配置してあり

もっとみる
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 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) }

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

もっとみる