I have this view
import SwiftUI
struct DoctorCard: View {
let data: Doctor
var body: some View {
HStack(alignment: .top, spacing: 8) {
Image(data.image)
.renderingMode(.original)
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(35)
.frame(width: 86, height: 86, alignment: .center)
.padding(.trailing, 5)
VStack(alignment: .leading, spacing: 4) {
Text(data.name.capitalized)
.foregroundColor(Colors.darkBlue)
.font(.system(size: 16, weight: .bold))
.fixedSize(horizontal: true, vertical: false)
.multilineTextAlignment(.leading)
Text(data.specialist)
.foregroundColor(Colors.gray)
.font(.system(size: 13, weight: .regular))
.fixedSize(horizontal: true, vertical: false)
.multilineTextAlignment(.leading)
Text(data.work)
.foregroundColor(Colors.gray)
.font(.system(size: 13, weight: .regular))
.fixedSize(horizontal: true, vertical: false)
.multilineTextAlignment(.leading)
HStack {
Image("location")
Text(data.location)
.foregroundColor(Colors.gray)
.font(.system(size: 13, weight: .regular))
.fixedSize(horizontal: true, vertical: false)
.multilineTextAlignment(.leading)
}
}.frame(maxWidth: .infinity)
// Spacer()
}.frame(maxWidth: screenSize.width - 30)
.padding()
.background(Color.white)
.cornerRadius(12)
}
}
struct DoctorCard_Previews: PreviewProvider {
static var previews: some View {
DoctorCard(data: Doctor(id: UUID().uuidString,
name: "Dr. Basma Saber",
specialist: "Dentist | General Dentistry | General Dentistry Dentistry",
work: "Works in West Bay Medicare",
location: "Al Dafna, Westbay",
image: "avatar",
review: 4))
}
}
How to prevent views from going out of screen? what am I missing?
The problem is your Dentist-line is too long and your code handles it the wrong way.
Do it like this:
Text("Dentist | General Dentistry | General Dentistry Dentistry")
.fixedSize(horizontal: false, vertical: true) // <--- like this
.lineLimit(2)
.foregroundColor(Color.gray)
.font(.system(size: 13, weight: .regular))
// .fixedSize(horizontal: true, vertical: false)
.multilineTextAlignment(.leading)
Related
I want to show part of next item in tabview as following design
I managed to show one item per page but I couldn't show part of next one. Here's my code
GeometryReader { proxy in
TabView(selection: $viewModel.selectedTabIndex) {
ForEach(self.viewModel.data?.perspective ?? []) { item in
HStack(spacing: 20) {
Image("icon")
.resizable()
.scaledToFit()
.frame(width: 24, height: 24, alignment: .center)
Text(item.name)
.font(.system(size: 16, weight: .medium))
.foregroundColor(Color.white)
.tag(item.id)
Spacer()
}
.frame(width: proxy.size.width - 70, height: 40, alignment: .center)
.padding(.horizontal)
.background(.red)
.cornerRadius(5)
}
}
.tabViewStyle(.page(indexDisplayMode: .never))
}
.frame(height: 40, alignment: .center)
Good afternoon community,
I have a problem with my app, I am trying to make it look good in both situations, so when I change orientation my app returns to the main screen, it does not stay on the second screen, will someone have a solution to this problem?
I don't know if my view breaks or cannot cover the space that I have determined, I leave my code below.
import SwiftUI
struct LoginView: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
init() {
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: UIBarMetrics.default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().isTranslucent = true
UINavigationBar.appearance().tintColor = .clear
UINavigationBar.appearance().backgroundColor = .clear
}
var backButton : some View {
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
HStack {
Image("Backarrow")
.aspectRatio(contentMode: .fit)
.foregroundColor(.white)
Text(" Back")
.foregroundColor(.yellow)
}
}
}
var topImage:some View{
Image("header2")
.resizable()
.overlay( ImageOverlay() , alignment: .center)
.background(Color.black)
}
var usernameTextField:some View{
HStack{
TextField("", text: $LoginViewM.username)
.placeholder(Text("Numero de telefono,email o usuario").padding().foregroundColor(.white), show: LoginViewM.password.isEmpty)
.background(Color.black)
Image("menuCloseSmall")
.padding(.init(top: 0, leading: 0, bottom: 0, trailing: 14))
}
.lineLimit(1)
.foregroundColor(.white)
.minimumScaleFactor(0.5)
.font(.custom("Montserrat-Regular", fixedSize: 16.4))
.overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 4))
}
var errorUsernameLabel:some View{
VStack{
Text(" Hey you, no user found. Make sure you’ve provided the ")
.lineLimit(1)
Text("correct information.")
}
.multilineTextAlignment(.leading)
.foregroundColor(.redBlueParrot)
.minimumScaleFactor(0.5)
.font(.custom("Montserrat-Regular", size: 12.1))
}
var passwordTextField:some View{
HStack{
TextField("Contraseña", text: $LoginViewM.password)
.font(.custom("Montserrat-Regular", fixedSize: 16.4))
.padding(.bottom)
.foregroundColor(.white)
.placeholder(Text("Contraseña").padding().foregroundColor(.white), show: LoginViewM.username.isEmpty)
.lineLimit(1)
.minimumScaleFactor(0.5)
.background(Color.black)
Image("editShow")
.padding(.init(top: 0, leading: 0, bottom: 0, trailing: 14))
}
.overlay(RoundedRectangle(cornerRadius: 4).stroke(Color.gray, lineWidth: 3))
.clipShape(RoundedRectangle(cornerRadius: 4))
}
var errorPasswordLabel:some View{
VStack{
Text(" Incorrect password for \(LoginViewM.password). Please try again.")
}
.lineLimit(1)
.minimumScaleFactor(0.5)
.foregroundColor(.redBlueParrot)
.font(.custom("Montserrat-Regular", size: 12.1))
}
var buttonLogin:some View{
NavigationLink(
destination: Text("Hola"),
label: {
Text("Iniciar sesion")
}) .font(.custom("Montserrat-Medium", size: 16))
.foregroundColor(Color.ligthGray)
.frame(minWidth: 0, idealWidth: 174, maxWidth: 174, minHeight: 0, idealHeight: 48, maxHeight: 48, alignment: .center)
.overlay(RoundedRectangle(cornerRadius: 18)
.stroke(Color.gray, lineWidth: 1.5))
}
var textInBottom:some View{
HStack(spacing:5){
Text("Olvidaste tu")
.foregroundColor(.white)
.font(.custom("Montserrat-Regular", size: 16))
Button("contraseña"){
}
.foregroundColor(.yellow)
.font(.custom("Montserrat-Regular", size: 16))
Text("o")
.foregroundColor(.white)
.font(.custom("Montserrat-Regular", size: 16))
Button("usuario"){
}
.foregroundColor(.yellow)
.font(.custom("Montserrat-Regular", size: 16))
}
}
#ObservedObject var LoginViewM = LoginViewModel()
var body: some View {
GeometryReader{ geometry in
NavigationView{
VStack(spacing:2){
topImage
.frame(width: geometry.size.width, height: geometry.size.height * 0.39)
VStack(spacing:17){
usernameTextField
.frame(width: geometry.size.width*0.90, height: geometry.size.height*0.05)
errorUsernameLabel
.frame(width: geometry.size.width*0.90,height: geometry.size.height*0.06, alignment: .center)
passwordTextField
.frame(width: geometry.size.width*0.90, height: geometry.size.height*0.05)
errorPasswordLabel
.frame(height: geometry.size.height*0.06, alignment: .center)
}.frame( height: geometry.size.height * 0.40)
VStack{
buttonLogin
}.frame(height: geometry.size.height * 0.10, alignment: .center)
Spacer()
textInBottom
.frame(height: geometry.size.height * 0.05, alignment: .center)
Spacer()
}
.ignoresSafeArea(.all)
.background(Color.black)
}
.navigationBarItems(leading: backButton)
.navigationBarBackButtonHidden(true)
.background(Color.black)
.navigationViewStyle(StackNavigationViewStyle())
}
}
}
struct LoginView_Previews: PreviewProvider {
static var previews: some View {
LoginView()
}
}
I have made a login view in SwiftUI and it worked at first but now that I have styled the view, my textfields don't work anymore. I can't type anything in the Textfields. Is this a Xcode bug or have I made a mistake. This is the code:
ZStack{
Color.red.ignoresSafeArea()
VStack {
Image("login")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
Spacer()
}
VStack {
Spacer()
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.zIndex(1)
Button(action: {login()}) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Register()) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(RoundedCorners(color: .white, tl: 30, tr: 30, bl: 0, br: 0))
.ignoresSafeArea()
.offset(y: 35)
}.shadow(radius: 15)
}
The login button and register text do work so I don't think that there is an invisible object above the textfields.
This is my design
First, you are using three views insid the ZStack. In other words you are laying three layers over the others. You should use 2 views inside the Zstack.
Second, use the clipped() modifier before shadow().
ZStack{
Color.red
VStack {
Spacer()
Image(systemName: "plus")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
Button(action: {}) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Text("hello")) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}
.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(Color.white)
.clipped()
.shadow(radius: 15, x: 0, y: 0)
}
}
.ignoresSafeArea()
However, using the ZStack is unnecessary.
VStack {
Spacer()
Image(systemName: "plus")
.resizable()
.frame(width: 150, height: 150)
.shadow(radius: 5)
.padding(.top, 20)
.offset(y: -50)
VStack {
HStack {
Image(systemName: "mail")
TextField("Email", text: $email)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
.padding(.top, 30)
HStack {
Image(systemName: "lock.rectangle")
SecureField("Password", text: $password)
}
.padding()
.background(Color.gray.opacity(0.1))
.cornerRadius(10)
.padding(.horizontal)
Button(action: {}) {
Text("Sign in")
.padding()
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width - 100, height: 50)
.background(Color.red)
.cornerRadius(10)
.padding(.horizontal)
.padding(.top)
}.buttonStyle(PlainButtonStyle())
NavigationLink(destination: Text("hello")) {
Text("No account? Sign up!")
.padding()
.foregroundColor(.black)
.cornerRadius(35)
.padding(.horizontal)
}
.buttonStyle(PlainButtonStyle())
Spacer()
}
.frame(height: UIScreen.main.bounds.height * 0.6)
.background(Color.white)
.clipped()
.shadow(radius: 15, x: 0, y: 0)
}
.background(Color.red)
.ignoresSafeArea()
You should use .background(RoundedCorners(color: .white, tl: 30, tr: 30, bl: 0, br: 0)) adjust the offset of the innner Vstack.
This has happened to me before. Usually it has just been an Xcode glitch and I have to quit and restart the IDE a couple times before it actually shows up. However in Simulator it works. Hope it's resolved now though! :)
I can't get rid of this "leading" padding inside one of my VStacks.
I set alignment to "leading" for its parent VStack but it still shows some spacing on the left (for the text and red rounded rectangle). They were supposed to be placed on the left next to the blue edge on screenshot.
Any ideas on why this padding appears there?
Here's the code:
import SwiftUI
struct RegisterView: View {
var body: some View {
VStack(spacing: 0) {
HStack(alignment: .top) {
Text("Register")
.font(.custom("NotoSans-Regular", size: 24))
.fontWeight(.bold)
.foregroundColor(Color.tertiaryTitleColor)
}
.frame(width: 299, height: 39)
.padding(.top, 78)
HStack(spacing: 13) {
BroviderButton(imageName: "googleLogo")
BroviderButton(imageName: "facebookLogo")
}
.padding(.top, 47)
VStack(alignment: .leading, spacing: 0) {
Text("Register with E-mail")
.font(.custom("NotoSans-Regular", size: 16))
RoundedRectangle(cornerRadius: 25)
.fill(Color.red)
.frame(width: 40, height: 20)
}
.frame(width: 279)
.padding(.top, 61)
Spacer()
}
.frame(maxHeight: /*#START_MENU_TOKEN#*/.infinity/*#END_MENU_TOKEN#*/)
.frame(maxWidth: /*#START_MENU_TOKEN#*/.infinity/*#END_MENU_TOKEN#*/)
.background(Color.loginBackgroundColor)
.ignoresSafeArea()
}
}
struct RegisterView_Previews: PreviewProvider {
static var previews: some View {
RegisterView()
}
}
struct BroviderButton: View {
var imageName: String
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 27.5)
.frame(width: 133, height: 56, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.shadow(color: Color.dropShadowColor, radius: 1, x: 10, y: 20)
.offset(y: 15)
.opacity(0.2)
.blur(radius: 20)
.opacity(0.2)
VStack {
VStack {
Image(imageName)
.resizable()
.scaledToFit()
}
.frame(height: 28, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
}
.frame(width: 133, height: 56, alignment: /*#START_MENU_TOKEN#*/.center/*#END_MENU_TOKEN#*/)
.foregroundColor(/*#START_MENU_TOKEN#*/.blue/*#END_MENU_TOKEN#*/)
.background(Color.loginBackgroundColor)
.cornerRadius(27.5)
.opacity(1)
}
}
}
You need also apply alignment to frame of container, like
VStack(alignment: .leading, spacing: 0) {
Text("Register with E-mail")
.font(.custom("NotoSans-Regular", size: 16))
RoundedRectangle(cornerRadius: 25)
.fill(Color.red)
.frame(width: 40, height: 20)
}
.frame(width: 279) // << do you really need this? why?
.frame(maxWidth: .infinity, alignment: .leading) // << here !!
.padding(.top, 61)
I have created a screen with one top bar view and a main body view. The main body contains a registration form. As the form is too big, I have enclosed only the body part by a ScrollView. However, after doing it the form moves to the leading edge of the device. Although the form used to be in the centre of a VStack before. Could anyone please tell me what's the main issue of the ScrollView in this case?
import SwiftUI
struct HubRegistrationView: View {
var body: some View {
GeometryReader { geometry in
VStack (spacing: 0) {
VStack {
HeaderView()
}
.frame(width: geometry.size.width)
.padding()
.background(Color("B1"))
ScrollView(.vertical) {
ZStack {
Image("App Background")
.resizable()
.aspectRatio(contentMode: .fit)
.offset(y: -geometry.size.height/8)
HubFormView()
}
.frame(width: geometry.size.width)
}
}
.edgesIgnoringSafeArea(.all)
}
}
}
struct HubRegistrationView_Previews: PreviewProvider {
static var previews: some View {
Group {
HubRegistrationView()
HubRegistrationView()
.previewDevice("iPhone 8")
}
}
}
import SwiftUI
struct HubFormView: View {
#State var hubOwner: String = ""
var body: some View {
GeometryReader { geometry in
VStack {
HStack {
Text("Hub Owner")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
TextField("00-00-2020", text: self.$hubOwner)
}
.font(.system(size: 13))
.frame(width: geometry.size.width/1.4, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
HStack {
Text("Hub Name")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
TextField("Motorcycle", text: self.$hubOwner)
}
.font(.system(size: 13))
.frame(width: geometry.size.width/1.4, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
Button(action: {}) {
Text("Phone")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
Text("Motorcycle")
.foregroundColor(Color("T5"))
Spacer()
Image(systemName: "chevron.down")
.font(.system(size: 20))
.padding(.trailing)
.foregroundColor(Color("T1"))
}
.font(.system(size: 13))
.frame(width: geometry.size.width/1.4, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
Button(action: {}) {
Text("Email")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
Text("Motorcycle")
.foregroundColor(Color("T5"))
Spacer()
Image(systemName: "chevron.down")
.font(.system(size: 20))
.padding(.trailing)
.foregroundColor(Color("T1"))
}
.font(.system(size: 13))
.frame(width: geometry.size.width/1.4, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
HStack {
Text("Street")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
TextField("Shah Makdun Ave, Uttara", text: self.$hubOwner)
}
.font(.system(size: 13))
.frame(width: geometry.size.width/1.4, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
HStack {
HStack {
Text("ZIP Code")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
TextField("1205", text: self.$hubOwner)
}
.font(.system(size: 13))
.frame(width: geometry.size.width/2.9, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
Button(action: {}) {
Text("City")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
Text("Dhaka")
.foregroundColor(Color("T5"))
Spacer()
Image(systemName: "chevron.down")
.font(.system(size: 20))
.padding(.trailing)
.foregroundColor(Color("T1"))
}
.font(.system(size: 13))
.frame(width: geometry.size.width/2.9, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
}
HStack {
Text("Trade Licence")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
TextField("Licence No.", text: self.$hubOwner)
}
.font(.system(size: 13))
.frame(width: geometry.size.width/1.4, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
HStack {
Text("TIN")
.foregroundColor(Color("T6"))
.padding(.leading)
Text("|")
.frame(width: 1, height: 40)
.background(Color("Border1"))
TextField("TIN No.", text: self.$hubOwner)
}
.font(.system(size: 13))
.frame(width: geometry.size.width/1.4, height: 40)
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color("Border1"), lineWidth: 1)
)
HStack {
Image(systemName: "checkmark.square.fill")
.resizable()
.frame(width: 15, height: 15)
Text("I have accepted the")
Text("terms and conditions")
.foregroundColor(Color("T2"))
Spacer()
}
.font(.system(size: 12))
.padding(.top, 10)
.frame(width: 300)
HStack {
Spacer()
Button(action: {}) {
Text("SUBMIT")
.foregroundColor(Color("T3"))
}
.padding()
.background(Color("B2"))
.cornerRadius(6)
}
.padding(.top)
.frame(width: geometry.size.width/1.4, height: 40)
}
.padding(.top, 60)
.padding(.leading, geometry.size.width/7)
}
}
}
struct HubFormView_Previews: PreviewProvider {
static var previews: some View {
HubFormView()
}
}
import SwiftUI
struct HeaderView: View {
var body: some View {
HStack {
Image("Back Icon")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 50, height: 50)
Text("HUB REGISTRATION")
.font(.system(size: 25))
.padding()
.foregroundColor(Color("T3"))
}
.padding(.top)
}
}
struct HeaderView_Previews: PreviewProvider {
static var previews: some View {
HeaderView()
}
}
thx for your code, i had to give them "real" colors so that i could see something and i got this preview now:
But how do you wanna have it?
I tested with 13.4...maybe you have an older iOS version?
ok, i tried this (because you did not show us compilable code) and it is centered...so please give us a reproducable example...
struct ContentView: View {
var body: some View {
GeometryReader { geometry in
VStack (spacing: 0) {
Spacer()
VStack {
Text("Hello")
}
.frame(width: geometry.size.width)
.padding()
.background(Color("B1"))
ScrollView(.vertical) {
ZStack {
Image("App Background")
.resizable()
.aspectRatio(contentMode: .fit)
.offset(y: -geometry.size.height/8)
Text("aha")
}
.frame(width: geometry.size.width)
}
}
.edgesIgnoringSafeArea(.all)
}
}
}