組み込みシェイプ
Rectangle、Circle、Capsule、RoundedRectangle を描画します。
「組み込みシェイプ」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Shapes Are Views
SwiftUI gives you ready-made shapes you can drop in like any view. They draw themselves and fill the space you give them. 🔷
The Rectangle
A Rectangle is the simplest shape: a plain box. It expands to fill whatever frame or container holds it.
Rectangle()
.fill(.blue)
.frame(width: 120, height: 60)The Circle
A Circle always draws a perfect round shape inside its frame. Give it a square frame for a clean, even circle.
Circle()
.fill(.green)
.frame(width: 80, height: 80)The Capsule
A Capsule is a pill shape with fully rounded ends. It is the go-to look for tags, chips, and buttons.
Capsule()
.fill(.orange)
.frame(width: 120, height: 44)RoundedRectangle
A RoundedRectangle is a box with softened corners. Set its corner radius to control how round those corners look.
RoundedRectangle(cornerRadius: 16)
.fill(.purple)Filling a Shape
Use fill to paint a shape with a solid color or even a gradient. Without a fill, a shape draws in the default style.
Circle()
.fill(Color.pink.gradient)Sizing with frame
Shapes have no natural size, so wrap them in a frame to set width and height. The shape grows to fit it.
Rectangle()
.frame(width: 100, height: 100)Ellipse for Ovals
An Ellipse stretches a circle to match its frame. In a wide frame it becomes a smooth oval rather than a round circle.
Ellipse()
.fill(.teal)
.frame(width: 140, height: 70)Shapes as Backgrounds
Place a shape behind content with the background modifier to build cards and badges. Content sits neatly on top.
Text("New")
.padding(8)
.background(Capsule().fill(.red))Clipping to a Shape
Use clipShape to crop an image or view into a shape. A square photo becomes a perfect round avatar.
Image("avatar")
.clipShape(Circle())Shapes Build UI
Combined with fills and frames, these shapes become buttons, cards, badges, and avatars. They are your visual toolkit. ✨
Quick Check
You want a pill-shaped tag with fully rounded ends. Which shape fits best?
Recap: Built-in Shapes
You can now draw Rectangle, Circle, Capsule, RoundedRectangle, and Ellipse, then fill and size them. Great progress!
よくある質問
「組み込みシェイプ」レッスンは無料ですか？
はい。「組み込みシェイプ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「組み込みシェイプ」で何を学びますか？
Rectangle、Circle、Capsule、RoundedRectangle を描画します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「組み込みシェイプ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。