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)
}
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.
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
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)
}
}
}
I'm working on a proof of concept app in SwiftUI and I came up with an idea for a settings pane looking like this:
Now I want the user to be able to tap the colored "Option X" to change the text. I thought I'd just replace Text() with TextField() but if I do this it produces a view like this:
Here is the code I'm using for the view:
HStack(){
Spacer()
ZStack{
Rectangle()
.fill(Color(txtBgCol!))
.frame(width: 300, height: 475)
.cornerRadius(25)
.shadow(radius: 3)
VStack{
Group{
Spacer()
// preset 1
TextField(presets[0].name, text: $presets[0].name)
//Text(presets[0].name)
.foregroundColor(.white)
.padding()
.background(presets[0].color)
.cornerRadius(200)
.shadow(radius: 3)
.font(.body)
Text("Some settings here")
.foregroundColor(Color(txtCol!))
.padding()
.font(.body)
}
Group{
Spacer()
// preset 2
Text(presets[1].name)
.foregroundColor(.white)
.padding()
.background(presets[1].color)
.cornerRadius(200)
.shadow(radius: 3)
.font(.body)
Text("Some settings here")
.foregroundColor(Color(txtCol!))
.padding()
.font(.body)
}
Group{
Spacer()
// preset 3
Text(presets[2].name)
.foregroundColor(.white)
.padding()
.background(presets[2].color)
.cornerRadius(200)
.shadow(radius: 3)
.font(.body)
Text("Some settings here")
.foregroundColor(Color(txtCol!))
.padding()
.font(.body)
}
Spacer()
}
}
Spacer().frame(width: 30)
}
I'm not sure why changing the Text() to TextField() would mess up everything and I'd be glad to learn more about SwiftUI intricacies, as I am pretty new to this.
TextField by default expands to max available width, so instead of limit only background rectangle, you should limit container
ZStack{
Rectangle()
.fill(Color(txtBgCol!))
.frame(width: 300, height: 475)
.cornerRadius(25)
.shadow(radius: 3)
VStack{
// .. other code here
}
.frame(width: 300, height: 475) // << this restricts TextField expanding
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))
}
}