SwiftUI TabView Page Styling - swift

I am using a tab view with PageTabViewStyle to list out colors of a shirt, but the tab bar is barely visible with lighter color shirts and only shows the top half on darker. Is it possible to give the bar a background or change the dot color?
I've tried:
init() {
UITabBar.appearance().barTintColor = .darkGray
}
But it didn't work.
Full Code:
struct PrintifyProductCell: View {
var product: PrintifyProduct
var images: [PrintifyImages] {
product.images.filter { $0.position == "front" }
}
#State private var animating = true
#State private var selected = 0
var body: some View {
VStack {
TabView(selection: $selected) {
ForEach(images.indices, id: \.self) { index in
AsyncImage(url: URL(string: images[index].src)!) { image in
image
.resizable()
.frame(minWidth: 120, idealWidth: 160, maxWidth: 160, minHeight: 130, idealHeight: 180, maxHeight: 180, alignment: .center)
.cornerRadius(8)
.tag(index)
} placeholder: {
LoadingView(isAnimating: $animating)
.frame(width: 40, height: 40)
}
}
.frame(minWidth: 120, idealWidth: 160, maxWidth: 160, minHeight: 130, idealHeight: 180, maxHeight: 180, alignment: .center)
}
.tabViewStyle(PageTabViewStyle())
.frame(minWidth: 120, idealWidth: 160, maxWidth: 160, minHeight: 130, idealHeight: 180, maxHeight: 180, alignment: .center)
.cornerRadius(8)
.padding(.horizontal, 6)
.padding(.top, 6)
Text(product.title)
}
.background(Color(UIColor.uStadium.lightGray))
.cornerRadius(8)
}
}

Related

Content is shown behind the navigation bar when the text field is active

