I would like to know if there is any way with the bottom sheet SWIFTUI to build an app layout like Image Below, where a bottom sheet is displayed behind of a toolbar.
I want this Design
I tried to achieved it but didn't.
ISSUE[A bottom sheet is displayed on top of a toolbar].
XCODE 14.0.1
CODE:
`
struct Track1: View {
var body: some View {
NavigationView{
ZStack() {
.toolbar {
**# MY BOTTOM TOOL BAR IS HERE **
ToolbarItem(placement:.bottomBar)
{
HStack(spacing:11){
Button{}label: {
VStack
{
Image(icon: .home_g)
.renderingMode(.template)
.resizable()
.frame(width: 30, height: 30)
Text("Home")
}
.frame(width: 65, height: 65)
.cornerRadius(25)
} } }
GeometryReader{
geo in
MapView(mapType: .standard,showsUserLocation: true)
**#
# MY BOTTOM SHEET IS HERE **
.sheet(isPresented: $shopListVM.showSheet) {
ZStack{
if #available(iOS 16, *) {
VStack{
Text("SHEET IS OPEN")
}
.presentationDetents([.medium, .fraction(0.1)])
}
else {
VStack{
Text("SHEET IS OPEN")
}
}
}
}
VStack(spacing:20){
VStack{
HStack{
Image(systemName: "magnifyingglass")
TextField("Search..",text: $searchText)
}
.padding()
.background(Color.white)
.cornerRadius(20)
.padding(.top,30)
.padding(.horizontal,30)
}
}
}
}
.accentColor(Color(hex: 0xFA6109))
}
}
}
`
Image-Issue remain unsolved
Related
Here is the sample project source code: sample code
import SwiftUI
struct TestMenuInSafeAreaInset: View {
#State private var message = ""
var body: some View {
VStack {
Rectangle()
.fill(Color.blue)
}
.safeAreaInset(edge: .bottom) {
HStack {
TextField("Input your message", text: $message)
.padding()
.background(Color.brown)
.cornerRadius(12)
.foregroundColor(.white)
Menu {
Button {
} label: {
Text("Confirm")
}
Button {
} label: {
Text("Cancel")
}
} label: {
Image(systemName: "square.and.arrow.up.fill")
.tint(.white)
.padding()
.background(Color.brown)
.cornerRadius(50)
}
}
.padding()
}
}
}
struct TestMenuInSafeAreaInset_Previews: PreviewProvider {
static var previews: some View {
TestMenuInSafeAreaInset()
}
}
When keyboard appear, the action menu button (right-bottom corner) shift up a little, and tap the menu will cause strange layout as the gif shown.
I think this is a bug, any solution to fix it? I test above code with iOS 16 and iOS 15 with same behaviour.
[Updated 2022.10.10 11:31 +8]
As #Saket Kumar 's solution, I update the code as below, the issue is reproduced even I give size to the menu.
Test with iPhone 14 pro simulator iOS 16.
struct TestMenuInSafeAreaInset: View {
#State private var message = ""
var body: some View {
VStack {
TextField("Input your user name", text: $message)
.padding()
.background(Color.gray.opacity(0.3))
.cornerRadius(12)
.padding()
Spacer()
}
.safeAreaInset(edge: .bottom) {
HStack {
Spacer()
.frame(height: 70)
Menu {
Button {
} label: {
Text("Confirm")
}
Button {
} label: {
Text("Cancel")
}
} label: {
Image(systemName: "square.and.arrow.up.fill")
.padding()
.tint(.white)
.background(Color.brown)
.cornerRadius(50)
}
.frame(width: 50, height: 50)
}
.padding(.horizontal, 20)
.background(Color.blue)
}
}
}
Seems an issue with SwiftUI. I tested your code and I was able to reproduce the issue.
I had my hunch that this weird behaviour may be caused by TextField's Frame, and Menu's frame overlapping, which SwiftUI is trying to accommodate.
So I tried giving them frame manually, and it seems to fix the issue.
Just change this portion of the code.
.safeAreaInset(edge: .bottom) {
HStack {
TextField("Input your message", text: $message)
.padding()
.background(Color.brown)
.cornerRadius(12)
.foregroundColor(.white)
.frame(width: UIScreen.main.bounds.width*0.75, height: 50, alignment: .leading)
Spacer()
Menu {
Button {
} label: {
Text("Confirm")
}
Button {
} label: {
Text("Cancel")
}
} label: {
Image(systemName: "square.and.arrow.up.fill")
.tint(.white)
.padding()
.background(Color.brown)
.cornerRadius(50)
}.frame(width: UIScreen.main.bounds.width*0.10, height: 50, alignment: .trailing)
}
.padding()
}
Fair warning. Those frames I have put may not be exactly as you want. I have tested this code It works.
[Just added your code in demo project to simulate it]
My suggestion would be to give fixed width, height to Menu say 60*60. Then take out 60 from the screen's width, account for padding. And give suitable frame to TextField.
I have an issue with Views in the sample app I am trying to help me learn SwiftUI views.
The black bars at the top and bottom shouldn't be there. I want to extend the view to the top and bottom of the safe area limit.
Here is the code using Xcode 13.4.1 and iOS 15.5:
import SwiftUI
struct ContentView: View {
var body: some View {
TabView {
HotelView()
.tabItem {
Image(systemName: "house")
.resizable()
Text("Home")
}
HomeView(title: "My Trips")
.tabItem {
Image(systemName: "suitcase")
Text("My Trips")
}
HomeView(title: "Saved")
.tabItem {
Image(systemName: "heart")
Text("Saved")
}
HomeView(title: "Profile")
.tabItem {
Image(systemName: "person")
Text("Profile")
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
Also the HotelView file:
import SwiftUI
struct HotelView: View {
var body: some View {
NavigationView {
List(hotels) { hotel in
ScrollView(.vertical, showsIndicators: true) {
NavigationLink(destination: DetailView(hotels: hotel)) {
HStack {
Image(hotel.image)
.resizable()
.frame(height: 100)
.frame(maxWidth: .infinity)
.clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
.overlay(
Text(hotel.city)
.fontWeight(.bold)
.foregroundColor(.white),alignment: .center)
}
}
}
}
// navtitle
}
}
}
And the result in the simulator is:
Black bars on top and bottom
import SwiftUI
#main
struct Mohsin_city_plannerApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
So the solution is to add launch screen to your plist info file even in SwiftUI
I'm trying to animate in a view and make it appear as if it's a sort of drawer opening from another view. This is all fine except if the first view is not opaque. It appears that you can see the animating view the moment it begins animating. Is there a way to clip this so it appears that the view is growing from the top of the bottom view?
Even without opacity this is an issue if where you're animating in from isn't a covered (demoed in second gif)
Sample Code:
struct ContentView: View {
#State private var showingSecondView: Bool = false
var body: some View {
VStack(spacing: 0) {
Spacer()
if showingSecondView {
ZStack {
Color.green.opacity(0.25)
Text("Second View")
}
.frame(width: 300, height: 300)
.transition(.move(edge: .bottom))
}
ZStack {
Color.black.opacity(1)
Text("First View")
}
.frame(width: 300, height: 300)
Button("Animate In / Out") {
showingSecondView.toggle()
}
.padding()
}
.animation(.easeInOut, value: showingSecondView)
}
}
It is possible to do by clipping exact container of 'drawer'. Here is a demo of possible approach.
Tested with Xcode 13.2 / iOS 15.2 (Simulator slow animation is ON for better demo)
var body: some View {
VStack(spacing: 0) {
Spacer()
VStack {
if showingSecondView {
ZStack {
Color.green.opacity(0.25)
Text("Second View")
}
.transition(.move(edge: .bottom))
} else {
Color.clear // << replacement for transition visibility
}
}
.frame(width: 300, height: 300)
.animation(.easeInOut, value: showingSecondView) // << animate drawer !!
.clipped() // << clip drawer area
ZStack {
Color.black.opacity(0.2)
Text("First View")
}
.frame(width: 300, height: 300)
Button("Animate In / Out") {
showingSecondView.toggle()
}
.padding()
}
}
Here a way for you:
struct ContentView: View {
#State private var isSecondViewPresented: Bool = false
var body: some View {
VStack(spacing: 0) {
Spacer()
ZStack {
Color.green.opacity(0.25).cornerRadius(20)
Text("Second View")
}
.frame(width: 300, height: 300)
.offset(y: isSecondViewPresented ? 0 : 300)
.clipShape(RoundedRectangle(cornerRadius: 20))
ZStack {
Color.black.opacity(0.1).cornerRadius(20)
Text("First View")
}
.frame(width: 300, height: 150)
Button("Animate In / Out") {
isSecondViewPresented.toggle()
}
.padding()
}
.animation(.easeInOut, value: isSecondViewPresented)
}
}
I have a coloured NavigationLink that has context-menu. Its content is not readable when the context-menu is presened. I have epxreminted using the context-menu on the immediate sub-view of the NavigationLink, but it is stil the same issue.
NavigationLink(destination: Text("View")) {
VStack(alignment: .leading) {
Text("Context Menu")
.font(.system(size: 24, weight: .bold))
}
.frame(minWidth: 0, maxWidth: .infinity, idealHeight: 70)
.foregroundColor(.white)
.padding()
.cornerRadius(3.0)
}
.background(Color.red)
.contextMenu {
Section {
Button(action: {
}) {
Label("Edit", systemImage: "square.and.pencil")
}
}
Section(header: Text("Secondary actions")) {
Button(action: {}) {
Label("Delete", systemImage: "trash")
}
}
}
NavigatoinLinks look like in its original state.
When the context-menu is presented. The problem is even worse If I use small sized text.
I have tested on ios 14.2 both on simulator and physical device.
Info
Hierarchy of views.
ScrollView {
LazyVStack {
ForEach(data) { item in
// NavigationLink
}
}
}
Update
This is a similar project that has the same issue.
struct ContentView: View {
var body: some View {
NavigationView {
ScrollView {
LazyVStack {
ForEach(0..<10) { item in
NavigationLink(destination: Text("View")) {
VStack(alignment: .leading) {
Text("Context Menu")
.font(.system(size: 24, weight: .bold))
}
.frame(minWidth: 0, maxWidth: .infinity, idealHeight: 70)
.foregroundColor(.white)
.padding()
.cornerRadius(3.0)
}
.background(Color.red)
.contextMenu {
Section {
Button(action: {
}) {
Label("Edit", systemImage: "square.and.pencil")
}
}
Section(header: Text("Secondary actions")) {
Button(action: {}) {
Label("Delete", systemImage: "trash")
}
}
}
}
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
I know it's been two years, but this still remains an issue with iOS 16 when you use LazyVStack. In contrast with List, SwiftUI generates a clear automatic preview. What's new with iOS 16 is that you can now define a custom preview, and SwiftUI will present that preview without the blur. If you choose to use LazyVStack for performance or another reason, this gives you an alternative, albeit with duplicate code.
From your example above, you would add:
NavigationLink(destination: Text("View")) {
// View such as your VStack containing Text
}
.contextMenu {
// Menu items
} preview: {
// View, again, but you might want to simplify or modify
}
I have this code for my view
struct ContentView: View {
var body: some View {
NavigationView{
List{
ForEach(0...5, id: \.self) { note in
VStack(alignment: .leading) {
Text("title")
Text("subtitle")
.font(.subheadline)
.foregroundColor(.secondary)
}
}
}
.navigationBarItems(trailing: resetButton)
.navigationBarTitle(Text("Notes"))
}
}
var resetButton: some View {
Button(action: {
print("reset")
}) {
Image(systemName: "arrow.clockwise")
}
.background(Color.yellow)
}
}
resetButton looks like this:
When I am tapping the resetButton, it seems like only the yellow area responds to touches.
How do I make tappable area of this button bigger? (Make it behave like a normal UIBarButtonItem)
You can change the frame of the view inside the button:
var resetButton: some View {
Button(action: {
print("reset")
}) {
Image(systemName: "arrow.clockwise")
.frame(width: 44, height: 44) // Or any other size you like
}
.background(Color.yellow)
}
This blog post pointed me in the right direction, I needed to add some padding directly to the Image.
Button(action: {
// Triggered code
}) {
Image(systemName: "plus")
.font(.system(size: 22, weight: .regular))
.padding(.vertical)
.padding(.leading, 60)
}
.background(Color.red) // Not needed