Is there anyway to automatically adjust the font size according to the length of the text to be displayed? For example, by setting the frame size. Can it reduce the font size automatically so that the width for displaying the font still the same?
var body: some View {
VStack {
ZStack {
GeometryReader { g in
ZStack {
ScrollView(.vertical, showsIndicators: true, content: {
VStack {
ZStack {
VStack {
Image("cat")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width:g.size.width, height:g.size.height/4*3)
.clipped(antialiased:true)
.shadow(radius:25, x:0, y:0)
VStack (){
HStack {
VStack (alignment: .leading) {
HStack {
Text("XXXX").font(.title)
.font(.system(size:35)).foregroundColor(.black).shadow(radius: 5)
})
Spacer()
}
HStack {
Text("xxxxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxx ").font(.title2) // very long text here
Spacer()
}
}
}
}
.padding()
.frame(width:g.size.width, height:g.size.height/4*1, alignment: .top)
}
}.frame(width: g.size.width, height: g.size.height, alignment: .top)
}
.edgesIgnoringSafeArea(.all)
}
}
}
As see in my code, there is a very long text there. The text can be displayed perfectly on most of the device except iPod Touch that it will cause "xxxxxxxx xxxxxxxx xxxx ... ", "..." at the back because it is too long to be displayed. Is there anyway that it automatically, either jump to the next line, or shrink the fonts so that there will not be "..." at the back?
Use minimumScaleFactor(_:) https://developer.apple.com/documentation/swiftui/text/minimumscalefactor(_:)
struct ContentView: View {
var body: some View {
VStack{
Text("Test string")
.minimumScaleFactor(0.1) //<--Here
.frame(width: 15, height: 15)
}
}
}
Related
Does anyone know how to make the following view in SwiftUI?
HStack:
[ blank logo(centered) Skip(text)]
So I have the following HStack:
Zstack(alignment: .topLeading) {
VStack{
HStack {
Image("onboarding-logo")
.resizable()
.scaledToFit()
.frame(width: 150.0, height: 150.0)
.padding(.top, 35)
}
}
}
Does anyone know how I can have a "Skip" text in the top right corner of the screen, but also keep my logo centered and not have anything on the left side? I've tried Spacers and all, but I'm having no luck.
I would like to click "Skip" and then lead to another view.
There are many ways to achieve this. Here I have used LazyVGrid since other answers based on Stacks
struct ContentView: View {
var body: some View {
VStack {
LazyVGrid(columns: [GridItem(), GridItem(), GridItem()], content: {
Spacer()
Image(systemName: "star.fill")
.frame(width: 150, height: 150, alignment: .center)
.border(.gray)
Button(action: {
}, label: {
Text("Skip")
})
})
.border(.gray)
Spacer()
}
}
}
Is this the screen configuration you want?
The Zstack is used to center the Hstack into which the image is placed, and the new HStack uses a spacer to move the Text to the right.
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
VStack {
HStack(alignment: .center) {
Image("farnsworth")
.resizable()
.scaledToFit()
.frame(width: 150.0, height: 150.0)
}
Spacer()
}
VStack {
HStack {
Spacer()
Button {
// do Something...
} label: {
Text("Skip>>")
.padding(.top, 10)
}
}
Spacer()
}
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I have this example. Why is there this space at top and bottom of the VStack? The borders of the inner views doesn't seem to be as high as the border of the VStack. I think it has something to do with the LazyHGrid!? Thanks for an answer.
struct ContentView: View{
let names = ["house","creditcard"]
var body: some View{
VStack{
Text("skldfjsjf")
Text("klsadjf")
Text("lksajf")
ScrollView(.horizontal){
LazyHGrid(
rows: [GridItem(.flexible(minimum: 40)),GridItem(.flexible(minimum: 40))],
spacing: 10) {
ForEach(names, id: \.self) { icon in
Image(systemName: icon)
.padding()
}
}
.border(Color.orange)
}
.border(Color.green)
}
.frame(width: UIScreen.main.bounds.width * 0.9)
.border(Color.black)
}
}
I'm new to SwiftUI, but I think you want the content in your VStack to be top hugging?
struct ContentView: View {
let names = ["house","creditcard"]
var body: some View{
VStack (spacing:0) { //THIS HERE FOR NO SPACE FOR VSTACK INTERNAL VIEWS
Text("skldfjsjf")
Text("klsadjf")
Text("lksajf")
ScrollView(.horizontal){
LazyHGrid(
rows: [GridItem(.flexible(minimum: 40)),GridItem(.flexible(minimum: 40))],
spacing: 10) {
ForEach(names, id: \.self) { icon in
Image(systemName: icon)
.padding()
}
}
.border(Color.orange)
}
.border(Color.green)
Spacer() //THIS HERE TO MAKE IT TOP HUGGING
}
.frame(width: UIScreen.main.bounds.width * 0.9)
.border(Color.black)
}
}
Edit: Substitute your "system name:" of choice. "pencil.circle" works fine. "edit" is not a valid SF Symbol.
(I've simplified my code so you can cut and paste. That's why you see .frame, resizable, etc. where much simpler code might your first instinct.)
I have created a view which is a vertical list of row items (table view).
Each row item has a horizontal view with two images inside it.
The images take up too much space and do not fit correctly on the screen:
import SwiftUI
#main
struct StackOverflowDemoApp: App {
var body: some Scene {
WindowGroup {
TandemView()
}
}
}
struct PaddedImageView: View {
let color: Color = .red
var body: some View {
ZStack {
color
Image(systemName: "edit")
.resizable()
.padding()
}
Spacer()
}
}
struct TandemView: View {
var body: some View {
HStack {
Spacer()
Image(systemName: "pencil")
.resizable()
.background(Color.orange)
.frame(height: 80)
.aspectRatio(1, contentMode: .fill)
PaddedImageView()
.frame(width: 200, height: 80)
}
.padding()
.fixedSize()
}
}
struct TandemView_Previews: PreviewProvider {
static var previews: some View {
TandemView()
}
}
The above is the closest I can get to the desired layout (it just needs to fit horizontally). I experimented with GeometryReader but that did not produce desired results.
Here are some things I tried:
The code as provided
NoConstraintsOnPencilOrHStack
NoConstraintsOnTandemView
NoConstraintsOnImageInPaddedViewButWithFrameConstraint
I am trying to get a row view which consists of two Images (my actual source consists of UIImage objects) that fits within the width of the screen.
Edit:
After Accepting cedricbahirwe's spot-on response, I was able to simplify the code further. New results:
I added at the top level
TandemView()
.padding(.horizontal)
I removed:
// Spacer()
at the end of PaddedImageView
updated TandemView -- changed both frames and removed 3 lines:
struct TandemView: View {
var body: some View {
HStack {
Spacer()
Image(systemName: "pencil")
.resizable()
.background(Color.orange)
.frame(width: 80, height: 80)
// .aspectRatio(1, contentMode: .fill)
PaddedImageView()
.frame(height: 80)
}
// .padding()
// .fixedSize()
}
}
This is happening because of the layout of PaddedImageView View, you can actually remove the Spacer since it is not needed there.
So change
struct PaddedImageView: View {
let color: Color = .red
var body: some View {
ZStack {
color
Image(systemName: "edit")
.resizable()
.padding()
}
Spacer()
}
}
to
struct PaddedImageView: View {
let color: Color = .red
var body: some View {
ZStack {
color
Image(systemName: "edit")
.resizable()
.padding()
}
}
}
Note:
SwiftUI Engine infers the layout of your view from the implementation of the body property. It's recommended to have one Parent View inside the body property.
When I put an image on screen, I expect the image to be entirely enclosed in its own frame, but apparently I am wrong. Does anyone know why? Thanks.
My Code:
struct ContentView: View {
var body: some View {
HStack {
Group {
Image(systemName: "envelope.badge.fill")
Image(systemName: "moon.stars.fill")
} // Group
.foregroundColor(.yellow)
.font(.system(size: 128))
.border(Color.red)
} // VStack
.padding(40)
.background(Color.white)
}
}
Result:
This appears to be a bug that is now fixed in SwiftUI 2.0 (Xcode 12).
Here is a workaround for SwiftUI 1.0 (Xcode 11). It uses UIImage(systemName:) to get the actual dimensions of the image, and then uses .aspectRatio(_:contentMode:) to set the correct aspect ratio.
struct SystemImage: View {
let name: String
var body: some View {
let uiImage = UIImage(systemName: name)!
return Image(systemName: name)
.resizable()
.aspectRatio(uiImage.size, contentMode: .fit)
}
}
struct ContentView: View {
var body: some View {
HStack {
Group {
SystemImage(name: "envelope.badge.fill")
SystemImage(name: "moon.stars.fill")
} // Group
.foregroundColor(.yellow)
.font(.system(size: 128))
.border(Color.red)
} // VStack
.padding(40)
.background(Color.white)
}
}
Try placing the padding before the border.
edit...
Does this help:
HStack {
Group {
Image(systemName: "envelope.badge.fill")
Image(systemName: "moon.stars.fill")
} // Group
.foregroundColor(.yellow)
.font(.system(size: 128))
.frame(width:150, height: 150, alignment: .center)
.padding(10)
.border(Color.red)
} // VStack
.padding(40)
.background(Color.white)
The following code produces a simple VStack with Text views that show no spacing in-between them (rows 1 & 2).
However, adding an image to the 3rd row (green) adds unwanted spacing above and below the entire row.
struct ContentView: View {
var body: some View {
VStack {
HStack {
Text("one thing")
}.background(Color(.yellow))
HStack {
Text("nothing")
}.background(Color(.red))
HStack {
Text("three")
Image(systemName: "star")
.resizable()
.frame(width: 8, height: 8)
}.background(Color(.green))
HStack {
Text("three things")
}.background(Color(.red))
}
}
}
How can I avoid the additional unwanted space?
The space shows independent of image size (even with an image just a few pixels in dimension).
And, of course, I'd like to know why the space is generated.
Thanks for any help
Screenshot of above code:
You may adjust the spacing of VStack:
var body: some View {
VStack (spacing: 0) {
HStack {
Text("one thing")
}.background(Color(.yellow))
HStack {
Text("nothing")
}.background(Color(.red))
HStack {
Text("three")
Image(systemName: "star")
.resizable()
.frame(width: 8, height: 8)
}.background(Color(.green))
HStack {
Text("three things")
}.background(Color(.red))
}
}