when I use the textfield in my View, the Content in the vstack or scrollview is seen behind the custom navigation bar. How can I fix this background problem?
Code from the Current View
import SwiftUI
import MapKit
struct address_edit_address: View {
#State private var street: String = ""
#State private var titel: String = ""
#State private var comment: String = ""
#State var topLeft: CGFloat = 0
#State var topRight: CGFloat = 50
#State var bottomLeft: CGFloat = 50
#State var bottomRight: CGFloat = 0
#State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))
var body: some View {
VStack{
VStack(alignment: .leading, spacing: 20){
Map(coordinateRegion: $region).frame(minWidth: 0, idealWidth: 383, maxWidth: 383, minHeight: 0, idealHeight: 128, maxHeight: 128).cornerRadius(10)
VStack (alignment: .leading, spacing: 10){
Text("Adresse:").font(.custom("Arboria-Medium", size:13))
HStack (alignment: .center){
TextField("Straße und Hausnummer*", text: $street).frame(minWidth: 0, idealWidth: 383, maxWidth: 383, minHeight: 0, idealHeight: 54, maxHeight: 54, alignment: .center)
.foregroundColor(Color("white"))
.background(RoundedRectangle(cornerRadius:10).fill(Color("grey_dark1_bg_obj")))
.overlay(
RoundedRectangle(cornerRadius:10).stroke(Color("grey_light2_obj_font"), lineWidth: 1))
}
}
VStack (alignment: .leading, spacing: 10){
Text("Adresstitel & Typ(optional):").font(.custom("Arboria-Medium", size:13))
HStack(spacing: 0){
TextField("Titel", text: $titel).frame(minWidth: 0, idealWidth: 230, maxWidth: 230, minHeight: 0, idealHeight: 54, maxHeight: 54, alignment: .leading)
.foregroundColor(Color("white"))
.background(RoundedCornerShape(radius:10, corners: [.topLeft, .bottomLeft]).fill(Color("grey_dark1_bg_obj")))
.overlay(
RoundedCornerShape(radius: 10, corners: [.topLeft, .bottomLeft]).stroke(Color("grey_light2_obj_font"), lineWidth: 1))
HStack(spacing: 0){
Button(action: {
print("Privat")
}){ VStack {
Image(systemName: "house.fill")
Text("Privat").font(.custom("Arboria-Medium", size:12))
}
}.frame(width: 74, height: 56).background(Color("blue")).border(Color("grey_light2_obj_font"), width: 1)
Button(action: {
print("Arbeit")
}){ VStack{
Image(systemName: "briefcase.fill")
Text("Arbeit").font(.custom("Arboria-Medium", size:12))
}
}.frame(width: 74, height: 54)
.background(RoundedCornerShape(radius: 10, corners: [.topRight, .bottomRight]).fill(Color("grey_dark1_bg_obj")))
.overlay(
RoundedCornerShape(radius: 10, corners: [.topRight, .bottomRight]).stroke(Color("grey_light2_obj_font"), lineWidth: 1))
}.frame(width: 148, height: 51, alignment: .leading)
}
}
VStack (alignment: .leading, spacing: 10){
Text("Anmerkung hinzufügen(optional):").font(.custom("Arboria-Medium", size:13))
HStack{
TextField("Anmerkung zur Lieferung", text: $comment).frame(minWidth: 0, idealWidth: 383, maxWidth: 383, minHeight: 0, idealHeight: 102, maxHeight: 102, alignment: .center)
.foregroundColor(Color("white"))
.background(RoundedRectangle(cornerRadius:10).fill(Color("grey_dark1_bg_obj")))
.overlay(
RoundedRectangle(cornerRadius:10).stroke(Color("grey_light2_obj_font"), lineWidth: 1))
}
HStack{
Text("*Pflichtfelder")
Spacer()
Text("0/180")
}.font(.custom("Arboria-Medium", size:13))
}.frame(width: UIScreen.screenWidth, height: UIScreen.screenHeight - 600, alignment: .top)
}
VStack(spacing: 30){
HStack(spacing: 20){
Button("Speichern"){
}.frame(minWidth: 0, idealWidth: 160, maxWidth: 160, minHeight: 0, idealHeight: 43, maxHeight: 43, alignment: .center).background(Color("green_mid")).clipShape(RoundedRectangle(cornerRadius: 10)).font(.custom("Arboria-Medium", size: 14))
Button (action: {
print("Favorit")
}){ HStack {
Text("Favorisieren").font(.custom("Arboria-Medium", size: 14))
Image(systemName:"heart")
}.foregroundColor(Color("yellow"))
}.frame(minWidth: 0, idealWidth: 160, maxWidth: 160, minHeight: 0, idealHeight: 43, maxHeight: 43, alignment: .center).overlay(
RoundedCornerShape(radius: 10, corners: [.topRight, .bottomRight, .topLeft, .bottomLeft]).stroke(Color("yellow"), lineWidth: 1))
}
Button("Adresse entfernen"){
}.foregroundColor(Color("red")).font(.custom("Arboria-Medium", size: 14))
}
Spacer()
}.frame(width: UIScreen.screenWidth, height: UIScreen.screenHeight).background(Color.black) .foregroundColor(Color.white)
}
}
struct address_edit_address_Previews: PreviewProvider {
static var previews: some View {
address_edit_address().preferredColorScheme(.dark)
}
}
Code from the template, where the navigation bar is implemented
import SwiftUI
struct account_template<Content: View>: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
#ViewBuilder var content: Content
var title: String
var scrollable: Bool
init(content:Content, title:String, scrollable: Bool){
self.content = content
self.title = title
self.scrollable = scrollable
}
var btnBack : some View {
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}){
VStack{
ZStack{
HStack(){
Image(systemName: "arrow.left")
.aspectRatio(contentMode: .fit)
.foregroundColor(.white)
Spacer()
}.frame(width: UIScreen.screenWidth)
HStack (alignment:.center){
Text(title).foregroundColor(.white).font(.custom("Arboria-Medium", size:16))
}.frame(width: UIScreen.screenWidth)
}.frame(width: UIScreen.screenWidth, height: 50).background(Color("black"))
Divider().background(Color("white")).frame(height:2)
}.frame(height: 75, alignment: .center).background(Color.black).edgesIgnoringSafeArea(.top)
}
}
var body: some View {
VStack {
Spacer()
Divider().background(Color("white")).frame(height:2)
if scrollable {
ScrollView(showsIndicators:false){
content
}.background(Color.black) .foregroundColor(Color.white) .frame(width: UIScreen.screenWidth, height: UIScreen.screenHeight - 75, alignment: .top)
}else{
VStack{
content
}.background(Color.black) .foregroundColor(Color.white) .frame(width: UIScreen.screenWidth, height: UIScreen.screenHeight - 75, alignment: .top)
}
}.background(Color.black) .foregroundColor(Color.white) .frame(width: UIScreen.screenWidth, height: UIScreen.screenHeight, alignment: .center).navigationBarBackButtonHidden(true)
.navigationBarItems(trailing: btnBack)
}
}
struct adress_template_Previews: PreviewProvider {
static var previews: some View {
account_template(content: address_add_address(), title: "Adresse hinzufügen", scrollable: true)
}
}

How can I add a button in SwiftUI

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 to: Create buttons Swift UI

