Presenting an alert - xcode

I running SwiftUI with Xcode 11 Beat 5, and I wish to add an Alert to show the user when a Button is Tapped.
I am having problems though.
HStack{
Text("Inverted V")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.black)
Spacer()
Button(action: {
}, label: {
Image(systemName: "questionmark.circle.fill")
.resizable()
.frame(width: 30, height: 30)
.foregroundColor(.red)
}).onTapGesture {
print("Hello Print")
}}
Can someone help with the code needed? Do I place it within the onTapGesture brackets?
I have a #State var showingAlert = false
Thank you in advance.

You would use something like the code below. If you are using onTapGesture you don't need a Button.
import SwiftUI
struct ContentView: View {
#State var showingAlert: Bool = false
var body: some View {
HStack{
Text("Inverted V")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.black)
Spacer()
Image(systemName: "questionmark.circle.fill")
.resizable()
.frame(width: 30, height: 30)
.foregroundColor(.red)
.onTapGesture {
print("Hello Print")
self.showingAlert = true
}
}.alert(isPresented: $showingAlert, content: {
Alert(title: Text("Error"), message: Text("Error Reason"), dismissButton: .default(Text("OK")))
})
}
}

Related

SwiftUI Text width animation

expected result
current result
I want to make it animation controllable
Open - text shows with animation
Close - text hide with animation
My code:
struct HomeView: View {
#State var isOpen = false
var body: some View {
ZStack {
Image("background")
.resizable()
VStack(alignment: .leading) {
Text("Appearing title text")
.frame(width: isOpen ? 200 : 0, height: 20, alignment: .leading)
.animation(.linear(duration: 2))
.font(.system(size: 20))
.foregroundColor(.white)
HStack {
Button("Open") {
isOpen = true
}
Button("Close") {
isOpen = false
}
}
Spacer()
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
.padding(.top, 100)
}
.ignoresSafeArea()
}
}
Prompt me, please, how can I do it?

Preview and Simulator looks different Swiftui

I have something like that for the first time. The preview and the simulator do not look identical. I really have no idea how to fix it. Normally the simulator and the preview should be identical?
But it may be that I've nested something but I don't know what exactly.
The images and code are below:
Simulator
Preview Layout
var body: some View {
ZStack {
Image("bg-official")
.resizable()
.edgesIgnoringSafeArea(.all)
VStack {
Spacer()
Text("NUMBER MATCH")
.fontWeight(.bold)
.font(.title)
GeometryReader { (geometry : GeometryProxy) in
ZStack {
RoundedRectangle(cornerRadius: 30)
.foregroundColor(Color("bg-roundedrectangle"))
.frame(width: 295, height: 310)
VStack(spacing: 3){
HStack(spacing: 3) {
Button {
} label: {
ZStack {
Rectangle()
.fill(Color.black.opacity(0.7))
.frame(width: geometry.size.width/3, height: geometry.size.height/5.5)
.cornerRadius(radius: 20, corners: [.topLeft])
Text("60 Seconds")
.font(.title3)
.foregroundColor(.white)
}
}
Button {
} label: {
ZStack {
Rectangle()
.fill(Color.black.opacity(0.7))
.frame(width: geometry.size.width/3, height: geometry.size.height/5.5)
.cornerRadius(radius: 20, corners: [.topRight])
Text("Endless")
.font(.title3)
.foregroundColor(.white)
}
}
}
HStack(spacing: 3) {
Spacer()
Button {
} label: {
ZStack {
Rectangle()
.fill(Color.white)
.frame(width: geometry.size.width/3, height: geometry.size.height/5.5)
.cornerRadius(radius: 20, corners: [.bottomLeft])
Text("Game Center")
.font(.title3)
.foregroundColor(.black)
}
}
Button {
withAnimation() {
sheetManager.present(with: .init(
systemName: "info",
title: "Game Info",
content: "The aim of this game is to match as many tiles as you can with the same number and earn points. Tap a tile to select it and tap another tile with matching number of the first tile you tapp ed. Be careful and quick; the game will end if you tap a wrong tile, if the timer runs out or if th board gets filled by tiles!"))
}
} label: {
ZStack {
Rectangle()
.fill(Color.white)
.frame(width: geometry.size.width/3, height: geometry.size.height/5.5)
.cornerRadius(radius: 20, corners: [.bottomRight])
Text("Game Info")
.font(.title3)
.foregroundColor(.black.opacity(0.9))
}
}
Spacer()
}
}
}
}
.popup(with: sheetManager)
}
}
}}

How to use swiftUI matched geometry to present a detail card view on top of elements (instead of increasing frame height)

