Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Alignment issue fix #3

Merged
merged 2 commits into from May 21, 2022
Merged

Alignment issue fix #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d97b1bb
vertical alignment parameter for selection view
KazaiMazai May 21, 2022
ec4c48c
updated examples
KazaiMazai May 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 12 additions & 7 deletions README.md
View file
Open in desktop
Expand Up @@ -8,14 +8,15 @@ Custom segmented picker for SwiftUI

struct SegmentedPickerExample: View {
let titles: [String]
@State var selectedIndex: Int = 0
@State var selectedIndex: Int?

var body: some View {
SegmentedPicker(
titles,
selectedIndex: Binding(
get: { selectedIndex },
set: { selectedIndex = $0 ?? 0 }),
set: { selectedIndex = $0 }),
selectionAlignment: .bottom,
content: { item, isSelected in
Text(item)
.foregroundColor(isSelected ? Color.black : Color.gray )
Expand All @@ -25,11 +26,12 @@ struct SegmentedPickerExample: View {
selection: {
VStack(spacing: 0) {
Spacer()
Rectangle()
.fill(Color.black)
.frame(height: 1)
Color.black.frame(height: 1)
}
})
.onAppear {
selectedIndex = 0
}
.animation(.easeInOut(duration: 0.3))
}
}
Expand All @@ -49,14 +51,14 @@ or this guy with a capsule as selection view:

struct SegmentedPickerExample: View {
let titles: [String]
@State var selectedIndex: Int = 0
@State var selectedIndex: Int?

var body: some View {
SegmentedPicker(
titles,
selectedIndex: Binding(
get: { selectedIndex },
set: { selectedIndex = $0 ?? 0 }),
set: { selectedIndex = $0 }),
content: { item, isSelected in
Text(item)
.foregroundColor(isSelected ? Color.white : Color.gray )
Expand All @@ -67,6 +69,9 @@ struct SegmentedPickerExample: View {
Capsule()
.fill(Color.gray)
})
.onAppear {
selectedIndex = 0
}
.animation(.easeInOut(duration: 0.3))
}
}
Expand Down
5 changes: 4 additions & 1 deletion Sources/SegmentedPicker/SegmentedPicker.swift
View file
Open in desktop
Expand Up @@ -20,9 +20,11 @@ public struct SegmentedPicker<Element, Content, Selection>: View
private let data: Data
private let selection: () -> Selection
private let content: (Data.Element, Bool) -> Content
private let selectionAlignment: VerticalAlignment

public init(_ data: Data,
selectedIndex: Binding<Data.Index?>,
selectionAlignment: VerticalAlignment = .center,
@ViewBuilder content: @escaping (Data.Element, Bool) -> Content,
@ViewBuilder selection: @escaping () -> Selection) {

Expand All @@ -32,11 +34,12 @@ public struct SegmentedPicker<Element, Content, Selection>: View
self._selectedIndex = selectedIndex
self._frames = State(wrappedValue: Array(repeating: .zero,
count: data.count))
self.selectionAlignment = selectionAlignment
}

public var body: some View {
ZStack(alignment: Alignment(horizontal: .horizontalCenterAlignment,
vertical: .center)) {
vertical: selectionAlignment)) {

if let selectedIndex = selectedIndex {
selection()
Expand Down