SwiftUI Navigation View Margins Around List - swift

I have a SwiftUI app with a Navigation View. Inside that Navigation View is a List. The List contains Navigation Links. Everything works fine, but I'd like each List item to stretch out to the full width of the view and not have that gray margin all the way around it.
How do I make the List the full width and also eliminate top margin?
import SwiftUI
struct ConsumerDashboardView: View {
#StateObject var authVM = AuthorizationClass()
var body: some View {
NavigationView {
VStack{
Spacer()
.frame(height: 50)
Button(action: {
print("Button Clicked")
}){
Text("\(Image(systemName: "plus")) Start a New Project")
.font(.headline)
.fontWeight(/*#START_MENU_TOKEN#*/.bold/*#END_MENU_TOKEN#*/)
.foregroundColor(.white)
.padding()
.frame(width: 300, height: 60)
.background(Color("BrandOrange"))
.cornerRadius(5.0)
}
Spacer()
.frame(height: 100)
VStack(spacing: -2){
HStack{
Text(" Active\nProjects")
.font(.headline)
.fontWeight(/*#START_MENU_TOKEN#*/.bold/*#END_MENU_TOKEN#*/)
.frame(
width: 120,
height: 60,
alignment: .center
)
.background(Color("BrandLightBlue"))
.foregroundColor(.white)
.padding(.trailing, 50)
Text(" Closed\nProjects")
.font(.headline)
.fontWeight(/*#START_MENU_TOKEN#*/.bold/*#END_MENU_TOKEN#*/)
.frame(
width: 120,
height: 60,
alignment: .center
)
.border(Color("BrandLightBlue"), width: 2)
.background(Color(.white))
.foregroundColor(Color("BrandLightBlue"))
}
Divider()
.frame(
width: 1000,
height: 3
)
.background(Color("BrandLightBlue"))
Spacer()
if !authVM.projectObjects.isEmpty {
ProjectsList(authVM: authVM)
} else {
ProjectsLoader(authVM: authVM)
}
}
}
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
HStack {
Image("Icon")
.resizable()
.frame(
width: 30,
height: 30
)
Text("Icon").font(.headline)
Image(systemName: "line.3.horizontal.decrease.circle")
.imageScale(.large)
}
}
}
}.onAppear {
authVM.fetchProjects()
}
}
}
struct ProjectsList: View {
#StateObject var authVM = AuthorizationClass()
var body: some View {
List(authVM.projectObjects){ projectObject in
NavigationLink(destination: ProjectDetailView(project: projectObject.project)){
ProjectRowView(project: projectObject.project)
.frame(
height: 150
)
}
}
}
}

Related

SwiftUI - How to position Images with NavigationLink

I'm trying to make a converter app using SwiftUI. I added navigationlinks on the Home Screen these buttons go to the right places,no problem until here. However, I couldn't position it.
Currently, when I position them with .position, they appear in different places on different devices.
How should I do the positioning here?
I want to provide an image that will be the same on all devices as in the screenshot.
Thanks for your help.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView{
VStack() {
// WEIGHT * MASS
NavigationLink(destination: UnitView()) {
Image(systemName: "scalemass")
.font(.system(size: 60))
.padding()
.frame(width: 150, height: 150, alignment: .center)
.background(Rectangle().fill(Color.purple.opacity(0.5))
.shadow(radius: 3)).cornerRadius(20)
.foregroundColor(.black)
.overlay(Text("Mass")
.foregroundColor(.black)
.padding()
.font(.system(size: 22)),
alignment: .bottom )}
.position(x:110, y:100)
//DISTANCE *
NavigationLink(destination: DistanceView()) {
Image(systemName: "figure.walk")
.font(.system(size: 60))
.padding()
.frame(width: 150, height: 150, alignment: .center)
.background(Rectangle().fill(Color.orange.opacity(0.5))
.shadow(radius: 3)).cornerRadius(20)
.foregroundColor(.black)
.overlay(Text("Distance")
.foregroundColor(.black)
.padding()
.font(.system(size: 22)),
alignment: .bottom )}
.position(x:110, y:100)
//TEMPERATURE *
NavigationLink(destination: TemperatureView()) {
Image(systemName: "thermometer.sun")
.font(.system(size: 56))
.padding()
.frame(width: 150, height: 150, alignment: .center)
.background(Rectangle().fill(Color.yellow.opacity(0.5))
.shadow(radius: 3)).cornerRadius(20)
.foregroundColor(.black)
.overlay(Text("Temperature")
.foregroundColor(.black)
.padding()
.font(.system(size: 21)),
alignment: .bottom )}
.position(x:280, y:-84)
// TIME *
NavigationLink(destination: TimeView()) {
Image(systemName: "clock")
.font(.system(size: 60))
.padding()
.frame(width: 150, height: 150, alignment: .center)
.background(Rectangle().fill(Color.blue.opacity(0.5))
.shadow(radius: 3)).cornerRadius(20)
.foregroundColor(.black)
.overlay(Text("Time")
.foregroundColor(.black)
.padding()
.font(.system(size: 21)),
alignment: .bottom ) }
.position(x:280, y:-444)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Sample
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
Image("example-image")
.resizable()
.frame(width: 100, height: 100)
.cornerRadius(10)
NavigationLink(destination: DetailView()) {
Text("View Details")
.foregroundColor(.white)
.padding()
.background(Color.blue)
.cornerRadius(10)
}
.padding(.top, 20)
}
}
}
}
struct DetailView: View {
var body: some View {
Text("Details View")
}
}
In this example, we use a VStack to position an image and a NavigationLink. The image is resized to 100x100 and given a corner radius of 10 using the frame and cornerRadius modifiers. The NavigationLink leads to a DetailView that simply displays the text "Details View". The text inside the NavigationLink is styled to have white foreground color, padding, a blue background color, and a corner radius of 10. The .padding(.top, 20) adds some space between the image and the link.

