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)
}
}
}
Related
Lately started learning SwiftUI and I ran into a problem.
I tried putting image and text component and it didn't break the line.
Someone have an idea to solve it?
This is my code:
struct RestaurantOverlay: View {
var amountOfStars: Int
var body: some View {
ZStack {
Text("Burger")
.font(.system(size: 17.5))
.foregroundColor(.white)
.fontWeight(.heavy)
Image(systemName: "star.fill")
.font(.system(size: 13))
.foregroundColor(.white)
.fontWeight(.medium)
}
.padding(10)
.background(Color.black)
.opacity(0.8)
.cornerRadius(10.0)
}
}
ZStack {
HStack {
Text("Burger")
.font(.system(size: 17.5))
.foregroundColor(.white)
.fontWeight(.heavy)
Image(systemName: "star.fill")
.font(.system(size: 13))
.foregroundColor(.white)
.fontWeight(.medium)
}
.padding(10)
.background(Color.black)
.opacity(0.8)
.cornerRadius(10.0)
}
You can change HStack to VStack if you want vertically.
In Swift ui I have a tabview and am going to my profile test page but in the simulator it displaying in the middle of the page.
var body: some View {
VStack() {
Text("Welcome")
.font(.largeTitle)
.foregroundColor(.black)
ZStack {
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(.red)
VStack {
Image("murry")
.clipShape(Circle())
.shadow(radius: 10)
.overlay(Circle()
.stroke(Color.red, lineWidth: 5))
Text("Murry GoldBerg")
HStack{
Text("Following:0").foregroundColor(.white)
Text("Followers:2").foregroundColor(.white)
Text("Kids:0").foregroundColor(.white)
}
}
.padding(20)
.multilineTextAlignment(.center)
}
.frame(width: 450, height: 250)
}
Spacer()
}
}
My Code as to how am inserting my views in the tab view not showing it all as no need just a snippet
struct ContentView: View {
var body: some View {
TabView{
HomeView() .tabItem {
Image(systemName: "house")
Text("Home")
}
ProfileView()
.tabItem {
Image(systemName: "person.circle.fill")
Text("Profile")
}
StatsView()
.tabItem {
Image(systemName: "plus").renderingMode(.original).padding()
Text("Plus")
}
}
Even on a real device it is doing the same so I no its not just the simlutor.
The reason is there is only one VStack so it will be default the main layout of the view. Default VStack if has only one view is from center view.
You just need add another VStack to cover your VStack then it will layout from top
var body: some View {
VStack {
VStack() {
Text("Welcome")
.font(.largeTitle)
.foregroundColor(.black)
ZStack {
RoundedRectangle(cornerRadius: 25, style: .continuous)
.fill(.red)
VStack {
Image("murry")
.clipShape(Circle())
.shadow(radius: 10)
.overlay(Circle()
.stroke(Color.red, lineWidth: 5))
Text("Murry GoldBerg")
HStack{
Text("Following:0").foregroundColor(.white)
Text("Followers:2").foregroundColor(.white)
Text("Kids:0").foregroundColor(.white)
}
}
.padding(20)
.multilineTextAlignment(.center)
}
.frame(width: 450, height: 250)
Spacer()
}
}
}
I'm building an app and i'm a fairly beginner in SwiftUI, so this is the problem I have.
I need a landing page which shows first and I've created a view for it you can check it out.
struct LandingView: View {
var body: some View {
NavigationView{
VStack(alignment: .center){
Image("exxxlogo")
Spacer()
Text("Welcome")
.font(.system(size: 38))
.fontWeight(.bold)
.padding(.horizontal, 40)
.multilineTextAlignment(.center)
.foregroundColor(Color.white)
Text("Click below to continue to the app")
.font(.system(size: 16))
.padding(.horizontal, 20)
.multilineTextAlignment(.center)
.foregroundColor(Color.white)
.padding(.bottom, 35)
NavigationLink(destination: HomeView()){
Text("CONTINUE ")
.frame(width: 250, height: 50, alignment: .center)
.background(Color.red)
.foregroundColor(Color.white)
}
}
.background(
Image("backgroundlanding")
.frame(maxWidth: .infinity,maxHeight: .infinity)
.aspectRatio(contentMode: .fill)
.edgesIgnoringSafeArea(.top)
.edgesIgnoringSafeArea(.bottom)
)
}
And I've also created the views for the tabview to redirect them to so Home,Shop, etc
I've done this to my Contentview
TabView {
HomeView()
.tabItem{
Image(systemName: "house")
Text("Home")
}
GamesView()
.tabItem{
Image(systemName: "gamecontroller")
Text("Games")
}
ShopView()
.tabItem{
Image(systemName: "bag")
Text("Shop")
}
MoreView()
.tabItem{
Image(systemName: "gear")
Text("More")
}.accentColor(.red)
And changed the windowgroup to landingview in the main app.swift file so it pops up first.
But the issue is when you click on the button in landingview, navigationlink redirects you to the homeview but there is no tabviews underneath just blank
You said that your second code example is from ContentView. If you want to show the TabView that you have in that ContentView, then your NavigationLink should point to ContentView, not HomeView.
NavigationLink(destination: ContentView()) {
Text("CONTINUE ")
.frame(width: 250, height: 50, alignment: .center)
.background(Color.red)
.foregroundColor(Color.white)
}
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:
My question is how I can add a NavigationLink to the code below without changing the UI. I tried around for a few hours, but unfortunately without success. So if someone could help me that would be nice. I also found this but unfortunately, the answers did not work for me. Maybe I did something wrong
import SwiftUI
struct ContentView: View {
var body: some View {
UITableView.appearance().separatorStyle = .none
return NavigationView {
List {
CardView()
.listRowInsets(EdgeInsets())
}
.navigationBarTitle("Title")
}
}
}
struct CardView: View {
var body: some View {
VStack {
// NavigationLink(destination: EmptyView()) {
Image("Image")
.resizable()
.aspectRatio(contentMode: .fit)
HStack {
VStack(alignment: .leading) {
Text("Title")
.font(.system(size: 20))
.fontWeight(.semibold)
.foregroundColor(.primary)
.lineLimit(3)
Text("Subtitle")
.font(.caption)
.foregroundColor(.secondary)
}
.layoutPriority(100)
Spacer()
Image(systemName: SFSymbolName.chevron_right)
.foregroundColor(.secondary)
.font(Font.body.weight(.semibold))
}
.padding([.leading, .bottom, .trailing], 16)
.padding(.top, 5)
// }
}
.background(Color("CustomCardViewColor"))
.cornerRadius(10)
.padding(.all, 0.1)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
)
.padding([.top, .leading, .trailing])
}
}
The reason your UI changes drastically is that NavigationLink wraps its content in an implicit HStack, placing your Image to the left of your HStack. You have a couple options, depending on whether you want to use the automatic disclosure chevron or your own styled one.
To use the system chevron:
HStack {
VStack(alignment: .leading) {
Text("Title")
.font(.system(size: 20))
.fontWeight(.semibold)
.foregroundColor(.primary)
.lineLimit(3)
Text("Subtitle")
.font(.caption)
.foregroundColor(.secondary)
}
.layoutPriority(100)
Spacer()
// this simply places the chevron approximately where yours is
NavigationLink(destination: EmptyView()) {
EmptyView()
}
}
If you want your own:
HStack {
VStack(alignment: .leading) {
Text("Title")
.font(.system(size: 20))
.fontWeight(.semibold)
.foregroundColor(.primary)
.lineLimit(3)
Text("Subtitle")
.font(.caption)
.foregroundColor(.secondary)
}
.layoutPriority(100)
Spacer()
// this hidden NavigationLink makes the whole row clickable
NavigationLink(destination: EmptyView()) {
EmptyView()
}.opacity(0)
// your chevron is displayed
Image(systemName: SFSymbolName.chevron_right)
.foregroundColor(.secondary)
.font(Font.body.weight(.semibold))
}
The top is with the system chevron, the bottom uses yours
You may just wrap it around the image of chevron_right. So you can click it to the next page
HStack {
VStack(alignment: .leading) {
Text("Title")
.font(.system(size: 20))
.fontWeight(.semibold)
.foregroundColor(.primary)
.lineLimit(3)
Text("Subtitle")
.font(.caption)
.foregroundColor(.secondary)
}
.layoutPriority(100)
Spacer()
NavigationLink.init(destination: Text("Temp Link")) {
Image(systemName: SFSymbolName.chevron_right)
.foregroundColor(.secondary)
.font(Font.body.weight(.semibold))
}
}