I am attempting my first steps using matchedgeometry and have followed some tutorials to get a simple view to expand when selected.I have two files, a card view and a content view. I would like to place all of my card views in a horizontal scrollview.
import SwiftUI
struct smallCard: View {
#State private var flag: Bool = true
#Namespace var nspace
var body: some View {
if flag {
VStack{
Image("chemex.jpg")
.resizable()
.matchedGeometryEffect(id: "image", in: nspace)
.scaledToFill()
Spacer()
Button("CHEMEX") { withAnimation(.default) { flag.toggle() } }
.matchedGeometryEffect(id: "text", in: nspace)
Spacer()
.frame(height:8)
}
.matchedGeometryEffect(id: "geoeffect1", in: nspace)
.frame(width: 100, height: 100, alignment: .center)
.background(Color.white)
.cornerRadius(20)
.shadow(color: .gray, radius: 9, x: 0, y: 9)
}
if !flag {
VStack{
Image("chemex.jpg")
.resizable()
.matchedGeometryEffect(id: "image", in: nspace)
.scaledToFit()
Spacer()
Button("CHEMEX") { withAnimation(.default) { flag.toggle() } }
.matchedGeometryEffect(id: "text", in: nspace)
Spacer()
.frame(height:20)
}
.matchedGeometryEffect(id: "geoeffect1", in: nspace)
.layoutPriority(1)
.frame(width: 300, height: 600, alignment: .center)
.background(Color.white)
.cornerRadius(20)
.shadow(color: .gray, radius: 9, x: 0, y: 9)
}
}
I the have my main content view:
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
HStack{
Text("My App")
.font(.title)
.padding(.leading, 25)
Spacer()
}
ScrollView(.horizontal){
HStack{
smallCard()
.padding(.horizontal)
smallCard()
.padding(.horizontal)
smallCard()
.padding(.horizontal)
}
}
}
.frame(alignment: .center)
}
This currently works for clicking on the small card and the matched geometry animates this to the larger card. The issue I have is that this changes the height of my scrollview and as such this moves everything else such as my title up and out of view.
Effectively what I would like to achieve is like a popover view, so that this detail view is on top of all of the elements in my content view, but whilst using matchedgeometry (or an alternative solution) to animate nicely between the views.
Is this possible? I am at the point where I do not know if there is a solution to this.

The textfield in my search bar will not allow for text to be entered (swiftUI)

I have tried to implement a search bar within my app (using swiftUI), which shows up when I build the app. However, it won't allow me to type into the actual text field. My code is below. I have been searching for solutions to this problem for awhile and can't seem to see any problems in my code. Is there something wrong with my TextField?
Code for search bar -
import SwiftUI
struct SearchBar: View {
#Binding var text: String
#State private var isEditing = false
var body: some View {
HStack {
TextField("Search...", text: $text)
// .foregroundColor(Color("Teal"))
// .background(Color("Grey"))
.overlay(
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(Color(UIColor.systemGray3))
.frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
.padding(EdgeInsets.init(top: 0, leading: 30, bottom: 0, trailing: 20))
// Search icon
if isEditing {
Button(action: {
self.text = ""
}, label: {
Image(systemName: "multiply.circle")
.foregroundColor(Color(UIColor.systemGray3))
.padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 30))
// Delete button
})
}
}
).onTapGesture {
self.isEditing = true
}
if isEditing{
Button(action: {
self.isEditing = false
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
// Hide delete button when search bar is not selected
}){
}
}
}
}
}
Code implementing search bar into my view -
import SwiftUI
struct BusinessList: View {
#EnvironmentObject var modelData: ModelData
#State private var showFavoritesOnly = false
#State var searchText = ""
var filteredBusinesses: [Business] {
modelData.businesses.filter { business in
(!showFavoritesOnly || business.isFavorite)
}
}
var body: some View {
NavigationView {
ScrollView {
LazyVStack {
VStack {
SearchBar(text: $searchText)
.padding(.bottom)
.padding(.top)
.padding(.top)
.padding(.top)
.padding(.top)
// Search bar won't show text when 'typed into'
ScrollView(.horizontal, showsIndicators: false) {
HStack {
Button(action: {
showFavoritesOnly = true
}) {
Text("Favourites")
.font(.caption)
.fontWeight(.medium)
.foregroundColor(Color.white)
.frame(width: 100.0, height: 30)
.background(Color("Teal"))
// How the button looks
.cornerRadius(25)
.zIndex(1)
.textCase(.uppercase)
.padding(EdgeInsets.init(top: 0, leading: 20, bottom: 0, trailing: 0))
}
Button(action: {
}) {
Text("Hospitality")
.font(.caption)
.fontWeight(.medium)
.foregroundColor(Color.white)
.frame(width: 100.0, height: 30)
.background(Color("Teal"))
// How the button looks
.cornerRadius(25)
.zIndex(1)
.textCase(.uppercase)
}
Button(action: {
}) {
Text("Retail")
.font(.caption)
.fontWeight(.medium)
.foregroundColor(Color.white)
.frame(width: 100.0, height: 30)
.background(Color("Teal"))
// How the button looks
.cornerRadius(25)
.zIndex(1)
.textCase(.uppercase)
}
Button(action: {
}) {
Text("Lifestyle")
.font(.caption)
.fontWeight(.medium)
.foregroundColor(Color.white)
.frame(width: 110.0, height: 30)
.background(Color("Teal"))
// How the button looks
.cornerRadius(25)
.zIndex(1)
.textCase(.uppercase)
}
}
.padding(.bottom)
}
}
.background(Color(UIColor.white))
.shadow(radius: 6)
.padding(.bottom)
ForEach(filteredBusinesses) { business in
NavigationLink(destination: BusinessDetail(business: business)) {
BusinessRow(business: business)
}
}
}
}
.navigationBarHidden(true)
.ignoresSafeArea()
}
}
}
struct BusinessList_Previews: PreviewProvider {
static var previews: some View {
BusinessList()
}
}
your code works for me with minor changes to the colors, nothing major. Maybe the colors did not show your typing, but the text was there.
This is the test I did:
import SwiftUI
#main
struct TestApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
struct SearchBar: View {
#Binding var text: String
#State private var isEditing = false
var body: some View {
HStack {
TextField("Search...", text: $text)
// .foregroundColor(Color("Teal"))
// .background(Color("Grey"))
.overlay(
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
.padding(EdgeInsets.init(top: 0, leading: 30, bottom: 0, trailing: 20))
// Search icon
if isEditing {
Button(action: {
self.text = ""
}, label: {
Image(systemName: "multiply.circle")
.foregroundColor(.gray)
.padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 30))
// Delete button
})
}
}
).onTapGesture {
self.isEditing = true
}
if isEditing{
Button(action: {
self.isEditing = false
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
// Hide delete button when search bar is not selected
}){
}
}
}
}
}
struct ContentView: View {
#State var searchText = ""
var body: some View {
SearchBar(text: $searchText)
.frame(width: 222, height: 55).padding(.horizontal, 20)
.border(.red)
}
}
EDIT:
Your new code works for me, when you remove
.shadow(radius: 6)
and
.ignoresSafeArea()

