I want to create a warning but I couldn't do it according to this button. Can you create an alert based on this button?
Button(action: {
self.alertVisible = true
}, label: {
Text("Güncelle")
.frame(width:300 , height: 40)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 45))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue:
112 / 255))
})
struct ContentView: View {
#State var alertVisible = false
var body: some View {
VStack {
Button(action: {
self.alertVisible = true
}, label: {
Text("Güncelle")
.frame(width:300 , height: 40)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 45))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue:
112 / 255))
})
}
.alert(isPresented: $alertVisible) {
Alert(title: Text("Title"), message: Text("Message"), dismissButton: .default(Text("Got it!")))
}
}
}
Related
When I click the "Update" button, I want the text view to save the text used in the User Defaults.
I could not. Do you know how? Can you edit the codes?
After updating, I want the checkbox to appear, but first I need to set user defaults.
Struct ContentView: View{
#State private var profilName = ""
#State private var profilSurname = ""
var body: some View{
ZStack{
VStack{
TextField("Name", text: $profilName)
.frame(height: 60)
.padding([.leading, .trailing], 20)
.foregroundColor(.white)
.font(Font.system(size: 30, design: .default))
.multilineTextAlignment(.center)
.accentColor(Color.white)
.overlay(RoundedRectangle(cornerRadius:30)
.stroke(Color(#colorLiteral(red: 0.5411764706, green:
0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth: 1)).padding(.horizontal, 50)
TextField("Surname", text: $profilSurname)
.frame(height: 60)
.padding([.leading, .trailing], 20)
.foregroundColor(.white)
.font(Font.system(size: 30, design: .default))
.multilineTextAlignment(.center)
.accentColor(Color.white)
.overlay(RoundedRectangle(cornerRadius:30)
.stroke(Color(#colorLiteral(red: 0.5411764706, green: 0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth: 1)).padding(.horizontal, 50)
Button(action: {
}, label: {
Text("Update")
.frame(width:300 , height: 40)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 45))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
}
}
}
You can save textfield content by simply calling user defaults in button action
Button(action: {
UserDefaults.standard.set(profilSurname, forKey: "Key")
}
To retrieve text from user defaults when app starts load user defaults data in init function like below
struct ContentView: View{
#State private var profilName = ""
#State private var profilSurname = ""
init() {
self._profilSurname = State(initialValue: UserDefaults.standard.object(forKey: "Key") as? String ?? "")
}
var body: some View{
struct ContentView: View{
#State private var profilName = ""
#State private var profilSurname: String = UserDefaults.standard.string(forKey: "Key") ?? ""
var body: some View{
ZStack{
VStack{
TextField("Name", text: $profilName)
.frame(height: 60)
.padding([.leading, .trailing], 20)
.foregroundColor(.black)
.font(Font.system(size: 30, design: .default))
.multilineTextAlignment(.center)
.accentColor(Color.white)
.overlay(RoundedRectangle(cornerRadius:30)
.stroke(Color(#colorLiteral(red: 0.5411764706, green:
0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth: 1)).padding(.horizontal, 50)
TextField("Surname", text: $profilSurname)
.frame(height: 60)
.padding([.leading, .trailing], 20)
.font(Font.system(size: 30, design: .default))
.multilineTextAlignment(.center)
.accentColor(Color.white)
.overlay(RoundedRectangle(cornerRadius:30)
.stroke(Color(#colorLiteral(red: 0.5411764706, green: 0.4549019608, blue: 0.2823529412, alpha: 1)), lineWidth: 1)).padding(.horizontal, 50)
Button(action: {
UserDefaults.standard.set(profilSurname, forKey: "Key")
}, label: {
Text("Update")
.frame(width:300 , height: 40)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 45))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
}
}
}
This will be the updated code.
Button(action: {
// This is the action section. You can add your code here
UserDefaults.standard.set($profilSurname.wrappedValue, forKey: "surnname")
}, label: {
Text("Update")
.frame(width:300 , height: 40)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 45))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
Getting stored values form Userdefaults
let surnName = UserDefaults.standard.object(forKey: "surnname") as? String ?? ""
I created the Navigation View, but when you jump to the page, the navigation bar is very thick, although nothing happens.
I want the stick to be thinner. I do not know how to do it. I could not find the examples, I could not do it myself. Can you do it.
HStack(spacing: 10) {
NavigationLink(destination: PicturePage()){
Text("Kahve Falı")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: geometry.size.width)
.frame(height: geometry.size.height / 5)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color(#colorLiteral(red: 0.8527825475, green:
0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}.navigationBarTitle(Text("Geri"))
.navigationBarHidden(true)
}
Navigation page
struct PicturePage: View {
//3-1//
var body: some View {
GeometryReader { geometry in
Color.black.edgesIgnoringSafeArea(.all)
VStack {
VStack {
Text("Picture")
.font(.system(size: 60))
.frame(height: geometry.size.height / 10)
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
Spacer().frame(height: geometry.size.height / 15)
}
VStack {
Text("Merhaba").frame(width: geometry.size.width, height: geometry.size.height / 10)
.foregroundColor(Color.white)
}
VStack {
Image("AstroGirl").resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width, height: geometry.size.height / 3)
Spacer().frame(height: geometry.size.height / 15)
}
// This `HStack` is changed
HStack(spacing: 30) {
ForEach(0 ..< 3) { _ in
CircleView()
.frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
.shadow(color: Color.yellow, radius: 10, x: 0, y: 0)
}
}
Spacer().frame(height: geometry.size.height / 10)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
}
}
}
}
Look for property displayMode and set that to .inline
Here is a good overview of the options available and usage:
https://www.hackingwithswift.com/articles/216/complete-guide-to-navigationview-in-swiftui
More info on your follow up question...
You can extend the UINavigationController and make the background transparent for all your views. Add the below to a new swift file in your project.
extension UINavigationController {
override open func viewDidLoad() {
super.viewDidLoad()
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()
navigationBar.standardAppearance = appearance
navigationBar.compactAppearance = appearance
navigationBar.scrollEdgeAppearance = appearance
navigationBar.prefersLargeTitles = false // use inline titles on very view
// navigationBar.isHidden = true // hide the nav bar completely on every view
}
}
I created the NavigationBar, but when I perform .inline, I cannot make the background color completely black.
Do you have any information on this?
I could not find how to do it.
I would be glad if you could fix this.
likewise tabBar also have this color problem
I tried different ways but got the same result in all of them.
init() {
//Tabbar Renk bölümü
UITabBar.appearance().barTintColor = UIColor.black
UINavigationBar.appearance().barTintColor = .black
}
HStack(spacing: 10) {
NavigationLink(destination: PicturePage()) {
Text("Picture")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: geometry.size.width)
.frame(height: geometry.size.height / 5)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}.navigationBarTitle(Text("Geri"),displayMode: .inline)
.navigationBarHidden(true)
}
struct PicturePage: View {
//3-1//
var body: some View {
GeometryReader { geometry in
Color.black.edgesIgnoringSafeArea(.all)
VStack {
VStack {
Text("Picture")
.font(.system(size: 60))
.frame(height: geometry.size.height / 10)
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
Spacer().frame(height: geometry.size.height / 15)
}
VStack {
Text("Merhaba").frame(width: geometry.size.width, height: geometry.size.height / 10)
.foregroundColor(Color.white)
}
VStack {
Image("AstroGirl").resizable()
.aspectRatio(contentMode: .fit)
.frame(width: geometry.size.width, height: geometry.size.height / 3)
Spacer().frame(height: geometry.size.height / 15)
}
// This `HStack` is changed
HStack(spacing: 30) {
ForEach(0 ..< 3) { _ in
CircleView()
.frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
.shadow(color: Color.yellow, radius: 10, x: 0, y: 0)
}
}
Spacer().frame(height: geometry.size.height / 10)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
}
}
}
}
I added a text editor but couldn't center its position,
The text editor has shifted to the right as shown in the picture.
Sorry, I just noticed that the whole page has shifted to the right.
I don't know what I'm doing wrong. You can fix this.
I want it to stand in the middle.
struct TextSend: View {
#State private var inputText = ""
var body: some View {
GeometryReader { geometry in
VStack {
HStack {
Text("Picture")
.font(.system(size: 60))
.frame(width: geometry.size.width, height: geometry.size.height / 10)
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
Spacer().frame(height: geometry.size.height / 5)
}
VStack {
Text("Hi").frame(width: geometry.size.width, height: geometry.size.height / 10)
}
HStack {
ForEach(0 ..< 3) { _ in
CircleView()
.frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
.shadow(radius: 10)
}
}
VStack {
TextEditor(text: $inputText) .frame(width: geometry.size.width, height:geometry.size.height / 3) .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.init( red: 45/255, green: 0/255, blue: 112/255), lineWidth: 1)).lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}
Spacer().frame(height: geometry.size.height / 15)
VStack {
Button(action: {}, label: {
Text("Gönder")
.frame(width: geometry.size.width / 3, height: 50)
.padding(10)
.font(Font.system(size: 30, weight: .medium, design: .serif))
.foregroundColor(.white)
.background(RoundedRectangle(cornerRadius: 30))
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
})
}
}
}
}
}
Remove frame(width: geometry.size.width from everywhere used, as such hardcoding breaks layout. Try to use geometry always only for calculable values.
Here is fixed parts (tested with Xcode 12.1 / iOS 14.1)
HStack {
Text("Picture")
.font(.system(size: 60))
.frame(height: geometry.size.height / 10) // << !!
.foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
Spacer().frame(height: geometry.size.height / 5)
}
VStack {
Text("Hi").frame(height: geometry.size.height / 10) // << !!
}
// ... other code
VStack {
TextEditor(text: $inputText)
.frame(height:geometry.size.height / 3) // << !!
.overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.init( red: 45/255, green: 0/255, blue: 112/255), lineWidth: 1)).lineSpacing(10)
.autocapitalization(.words)
.disableAutocorrection(true)
.padding()
}
You need to add frame to your first child inside the GeometryReader which is VStack in your case
VStack{
}.frame(width:geometry.size.width , height: geometry.size.height)
ps : you can make it : geometry.size.width - 10 for example , for padding purpose
How can I cancel the text field editing. I want no other editing on the TextField when the selection is made. I tried it myself, but I couldn't.
struct profile: View {
#State private var iliskiDurumlari: [String] = ["Evli", "Bekar", "Ayrı", "anan"]
#State private var iliskiVisible = false
#State private var iliski = ""
var body: some View {
VStack {
TextField("İlişki Durumu Seçiniz..", text: $iliski)
.frame(width: 300, height: 50, alignment: .center)
.padding(5)
.font(Font.system(size: 15, weight: .medium, design: .serif))
.overlay(
RoundedRectangle(cornerRadius: 30)
.stroke(Color(red: 45 / 255, green: 0 / 255, blue: 112 / 255), lineWidth: 1)
)
.actionSheet(isPresented: $iliskiVisible, content: actionSheet)
.onTapGesture {
self.iliskiVisible.toggle()
}
}
}
func actionSheet() -> ActionSheet {
ActionSheet(
title: Text("Bir İlişki Durumu Seçiniz"),
message: Text("Aşagıda"),
buttons: iliskiDurumlari.map { value in
ActionSheet.Button.default(Text(value), action: {
self.iliski = value
})
}
)
}
}
If you don't need user input (show keyboard) for this particular field, you can use Text instead:
var body: some View {
VStack {
Text(iliski) // <- change here
.frame(width: 300, height: 50, alignment: .center)
.padding(5)
.font(Font.system(size: 15, weight: .medium, design: .serif))
.overlay(
RoundedRectangle(cornerRadius: 30)
.stroke(Color(red: 45 / 255, green: 0 / 255, blue: 112 / 255), lineWidth: 1)
)
.actionSheet(isPresented: $iliskiVisible, content: actionSheet)
.onTapGesture {
self.iliskiVisible.toggle()
}
}
}
and instead of placeholder add initial value:
#State private var iliski = "İlişki Durumu Seçiniz.."
If you want to dismiss the keyboard and cancel editing of the textfield when the user taps on the Action Sheet then in SwiftUI you need this code:
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) reference here: https://www.hackingwithswift.com/quick-start/swiftui/how-to-dismiss-the-keyboard-for-a-textfield
So your code must be like that:
func actionSheet() -> ActionSheet {
ActionSheet(
title: Text("Bir İlişki Durumu Seçiniz"),
message: Text("Aşagıda"),
buttons: iliskiDurumlari.map { value in
ActionSheet.Button.default(Text(value), action: {
self.iliski = value
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
})
}
)
}
}
Add your text field inside the button and disable the text field interaction.
var body: some View {
VStack {
Button(action: {
self.iliskiVisible.toggle()
}, label: {
TextField("İlişki Durumu Seçiniz..", text: $iliski)
.frame(width: 300, height: 50, alignment: .center)
.padding(5)
.font(Font.system(size: 15, weight: .medium, design: .serif))
.overlay(
RoundedRectangle(cornerRadius: 30)
.stroke(Color(red: 45 / 255, green: 0 / 255, blue: 112 / 255), lineWidth: 1)
)
.allowsHitTesting(false)//<- Disable interection
})
.actionSheet(isPresented: $iliskiVisible, content: actionSheet)
}
}