Zoom Image over top of other Views SwiftUI

I have a image as thumbnail when image is tapped it should be expanded/zoom at the centre of screen with background as blur. I tried scale effect but the image is not on top of other view but looks like behind (see pics). How to achieve this zoomed imaged with blur background effect (see peacock pic this is the requirement)
#State var enlarge:Bool = false
var body: some View {
GeometryReader{geo in
VStack{
ZStack(alignment: .top){
LinearGradient(gradient:Gradient(colors: [.blue.opacity(0.3),.blue.opacity(0.2)]),startPoint: .top,endPoint:.bottom)
.ignoresSafeArea()
VStack(alignment: .leading,spacing :5){
HStack{
Text("Lorum Ipsum ackndweg")
.fontWeight(.semibold)
.padding(.top,15)
.padding(.leading,18)
.foregroundColor(ThemeColor.testName)
}
.frame(width: geo.size.width, alignment: .leading)
Image("capAm")
.resizable()
.scaledToFit()
.frame(width: 40, height: 40)
.padding(.leading,18)
.onTapGesture{
withAnimation
{
self.enlarge.toggle()
}
}
.scaleEffect(self.enlarge ? 4 : 1,anchor: .topLeading)
VStack(alignment:.leading,spacing: 5){
HStack{
Text("Turn Around Time :")
.font(.system(size: 14))
.foregroundColor(.red)
Text("Report Delivery : Daily")
.font(.system(size: 14))
.foregroundColor(.orange)
}
.frame(width: geo.size.width, alignment: .center)
VStack(alignment:.leading)
{
HStack{
Text("Turn Around Time(TAT) :")
.font(.system(size: 14))
.foregroundColor(.red)
Text("4 hours after acceptance of the sample at the centre")
.font(.system(size: 14))
.foregroundColor(.red)
.multilineTextAlignment(.leading)
}
}.frame(width: geo.size.width, alignment: .center)
}
}}}}}}
below just an idea
struct SwiftUIView: View {
#State private var enlarge = false
#State private var list = 1...10
#State private var current = 0
var body: some View {
ZStack {
ZStack {
Image(systemName: "\(current).circle")
.resizable()
.scaledToFit()
.frame(width: 60 , height: 60)
.padding()
.animation(.spring(), value: enlarge)
.foregroundColor(.yellow)
}
.frame(width: 300,
height: 200)
.background(Color.black.opacity(0.2))
.foregroundColor(Color.clear)
.cornerRadius(20)
.transition(.slide)
.opacity(self.enlarge ? 1 : 0)
.zIndex(2)
.onTapGesture{
withAnimation {
self.enlarge.toggle()
}
}
List {
ForEach(list, id:\.self) { i in
Label("detail of \(i)", systemImage: "\(i).circle")
.onTapGesture{
current = i
withAnimation {
self.enlarge.toggle()
}
}
}
}
.blur(radius: self.enlarge ? 3 : 0).offset(y: 1)
}
.onTapGesture{
withAnimation {
self.enlarge = false
}
}
}
}

SwiftUI, different Views in same GridView

