Structure¶

UnitPoint¶

A dynamic data structure for representing a point in a view.¶

Declaration¶

@frozen struct UnitPoint : Hashable

Overview¶

What is a UnitPoint?¶

A UnitPoint is a 2D coordinate. Its x and y values are measured from 0.0 to 1.0, and represent fractions of the parent view. The positive x-axis runs from leading edge to trailing edge, and the positve y-axis moves from top to bottom.

There are two ways to make a UnitPoint: you can either customize the x and y coordinates, or you can use a predefined constant. SwiftUI has 10 UnitPoint constants:

How to use a UnitPoint¶

UnitPointss can be used to specify the anchor point for view transformations like rotationEffect(_:anchor:) and scaleEffect(_:anchor:). They are used commonly in Shapes and gradients.

For example, a LinearGradient accepts a UnitPoint for the startPoint and endPoint parameters. This example uses the top and bottom unit points.

struct ContentView: View {
    var body: some View {
        let colors = [Color.yellow, Color.orange]
        let gradient = Gradient(colors: colors)
        let linearGradient = LinearGradient(gradient: gradient,
                                            startPoint: UnitPoint.top,
                                            endPoint: UnitPoint.bottom)
        return Rectangle()
            .fill(linearGradient)
            .frame(width:100, height:100)
    }
}

A view displaying an orange square with linear gradient fill specificed by start and end UnitPoints.

To use a unit point as an anchor for rotation, pass it to the rotationEffect(_:anchor:) modifier:

struct ContentView: View {
    var body: some View {
        VStack(spacing: 200) {
            Text("I'm rotated around my center 👈")
                .rotationEffect(.degrees(22), anchor: UnitPoint.center)
                .border(Color.gray)
            Text("I'm rotated on the left 🍃")
                .rotationEffect(.degrees(22), anchor: UnitPoint.leading)
                .border(Color.gray)
        }
    }
}

A view with a VStack containing two text views, one of which has been rotated 22 degrees clockwise around it's center using UnitPoint, and one which has been rotated 22 degrees clockwise around its leading edge; both views have a unrotated gray border to show the rotation effect.

You can get the same effect by creating your own custom UnitPoints, using the init(x:y:) initialzer:

struct ContentView: View {
    let center = UnitPoint(x: 0.5, y: 0.5)
    let leading = UnitPoint(x: 0, y: 0.5)

    var body: some View {
        VStack(spacing: 200) {
            Text("I'm rotated around my center 👈")
                .rotationEffect(.degrees(22), anchor: center)
                .border(Color.gray)
            Text("I'm rotated on the left 🍃")
                .rotationEffect(.degrees(22), anchor: leading)
                .border(Color.gray)
        }
    }
}

A view with a VStack containing two text views, one of which has been rotated 22 degrees clockwise around it's center using custom UnitPoints, and one which has been rotated 22 degrees clockwise around its leading edge; both views have a unrotated gray border to show the rotation effect.

Availability¶

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics¶

Instance Method¶

hash(into:) Hashes the essential components of this value by feeding them into the given hasher.

Type Property¶

bottom The unit point at the middle of the bottom edge of a given view.

bottomLeading The unit point at the bottom leading corner of a given view.

bottomTrailing The unit point at the bottom trailing corner of a given view.

center The unit point at the center of a given view.

leading The unit point at the middle of the leading edge of a given view.

top The unit point at the middle of the top edge of a given view.

topLeading The unit point at the top leading corner of a given view.

topTrailing The unit point at the top trailing corner of a given view.

trailing The unit point at the middle of the trailing edge of a given view.

zero A unit point with x and y values of 0.

Initializer¶

init() Creates a unit point with x and y values of 0.

init(x:y:) Creates a unit point from x and y values.

Type Method¶

==(a:b:) Returns a Boolean value indicating whether two values are equal.

Type Alias¶

AnimatableData The type defining the data to animate.

Instance Property¶

animatableData The data to animate.

hashValue The hash value.

x The x coordinate of the point, measured in points.

y The y coordinate of the point, measured in points.