I have the following code, and the view changes clicking anywhere in the circular button. However, the self.user.day += 1 action only executes if I click directly on the button text. This is very curious behavior to me, being new to Swift & SwiftUI in particular.
NavigationLink(destination: NewsView(), tag: 1, selection: $selection){
Button(action: {self.selection = 1; self.user.day += 1}){
Text("News").font(.body)
}
.frame(width: 100.0, height: 100.0)
.foregroundColor(Color(red: 0.96, green: 0.96, blue: 0.47))
.background(Color.black)
.cornerRadius(90)
}
Any thoughts? Thanks!
SwiftUI will not detect taps in blank areas, no matter how big your button is, this excludes the NavigationLink.
A simple way, in your case is just to set the frame to the text instead of the button like so
Button(action: { print("tapped"); self.selection = 1 }) {
Text("News").font(.body)
.frame(width: 100.0, height: 100.0)
}
//.frame(width: 100.0, height: 100.0)
.foregroundColor(Color(red: 0.96, green: 0.96, blue: 0.47))
.background(Color.black)
.cornerRadius(90)
Related
I’m new at SwiftUI and I’ve a doubt. I wonder if anyone can help me.
I’ve a screen with two exact buttons (except for the text that they display and the view which they lead to). When they are tapped, each button leads the user to a new given view.
The code is this:
HStack {
NavigationLink(destination: PlayView()) {
ButtonTextView(buttonText: "Play")
}
.frame(width: 120, height: 40, alignment: .center)
.background(Color(red: 242/255, green: 242/255, blue: 242/255, opacity: 1))
.cornerRadius(10.0)
Spacer()
NavigationLink(destination: RankingView()) {
ButtonTextView(buttonText: "Ranking")
}
.frame(width: 120, height: 40, alignment: .center)
.background(Color(red: 242/255, green: 242/255, blue: 242/255, opacity: 1))
.cornerRadius(10.0)
}
And I want to be able to do something like this:
HStack {
ButtonView(buttonIdentifier: "Play")
Spacer()
ButtonView(buttonIdentifier: "Ranking")
}
Where ButtonView is defined like so:
NavigationLink(destination: PlayView()) {
ButtonTextView(buttonText: "Play")
}
.frame(width: 120, height: 40, alignment: .center)
.background(Color(red: 242/255, green: 242/255, blue: 242/255, opacity: 1))
.cornerRadius(10.0)
So, basically, I don’t repeat code and have a much more readable file.
The problem comes when I’ve to define the destination of the NavigationLink. There is some way I can set the destination to be a variable and pass it when I call ButtonView()? So that if the buttonIdentifier is "Play", destination is PlayView() (like above) and if is "Ranking", then is RankingView().
I hope I’ve been able to explain my problem clearly (i’m not a native speaker…)
Any help is appreciated. Thanks a lot :)!
struct ButtonView<Destination>: View where Destination : View {
let buttonText: String
let destination: Destination
init(buttonText: String, #ViewBuilder destination: #escaping () -> Destination) {
self.buttonText = buttonText
self.destination = destination()
}
var body: some View {
NavigationLink(destination: destination) {
Text(buttonText)
}
.frame(width: 120, height: 40, alignment: .center)
.background(Color(red: 242/255, green: 242/255, blue: 242/255, opacity: 1))
.cornerRadius(10.0)
}
}
Use like:
ButtonView(buttonText: "Play") {
PlayView()
}
Currently, my code uses a series of switch result cases that asks questions and presents different answer choices. For example, when the user clicks Evening, the code will present a new question with the answer choices being "Sweet" and "Savory". How can I put a cool transition where the "Morning" and "Evening" choices turn into the "Sweet" and "Savory" choices? Open to any transitions that you'd recommend.
var body: some View {
let cardWidth = 300
let cardWidthValue = CGFloat(cardWidth)
let cardHeight = 300
let cardHeightValue = CGFloat(cardHeight)
VStack {
ZStack {
Rectangle()
.fill(Color(red: 0.0, green: 0.5, blue: 1.0, opacity: 0.4))
.frame(width: 350, height: 250)
.cornerRadius(20)
.shadow(color: .gray, radius: 20)
switch result {
case "Start":
VStack{
Text("What time is it?")
.padding()
.foregroundColor(Color.white)
.font(.system(size: 30.0, weight: .bold))
HStack {
Button {
result = "M"
} label: {
Text("Morning🌥")
.foregroundColor(Color.white)
.frame(width: 165, height: 100)
.background(Color(red: 0.0, green: 0.0, blue: 1.0, opacity: 1.0))
.cornerRadius(10)
}
Button {
result = "E"
} label: {
Text("Evening☀️")
.foregroundColor(Color.white)
.frame(width: 165, height: 100)
.background(Color(red: 0.0, green: 0.0, blue: 1.0, opacity: 1.0))
.cornerRadius(10)
}
}
}
case "E":
VStack{
Text("Sweet or Savory?")
.padding()
.foregroundColor(Color.white)
.font(.system(size: 30.0, weight: .bold))
HStack {
Button {
result = "EveningSweet"
} label: {
Text("Sweet🍦")
}
.foregroundColor(Color.white)
.frame(width: 165, height: 100)
.background(Color(red: 0.0, green: 0.0, blue: 1.0, opacity: 1.0))
.cornerRadius(10)
Button {
result = "EveningSavory"
} label: {
Text("Savory🧂")
}
.foregroundColor(Color.white)
.frame(width: 165, height: 100)
.background(Color(red: 0.0, green: 0.0, blue: 1.0, opacity: 1.0))
.cornerRadius(10)
}
}
Using withAnimation{} to animate your event.
Let's say you want to animate views after you click on Evening:
Button {
withAnimation { //here
result = "E"
}
} label: {
Text("Evening☀️")
.foregroundColor(Color.white)
.frame(width: 165, height: 100)
.background(Color(red: 0.0, green: 0.0, blue: 1.0, opacity: 1.0))
.cornerRadius(10)
}
This mean that all views that are related to this event of result = "E" shall be animated. The default transition of all animation is .opacity.
After trying the first case, if you want to change transition type, use .transition()
case "E":
VStack {
}.transition(.slide)
You will see a different animation from the first time that you did not set transition equals to slide.
I would recommend you try the first option without .slide first to see the difference.
i have this card thing in the picture to build, here're the code:
struct ArticleCard: View {
var article: Article
var body: some View {
ZStack {
Color.white
.border(Color(red: 0, green: 0, blue: 0, opacity: 0.2))
.shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.2), radius: 0.0, x: 5, y: 5)
VStack{
Text(article.title)
.padding(.top, 5)
.padding(.leading)
.padding(.trailing)
.font(.title2)
Image(article.coverUrl).resizable()
.frame(height: 200)
.padding(.leading)
.padding(.trailing)
Text(article.title)
.padding(.leading)
.padding(.trailing)
.padding(.bottom)
}
}
}
}
in the ZStack i put a Color.white there as a background of the card, and give this color view a shadow, but the color seems to be transparent, therefor i got unwanted lines on the top and the left inside the borders, how do i get rid of them?
You are using border and shadow in wrong place, try this:
PS: there is no reason of using Color(red: 0, green: 0, blue: 0, opacity: 0.2) you can use this: Color.black.opacity(0.2)
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Color.white
VStack {
Text("article.title")
.padding()
Image(systemName: "star")
.resizable()
.scaledToFit()
Text("article.title")
.padding()
}
}
.frame(width: 300, height: 300, alignment: .center)
.border(Color(red: 0, green: 0, blue: 0, opacity: 0.2))
.compositingGroup()
.shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.2), radius: 0.0, x: 5, y: 5)
}
}
I refactored your code for better and less code as possible you can use Image instead of Text in your App.
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("your custom Text")
.padding()
Text("🥩")
.font(Font.system(size: 150))
Text("your custom Text")
.padding()
}
.frame(width: 300, height: 300, alignment: .center)
.background(Color.white)
.border(Color.black.opacity(0.2))
.compositingGroup()
.shadow(color: Color.black.opacity(0.2), radius: 0.0, x: 5, y: 5)
}
}
I am trying to create a medium Widget like in YouTube Music, but I am don't understand how to create an interaction with the particular item in a Widget. How my app should understand when user press on first or second item and then how I am must handle this action inside app. My app use Swift not SwiftUI, only for a Widget I use SwiftUI. In past I didn't have experience with a SwityUI.
My code for Widget:
struct WidgetTestEntryView : View {
var entry: Provider.Entry
var body: some View {
VStack {
HStack(spacing: 100){
Text("Favourite").foregroundColor(.white).font(.system(size: 16, weight: .bold, design: .default))
Image("Label").resizable().frame(width: 80, height: 15, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
}.frame(maxWidth: .infinity, maxHeight: 50, alignment: .center).background(Color.black).offset(y: -9)
HStack {
Spacer()
Button(action: {}) {
Image("").resizable().frame(width: 70, height: 70)
.cornerRadius(10)
.background(Color(red: 0.218, green: 0.215, blue: 0.25))
}.cornerRadius(10).onTapGesture {
let a = ViewController()
a.data.text = "Tap"
}
Button(action: {}) {
Image("").resizable().frame(width: 70, height: 70)
.cornerRadius(10)
.background(Color(red: 0.218, green: 0.215, blue: 0.25))
}.cornerRadius(10).onTapGesture {
let a = ViewController()
a.data.text = "Tap"
}
Button(action: {}) {
Image("").resizable().frame(width: 70, height: 70)
.cornerRadius(10)
.background(Color(red: 0.218, green: 0.215, blue: 0.25))
}.cornerRadius(10).onTapGesture {
let a = ViewController()
a.data.text = "Tap"
}
Button(action: {}) {
Image("").resizable().frame(width: 70, height: 70)
.cornerRadius(10)
.background(Color(red: 0.218, green: 0.215, blue: 0.25))
}.cornerRadius(10).onTapGesture {
let a = ViewController()
a.data.text = "Tap"
}
Spacer().frame(width: 10, height: 10, alignment: .center)
}.background(Color(red: 0.118, green: 0.118, blue: 0.15)).offset(y: -9)
}.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center).background(Color(red: 0.118, green: 0.118, blue: 0.15))
}
}
You can do this using Link in SwiftUI.
Link(destination: url, label: {
// add your UI components in this block on which you want to perform click action.
}
url: Provide a unique string to identify widget action in the main app.
Now In the main app, use below method in AppDelegate.swift file:
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
}
In this method, you can identify the URL that comes from the WidgetKit action.
It seems there is a potential bug in SwiftUI. I am trying to put a rectangle with opacity 0.5 on top of an image.
When I try to fix the transparent rectangle on top, from 100px width, it goes down instead of sticking to the top.
Here is the code:
ZStack {
VStack {
Image("movistar")
.resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
.scaledToFit()
.cornerRadius(8)
.padding(15)
.frame(minWidth: Global.SCREEN_WIDTH)
}
VStack {
HStack {
Rectangle()
.fill(Color(red: 0, green: 0, blue: 0, opacity: 0.5))
.frame(width: 110, height: Global.SCREEN_WIDTH / 4)
}
Spacer()
}
.scaledToFit()
.cornerRadius(8)
.padding(15)
.frame(width: Global.SCREEN_WIDTH, height: Global.SCREEN_WIDTH)
There is no bug here. If you add a .background to all of your layers, you will see that because of the way you set up the view (ie. Spacer, scaledToFit, etc.) the actual frames of the views are not necessarily the edges of the image. You also have not set the alignment of any of the Stacks or Frames.
There are many ways to do what you are trying to do, but I believe this is the simplest:
var body: some View {
Image("movistar")
.resizable(capInsets: EdgeInsets(), resizingMode: .stretch)
.scaledToFit()
.cornerRadius(8)
.frame(minWidth: UIScreen.main.bounds.width)
.overlay(
Rectangle()
.fill(Color(red: 0, green: 0, blue: 0, opacity: 0.5))
.frame(width: 110, height: UIScreen.main.bounds.width / 4)
, alignment: .top
)
}
Finally got into a solution: .scaleToFit() was messing with the VStack(). After deleting, it worked perfectly. I also got rid of the HStack().