I have these frames positioned on my view, exactly how I need buttons placed but am new to swift - UI and trying to figure out how to do this the right way. Can I somehow bring the button onto the stack above the background color of the VStack? Also is VStack the correct way to approach this?
Code for reference :
//Todays List
VStack(alignment: .leading) {
Color.black
.frame(width: 205, height: 70, alignment: .center)
.position(x: 80, y: 80)
}
//Tomorrows List
VStack(alignment: .leading) {
Color.black
.frame(width: 205, height: 70, alignment: .center)
.position(x: 290, y: 80)
}
//This Month
VStack(alignment: .leading) {
Color.blue
.frame(width: 205, height: 70, alignment: .center)
.position(x: 80, y: 150)
}
//Next Month
VStack(alignment: .leading) {
Color.blue
.frame(width: 205, height: 70, alignment: .center)
.position(x: 290, y: 150)
}
//3% Yeild Or Higher
VStack(alignment: .leading) {
Color.red
.frame(width: 205, height: 70, alignment: .center)
.position(x: 80, y: 215)
}
//5% Yield Or Higher
VStack(alignment: .leading) {
Color.red
.frame(width: 205, height: 70, alignment: .center)
.position(x: 290, y: 215)
}
//App Help
VStack(alignment: .leading) {
Color.green
.frame(width: 205, height: 70, alignment: .center)
.position(x: 80, y: 285)
}
//Exit App / TBD
VStack(alignment: .leading) {
Color.yellow
.frame(width: 205, height: 70, alignment: .center)
.position(x: 290, y: 285)
}
}
[1]: https://i.stack.imgur.com/Fe64N.png
To make a button is swift ui you use the button command and then an action like this
VStack { Button(action: {//Code for you button to do something)}) {
Text("LOGIN")
//you can add text to the button by just adding text in the curly brackets and add modifiers to id such as .padding() or .cornerRadius
}
To add a button in you VStacks you do this
VStack(alignment: .leading) {
Button(action: {
// Write your action here
}) {
Color.blue
}
.frame(width: 205, height: 70, alignment: .center)
.position(x: 80, y: 150)
}
But that view you have really need some work, you shouldn't hardcode the position of each stack and add the frame to each of them, if it's possible for you to use SWiftUI 2.0 read something about using LazyVGrid https://developer.apple.com/documentation/swiftui/lazyvgrid

how do you align text to the top of screen in SwiftUI

I'm trying to align "Top Text" to the top of the screen, and I can't find a way to do it. "Top Text" needs to be aligned near the "notch of the iphone screen.
I attached a screenshot of where "Top Text" is currently, and needs to be moved to the top
struct ContentView: View {
//var newColor : [String: Double] = setColor(red:247, green:186, blue:161)
var body: some View {
ZStack {
VStack(spacing: 0) {
HStack {
Text("Top Text[![enter image description here][1]][1]")
.fontWeight(.light)
.multilineTextAlignment(.center)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)
.font(.body)
.padding()
}
.offset(y: 0)
.frame(minWidth: 0, maxHeight: 400, alignment: .topLeading)
VStack {
Text("Sign in with Facebook")
.fontWeight(.light)
.font(.title)
.frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
.padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
Text("Sign in with Google")
.fontWeight(.light)
.font(.title)
.padding()
.frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
}
}
.foregroundColor(Color.black.opacity(0.7))
.padding()
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
.offset(x: 0, y: 0)
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
.background(Color.orange.opacity(0.2))
.edgesIgnoringSafeArea(.all)
}
}
You can put a Spacer() between your HStack and VStack. This will push the other text to the bottom though. You can put another Spacer() after the bottom Texts to push them up.
Here is basically the same view with less code:
var body: some View {
ZStack {
Color(.orange).opacity(0.2).edgesIgnoringSafeArea(.all)
VStack(spacing: 10) {
Text("Top Text[![enter image description here][1]][1]")
.fontWeight(.light)
.multilineTextAlignment(.center)
.font(.body)
.padding()
Spacer()
Text("Sign in with Facebook")
.fontWeight(.light)
.font(.title)
Text("Sign in with Google")
.fontWeight(.light)
.font(.title)
Spacer()
}
.foregroundColor(Color.black.opacity(0.7))
.padding()
}
}
Here is possible approach
var body: some View {
ZStack(alignment: .top) { // << made explicit alignment to top
HStack { // << moved this up to ZStack
Text("Top Text")
.fontWeight(.light)
.multilineTextAlignment(.center)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)
.font(.body)
}
.frame(minWidth: 0, maxHeight: 400, alignment: .topLeading)
VStack(spacing: 0) {
VStack {
Text("Sign in with Facebook")
.fontWeight(.light)
.font(.title)
.frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
.padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))
Text("Sign in with Google")
.fontWeight(.light)
.font(.title)
.padding()
.frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
}
}
.foregroundColor(Color.black.opacity(0.7))
.padding()
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
.offset(x: 0, y: 0)
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
.background(Color.orange.opacity(0.2))
.edgesIgnoringSafeArea(.all)
}

How can I make the list wider in SwiftUI?

I'm learning SwiftUI right now and I'm working on a tutorial.
But in SwiftUI List, the part of name is cut like the picture. Do you have a modifier?
struct ContentView: View {
var body: some View {
List(modelData) {
Device in HStack {
Image(systemName: Device.image)
.frame(width: 50, height: 10, alignment: .leading)
Text("\(Device.name)")
.frame(width: 50, height: 10, alignment: .leading)
.scaledToFit()
VStack {
Text("\(Device.price)")
}
}
.font(.title)
}
}
}
Instead of limiting as you do
Text("\(Device.name)")
.frame(width: 50, height: 10, alignment: .leading)
.scaledToFit()
use just
Text("\(Device.name)")
It will be automatically sized to fit