I need to add two different types of view in same grid view, there is an alignment issue between these view as shown in give image below. The view which contains image is taking more space from top and bottom even after fixing the size
struct TestView: View {
#StateObject var vm = BusinessProfileViewModel()
#Environment(\.presentationMode) private var presentationMode
let columns = [
GridItem(.flexible(minimum: 100), spacing: 20),
GridItem(.flexible(minimum: 100), spacing: 20)
]
var body: some View {
loadView()
}
}
extension TestView {
func loadView() -> some View {
GeometryReader { geometry in
ZStack(alignment: .bottomTrailing) {
ScrollView(.vertical, showsIndicators: false) {
topBusinessImage(geometry: geometry)
VStack {
featureProduct(geometry: geometry)
}.padding()
}.edgesIgnoringSafeArea(.top)
}
}
}
func topBusinessImage(geometry: GeometryProxy) -> some View {
VStack(spacing: 0) {
// Profile Image Stack
// Banner Zstack
ZStack (alignment: .top) {
Image(ImageName.productPlaceholder.rawValue)
.resizable()
.frame(height: geometry.size.height / 2.5)
}
}
}
func featureProduct(geometry: GeometryProxy) -> some View {
VStack(alignment: .leading) {
// product and services button
HStack {
Text("Products & Services")
.font(.custom(Popins.bold.rawValue, size: 20))
Spacer()
Button {
print("list")
} label: {
Image(ImageName.list.rawValue)
.resizable()
.frame(width: 24, height: 24)
}.padding(5)
}
LazyVGrid(columns: columns, spacing: 30) {
BusinessProductCell()
ProductOnlyDetailCell()
ProductOnlyDetailCell()
BusinessProductCell()
}
}
}
}
struct TestView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
view that contains image
import SwiftUI
struct BusinessProductCell: View {
var body: some View {
loadView()
}
}
extension BusinessProductCell {
func loadView() -> some View {
VStack(alignment: .leading) {
ZStack(alignment: .topLeading) {
Image(ImageName.business.rawValue)
.resizable()
.frame(height: 205)
.cornerRadius(10)
HStack {
Button {
print("fav")
} label: {
Image(systemName: "heart.fill")
.resizable()
.scaledToFit()
.foregroundColor(UnifiedColor.blue)
.frame(width: 20, height: 20)
}.padding()
Spacer()
Button {
print("fav")
} label: {
Image(systemName: "ellipsis")
.resizable()
.scaledToFit()
.frame(width: 20)
.foregroundColor(.white)
}.padding()
}
}
Text("Dove Body Care")
.foregroundColor(.black)
.font(.custom(Popins.medium.rawValue, size: 16))
HStack {
Text("$49.99")
.font(.custom(Popins.medium.rawValue, size: 12))
.foregroundColor(UnifiedColor.textBlue)
Spacer()
HStack {
Text("(286 Favorites)")
.font(.custom(Popins.regular.rawValue, size: 8))
.foregroundColor(.gray)
Image(ImageName.heart_line.rawValue)
.resizable()
.frame(width: 15, height: 15)
}
}
}
}
}
struct BusinessProductCell_Previews: PreviewProvider {
static var previews: some View {
BusinessProductCell()
.frame(width: 200, height: 250)
}
}
View that only contains text or second view for gird view
struct ProductOnlyDetailCell: View {
var body: some View {
loadView()
}
}
extension ProductOnlyDetailCell {
func loadView() -> some View {
VStack(alignment: .leading, spacing: 10) {
HStack {
Image(ImageName.productPlaceholder.rawValue)
.resizable()
.scaledToFill()
.frame(width: 24, height: 24)
.clipShape(Circle())
.overlay {
Circle().stroke(.white, lineWidth: 1)
}
Text("Anton Jr.")
.font(.custom(Popins.regular.rawValue, size: 12 ))
.foregroundColor(.black)
.lineLimit(1)
Spacer()
Button {
print("more btn")
} label: {
Image(systemName: "ellipsis")
.resizable()
.foregroundColor(.black)
.frame(width: 18, height: 4)
.padding([.trailing, .top, .bottom])
}
}
Text("DJ for night")
.font(.custom(Popins.bold.rawValue, size: 14))
.foregroundColor(.black)
Text("Lorem ipsum dolor sitamet, consectetur adipiscingelit. Lectus idcommodoegestas metusinterdum dolor.")
.multilineTextAlignment(.leading)
.font(.custom(Popins.regular.rawValue, size: 12))
.foregroundColor(.black)
.opacity(0.8)
Spacer()
HStack (spacing: 0){
Text("$15K")
.font(.custom(Popins.bold.rawValue, size: 14))
.foregroundColor(.black)
Text("/")
.font(.custom(Popins.bold.rawValue, size: 14))
.foregroundColor(.gray)
Text("Night")
.font(.custom(Popins.regular.rawValue, size: 14))
.foregroundColor(.gray)
}
Text("25 minute ago")
.font(.custom(Popins.regular.rawValue, size: 10))
.foregroundColor(.gray)
}
.padding(10)
.background(
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.gray.opacity(0.1))
)
}
}

How can I switch 2 different views inside same "Main" view? SwiftUI

