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)
}
}
Related
I'm currently running into a problem with a sheet not closing when the close button is pushed or the save button has completed transferring the data from the form to the list in homeview. Below is the code for a custom tab bar that when "New Survey" is pushed it will open the formView. The formView has two buttons closed and save. I would like it that when either one of these buttons are selected that it closes the formView.
struct FormView: View {
#Binding var surveys: [Survey]
#State var customerName = ""
#State var city = ""
#State var state = ""
#State var lineName = ""
#State var date = Date()
#Binding var isPresented: Bool
#State var showingFormView = false
var body: some View {
VStack{
ZStack {
NavigationView {
VStack {
ZStack {
Form {
Section(header: Text("Survey Info").font(.custom("Roboto-Light", size: 24)).foregroundColor(Color(red: 0.00, green: 0.188, blue: 0.42)).offset(x: -20)) { TextField("Customer Name", text: $customerName)
.padding(.vertical, 10.0)
.font(.custom("Roboto-Light", size: 18))
TextField("Customer City", text: $city)
.padding(.vertical, 10.0)
.font(.custom("Roboto-Light", size: 18))
TextField("State", text: $state)
.padding(.vertical, 10.0)
.font(.custom("Roboto-Light", size: 18))
TextField("Line Name", text: $lineName)
.padding(.vertical, 10.0)
.font(.custom("Roboto-Light", size: 18))
DatePicker("Date", selection: $date, displayedComponents: .date)
.padding(.vertical, 10.0)
.font(.custom("Roboto-Light", size: 18))
}
}
VStack (alignment: .center){
Spacer()
HStack {
**Button(action: {
self.showingFormView = false
self.isPresented = false
}, label: {
Text("Close")
.font(.custom("Roboto-Light", size: 23))
.foregroundColor(Color.white)
.frame(width: 150.0, height: 50.0, alignment: .center)
.background(Color(hue: 0.001, saturation: 0.768, brightness: 0.975))
.cornerRadius(3)
})
Button(action: {
// Save survey data to UserDefaults or any other means
let survey = Survey(customerName: customerName, city: city, state: state, lineName: lineName, date: date)
self.surveys.append(survey)
// Clear text fields
self.customerName = ""
self.city = ""
self.state = ""
self.lineName = ""
self.date = Date()
// Close FormView
self.showingFormView = false
self.isPresented = false
}, label: {
Text("Save")
.font(.custom("Roboto-Light", size: 23))
.foregroundColor(Color.white)
.frame(width: 150.0, height: 50.0, alignment: .center)
.background(Color(red: 0.451, green: 0.729, blue: 0.251))
.cornerRadius(3)
})**
}
}
}
}
.navigationBarHidden(true)
}
}
}
}
}
Custom Tab Bar
struct CustomTabBar: View {
#Binding var surveys: [Survey]
#Binding var isPresented : Bool
#State var showingFormView = false
var body: some View {
NavigationView{
VStack {
Spacer()
HStack (alignment: .bottom) {
Button {
} label: {
GeometryReader { geo in
VStack (alignment: .center, spacing: 4) {
Image(systemName: "magnifyingglass")
.resizable()
.scaledToFit()
.frame(width: 32, height: 32)
Text("Search")
.font(.custom("Roboto-Light", size: 14))
}
.frame(width: geo.size.width,height: geo.size.height)
}
}
.tint(Color(red: 0.0, green: 0.188, blue: 0.42))
**Button(action: {
showingFormView = true
}) {
GeometryReader { geo in
VStack(alignment: .center, spacing: 4) {
Image("PSIcon")
.resizable()
.scaledToFit()
.frame(width: 38, height: 38)
Text("New Survey")
.font(.custom("Roboto-Light", size: 14))
.tint(Color(red: 0.0, green: 0.188, blue: 0.42))
}
.frame(width: geo.size.width, height: geo.size.height)
}
}
.sheet(isPresented: $showingFormView) {
FormView(surveys: $surveys, isPresented: $isPresented) }
//code allows you to call up a specific view so long as a var is indicated
**
Button {
} label: {
GeometryReader { geo in
VStack (alignment: .center, spacing: 4) {
Image(systemName: "arrow.up.arrow.down")
.resizable()
.scaledToFit()
.frame(width: 35, height: 35)
Text("Sort")
.font(.custom("Roboto-Light", size: 14))
}
.frame(width: geo.size.width,height: geo.size.height)
}
}
.tint(Color(red: 0.0, green: 0.188, blue: 0.42))
}
.frame(height: 50.0)
}
}
}
}
The save button saves and creates a new item in the dynamic list but it does not close the formView. The only way for me to close the view is by swiping down on the screen.
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!")))
}
}
}
I created an ActionSheet, but was unable to print the value I selected on the TextField.
I do not know how to do it. I will be glad if you can help.
struct illedetayyip: View {
#State private var iliskiDurumlari: [String] = ["Evli", "Bekar", "Ayrı", "anan"]
#State private var iliskiArray = NSMutableArray()
#State private var iliskiVisible = false
#State private var iliski = ""
func iliskiFunc() {
for i in 0 ..< self.iliskiDurumlari.count {
let button: ActionSheet.Button = .default(Text(self.iliskiDurumlari[i]), action: {
print(self.iliskiDurumlari[i])
})
self.iliskiArray[i] = button
}
}
init() {
iliskiFunc()
}
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) {
ActionSheet(title: Text("Bir İlişki Durumu Seçiniz"), message:
Text("Aşagıda"), buttons: self.iliskiArray as! [ActionSheet.Button])
}
.onTapGesture {
self.iliskiVisible.toggle()
}
}
}
}
You don't need to create a NSMutableArray and then cast it back to [ActionSheet.Button].
Try this instead:
struct illedetayyip: 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
})
}
)
}
}
I am fairly new to Swift, so please bear with me.
screenshot when nothing's tapped
screenshot when one button is tapped
I am trying to turn the other buttons, which are not tapped, inactive and change the opacity to 0.5.
So far I have tried using the $bindings but that did not work the way I wanted it to.
Here is the Code for my SelectionButtons:
struct SelectionButton: View {
var buttonText = "Selection Button"
var buttonColor = Color.white
var buttonWidth: CGFloat = 150
var active = false
var body: some View {
ZStack {
if active {
RoundedRectangle(cornerRadius: 45)
.frame(width: buttonWidth, height: 50)
.foregroundColor(Color("neonGreen"))
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:9, x:0, y:0)
Text(buttonText)
.font(.system(size: 18))
.foregroundColor(.black)
.bold()
}else{
RoundedRectangle(cornerRadius: 45)
.frame(width: buttonWidth, height: 50)
.foregroundColor(buttonColor)
.shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.25)), radius:9, x:0, y:0)
Text(buttonText)
.font(.system(size: 18))
.foregroundColor(.black)
}
}
}
And this is how I use them:
#State var gelbesBlatt = false
var body: some View {
NavigationView {
Button(action: {
self.gelbesBlatt.toggle()
}, label: {SelectionButton(buttonText: "gelb", buttonColor: .white, buttonWidth: 150, active: gelbesBlatt)
})
}
}
Thank you!
If you have an idea how I could add combinations, so that specific buttons which belong together (like "Ganzes Blatt > gelb" and "Ränder > braun") can be selected together, that would be awesome!
Check this:
#State var gelbesBlatt = false
#State var btnBraun = false
var body: some View {
NavigationView {
HStack {
Button(action: {
self.toggleButton(button: 0)
}, label: {SelectionButton(buttonText: "gelb", buttonColor: .white, buttonWidth: 150, active: gelbesBlatt)
})
Button(action: {
self.toggleButton(button: 1)
}, label: {SelectionButton(buttonText: "braun", buttonColor: .white, buttonWidth: 150, active: btnBraun)
})
}
}
}
func toggleButton(button: Int) {
if(button == 0) {
self.gelbesBlatt = true
self.btnBraun = false
} else {
self.gelbesBlatt = false
self.btnBraun = true
}
self.gelbesBlatt.toggle()
self.btnBraun.toggle()
}
I need to make such a simple thing, but can't figure out how.
So I need to create a View which I already have inside another view. Here how it looks like now ↓
Here's my button:
struct CircleButton: View {
var body: some View {
Button(action: {
self
}, label: {
Text("+")
.font(.system(size: 42))
.frame(width: 57, height: 50)
.foregroundColor(Color.white)
.padding(.bottom, 7)
})
.background(Color(#colorLiteral(red: 0.4509803922, green: 0.8, blue: 0.5490196078, alpha: 1)))
.cornerRadius(50)
.padding()
.shadow(color: Color.black.opacity(0.15),
radius: 3,
x: 0,
y: 4)
}
}
Here's a view which I want to place when I tap the button ↓
struct IssueCardView: View {
var body: some View {
ZStack (alignment: .leading) {
Rectangle()
.fill(Color.white)
.frame(height: 50)
.shadow(color: .black, radius: 20, x: 0, y: 4)
.cornerRadius(8)
VStack (alignment: .leading) {
Rectangle()
.fill(Color(#colorLiteral(red: 0.6550863981, green: 0.8339114785, blue: 0.7129291892, alpha: 1)))
.frame(width: 30, height: 8)
.cornerRadius(8)
.padding(.horizontal, 10)
Text("Some text on card here")
.foregroundColor(Color(UIColor.dark.main))
.font(.system(size: 14))
.fontWeight(.regular)
.padding(.horizontal, 10)
}
}
}
}
Here's a view where I want to place this IssueCardView ↓. Instead of doing it manually like now I want to generate this View with button.
struct TaskListView: View {
var body: some View {
ScrollView(.vertical, showsIndicators: false, content: {
VStack (alignment: .leading, spacing: 8) {
**IssueCardView()
IssueCardView()
IssueCardView()
IssueCardView()
IssueCardView()**
}
.frame(minWidth: 320, maxWidth: 500, minHeight: 500, maxHeight: .infinity, alignment: .topLeading)
.padding(.horizontal, 0)
})
}
}
Although it works with scrollView and stack, You should use a List for these kind of UI issues (as you already mentioned in the name of TaskListView)
struct TaskListView: View {
typealias Issue = String // This is temporary, because I didn't have the original `Issue` type
#State var issues: [Issue] = ["Some issue", "Some issue"]
var body: some View {
ZStack {
List(issues, id: \.self) { issue in
IssueCardView()
}
CircleButton {
self.issues += ["new issue"]
}
}
}
}
I have added let action: ()->() to CircleButton. So I can pass the action to it.