Compose with Stacks and Shapes

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.

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.

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.

Step 1

Apply what you’ve learnt 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 learnt to add a shirt, place it correctly on the screen and give it a colour.

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 fringe 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.

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.