How to center the tags in their containing view

[spnkr]

Is there a way to center the cloud of tags, like this?

[gordan-glavas-codecons]

It's theoretically possible, but not with this implementation, at least not without making it a lot more complex.

Right now, it works by adjusting the alignmentGuide of each item so that it sits right after the previous one, or below the leading one if it's too long for the current line, and this works with leading alignment only. You can change it to support trailing alignment by mirroring the current algorithm, but centering is a different ballgame.

To center, you'd have to "push" the views from the centerline in both directions, making the computations more complex. You'd start off with the first item being aligned dead center in its row, and then the next one would push it to the left by half of its width, and so on for all other items that can sit on the same line. This naturally requires you to track all the positions for the same row. Again, definitely doable, just a bit more difficult and not really a tweak that can easily be thrown in the current implementation.

Let me know if you have any success with it!

[kitlogan]

Hi! I am looking to change this to support trailing alignment, as you outline above.

I think I have reversed the algorithm... but I still get exactly the same result in my View (left\leading aligned)

   private func content(in g: GeometryProxy) -> some View {
    var itemXPosition = g.size.width
    var height = CGFloat.zero
    var lastHeight = CGFloat.zero
    let itemCount = items.count
      return ZStack(alignment: .topTrailing) {
          ForEach(Array(items.enumerated()), id: \.offset) { index, item in
            viewMapping(item)
              .padding([.horizontal, .vertical], itemSpacing)
              .alignmentGuide(.trailing, computeValue: { d in
                if (itemXPosition - d.width < 0) {
                    //newline
                    print("newline")
                  itemXPosition = g.size.width
                  height -= lastHeight
                }
                lastHeight = d.height
                let result = itemXPosition
                  print("This xPos: \(result)")
                if index == itemCount - 1 {
                  itemXPosition = g.size.width
                } else {
                  itemXPosition -= d.width
                    print("Next xPos: \(itemXPosition)")
                }
                return result
              })
              .alignmentGuide(.top, computeValue: { d in
                let result = height
                if index == itemCount - 1 {
                  height = 0
                }
                return result
              })
        }
      }
      .background(viewHeightReader($totalHeight))
  }

What am I doing wrong? Am I missing something?
NB I have altered the name of "width" to "itemXPosition"

Thanks!

[gordan-glavas-codecons]

@kitlogan You got the same result because you mirrored everything - both the alignments and the x position computations. Altering just one of those (e.g, x pos computations in the example below) works fine:

  private func content(in g: GeometryProxy) -> some View {
    var itemXPosition = CGFloat.zero
   var height = CGFloat.zero
   var lastHeight = CGFloat.zero
   let itemCount = items.count
     return ZStack(alignment: .topLeading) {
         ForEach(Array(items.enumerated()), id: \.offset) { index, item in
           viewMapping(item)
             .padding([.horizontal, .vertical], itemSpacing)
             .alignmentGuide(.leading, computeValue: { d in
               if (itemXPosition + d.width > g.size.width) {
                   //newline
                   print("newline")
                 itemXPosition = 0
                 height -= lastHeight
               }
               lastHeight = d.height
               let result = itemXPosition
                 print("This xPos: \(result)")
               if index == itemCount - 1 {
                 itemXPosition = 0
               } else {
                 itemXPosition += d.width
                   print("Next xPos: \(itemXPosition)")
               }
               return result + d.width
             })
             .alignmentGuide(.top, computeValue: { d in
               let result = height
               if index == itemCount - 1 {
                 height = 0
               }
               return result
             })
       }
     }
     .background(viewHeightReader($totalHeight))
 }

[Gelembjuk]

So, did you find a way to center the view?
Also side question. Is it possible to have buttons instead of just texts?

[globulus]

Didn't have time to work on center alignment yet. As for buttons instead of text, sure, you can put whichever views you'd like, the item content is a regular ViewBuilder.

[marchy]

@globulus would be fantastic if you could add a centering option for this.

Even if the algo is different, the use-cases are so numerous for this. Tag clouds, category labels, bubble buttons, profile stats etc..

[marchy]

UPDATE: Found a perfectly working implementation that has both horizontal and vertical alignment here