I have next problem with my SwiftUI view: I have "User View" , in this view I have 2 buttons - "Saved" and "My achievement". When user tapped on any button , it will show different views (for example: like TabBar).
It will be switch on same screen , not transition to the other view.
Photo
I can create another views , and put it into my , if it needs.
Hope your understand my quick English.
Thank You for help!
Code:
import SwiftUI
struct MainPage: View {
///State variable for default selected tag
#State var selectedView = 3
///Body-view for the main screen
var body: some View {
TabView(selection: $selectedView) {
//MARK: - First screen (1st view)
VStack {
Text("First View")
}///1st Global VStack
.tabItem {
Label("First Item", systemImage: "1.circle")
}.tag(1)
//MARK: - Scond screen (2nd view)
VStack {
Text("Second View")
}///2nd Global VStack
.tabItem {
Label("Second Item", systemImage: "2.circle")
}
.tag(2)
//MARK: - Profile screen (3rd view)
ZStack(alignment: .top) {
Color.clear
HStack(alignment: .center){
VStack {
HStack() {
HStack() {
Button(action: {}, label: {
Image(systemName: "person")
.resizable()
.scaledToFit()
.frame(width: 35 , height: 35)
.foregroundColor(.gray)
})
.padding(.leading , -30)
.padding(.trailing, 20)
Text("User")
.bold()
.font(.custom("title", size: 24))
.lineLimit(1)
}.padding(.trailing , 110)
.frame(width: 260)
Button(action: {}, label: {
Image(systemName: "gearshape")
.resizable()
.scaledToFit()
.frame(width: 35 , height: 35)
.foregroundColor(.gray)
})
}
HStack(spacing: 30) {
Image(systemName: "")
Button(action: {
}, label: {
Text("Saved")
.foregroundColor(.gray)
.font(.custom("title", size: 17))
.lineLimit(1)
})
Image(systemName: "")
Button(action: {}, label: {
Text("My achievement")
.foregroundColor(.gray)
.font(.custom("title", size: 17))
.lineLimit(1)
})
}.frame(width: 300, height: 30, alignment: .center)
HStack(alignment: .center ,spacing: 10){
VStack(alignment: .leading , spacing: 20) {
}.frame(width: 160, height: 2, alignment: .leading)
.background(Color.blue)
.padding(10)
VStack(alignment: .trailing){
}.frame(width: 100, height: 2, alignment: .trailing)
.background(Color.red)
.padding()
}.frame(width: 420, height: 2, alignment: .center)
.background(Color.gray)
.padding(10)
}
}///Top HStack
.frame(width: 300, height: 70, alignment: .center)
.padding()
}///3rd Global ZStack
.tabItem {
Label("Third item", systemImage: "3.circle")
}.tag(3)
//MARK: - End
}
}
}
You could do it with a segmented picker like this.
struct ExampleView: View
{
#State private var selectedView = 0
private let pickerOptions = ["Saved", "Achievements"]
var body: some View {
VStack {
HStack {
Text("ExampleView")
.font(.title)
.bold()
Spacer()
} //: HStack
.padding()
Divider()
Picker(selection: $selectedView, label: Text("")) {
ForEach(0..<pickerOptions.count) {
Text(self.pickerOptions[$0])
} //: ForEach
} //: Picker
.pickerStyle(SegmentedPickerStyle())
.padding()
if selectedView == 0
{
SavedView()
}
else if selectedView == 1
{
AchievementsView()
}
}
}
}

SwiftUI unable to align button with topLeading

I have a button which I am unable to align to the top left with topLeading.
What I hope to accomplish:
my code:
var body: some View {
ZStack {
ZStack(alignment: .topLeading) {
Button(action: { self.show.toggle() }) {
HStack {
Spacer()
Image(systemName: "list.dash")
.foregroundColor(.black)
}
.padding(.trailing, 20)
.frame(width: 90, height: 60)
.background(Color.white)
.cornerRadius(30)
.shadow(color: Color("buttonShadow"), radius: 10, x: 0, y: 10)
}
Spacer()
}
}
}
But I get this:
The issue is that your wrapping views (two ZStacks) by default will take up only the space of their content, which is only the button. If you add a frame to allow the wrapper to expand you'll see the alignment working as you expect.
var body: some View {
ZStack {
ZStack {
Button(action: { self.show.toggle() }) {
HStack {
Spacer()
Image(systemName: "list.dash")
.foregroundColor(.black)
}
.padding(.trailing, 20)
.frame(width: 90, height: 60)
.background(Color.white)
.cornerRadius(30)
.shadow(color: Color.gray, radius: 10, x: 0, y: 10)
}
Spacer()
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: Alignment.topLeading
)
}
}
Add background space consumer, like below (tested with Xcode 11.4)
ZStack(alignment: .topLeading) {
Color.clear // << here !!
Button(action: { self.show.toggle() }) {