Breaking Text Pills to a new Line

Question

I want the pills to break to the next line. As far I have no clue how to accomplish that.

Here is a bit of my code:

HStack {
    ForEach(interests, id: \.self) { interest in
        Text(interest)
            .padding(.horizontal, 10)
            .padding(.vertical, 5)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .cornerRadius(25.0)
            .lineLimit(1)
            .fixedSize(horizontal: true, vertical: true)
    }
}

Here is the screenshot

Does this answer your question https://stackoverflow.com/a/62103264/12299030? — Asperi, Nov 10 '20 at 19:35
Do you want to split it into 2 rows that are horizontally scrollable? Or do you want to keep making new rows until all pills are on the screen? — nicksarno, Nov 10 '20 at 23:36
I don't know a straightforward solution, but I posted an alternative that I think would work. — nicksarno, Nov 11 '20 at 17:41
Doesn't a LazyVGrid help? You might need to set a fixed width on each cell. — Ryan, Nov 13 '20 at 22:04

score 0 · Answer 1 · answered Nov 11 '20 at 17:40

If you're ok with setting a maximum # of items per row, here is an alternative solution. It basically loops through the interests and adds a new HStack after the itemsPerRow is reached. The numberOfRows can be greater than the actual number of rows shown (I included an if statement so that it will not create extra blank rows).

struct ContentView: View {
    
    let interests = ["One One", "Two Twooooooo", "ThreeThreeThree", "Four", "Five", "Six SIx Six SIx", "Seven", "Eight"]
    let itemsPerRow = 3
    let numberOfRows = 8
    
    var body: some View {
        VStack(alignment: .leading) {
            ForEach(0..<numberOfRows) { rowIndex in
                if interests.count >= (rowIndex * itemsPerRow) {
                    HStack {
                        ForEach(0..<interests.count) { index in
                            if
                                index < (rowIndex * itemsPerRow + itemsPerRow) &&
                                index >= (rowIndex * itemsPerRow)
                            {
                                Text(interests[index])
                                    .padding(.horizontal, 10)
                                    .padding(.vertical, 5)
                                    .background(Color.blue)
                                    .foregroundColor(Color.white)
                                    .cornerRadius(25.0)
                                    .lineLimit(1)
                                    .minimumScaleFactor(0.5)
                            }
                        }
                    }
                }
            }
        }
    }
}

score 0 · Answer 2 · answered Nov 15 '20 at 03:38

New in iOS 14 is LazyVGrid which might help. Here is an example using your Interest pill.

struct WrappedPills: View {

let interests = [
    "Photographs",
    "Travel",
    "Reading",
    "Gardening",
    "Cooking",
    "Painting",
    "Dancing",
    "Music",
    "Hiking",
    "Art",
    "Astronomy",
    "Surfing",
    "Knitting",
]

//    let columns = [ GridItem(.adaptive(minimum: 100)) ]

let columns = [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible()),
]

var body: some View {
    
    ScrollView() {
        HStack {
            Text("Interests")
                .font(.largeTitle)
                .fontWeight(.semibold)
                .padding(.top)
                .padding(.leading, 20)
            Spacer()
        }
        
        LazyVGrid(
            columns: columns,
            alignment: .leading,
            spacing: 10
        ){
            ForEach(interests, id: \.self) { interest in
                Text(interest)
                    .padding(.horizontal, 10)
                    .padding(.vertical, 5)
                    .background(Color.blue)
                    .foregroundColor(Color.white)
                    .cornerRadius(25.0)
                    .lineLimit(1)
                    .fixedSize(horizontal: true, vertical: true)
            } //ForEach
        } //LazyVGrid
    } //Scrollview
    .padding()

    }
}

You can try a few other options with the "columns" arrangement that might suit your needs better.

Paul Hudson has some good examples of LazyVGrid here: https://www.hackingwithswift.com/quick-start/swiftui/how-to-position-views-in-a-grid-using-lazyvgrid-and-lazyhgrid

Breaking Text Pills to a new Line

2 Answers2