I want the image to not have its own background.
But I don’t understand where to set .background or any other way so that it doesn’t stand out
struct CustomDatePicker: View {
#State var date = Date()
let finalDate = Date.now.addingTimeInterval(604800)
var body: some View {
VStack {
ZStack {
DatePicker("label", selection: $date, in: Date.now...finalDate, displayedComponents: .date)
.datePickerStyle(CompactDatePickerStyle())
.labelsHidden()
Image(systemName: "calendar")
.font(.system(size: 21))
.foregroundColor(titleFieldColor)
.userInteractionDisabled()
}
.background(.clear)
}
}
}
struct NoHitTesting: ViewModifier {
func body(content: Content) -> some View {
SwiftUIWrapper { content }.allowsHitTesting(false)
}
}
struct SwiftUIWrapper<T: View>: UIViewControllerRepresentable {
let content: () -> T
func makeUIViewController(context: Context) -> UIHostingController<T> {
UIHostingController(rootView: content())
}
func updateUIViewController(_ uiViewController: UIHostingController<T>, context: Context) {}
}
extension View {
func userInteractionDisabled() -> some View {
self.modifier(NoHitTesting())
}
}
And here full string.
var body: some View {
HStack {
Text(title.count > 0 ? title : nameOfCategory.localized(LocalizationService.shared.language))
.frame(width: 200, height: 40, alignment: .leading)
.font(.system(size: 16))
.foregroundColor(titleFieldColor)
CustomDatePicker()
.background(backgroundFieldColor.opacity(1))
.frame(width: 30, height: 30)
}
.frame(width: 280, height: 40)
.background(backgroundFieldColor)
.clipShape(RoundedRectangle(cornerRadius: 25))
}
I have tried many different options but none of the options work for this line:
I can't reduce the frame of this CustomDatePicker
I made .background the same color as view, did oppacity - 1, tried background(.clear)
This white zone doesn't change at all
How else can you try to fix this?
Related
I found this code for taking a snapshot of a view in SwiftUI, and also found this gist for how to bring up UIActivityController in SwiftUI. It works ok but the biggest issue I am having is when you tap share the UIActivityController is blank, if you tap share again it will work as expected but I can't figure out why it doesn't work the first time? If I change to a static image or text to share it works as expected? Any thoughts?
import SwiftUI
//construct enum to decide which sheet to present:
enum ActiveSheet: String, Identifiable { // <--- note that it's now Identifiable
case photoLibrary, shareSheet
var id: String {
return self.rawValue
}
}
struct ShareHomeView: View {
#State private var shareCardAsImage: UIImage? = nil
#State var activeSheet: ActiveSheet? = nil // <--- now an optional property
var shareCard: some View {
ZStack {
VStack {
Spacer()
LinearGradient(
gradient: Gradient(colors: [.black, .red]),
startPoint: .topLeading,
endPoint: .bottomTrailing
)
.cornerRadius(10.0)
.padding(.horizontal)
Spacer()
}
SubView()
.padding(.horizontal)
VStack {
HStack {
HStack(alignment: .center) {
Image(systemName: "gamecontroller")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 40)
.padding(.leading)
VStack(alignment: .leading, spacing: 3) {
Text("My App")
.foregroundColor(.white)
.font(.headline)
.fontWeight(.bold)
Text("Wed 30 Mar 22")
.foregroundColor(.white)
.font(.headline)
// .fontWeight(.bold)
}
}
Spacer()
}
.padding([.leading, .top])
Spacer()
}
} //End of ZStack
.frame(height: 350)
}
var body: some View {
NavigationView {
VStack {
HStack {
Spacer()
Button {
self.activeSheet = .photoLibrary
} label: {
Image(systemName: "photo")
.resizable()
.scaledToFit()
.frame(height: 40)
}
.padding(.trailing)
}
//GeometryReader { geometry in
shareCard
// } //End of GeometryReader
Button(action: {
shareCardAsImage = shareCard.asImage()
self.activeSheet = .shareSheet
}) {
HStack {
Image(systemName: "square.and.arrow.up")
.font(.system(size: 20))
Text("Share")
.font(.headline)
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 50, maxHeight: 50)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(20)
}
.padding(.horizontal)
} //End of Master VStack
//sheet choosing view to display based on selected enum value:
.sheet(item: $activeSheet) { sheet in // <--- sheet is of type ActiveSheet and lets you present the appropriate sheet based on which is active
switch sheet {
case .photoLibrary:
Text("TODO")
case .shareSheet:
if let unwrappedImage = shareCardAsImage {
ShareSheet(photo: unwrappedImage)
}
}
}
//Needed to Wrap in a Navigation View and hide title so that dark mode would work, otherwise this sheet was always in the iPhone's light or dark mode
.navigationBarHidden(true)
.navigationTitle("")
}
}
}
struct RecoveryShareHomeView_Previews: PreviewProvider {
static var previews: some View {
ShareHomeView().preferredColorScheme(.dark)
ShareHomeView().preferredColorScheme(.light)
}
}
extension View {
func asImage() -> UIImage {
let controller = UIHostingController(rootView: self)
// locate far out of screen
controller.view.frame = CGRect(x: 0, y: CGFloat(Int.max), width: 1, height: 1)
UIApplication.shared.windows.first!.rootViewController?.view.addSubview(controller.view)
let size = controller.sizeThatFits(in: UIScreen.main.bounds.size)
controller.view.bounds = CGRect(origin: .zero, size: size)
controller.view.sizeToFit()
let image = controller.view.asImage()
controller.view.removeFromSuperview()
return image
}
}
extension UIView {
func asImage() -> UIImage {
let renderer = UIGraphicsImageRenderer(bounds: bounds)
return renderer.image { rendererContext in
// [!!] Uncomment to clip resulting image
// rendererContext.cgContext.addPath(
// UIBezierPath(roundedRect: bounds, cornerRadius: 20).cgPath)
// rendererContext.cgContext.clip()
// As commented by #MaxIsom below in some cases might be needed
// to make this asynchronously, so uncomment below DispatchQueue
// if you'd same met crash
// DispatchQueue.main.async {
layer.render(in: rendererContext.cgContext)
// }
}
}
}
import LinkPresentation
//This code is from https://gist.github.com/tsuzukihashi/d08fce005a8d892741f4cf965533bd56
struct ShareSheet: UIViewControllerRepresentable {
let photo: UIImage
func makeUIViewController(context: Context) -> UIActivityViewController {
//let text = ""
//let itemSource = ShareActivityItemSource(shareText: text, shareImage: photo)
let activityItems: [Any] = [photo]
let controller = UIActivityViewController(
activityItems: activityItems,
applicationActivities: nil)
return controller
}
func updateUIViewController(_ vc: UIActivityViewController, context: Context) {
}
}
struct SubView: View {
var body: some View {
HStack {
Image(systemName: "star")
Text("Test View")
Image(systemName: "star")
}
}
}
Add [shareCardAsImage] so that the current value is captured inside sheet:
.sheet(item: $activeSheet) { [shareCardAsImage] sheet in
This is necessary because your item doesn't capture it explicitly, which is generally how item is used. You could also solve it by adding an associated value on your ActiveSheet that stores the image in item.
I have created a custom picker that is larger than the native SwiftUI picker. This picker is being used on an iPad which is why I need it larger than usual. When I use the picker, I can't tap on the padding portions. The picker is only opened when I tap directly in the horizontal center of my picker. I have read about using a .frame() modifier to change the tappable area of things like buttons, but that does not seem to work here when I try to add a frame modifier to the base Picker itself. Here is an image of the additional area (in orange) I would like to make tappable
And here is my code:
import SwiftUI
struct CustomPickerStyle: ViewModifier {
var labelText: String
var width: CGFloat
func body(content: Content) -> some View {
Menu {
content
} label: {
HStack {
if let labelText = labelText {
Text(labelText)
.font(.title2)
.fontWeight(.bold)
Spacer()
Image(systemName: "triangle.fill")
.resizable()
.frame(width: 12, height: 8)
.rotationEffect(.degrees(180))
}
}
}
.frame(maxWidth: width, alignment: .leading)
.padding()
.background(.white)
.overlay(
RoundedRectangle(cornerRadius: 3)
.stroke(.gray, lineWidth: 2)
)
}
}
extension View {
func customPickerStyle(labelText: String, width: CGFloat) -> some View {
self.modifier(CustomPickerStyle(labelText: labelText, width: width))
}
}
struct CustomPicker: View {
enum Flavor: String, CaseIterable, Identifiable {
case chocolate, vanilla, strawberry
var id: Self { self }
}
#State private var selectedFlavor: Flavor = .chocolate
var body: some View {
Picker("Flavor", selection: $selectedFlavor) {
Text("Chocolate").tag(Flavor.chocolate)
Text("Vanilla").tag(Flavor.vanilla)
Text("Strawberry").tag(Flavor.strawberry)
}
.customPickerStyle(labelText: selectedFlavor.rawValue, width: 200)
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
CustomPicker()
}
}
Just move your padding and background stylings directly inside the label:
struct CustomPickerStyle: ViewModifier {
var labelText: String
var width: CGFloat
func body(content: Content) -> some View {
Menu {
content
} label: {
HStack {
if let labelText = labelText {
Text(labelText)
.font(.title2)
.fontWeight(.bold)
Spacer()
Image(systemName: "triangle.fill")
.resizable()
.frame(width: 12, height: 8)
.rotationEffect(.degrees(180))
}
}
.frame(maxWidth: width, alignment: .leading)
.padding()
.background(.white)
.overlay(
RoundedRectangle(cornerRadius: 3)
.stroke(.gray, lineWidth: 2)
)
}
}
}
I got 50 questions on Firebase. I return this data with ForEach in the TabView I prepared as a custom. But from question 23, I can't see other questions. I can't advance to the next page. What is the reason of this ? Can't I return items in TabView unlimitedly?
Gif:
TabView PagingView:
struct PagingQuestionView: View {
var tests: [Test] = []
#State var imageUrl: String = ""
var storage = Storage.storage().reference()
#ObservedObject var pagingQuestionOptionConfigure: PagingQuestionOptionConfigure = PagingQuestionOptionConfigure()
var body: some View {
GeometryReader { proxy in
TabView(selection: $pagingQuestionOptionConfigure.pageIndex) {
ForEach(tests, id: \.self) { item in
VStack(spacing: 20) {
EmptyView()
.frame(width: 350, height: 250)
.padding()
VStack {
Text("\(item.id))")
Text("\(item.question)")
.padding()
}
PagingOptionView(options: item.sections)
}
.tag(item.id)
}
.rotationEffect(.degrees(-90))
.frame(width: proxy.size.width, height: proxy.size.height)
}
.frame(width: proxy.size.height, height: proxy.size.width)
.rotationEffect(.degrees(90), anchor: .topLeading)
.offset(x: proxy.size.width)
.modifier(TabViewModifier())
}
}
}
TabViewModifier:
struct TabViewModifier: ViewModifier {
#ViewBuilder
func body(content: Content) -> some View {
if #available(iOS 14.0, *) {
content
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
} else {
content
}
}
}
I solved my problem.
I added this in ForEach
ForEach(tests.indices, id: \.self){ ... }
How can I add a badge to navigationBarItems in SwiftUI and iOS 14?
I cannot find anything on the net...
I want for example add a badge over the leading navigationBarItems:
var body: some View {
NavigationView {
ZStack {
VStack(spacing: 0) {
Text("Peanut")
.padding(-10)
.navigationBarTitle(Text("HomeTitle"), displayMode: .inline)
.navigationBarItems(leading:
HStack {
NavigationLink(destination: Notifications()) {
Image(systemName: "bell")
.font(.system(size: 20))
}.foregroundColor(.white)
}, trailing:
HStack {
NavigationLink(destination: Settings()) {
Image(systemName: "gearshape")
.font(.system(size: 20))
}.foregroundColor(.white)
})
}
}
}
}
You can create a custom Badge view:
struct Badge: View {
let count: Int
var body: some View {
ZStack(alignment: .topTrailing) {
Color.clear
Text(String(count))
.font(.system(size: 16))
.padding(5)
.background(Color.red)
.clipShape(Circle())
// custom positioning in the top-right corner
.alignmentGuide(.top) { $0[.bottom] }
.alignmentGuide(.trailing) { $0[.trailing] - $0.width * 0.25 }
}
}
}
and use it as an overlay:
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
VStack(spacing: 0) {
Text("Peanut")
.padding(-10)
.navigationBarTitle(Text("HomeTitle"), displayMode: .inline)
.navigationBarItems(leading: leadingBarItems)
}
}
}
}
var leadingBarItems: some View {
NavigationLink(destination: Text("Notifications")) {
Image(systemName: "bell")
.font(.system(size: 20))
}
.foregroundColor(.primary)
.padding(5)
.overlay(Badge(count: 3))
}
}
Note
The badge view uses alignment guides for positioning. For more information see:
Alignment Guides in SwiftUI
Here's another example of custom badge
struct BadgeViewModifier: ViewModifier {
let text: String?
func body(content: Content) -> some View {
content
.overlay(alignment: .topTrailing) {
text.map { value in
Text(value)
.fixedSize(horizontal: true, vertical: false)
.font(.system(size: 14, weight: .semibold))
.foregroundColor(DS.Colors.white)
.padding(.horizontal, value.count == 1 ? 2 : 6)
.padding(.vertical, 2)
.background(
Capsule()
.fill(DS.Colors.red)
.if(value.count == 1) { $0.aspectRatio(1, contentMode: .fill) }
)
}
}
}
}
extension View {
func badge(value: String?) -> some View {
modifier(BadgeViewModifier(text: value))
}
#ViewBuilder func `if`<Result: View>(_ condition: Bool, closure: #escaping (Self) -> Result) -> some View {
if condition {
closure(self)
} else {
self
}
}
}
I have a relatively simple view, and I am trying to get UIVisualEffectView to work when used within a context menu.
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottomLeading) {
Image("Flower")
.resizable()
.frame(width: 200, height: 200)
VStack {
Text("Line 1")
Text("Line 2")
}
.frame(width: 200, height: 50)
.background(BlurView())
}
.contextMenu(ContextMenu(menuItems: {
Text("Menu Item 1")
}))
}
}
struct BlurView: UIViewRepresentable {
var style: UIBlurEffect.Style = .systemMaterial
func makeUIView(context: Context) -> UIVisualEffectView {
return UIVisualEffectView(effect: UIBlurEffect(style: style))
}
func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
uiView.effect = UIBlurEffect(style: style)
}
}
When the view loads it works great, but when the context menu is activated the whole blur just disappears.
Hopefully there's a workaround or I'll just have to use a completely different overlay until this is fixed.
This is the way how the contextMenu interferes with the underlying view.
If you don't want this behaviour, you can attach the contextMenu to an invisible overlay, so the underlying view will remain untouched:
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottomLeading) {
Image("testImage")
.resizable()
.frame(width: 200, height: 200)
VStack {
Text("Line 1")
Text("Line 2")
}
.frame(width: 200, height: 50)
.background(BlurView())
}
.overlay(
Color.clear
.contentShape(Rectangle())
.contextMenu(ContextMenu(menuItems: {
Text("Menu Item 1")
}))
)
}
}