So I'm trying to move the rectangle so that it looks like there's a little point at the bottom of the DatePicker() UI element:
import SwiftUI
struct TimeSelectorView: View {
#State private var selectedDay: Date = Date()
var body: some View {
VStack {
DatePicker(selection: $selectedDay, in: Date()..., displayedComponents: .date) {
Text("")
}.frame(width: UIScreen.main.bounds.width * 0.75)
.clipped()
.background(Color.white)
.cornerRadius(15)
Rectangle()
.fill(Color.white)
.frame(width: 25, height: 25)
.rotationEffect(Angle(degrees: 45))
.padding(.bottom, 15)
}
}
}
To create overlapping Views you can use a ZStack.
SwiftUI has a dedicated stack type for creating overlapping content,
which is useful if you want to place some text over a picture for
example. It’s called ZStack, and it works identically to the other two
stack types [HStack, VStack].
In the below example, the DatePicker will be placed behind the Rectangle:
ZStack {
DatePicker(...)
Rectangle()
}
You can find more information in this tutorial: How to layer views on top of each other using ZStack?
Related
I am trying to fit a long piece of text inside the screen but it keeps overflowing. Is there a way to wrap the text?
I tried using alignment to make it center but it still goes off the screen.
import SwiftUI
struct OnboardingPage3: View {
var body: some View {
ZStack {
Color("Onboarding")
.edgesIgnoringSafeArea(.all)
VStack {
Color("Onboarding")
.edgesIgnoringSafeArea(.all)
Image("HomeScreen")
.resizable()
.frame(width: 300, height: 600)
.padding(EdgeInsets(top: 0, leading: 0, bottom: 200, trailing: 0))
Text("This is your home screen where you can see how much progress you have made throughout the day as well as a streaks bar to keep track of how many days straight you have been exercising.")
.frame(alignment: .center)
}
}
}
}
struct OnboardingPage3_Previews: PreviewProvider {
static var previews: some View {
OnboardingPage3()
}
}
Your text isn't actually overflowing — it's just being truncated.
To prevent this you can use the fixedSize(horizontal:vertical:) modifier. I also made some other edits to your code — there's no need to use so many .edgesIgnoringSafeAreas, and ZStacks can have some unexpected side effects with positioning.
struct OnboardingPage3: View {
var body: some View {
VStack {
Image("HomeScreen")
.resizable()
.aspectRatio(contentMode: .fit) /// use this to maintain the aspect ratio
.frame(width: 200) /// now you only need to supply 1 dimension
Text("This is your home screen where you can see how much progress you have made throughout the day as well as a streaks bar to keep track of how many days straight you have been exercising.")
.fixedSize(horizontal: false, vertical: true)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.padding(20)
.background(
Color.gray
.edgesIgnoringSafeArea(.all)
)
}
}
Result:
I'm working on an app with a piece of large text with buttons underneath which I want to take up the same width as the text. My solution is to use a VStack with the .fixedSize() modifier:
VStack {
Text(viewModel.timeString)
.animation(nil)
.minimumScaleFactor(0.1)
.lineLimit(1)
.font(.system(size: 100, design: .monospaced))
.padding(.vertical, -20)
TimerActionsCompact(viewModel: viewModel) // the 3 buttons
}
.fixedSize()
This produces the result I want:
However, when the text becomes too big, it just goes off the screen instead of shrinking, even though I have minimumScaleFactor and lineLimit set.
I found that the problem was .fixedSize(), and removing it causing the text to shrink properly.
Am I doing something wrong, or could this be a bug with swiftUI? If so is there any workaround?
Thanks!
One possible way you can use frame modifier like this example:
struct ContentView: View {
#State private var string: String = "0.0"
var body: some View {
Text(string)
.font(.system(size: 100, design: .monospaced))
.minimumScaleFactor(0.1)
.lineLimit(1)
.frame(width: 200, height: 80) // give your custom size here as you like!
.background(Color.gray.cornerRadius(10.0))
.animation(nil, value: string)
Button("add") { string += String(describing: Int8.random(in: 0...9)) }.padding()
}
}
I would like to build the following view and be able to control how much each view fills the outer rectangle:
This is what I have so far:
import SwiftUI
struct TestView: View {
var body: some View {
HStack(spacing: 0) {
Rectangle().fill(Color.blue)
Rectangle()
.fill(Color.yellow)
Rectangle()
.fill(Color.pink)
}
.cornerRadius(8)
.frame(maxHeight: 25)
}
}
Since a HStack decides how to lay out the views on its own, I'm not sure if that's the right View to use. I've tried with a Capsule but it's just a rounded rectangle. What can I use to build the View above? Ideally, I would like to give a percentage to the view and then make it fill appropriately.
Here is a demo of possible approach (tested with Xcode 12 / iOS 14)
var body: some View {
Color.clear // << placeholder
.frame(maxWidth: .infinity, maxHeight: 25)
.overlay(GeometryReader { gp in
// chart is here
HStack(spacing: 0) {
Rectangle().fill(Color.blue)
.frame(width: 0.6 * gp.size.width)
Rectangle()
.fill(Color.yellow)
.frame(width: 0.1 * gp.size.width)
Rectangle()
.fill(Color.pink)
.frame(width: 0.3 * gp.size.width)
}
})
.clipShape(RoundedRectangle(cornerRadius: 8))
}
I am working with VStack to show an image (they will be several with different sizes from a json)
I need to show it to occupy the screen width (the width of the vstack and maintaining aspect ratio) and to be properly resized, respecting the height according to the width of the screen.
I have tried in different ways, but I manage to display the image correctly.
My View is:
struct ContentView: View {
var body: some View {
VStack {
GeometryReader { geometry in
VStack {
Text("Width: \(geometry.size.width)")
Text("Height: \(geometry.size.height)")
}
.foregroundColor(.white)
}
.padding()
.frame(alignment: .topLeading)
.foregroundColor(Color.white) .background(RoundedRectangle(cornerRadius: 10) .foregroundColor(.blue))
.padding()
GeometryReader { geometry in
VStack {
Image("sample")
.resizable()
//.frame(width: geometry.size.width)
.aspectRatio(contentMode: .fit)
}
.foregroundColor(.white)
}
.frame(alignment: .topLeading)
.foregroundColor(Color.white) .background(RoundedRectangle(cornerRadius: 10) .foregroundColor(.blue))
.padding()
}
.font(.title)
}
}
When I use .frame (width: geometry.size.width) by assigning the width of the geometry, the width is shown to the entire screen but the height is not maintaining aspect ratio. (looks crushed)
How can I get the dimensions of the image and find its proportion to use it with .aspectRatio (myratio, contentMode: .fit)
There is another way to display the image correctly, any suggestions
You need to eliminate the second GeometryReader, because having two children in the VStack that both accept as much space as they are offered is going to make the VStack unable to give the Image the correct amount of space.
You also need to raise the layout priority of the Image so that the VStack offers it space first, so it can take as much as it needs.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
GeometryReader { geometry in
VStack {
Text("Width: \(geometry.size.width)")
Text("Height: \(geometry.size.height)")
}.foregroundColor(.white)
}.padding()
.background(
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.blue))
.padding()
Image(uiImage: UIImage(named: "sample")!)
.resizable()
.aspectRatio(contentMode: .fit)
.layoutPriority(1)
}
}
}
import PlaygroundSupport
let host = UIHostingController(rootView: ContentView())
host.preferredContentSize = .init(width: 414, height: 896)
PlaygroundPage.current.liveView = host
Result:
Trying to make a custom list using a view as the list row style (to get rid of the ugly line separates in the list by default).
However, once I put my ZStack rows inside a scroll view, the scroll view scrolls in both directions and not just vertically.
Here is the contentView:
NavigationView {
ScrollView{
VStack(alignment: .leading){
ForEach(friends) { friends in
NavigationButton(destination: MessageDetailView(friend: friends)) {
CustomListItem(friend: friends)
}
}
Spacer()
}
}
.foregroundColor(.black)
.navigationBarTitle(Text("Messages"))
}
and here is the customListItem:
Group{
ZStack {
RoundedRectangle(cornerRadius: 10)
.shadow(radius: 1, y:1)
.frame(width: UIScreen.main.bounds.width - 32, height: 75)
.foregroundColor(.gray)
HStack {
Image(systemName: "person.crop.circle")
.resizable()
.frame(width: 50, height: 50)
VStack(alignment: .leading) {
HStack {
Text(friend.name)
.font(.headline)
Text("\(friend.date, formatter: dateFormatter)")
}
Text(friend.messagesReceived[0])
.font(.subheadline)
} .lineLimit(nil)
Spacer()
Image(systemName: "chevron.right.circle")
.foregroundColor(.black)
}.padding(10)
}.padding([.leading, .trailing])
}
Is there any way I can limit the scrolling to vertical or force a frame on this?
Trying to use the .frame(...) modifier does not work as I've tried it. This results in the view not loading at all.
Example Images:
As of Xcode 11 beta 3 (11M362v) there is an axes parameter when constructing a ScrollView which can be set to .horizontal or .vertical
ScrollView(.vertical, showsIndicators: true) { ... }
This can be achieved with a GeometryReader. Wrap your ScrollView in one and then set the width of your VStack.
GeometryReader is a super easy, and pretty useful trick to have in your belt for SwiftUI :)
Here's how I got it working with your code:
NavigationView {
GeometryReader { geometry in
ScrollView {
VStack(alignment: .leading){
ForEach(self.friends) { friend in
NavigationButton(destination: MessageDetailView(friend: friend)) {
CustomListItem(friend: friend)
}
}
Spacer()
}.frame(width: geometry.size.width)
}
.foregroundColor(.black)
.navigationBarTitle(Text("Messages"))
}
}
Using iOS 14, Swift 5, SwiftUI 2.0
This is the answer... you can use both vertical and horizontal in a set.
ScrollView([.vertical,.horizontal]) {
....
}
Although in most cases the above answers works but none of them did work for me!
In my case, the problem was the scrollView children which were wider than the scrollView!
adding a static width to them did the trick.
Try being more specific with the scroll direction like this
ScrollView(.vertical) {}