Custom Container View with ForEach(subviews:content:)

Question

Pomanks OP

Created Oct ’24

Replies 2

Boosts 0

Participants 2

Hi, I’m trying to implement a custom horiztonal Picker using the newly introduced API on ForEach like the following:

 struct ScopeBar<SelectionValue: Hashable, Content: View>: View {
 
    // MARK: Initializers
 
    @Binding
    private var selection: SelectionValue
    @ViewBuilder
    private var content: () -> Content
 
    public init(selection: Binding<SelectionValue>, @ViewBuilder content: @escaping () -> Content) {
        _selection = selection
        self.content = content
    }
 
    // MARK: Content
 
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(subviews: content()) { subview in
                    Button {
//                        selection = subview.id as! SelectionValue
                    } label: {
                        subview
                    }
                    .tag(subview.id)
                }
            }
        }
    }
}

The following implementation is what I’m trying to achieve for the custom container usage:

  struct MyOtherView: View {
 
    enum SomeScopes: String, CaseIterable, Hashable {
        case first
        case second
        case third
        case fourth
        case fifth
    }
 
    @State
    private var selection: SomeScopes = .first
 
    var body: some View {
        ScopeBar(selection: $selection) {
            ForEach(SomeScopes.allCases, id: \.rawValue) { scope in
                Text(scope.rawValue)
            }
        }
    }
}

I’m having some trouble figuring out two things:

How can I make my SelectionValue equal to the Subview.ID so that my selection behaves internally like a Picker would?
Say I wanted to add an Image(…) in addition to the Text(scope.rawValue), how would I do it in order for the Button { … } label: { … } to use both views, and not each separately…?

Boost

Answer 1

DTS Engineer OP

Apple

Oct ’24

Have you tried creating a custom PickerStyle instead? this way you're able to customize the appearance and interaction without having to re-implement its functionality ?

You should review Creating custom container views sample code and Demystify SwiftUI containers WWDC session to learn more about container views. The learning from those resources should answer your questions and get you going.

0

Answer 2

Pomanks OP

Oct ’24

Thank you for your reply! From what I read in the PickerStyle documentation, there is no public API to create a custom one… 🤔

Anyway, revisiting the mentioned sessions allowed me to derive the ID property from the containerValues rather than the Subview.ID, like so:

 if let selection = subview.containerValues.tag(for: SelectionValue.self) {
…
}

All I have to do then is tag my custom view in place like so:

 ForEach(SomeEnum.allCases, id: \.self) { enumCase in
    Text(enumCase.localizedString)
        .tag(enumCase)
}

I’m unsure wether this is the best way to go, but at least it technically solves my initial problem and works quite well.

0

	struct ScopeBar<SelectionValue: Hashable, Content: View>: View {

	// MARK: Initializers

	@Binding
	private var selection: SelectionValue
	@ViewBuilder
	private var content: () -> Content

	public init(selection: Binding<SelectionValue>, @ViewBuilder content: @escaping () -> Content) {
	_selection = selection
	self.content = content
	}

	// MARK: Content

	var body: some View {
	ScrollView(.horizontal) {
	LazyHStack {
	ForEach(subviews: content()) { subview in
	Button {
	// selection = subview.id as! SelectionValue
	} label: {
	subview
	}
	.tag(subview.id)
	}
	}
	}
	}
	}

	struct MyOtherView: View {

	enum SomeScopes: String, CaseIterable, Hashable {
	case first
	case second
	case third
	case fourth
	case fifth
	}

	@State
	private var selection: SomeScopes = .first

	var body: some View {
	ScopeBar(selection: $selection) {
	ForEach(SomeScopes.allCases, id: \.rawValue) { scope in
	Text(scope.rawValue)
	}
	}
	}
	}

	if let selection = subview.containerValues.tag(for: SelectionValue.self) {
	…
	}

	ForEach(SomeEnum.allCases, id: \.self) { enumCase in
	Text(enumCase.localizedString)
	.tag(enumCase)
	}