Developing a custom swiftui profile images list

Question

Wedkemail OP

Created Jan ’23

Replies 1

Boosts 0

Views 1.2k

Participants 1

Hello Everyone,

I'm developing an App and there is this specific behaviour that im struggling to implement. I want to display the profile images of the users participating in an event like below

with the first 4 having their avatars appear and the surplus being counted and displayed in that counter circle. Not sure how to achieve this with swiftUI atm any guidance will be much appreciated

Answered by Wedkemail in 743366022

Alright so i tinkered around with it and found a neat way to get the look working right with offsetting but now im facing a slightly different hiccup

					HStack{

								ForEach(game.athletes){athlete in

										ProfileImage(athlete: athlete,width: 50,height: 50).offset(x:CGFloat(-(game.athletes.firstIndex(of: athlete) ?? 0) * offsetCounter ))

									

						}

						Divider().frame(height:50).padding()

					}

Which gives me this beautiful look :

Screenshot 2023-01-29 at 3.11.20am.png

Now my issue lies in the divider and how it doesn't account for the offsetting that's occurring. It stays where it should have been if the last profile image wasn't offset.

Boost

Answer 1

Wedkemail OP

Jan ’23

Accepted Answer

Alright so i tinkered around with it and found a neat way to get the look working right with offsetting but now im facing a slightly different hiccup

					HStack{

								ForEach(game.athletes){athlete in

										ProfileImage(athlete: athlete,width: 50,height: 50).offset(x:CGFloat(-(game.athletes.firstIndex(of: athlete) ?? 0) * offsetCounter ))

									

						}

						Divider().frame(height:50).padding()

					}

Which gives me this beautiful look :

Screenshot 2023-01-29 at 3.11.20am.png

Now my issue lies in the divider and how it doesn't account for the offsetting that's occurring. It stays where it should have been if the last profile image wasn't offset.

0