マガジンのカバー画像

Swiftでいこう！

585
本
楽しくプログラミング！Swiftはなんだか楽しい"ことば"です。
運営しているクリエイター
donguri

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

カードを並べて2枚ずつ開けて行ってマッチすればカードを消していくという操作ができてきました。次にアニメーション をつけて見栄えを良くしていきます。 最終的にはカードの配置をする画面、カードを配るボタン、シャッフルボタン、リスタートのボタンを以下のように配置していきその内容を書いていきます。 gameBodyにはランダムに並んだカード。 deckBodyにはカードを配るように一枚が配置してあり、HStackにはランダムにカードを配置するShuffleボタンと再スタートする

donguri

SwiftUIでいこう。 - モディファイア

画面に表示する部分で大きさ、動きなどカスタマイズする場合に使われるのがモディファイアです。例えばText()のモディファイアは以下のように"."をつけて書いたものとなります(これは文字を大きくします)。 .font(.largeTitle) このモディファイアを組み合わせたり、さらにカスタマイズをする時に使うのが"ViewModifier"ということになります。作ってみましょう。 プロトコルViewModifierに適合した関数を作れば使えるようになります。 stru

donguri

SwiftUIでいこう！- スタンフォード大学Lecture 7: ViewModifier Animation - 2

カードの中に一部欠けた円形をパスを使って書きました。次にカードの中に表示されている絵文字を動かします。アニメーション については以下詳しく解説されているサイトがあります。 この講義ではText()にmodifireをつけて動かします。 基本的な動きは回転です。これは .rotationEffect(Angle.degrees(card.isMatched ? 360 : 0)) とすれば良いのですが、これだけでは動きません。 .animation(Animat

donguri

SwiftUIでいこう！- スタンフォード大学Lecture 7: ViewModifier Animation - 1

Modifierとは、修飾するためのメソッドです。例えばText()のModifierをつけてみると、 Text(text) .font(.caption) .foregroundColor(.white) .padding(5) .background(.black) .font(.caption) .foregroundColor(.white) .pa

donguri

SwiftUIでいこう！- スタンフォード大学Lecture 6: Shape

カードのデザインを変えていきます。まずどんなものにするかというと 絵文字のバックに欠けた円形を入れていきます。 簡単に円形をカードの中央に配置するにはカードの形などを決めている struct CardView:View {} の中に if card.isFaceUp{ 　　　省略 Circle().padding(5).opacity(0.5) 　　　省略 } 追加してやればある程度の余白を持った透明円形が出てきます。 これは先ほどの目指した少し欠けた円形ではな

donguri

Swiftでいこう！- ちょっとTips。 3 - @ViewBuilder

@ViewBuilderを調べてみます。まず公式ドキュメント。 詳しく説明されているサイトです。 SwiftUIのVStackとHStackはクロージャーの中にViewコンポーネントを宣言的に実装できる。独自のビューコンテナを作ることができます。 その仕組みのキーとなるのが@ViewBuilderということです。 イニシャライザで@ViewBuilderのキーワードを付けて宣言することで使えるようになるようです。 init(@ViewBuilder content:

donguri

SwiftUIでいこう！- スタンフォード大学Lecture 6: Protocols Shapes

この講座ではまず、 AspectVGrid() を使えるようにしていきます。最終的には以下となります。 struct ContentView: View { @ObservedObject var game:EmojiGame var body: some View { AspectVGrid(items:game.cards,aspectRatio:2/3,content:{card in if card.isM

donguri

Swiftでいこう！- ちょっとTips。 - 配列２

indices 使い方です。まず配列を定義します。 let arr = [1,2,3,4,5,6,7] これを"for in文"で値を取り出します。 for i in 0..<arr.count{ print(arr[i])} これで全ての値(1,2,3,4,5,6,7)が取り出せます。これと同じことが for i in arr.indices{ print(arr[i])} できます。ちなみに arr.forEach{ print($0)} でも

donguri