First of all, i'm sorry for my bad english. enter image description hereI just started with SwiftUI and ran into a problem. I could not do as in the design, I will use each box as a button.
Here you go, I hope this answer your question, and each box is a button.
struct GurkanEsenView: View {
var body: some View {
ZStack {
VStack(spacing: 30) {
Button(action: {
}) {
Text("önceki")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: .infinity)
.frame(height: 150)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}
HStack(spacing: 20) {
Button(action: {
}) {
Text("Kahve")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: .infinity)
.frame(height: 150)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}
Button(action: {
}) {
Text("Cay")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: .infinity)
.frame(height: 150)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}
}
HStack(spacing: 20) {
Button(action: {
}) {
Text("Ozel")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: .infinity)
.frame(height: 150)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}
Button(action: {
}) {
Text("Ada")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: .infinity)
.frame(height: 150)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}
}
HStack(spacing: 20) {
Button(action: {
}) {
Text("Uyum")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: .infinity)
.frame(height: 150)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}
Button(action: {
}) {
Text("H")
.font(.title)
.foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
.frame(maxWidth: .infinity)
.frame(height: 150)
.overlay(
RoundedRectangle(cornerRadius: 20)
.stroke(Color(#colorLiteral(red: 0.8527825475, green: 0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
)
}
}
}
.padding()
.padding()
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
Related
How can I add a button at this location in SwiftUI? I have a textfield and a background being used, but I'm not sure how you can add a button to this location, like a bar button in swift.
My code:
struct MyTextField: View
{
#ObservedObject var model: TextFieldModel
var body: some View
{
VStack(spacing: 0)
{
Color.black
.frame(height: 100)
.overlay(Image(("appIconLogo")).resizable().frame(width: 70, height: 70),
alignment: .bottom)
.edgesIgnoringSafeArea(.top)
VStack(alignment: .leading, spacing: 10)
{
Text("Welcome!")
.font(.system(size: 60, design: .rounded))
.foregroundColor(.black)
.padding(.leading)
iTextField("Search Your Ticker", text: $model.text, isEditing: $model.isEditing)
.foregroundColor(.black)
.showsClearButton(true)
.autocapitalization(.allCharacters)
.disableAutocorrection(true)
.returnKeyType(.search)
.onReturn
{
print($model.text)
NotificationCenter.default.post(name: Notification.Name(rawValue: "isValidTicker"), object: nil)
}
.foregroundColor(.black)
.style(height: 58, font: nil, paddingLeading: 25, cornerRadius: 6, hasShadow: true, image: Image(systemName: "magnifyingglass"))
.foregroundColor(.black)
}.frame(maxWidth: .infinity, alignment: .leading)
}.frame(maxHeight: .infinity, alignment: .top)
}
}
I assume you wanted something like this
Color.black
.frame(height: 100)
.overlay(Image(("appIconLogo")).resizable().frame(width: 70, height: 70), alignment: .bottom)
.overlay(Button("Perform") {}.padding(), alignment: .leading) // << here!!
.edgesIgnoringSafeArea(.top)
Any particular reason you have the Color.black with an overlay for the logo? Using your code, wrapping it in a ZStack should work
ZStack(alignment: .leading) {
Color.black
.frame(height: 100)
.overlay(Image(("appIconLogo")).resizable().frame(width: 70, height: 70), alignment: .bottom)
.edgesIgnoringSafeArea(.top)
Button(action:{}) {
Text("Button Text")
}
}
How do I center the rectangles in the list? I have tried somethings in my code, with alignment, but it has no affect sadly. Has this something to do with the default behavior of a list?
Here is my code:
struct ContentView: View {
var sectiesList = [
Secties(name: "Algemeen", color: Color.overigPink),
Secties(name: "Natuurkunde", color: Color.natuurkundeBlue),
Secties(name: "Wiskunde", color: Color.wiskundeBrown),
Secties(name: "Scheikunde", color: Color.scheikundeRed),
Secties(name: "Biologie", color: Color.biologieGreen)
]
var body: some View {
NavigationView {
ZStack {
Color.offWhite
List(sectiesList, id: \.name) { secties in
ZStack(alignment: .center) {
RoundedRectangle(cornerRadius: 25)
.fill(secties.color)
.frame(width: UIScreen.screenWidth * 0.85, height: UIScreen.screenHeight * 0.13, alignment: .center)
.shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
.shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
Text(secties.name)
.font(.largeTitle)
.fontWeight(.semibold)
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
}
}
}.navigationBarTitle(Text("Binas"))
}
}
init() {
UITableView.appearance().separatorStyle = .none
UITableViewCell.appearance().backgroundColor = UIColor(red: 225 / 255, green: 225 / 255, blue: 235 / 255, alpha: 1)
UITableView.appearance().backgroundColor = UIColor(red: 225 / 255, green: 225 / 255, blue: 235 / 255, alpha: 1)
}
}
Give ZStack max available space in row, like
ZStack(alignment: .center) {
RoundedRectangle(cornerRadius: 25)
.fill(secties.color)
.frame(width: UIScreen.screenWidth * 0.85, height: UIScreen.screenHeight * 0.13, alignment: .center)
.shadow(color: Color.black.opacity(0.2), radius: 10, x: 10, y: 10)
.shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
Text(secties.name)
.font(.largeTitle)
.fontWeight(.semibold)
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
}
.frame(maxWidth: .infinity) // << here !!
I am messing around with swift UI and while creating a view I cannot figure out how to make the text I added to the view have the same background color as the view itself. StrokeText() keeps a white background when apart of the view below.
struct ContentView: View {
var body: some View {
VStack {
HStack {
VStack(alignment: .leading) {
StrokeText(text: "App Name", width: 1.0, color: .black)
.background(Color.init(hue: 0.2722, saturation: 0.89, brightness: 0.29, opacity: 1.0))
.foregroundColor(.white)
.font(.system(size: 30, weight: .bold))
.frame(maxWidth: .infinity, alignment: .center)
//Background Color
Color.init(hue: 0.2722, saturation: 0.89, brightness: 0.29, opacity: 1.0).edgesIgnoringSafeArea(.all)
}
}
}
}
}
struct StrokeText: View {
let text: String
let width: CGFloat
let color: Color
var body: some View {
ZStack{
ZStack{
Text(text).offset(x: width, y: width)
Text(text).offset(x: -width, y: -width)
Text(text).offset(x: -width, y: width)
Text(text).offset(x: width, y: -width)
}
.foregroundColor(color)
Text(text)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Here is a picture for reference
I'm not sure I understand what is your desired final effect but if you just want the green background on the label to go edge to edge just move the background modifier under the frame:
StrokeText(text: "App Name", width: 1.0, color: .black)
.foregroundColor(.white)
.font(.system(size: 30, weight: .bold))
.frame(maxWidth: .infinity, alignment: .center)
.background(Color.init(hue: 0.2722, saturation: 0.89, brightness: 0.29, opacity: 1.0))
Code below in xcode swiftui will generate the BEFORE screen but I want to move the House image just above the "Houses" text (see AFTER screen), I have spent a full day on this and I can't figure out how to make it possible, if anyone is willing to step in for help will be much appreciated! Full code provided below...
Before and After VStack button
import SwiftUI
struct LightGreenButton: View {
var body: some View {
VStack {
Image(systemName: "house")
.resizable()
.frame(width: 50, height: 50, alignment: .center)
//.opacity(0.6)
.clipped()
.foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
.offset(x: 0, y: 0)
Text("Houses")
.font(.system(size: 20, weight: .semibold, design: .rounded))
.frame(width: 150, height: 100)
.foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
.background(
ZStack {
Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1))
RoundedRectangle(cornerRadius: 16, style: .continuous)
.foregroundColor(.white)
.blur(radius: 4)
.offset(x: -8, y: -8)
RoundedRectangle(cornerRadius: 16, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1)), Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
)
.padding(2)
.blur(radius: 1)
}
)
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.shadow(color: Color(#colorLiteral(red: 0.8696053624, green: 0.8697276711, blue: 0.8695667386, alpha: 1)), radius: 20, x: 20, y: 20)
.shadow(color: Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)), radius: 20, x: -20, y: -20)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(#colorLiteral(red: 0.9447055279, green: 0.954059048, blue: 0.954059048, alpha: 1)))
.edgesIgnoringSafeArea(.all)
}
}
struct LightGreenButton_Previews: PreviewProvider {
static var previews: some View {
LightGreenButton()
}
}
Here is a solution. Tested with Xcode 11.4 / iOS 13.4.
struct LightGreenButton: View {
var body: some View {
VStack {
Image(systemName: "house")
.resizable()
.frame(width: 50, height: 50, alignment: .center)
//.opacity(0.6)
.clipped()
.foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
.offset(x: 0, y: 0)
Text("Houses")
.font(.system(size: 20, weight: .semibold, design: .rounded))
.foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
}
.frame(width: 150, height: 100)
.background(
ZStack {
Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1))
RoundedRectangle(cornerRadius: 16, style: .continuous)
.foregroundColor(.white)
.blur(radius: 4)
.offset(x: -8, y: -8)
RoundedRectangle(cornerRadius: 16, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1)), Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
)
.padding(2)
.blur(radius: 1)
})
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.shadow(color: Color(#colorLiteral(red: 0.8696053624, green: 0.8697276711, blue: 0.8695667386, alpha: 1)), radius: 20, x: 20, y: 20)
.shadow(color: Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)), radius: 20, x: -20, y: -20)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(#colorLiteral(red: 0.9447055279, green: 0.954059048, blue: 0.954059048, alpha: 1)))
.edgesIgnoringSafeArea(.all)
}
}
I have a probleme that I can not manage in swiftUI : I have some elements in a VStack, a view goes beyond the screen, is normal, but my menu exceed also, it's normal behavior but not the desired result. I don't know how to bypass this result.
The component that exceed:
The component menu that must not exceed:
Code of the contentView.swift
import SwiftUI
struct ContentView : View {
var body: some View {
ZStack {
Rectangle()
.foregroundColor(.clear)
.background(LinearGradient(gradient: Gradient(colors: [Color(red: 189/255, green: 195/255, blue: 199/255, opacity: 1.0), .white]), startPoint: .topTrailing, endPoint: .bottomLeading),
cornerRadius: 0)
.edgesIgnoringSafeArea(.all)
VStack() {
ScreenTitle()
Spacer()
Sonar()
Spacer()
NavBar()
}
}
}
}
Code of sonar view:
import SwiftUI
struct Sonar : View {
#State private var sonarAtived: Bool = false
private var animationSonarCircleOne: Animation {
Animation.basic(duration: 0.2, curve: .easeInOut)
.delay(0)
}
private var animationSonarCircleTwo: Animation {
Animation.basic(duration: 0.2, curve: .easeInOut)
.delay(0.1)
}
private var animationSonarCircleThree: Animation {
Animation.basic(duration: 0.2, curve: .easeInOut)
.delay(0.25)
}
private var animationButtonSublay: Animation {
Animation.basic(duration: 0.7, curve: .easeInOut)
.repeatForever(autoreverses: true)
}
var body: some View {
HStack(spacing: 20) {
ZStack {
// Button sublay
Circle()
.animation(animationButtonSublay)
.frame(width: 130, height: 130)
.padding(10)
.foregroundColor(Color.init(red: 231/255, green: 76/255, blue: 60/255, opacity: 0.4))
.overlay(Circle().stroke(Color.init(red: 231/255, green: 76/255, blue: 60/255, opacity: self.sonarAtived ? 0.5 : 0), lineWidth: self.sonarAtived ? 30 : 0))
// Button
Button(action: {
self.sonarAtived.toggle()
}) {
Text("Enregistrer ma position")
.color(.white)
.lineLimit(nil)
.multilineTextAlignment(.center)
.font(.system(size: 22))
}
.frame(width: 130, height: 130)
.padding(10)
.background(Color.init(red: 231/255, green: 76/255, blue: 60/255, opacity: 1.0))
.overlay(Circle().stroke(Color.init(red: 192/255, green: 57/255, blue: 43/255, opacity: 1.0), lineWidth: 3))
.clipShape(Circle())
// Circles
Circle()
.animation(animationSonarCircleOne)
.frame(width: 250, height: 250, alignment: .center)
.overlay(Circle().stroke(Color.init(red: 52/255, green: 73/255, blue: 94/255, opacity: self.sonarAtived ? 0.18 : 0.0), lineWidth: 1))
.foregroundColor(Color.clear)
Circle()
.animation(animationSonarCircleTwo)
.frame(width: 400, height: 400, alignment: .center)
.overlay(Circle().stroke(Color.init(red: 52/255, green: 73/255, blue: 94/255, opacity: self.sonarAtived ? 0.15 : 0.0), lineWidth: 1))
.foregroundColor(Color.clear)
Circle()
.animation(animationSonarCircleThree)
.frame(width: 550, height: 600, alignment: .center)
.overlay(Circle().stroke(Color.init(red: 52/255, green: 73/255, blue: 94/255, opacity: self.sonarAtived ? 0.10 : 0.0), lineWidth: 1))
.foregroundColor(Color.clear)
}
}
}
}
Code of menu view, unwanted exceed:
import SwiftUI
struct NavBar : View {
var body: some View {
VStack {
Image("navigation_border")
.resizable()
.aspectRatio(contentMode: .fill)
HStack {
Spacer()
// Compass button
Button(action: {
// Code here
}) {
Image("ic_compass")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: CGFloat(40), height: CGFloat(40), alignment: .center)
Text("Boussole")
.color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 0.4))
.font(.system(size: 14))
}.frame(height: CGFloat(50), alignment: .bottomLeading)
Spacer()
// Travel button
Button(action: {
// Code here
}) {
Image("ic_travel")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: CGFloat(40), height: CGFloat(40), alignment: .center)
Text("Parcours")
.color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 0.4))
.font(.system(size: 14))
}.frame(height: CGFloat(50), alignment: .bottomLeading)
Spacer()
// Settings button
PresentationLink(destination: Settings()) {
Image("ic_settings")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 35, height: 35, alignment: .center)
Text("Paramètres")
.color(Color(red: 52/255, green: 73/255, blue: 94/255, opacity: 0.4))
.font(.system(size: 14))
}.frame(height: 50, alignment: .bottomLeading)
Spacer()
}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 70, maxHeight: 70, alignment: Alignment.center)
}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 90, maxHeight: 90, alignment: Alignment.center)
}
}