[iOS] LetterPicker - Dynamic Scaling (#1326)

* Get the Size from Parent

* Use the Font for Sizing

* Make Static for Padding

* Using new sizing instead of a static 35
This commit is contained in:
Joe Kribs 2024-11-24 15:52:20 -07:00 committed by GitHub
parent 994e99d141
commit 34d64bca5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 21 additions and 5 deletions

View File

@ -20,10 +20,12 @@ extension LetterPickerBar {
private var isSelected
private let letter: ItemLetter
private let size: CGFloat
private let viewModel: FilterViewModel
init(letter: ItemLetter, viewModel: FilterViewModel) {
init(letter: ItemLetter, size: CGFloat, viewModel: FilterViewModel) {
self.letter = letter
self.size = size
self.viewModel = viewModel
}
@ -37,15 +39,15 @@ extension LetterPickerBar {
} label: {
ZStack {
RoundedRectangle(cornerRadius: 5)
.frame(width: size, height: size)
.foregroundStyle(isSelected ? accentColor : Color.clear)
Text(letter.value)
.font(.headline)
.foregroundStyle(isSelected ? accentColor.overlayColor : accentColor)
.frame(width: size, height: size, alignment: .center)
}
.frame(width: 20, height: 20)
}
.frame(width: 50, height: 20)
}
}
}

View File

@ -14,6 +14,8 @@ struct LetterPickerBar: View {
@ObservedObject
var viewModel: FilterViewModel
// MARK: - Body
@ViewBuilder
var body: some View {
VStack(spacing: 0) {
@ -22,6 +24,7 @@ struct LetterPickerBar: View {
ForEach(ItemLetter.allCases, id: \.hashValue) { filterLetter in
LetterPickerButton(
letter: filterLetter,
size: LetterPickerBar.size,
viewModel: viewModel
)
.environment(\.isSelected, viewModel.currentFilters.letter.contains(filterLetter))
@ -30,6 +33,17 @@ struct LetterPickerBar: View {
Spacer()
}
.scrollIfLargerThanContainer()
.frame(width: 30, alignment: .center)
.frame(width: LetterPickerBar.size, alignment: .center)
}
// MARK: - Letter Button Size
static var size: CGFloat {
String().height(
withConstrainedWidth: CGFloat.greatestFiniteMagnitude,
font: UIFont.preferredFont(
forTextStyle: .headline
)
)
}
}

View File

@ -284,7 +284,7 @@ struct PagingLibraryView<Element: Poster>: View {
if letterPickerEnabled, let filterViewModel = viewModel.filterViewModel {
ZStack(alignment: letterPickerOrientation.alignment) {
innerContent
.padding(letterPickerOrientation.edge, 35)
.padding(letterPickerOrientation.edge, LetterPickerBar.size + 10)
.frame(maxWidth: .infinity)
LetterPickerBar(viewModel: filterViewModel)