Home

Compose with Stacks and Shapes

Build with Stacks and Shapes

Compose with Stacks and Shapes

Code a self portrait using stacks, shapes and modifiers.

Estimated time to complete this tutorial:

35 mins

Explore SwiftUI tools.

Use the following tools to make a self-portrait.

Use stacks and shapes.

Use a depth stack and add a shape for your head.

Step 1

Change the VStack to a ZStack (depth stack).

Step 2

Open the list of views and scroll to the bottom to find the capsule, circle, ellipse, rectangle and rounded rectangle shapes.

Step 3

Add a shape to the ZStack for your head. Use a RoundedRectangle for a square face, or a Capsule for a rounder face.

Tip

Rounded rectangles require a corner radius.

Adjust the size of a shape.

Use the frame modifier to specify the size of a shape.

Step 1

Add a blank line below the capsule, then open the list of modifiers.

Step 2

Search for frame and tap to add it to your code.

Step 3

Fill in the approximate values for height and width to create your head.

Add colour.

Use the foregroundStyle modifier to give the shape a colour.

Step 1

Add a blank line below frame, then open the list of modifiers.

Step 2

Type foregroundStyle into the search bar. Tap it to add it to your code.

Step 3

To change the colour, select the code inside the parentheses and open the list of colours.

Step 4

Tap any colour to add it to your code.

Tip

Optionally, create your own colour. Choose one of the code snippets, then edit the values to match your skin tone.

Shift a view.

Add a neck, then shift it down using offset.

Step 1

Apply what you’ve learned to add a rectangle for your neck and adjust the size with a frame modifier.

Step 2

Add a blank line below the rectangle, then search for offset in the list of modifiers.

Step 3

Tap offset and edit the value to shift the shape down. Optionally, delete any parameters you don’t use.

Step 4

Move the neck under the head.

Select the rectangle and any modifiers you added. Cut and paste the code to the top of the depth stack. Then change the colour to match your head.

Step 5

Apply what you’ve learned to add a shirt, place it correctly on the screen and give it a colour.

Trim a shape.

Trim a shape to create bangs or short hair.

Step 1

Add a circle for your hair. Use frame to make it about the same width as your head or slightly larger.

Step 2

Add a blank line below the circle. Type .trim and tap return when it appears in code completion.

Note, the trim modifier must come directly below a shape.

Step 3

Experiment with values for where the trim should start and end.

Step 4

Adjust the location of the bangs or short hair. Continue adding any remaining elements to complete your hair.

Tip

If you have more than ten views in a stack, you’ll get an “Extra arguments at position…” warning.

If this happens, group elements like you see here.

Add a shadow.

Use a shadow to separate your head and neck.

Step 1

Locate the shape that creates your head in the code. Add a blank line below the shape, then search for shadow in the list of modifiers.

Step 2

Edit the radius of the shadow. Experiment with different values to see how it looks.

Tip

Optionally, add a colour for the shadow.

Add a background colour.

Add a background colour for your self portrait.

Step 1

Add a blank line at the top of your ZStack, then open the list of colours. Tap a colour to add it to your code.

Tip

Optionally, add an opacity modifier to dim the background colour.

Be inspired.

Explore tried-and-true resources from educators and find fresh ideas to enhance your own lessons.

Visit the Forum

Explore more.

Discover more projects designed to help you teach coding and app development.

Was this helpful?

How likely are you to recommend this project to others?

1 – not at all likely,5 – extremely likely
Sign in