Applying resizable() on an Image affects text in SwiftUI - ios

I am working on SwiftUI to make a widget and I can't figure out if I'm doing something wrong or there's a bug in SwiftUI.
I have an Image that I use as a background and at the top there's a text. If I apply resizable() to the Image it also affects the behaviour of the text.
var body: some View {
ZStack {
VStack {
Image(affirmation.customImageName ?? "c_0")
.resizable()
.scaledToFill()
.clipped()
}
HStack {
Text(affirmation.title)
.font(.body)
.multilineTextAlignment(.leading)
.lineLimit(nil)
Spacer()
}
.padding(.leading, 5)
.padding(.top, 5)
}
}
Creates this view:
While this code:
var body: some View {
ZStack {
VStack {
Image(affirmation.customImageName ?? "c_0")
.scaledToFill()
.clipped()
}
HStack {
Text(affirmation.title)
.font(.body)
.multilineTextAlignment(.leading)
.lineLimit(nil)
Spacer()
}
.padding(.leading, 5)
.padding(.top, 5)
}
}
Creates this view:

Related

Constrain the size of an HStack (with Images) to the width of the device

I'm trying to make an iOS-app with SwiftUI.
Here's my code so far:
struct ContentView: View {
var body: some View {
VStack {
Spacer()
Text("SwiftUI Slots!")
Spacer()
HStack {
Text("Credits: 1025")
}
Spacer()
HStack {
Image("apple")
Image("cherry")
Image("star")
}
Spacer()
Button(action: {
print("Testing 124")
}, label: {
Text("Spin")
})
Spacer()
.scaledToFit()
}
}
}
The HStack with the three images in it causes trouble:
How can I constrain the size of the HStack to the size of the device, so that it doesn't overlap the edges?
Use resizable() and aspectRatio()modifier for Image.
HStack {
Image("apple").resizable().aspectRatio(contentMode: .fit)
Image("cherry").resizable().aspectRatio(contentMode: .fit)
Image("star").resizable().aspectRatio(contentMode: .fit)
}
You can also use
Image("star").resizable().scaledToFit()

How to create design covering back button and top bar fully with cross button above it?

I am trying to create below design using swiftUI but not able to find proper approach.
I tried but my image is not covering back button but coming below to back button
Expected design
VStack(spacing: 16) {
VStack {
ZStack(alignment: .topTrailing) {
Image("defaultImage")
.resizable()
.frame( height: 200)
Button("Cancel", action: {
print("cancel")
})
.padding(12)
}
}
}
My Design :(
You might want to do a lot of try in SwiftUI to get a custom design right. gave it a quick try for you and added comments on the code so you can understand most of what i did.
this is the quick result i got (with a random background i got on internet)
import SwiftUI
struct FirstView: View{
var body: some View{
NavigationView {
VStack{
NavigationLink(destination: BackgroundImageNav()){
Text("Go to the view")
.font(.title)
}
}
}
}
}
struct BackgroundImageNav: View {
#Environment(\.presentationMode) var presentationMode
// remplacing the back button action, (only problem is that this disable the swipe back)
var body: some View {
ZStack {
// ZStack help you having your image behind the other views
VStack {
Image("defaultImage")
.resizable()
.frame(height: 180)
.edgesIgnoringSafeArea(.all)
Spacer()
// having a spacer that push the image on the top and ignoring the safe area
}
VStack(alignment:.leading){
HStack{
Button(action:{
presentationMode.wrappedValue.dismiss()
// back button action
}){
Image(systemName:"chevron.left")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 30, height: 30)
.foregroundColor(.white)
}
Spacer()
Rectangle()
.fill(Color.white)
.frame(width: 200, height: 80, alignment: .center)
Spacer()
Button(action:{
// do something
}){
Image(systemName: "xmark")
.resizable()
.frame(width: 24, height: 24)
.foregroundColor(.white)
}
}.padding()
Text("Title")
.bold()
.font(.title)
.foregroundColor(.black)
.background(Color.white)
.padding(24)
Spacer()
}
}.navigationBarHidden(true)
// removing the bar to customize the back button
}
}
struct backgroundImage_Previews: PreviewProvider {
static var previews: some View {
FirstView()
}
}

SwiftUI: How to get content aligned to top of screen, but keep back button

