Skip to content

Instantly share code, notes, and snippets.

@MrRooni

MrRooni/Aligning text across List rows.md

Last active July 3, 2020 13:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MrRooni/3ce8e377e21f424299b69b945f973092 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MrRooni/3ce8e377e21f424299b69b945f973092 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. MrRooni revised this gist Jul 3, 2020. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion Aligning text across List rows.md
    View file
    Original file line number Diff line number Diff line change
    @@ -45,4 +45,6 @@ This works!

    ![](https://user-images.githubusercontent.com/170720/86473800-962e5780-bd0f-11ea-80b0-9292ab8b591f.png)

    However, this approach feels kludgy. Is there a better way, perhaps using alignment guides?
    However, this approach feels kludgy.

    **My question to you, dear forum frequenters: Is there a better way? Perhaps using alignment guides or another tool I'm not yet aware of?**
  2. MrRooni revised this gist Jul 3, 2020. 1 changed file with 19 additions and 5 deletions.
    24 changes: 19 additions & 5 deletions Aligning text across List rows.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,9 @@
    I have a basic List row I am building that has a large number on the leading edge followed by a title and subtitle next to it:

    ![](https://user-images.githubusercontent.com/170720/86473466-f1137f00-bd0e-11ea-92b3-1d69a7445f1f.png)

    I started with a simple implementation, like so:

    ```swift
    HStack {
    Text("26")
    @@ -14,21 +18,31 @@ HStack {
    }
    ```

    The trouble I'm running into is
    However, because different numbers have different widths my alignment is less than ideal when viewed in the List:

    ![](https://user-images.githubusercontent.com/170720/86473547-1dc79680-bd0f-11ea-8322-322f13fca003.png)

    To correct this I ended up using a GeometryReader to grab the height of the row, pad it by 20%, and set that as the width of the number text, like so:

    ```swift
    GeometryReader { geometry in
    HStack {
    Text(weekNumberDateFormatter.string(from: self.note.identifier))
    Text("26")
    .font(.title)
    .frame(width: geometry.size.height * 1.2)
    VStack(alignment: .leading) {
    Text(self.note.firstTextRowText())
    Text("Some title")
    .font(.body)
    .bold()
    Text(self.note.secondTextRowText())
    Text("Some subtitle")
    .font(.caption)
    }
    }
    }
    ```
    ```

    This works!

    ![](https://user-images.githubusercontent.com/170720/86473800-962e5780-bd0f-11ea-80b0-9292ab8b591f.png)

    However, this approach feels kludgy. Is there a better way, perhaps using alignment guides?
  3. MrRooni created this gist Jul 3, 2020.
    34 changes: 34 additions & 0 deletions Aligning text across List rows.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    I have a basic List row I am building that has a large number on the leading edge followed by a title and subtitle next to it:

    ```swift
    HStack {
    Text("26")
    .font(.title)
    VStack(alignment: .leading) {
    Text("Some title")
    .font(.body)
    .bold()
    Text("Some subtitle")
    .font(.caption)
    }
    }
    ```

    The trouble I'm running into is

    ```swift
    GeometryReader { geometry in
    HStack {
    Text(weekNumberDateFormatter.string(from: self.note.identifier))
    .font(.title)
    .frame(width: geometry.size.height * 1.2)
    VStack(alignment: .leading) {
    Text(self.note.firstTextRowText())
    .font(.body)
    .bold()
    Text(self.note.secondTextRowText())
    .font(.caption)
    }
    }
    }
    ```