SwiftUI - Button doesn't work at the top left of the view

I am new in SwiftUI and I am having an issue with my "hamburger" menu.
Basically I have created 2 views for the Home page: Home view and Home Side Menu view.
My main goal is to put the "hamburger" button at the top left of the view and open the side menu when it is clicked.
However when I use .edgesIgnoringSafeArea(.top) and put the "hamburger" button at the top left of the view, the button doesn't open the menu.
If, instead, I don't add .edgesIgnoringSafeArea(.top), the button is displayed in the middle of the view and works correctly opening the menu when it is clicked.
Could you please help me to see what I have done wrong.
Thanks in advance.
Home View:
import SwiftUI
struct HomeView: View {
var body: some View {
NavigationView{
ScrollView{
VStack(alignment: .center) {
Text("Home")
.font(.system(size: 22))
.fontWeight(.bold)
.foregroundColor(.white)
.padding(.top, 20)
.padding(.bottom, 20)
}
.frame(width: UIScreen.main.bounds.width, height: 80)
.background(Color.blue)
Image("image")
.resizable()
.aspectRatio(contentMode: .fit)
.edgesIgnoringSafeArea(.all)
}
.edgesIgnoringSafeArea(.top)
}
.navigationBarBackButtonHidden(true)
}
}
Home Side Menu view:
import SwiftUI
struct HomeSideMenuView : View {
#State var showMenu = false
var body: some View {
let drag = DragGesture()
.onEnded {
if $0.translation.width < -100 {
withAnimation {
self.showMenu = false
}
}
}
return NavigationView {
GeometryReader { geometry in
ZStack(alignment: .leading) {
VStack {
HomeView()
.overlay(
Button (action:{
withAnimation {
self.showMenu = true
}
}){
Image(systemName: "line.horizontal.3")
.padding()
.imageScale(.large)
.font(Font.system(size: 20, weight: .bold))
}
.padding()
.foregroundColor(.white)
.shadow(color: Color.gray, radius: 0.2, x: 1, y: 1)
.frame(maxWidth: geometry.size.width, maxHeight: geometry.size.height, alignment: .topLeading)
.edgesIgnoringSafeArea(.top) // -> if I add this line, the button doesn't work
)
}
.frame(width: geometry.size.width, height: geometry.size.height)
.offset(x: self.showMenu ? geometry.size.width/1.5 : 0)
.disabled(self.showMenu ? true : false)
if self.showMenu {
MenuView()
.frame(width: geometry.size.width/1.5, height: geometry.size.height)
.transition(.move(edge: .leading))
}
}
.gesture(drag)
}
}
.navigationBarBackButtonHidden(true)
}
}
i am having the same issue, i guess the first top 100px are reserved to the navigationBar, just add
.navigationBarTitle("")
.navigationBarHidden(true)
to your views containers (first child of NavigationView).
Hope this helps

Resources