I'm implementing a Picker in SwiftUI. The picker values are strings that vary in size, but the picker itself has a maxWidth due to UI limitations. Some of the strings won't fit, and that's fine with me. However, at the moment, the string is wrapped, increasing the height of the picker, like so:
I'd like to limit the string to just one line, truncating the string, and keeping the picker height the same.
I've tried
.frame(maxHeight: 20)
.clipped()
.contentShape(Rectangle())
on the picker, but that gives me this:
I'd like to truncate the string. How can I do this? NOTE: it should only truncate here, not in the dropdown list.
I've played around with .lineLimit(1), .multilineTextAlignment(.leading), .truncationMode(.tail), on both the text in the ForEach block, and on the picker itself, but no luck so far.
Here is the full code that I have now:
Picker("Theme", selection: $selectedThemeRawValue) {
ForEach(Theme.allCases.map({$0.rawValue}), id: \.self) { value in
Text(value)
.lineLimit(1)
.multilineTextAlignment(.leading)
.truncationMode(.tail)
}
}
.accentColor(.primary)
.frame(maxHeight: 20)
.clipped()
.contentShape(Rectangle())
.lineLimit(1)
.multilineTextAlignment(.leading)
.truncationMode(.tail)
Does anyone have an idea on how I can do this?
Related
I am trying to put a message on the blue line (the safe area box shown in the image). I need to have the .edgesIgnoringSafeArea(.all). The problem is that as soon as I change the Y position to anything under 11, the text jumps 47 points up to the position shown in the image. Does anybody know what is causing this jump?
I am putting both of the cases here with the resulting screenshot. I would appreciate it if anyone could help me understand why that 1-point difference in the Y position causes the "First" message to print 47 points higher than the "Second" message.
struct TestView: View {
var body: some View {
GeometryReader{ geo in
Text("First")
.edgesIgnoringSafeArea(.all)
.position(x: 50, y: 10)
Text("Second")
.edgesIgnoringSafeArea(.all)
.position(x: 50, y: 11)
}
}}
If I’m not mistaken it’s the order of the modifiers. Everything after edgesIgnoringSafeArea still ignores Safe area.
That modifier wrapped everything that came before it.
I can set the progress indicator color as follows:
ProgressView(value: 50.0, total: 100.0)
.padding()
.accentColor(Color(.red))
I haven't been able to figure out how to set the color for the track.
I have a problem with SwiftUI's ScrollView. If you run the app on a smaller screen (iPhone SE 1st gen for example), the ScrollView (horizontal) goes out of the screen because it doesn't fit its height on it. Therefore it becomes scrollable vertically also. I have an outer scroll view (vertical) therefore I don't want the inner ScrollView to be able to scroll vertically. Any ideas on how can I fix this?
ScrollView(.vertical) { // <------ Outher one
Text("Welcome")
ScrollView(.horizontal) { // <------ Inner one (if it doesnt fit on screen it becomes vertically scrollable
HStack {
Content...
}
}
}
Thanks!
does anyone have an idea how can i break Vertical ScrollView into small horizontal ScrollView using SwiftUi:
I have the code bellow which displays the youtubeResults vertically, since each item of the ForEach is smaller, so i want to group them by 3 itens Horizontally , then the following 3 itens goes bellow them vertically until the forEach ends.
I would like the results to be displayed like that(with images, this is just an example):
(Justin beiber) (Drake) (Omarion)
(Mandela) (Dj Khaled) (Nirvana)
(Justin beiber) (Prince) (Adele)
My code: Displaying the results one by one Vertically
ScrollView (.vertical, showsIndicators: false, content:{
LazyVStack(spacing : 25){
ForEach(getData.youtubeResults){ result in
SideItemView(youtubeResults: result, selectedTheme: self.$selectedTheme)
}
}
.padding()
.padding(.top)
})
As stated by Asperi, LazyVGrid or LazyHGrid was the soulution, introduced by Apple in IOS 14+.
I want to modify the anchor point of a view without knowing or calculating the size of the view. Currently I have this:
Text("📷").font(.system(size: 60))
How do I center the anchor point?
Add the fixedSize() modifier so that the view maintains it's preferred size, ignoring it's parent view's sizing suggestion.
Add a frame modifier with 0 height and width. This wraps the text in a parent view. Use it to position it's child with alignment: .center.
Text("📷").font(.system(size: 60))
.fixedSize()
.frame(width: 0, height: 0, alignment: .center)