I'm learning SwiftUI (with Swift 5, targeting iOS 13.2)
Q) How do I get it so that my photo (and contents underneath) are aligned behind the notch area?
What I've got so far in the simulator:
As you can see, I've found out how to use an inline navigation bar style.
What I want
View Code:
import SwiftUI
struct DrinkDetail: View {
var drink: Drink
var body: some View {
List {
ZStack(alignment: .bottom) {
Image(drink.imageName)
.resizable()
.aspectRatio(contentMode: .fit)
Rectangle()
.frame(height: 80.0)
.opacity(0.75)
.blur(radius: 10)
HStack {
Text(drink.name)
.font(.largeTitle)
.foregroundColor(.white)
.padding(8)
Spacer()
}
}
.listRowInsets(EdgeInsets())
Text(drink.description)
.font(.body)
.foregroundColor(.primary)
.lineLimit(nil)
.padding(.bottom, 50.0)
.lineSpacing(12)
HStack {
Spacer()
Button(action: {}) {
Text("Order me")
}
.frame(width: 200.0, height: 50.0)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
Spacer()
}
}
.edgesIgnoringSafeArea(.top)
.navigationBarTitle(Text(""), displayMode: .inline)
}
}
Looks like this simply isn't possible, despite the tutorial I watched showing it previously being possible.
Until further notice, this is the only way: https://stackoverflow.com/a/65523676/12299030

Font Size Changes in iOS unexpectedly

All
I'm new to iOS and SwiftUI (2 months). I'm struggling to understand the following behavior and hope someone can point me as to how I can diagnose.
I have this code successfully generating this view in the preview provider
however when I run it on a device or in the simulator the fonts change (happens for system images also) to look more like this (scaled up).
The view below is rendered inside of a very generic tabview - I cant fathom it at all and could use some guidance.
Thanks
Craig
var body: some View {
VStack(spacing: 0.0) {
HStack(alignment: .top){
Text(player.firstName)
.bold()
Text(player.lastName)
.bold()
}
.font(.title)
HStack {
Image(uiImage: UIImage(data: player.playerPhoto) ?? UIImage())
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: /*#START_MENU_TOKEN#*/100/*#END_MENU_TOKEN#*/, height: 100)
.clipShape(Circle())
.overlay(Circle().stroke(Color.purple, lineWidth: 4.0))
Spacer()
VStack {
Text("lifetime averages")
.font(.body)
.foregroundColor(Color.gray)
HStack {
Spacer()
VStack {
Text("Batting")
.font(.title2)
.bold()
Text("\(battingAverage, specifier: "%.3f")")
}
.padding(.leading)
if isPitcher {
Spacer()
VStack {
Text("ERA")
.font(.title2)
.bold()
Text("\(earnedRunAverage, specifier: "%.2f")")
}
.padding(.trailing)
Spacer()
}
}
}
Spacer()
}
HStack {
VStack {
Text("\(noTeams)")
.font(.headline)
Text("teams")
.font(.subheadline)
.foregroundColor(Color.gray)
}
.padding(.leading, 10)
Spacer()
VStack {
Text("\(noSeasons)")
.font(.headline)
Text("seasons")
.font(.subheadline)
.foregroundColor(Color.gray)
}
Spacer()
VStack {
Text("\(noGames)")
.font(.headline)
Text("games")
.font(.subheadline)
.foregroundColor(Color.gray)
}.padding(.trailing, 10)
}
HStack{
Spacer()
Text("All Lifetime Stats >")
.font(.callout)
.foregroundColor(Color.blue)
}
}
.frame(width: 350, height: 200, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
}
Your code does not specify a .font(...) for those two Text elements.
Is it possible you have set the default font somewhere else?
I can reproduce what you're getting by doing this (using PlayerView as a stand-alone view, not in a table).
If using UIKit App Delegate, in willConnectTo session:
let contentView = PlayerView()
.font(.largeTitle)
or, if using SwiftUI App:
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
PlayerView()
.font(.largeTitle)
}
}
}

How to Customize a Text in SwiftUI

I am trying to replicate a calculator app. I cant seem to modify my 'Text' view to look similarly.
Text("0")
.background(Color.gray)
.cornerRadius(10)
.font(.largeTitle)
But its far from what I am trying to replicate.
I tried offset, but it offsets the entire 'Text' view.
Basically I want my Text to look like what is pointed in the image
You can achieve this playing around with ZStack, VStack, HStack and Spacer(). Here is a quick example:
struct CalculatorText: View {
var body: some View {
ZStack {
Rectangle()
.cornerRadius(10)
.foregroundColor(.gray)
VStack {
Spacer() // now the text will be on the bottom of ZStack
HStack {
Spacer() // and now the text will be on the right side of ZStack
Text("0")
.bold()
.font(.system(size: 30))
.foregroundColor(.white)
.multilineTextAlignment(.trailing)
.padding()
}
}
}
.frame(height: 100)
.padding()
}
}
and the result will be:

Resources