IOS Swift Question posted in
The official documentation can be found here.

Ios swift – Creating a wheel picker with aligned icons?

The below code is my current picker wheel. My question is: how can I add icons (flags) and align them exactly like this?

@State private var selectedLanguage = "English"
let languages = ["English", "Italiano", "Francais", "Deutsche"]

      Picker("Select Language", selection: $selectedLanguage) {
        ForEach(languages, id: .self) { language in
          Text(language).tag(language)
        }
      }
      .pickerStyle(WheelPickerStyle())
      .frame(width: 300, height: 150)
Tags:

2

Answers


  1. 0

    Put .frame(maxWidth: .infinity) on each of the texts so they occupy the full width of the wheel. Then put the image as a leading overlay on top of the text.

    Here is an example where the images are the numbers 0 to 9 with a circle around them, and the texts are the letter "x" repeated n times.

    @State var x = 0
var body: some View {
    Picker("Foo", selection: $x) {
        ForEach(0..<10) { i in
            Text(String(repeating: "x", count: i + 1))
                .frame(maxWidth: .infinity)
                .overlay(alignment: .leading) {
                    Image(systemName: "0(i).circle")
                }
        }
    }
    .pickerStyle(.wheel)
    .frame(width: 300)
}

    Output:

    enter image description here

    Login or Signup to reply.
  2. 0

    Try this approach using a dedicated struct Language, a HStack
    and assuming you have the appropriate
    flag images in your Assets.xcassets. Works well for me.

    struct Language: Identifiable {
    let id = UUID()
    var name: String
    var flag: String
}

struct ContentView: View {
    @State private var selectedLanguage = "English"
    let languages = [Language(name: "English", flag: "gb"),
                     Language(name: "Italiano", flag: "it"),
                     Language(name: "Français", flag: "fr"),
                     Language(name: "Deutsche", flag: "de")]
    
    var body: some View {
        Picker("Select Language", selection: $selectedLanguage) {
            ForEach(languages) { language in
                HStack {
                    Image(language.flag).resizable().frame(width: 35, height: 25)
                    Text(language.name)
                    Spacer()
                }.tag(language.name)
            }
        }
        .pickerStyle(.wheel)
        .frame(width: 300, height: 150)
    }
}

    enter image description here

    Note, you can put the Spacer() before the Text(language.name) if you prefer, or both before and after. In that case it gives you this:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search