When I create a view in SwiftUI and render it in an Xcode preview, using PreviewLayout.sizeThatFits, the preview adjusts its size according to its content. When I import a UIKIt view using UIViewRepresentable, it appears with a full device-size frame.
Is there a way to make SwiftUI respect the intrinsicContentSize of UIView subclasses?
struct Label: UIViewRepresentable {
func makeUIView(context: UIViewRepresentableContext<Label>) -> UILabel {
return UILabel()
}
func updateUIView(_ uiView: UILabel, context: UIViewRepresentableContext<Label>) {
uiView.text = "Some text"
}
}
#if DEBUG
struct Label_Previews: PreviewProvider {
static var previews: some View {
Group {
Label().previewLayout(.sizeThatFits)
}
}
}
#endif
Add the following to your updateUIView function:
uiView.setContentHuggingPriority(.defaultHigh, for: .vertical)
uiView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
You can also limit the UIViewRepresentable size from the SwiftUI side.
For this you can use fixedSize:
struct Label_Previews: PreviewProvider {
static var previews: some View {
Label()
.fixedSize()
.previewLayout(.sizeThatFits)
}
}
You can also fix the view size in one dimension only:
.fixedSize(horizontal: false, vertical: true)
Related
I'm trying to intercept mouse click events inside SpriteKit SKScene inside a a SwiftUI SpriteView in Mac OS. Overriding touchesBegun() that accepts an NSEvent object is never called when I click mouse inside the view. isUserInteractionEnabled is set to true. What am I missing? Running in Xcode 13.2 with deployment target 12.1 for Mac OS.
import SwiftUI
import SpriteKit
class MyScene : SKScene {
override func touchesBegan(with event: NSEvent) {
print(event)
}
}
var scene : MyScene {
let r = MyScene()
r.isUserInteractionEnabled = true
r.size = .init(width: 500, height: 500)
r.scaleMode = .aspectFill
r.backgroundColor = .orange
return r
}
struct ContentView: View {
var body: some View {
SpriteView.init(scene: scene)
.frame(width: 500, height: 500)
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
On macOS SKScene inherits from NSResponder, so we override mouse handlers, like
class MyScene : SKScene {
override func mouseDown(with event: NSEvent) { // << here !!
print(event)
}
}
Tested with Xcode 14 / macOS 12.5
I am trying to use the NSVisualEffectView in my project with SwiftUI. This is how I imported it:
struct VisualEffectView: NSViewRepresentable {
func makeNSView(context: Context) -> NSVisualEffectView {
let view = NSVisualEffectView()
view.blendingMode = .withinWindow
view.isEmphasized = true
view.material = .sidebar
return view
}
func updateNSView(_ nsView: NSVisualEffectView, context: Context) {
}
}
Then this is how I am using it
var body: some View {
ZStack {
Image("someImage")
SomeText()
.background(VisualEffectView())
}
}
Eventually, it showed up on the screen as a box grey box without translucent or blur. Anyone know what I am missing from the example above? Thank you for your help
I have a UITableViewCell containing a simple UIStackView and 2 UILabels (So it is from UIKit, NOT native SwiftUI) that should have a static width and dynamic height. How can I have a preview for this without need to see the actual phone size?
Note 1: .sizeThatFits will put all the weight on the width and there will be no multiline labels
Note 2: .device is showing extra useless empty spaces of the main view of the screen.
Note 3: .fixed(width:height:) is not prefered, because it will have less space or extra useless space as our needs.
Note 4: Need something like this: (For UIStackView)
DEMO
struct UILabelPorted: UIViewRepresentable {
var configuration = { (view: UILabel) in }
func makeUIView(context: UIViewRepresentableContext<Self>) -> UILabel {
let uiView = UIViewType()
uiView.setContentHuggingPriority(.defaultHigh, for: .vertical)
uiView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
return uiView
}
func updateUIView(_ uiView: UILabel, context: UIViewRepresentableContext<Self>) { configuration(uiView) }
}
struct UILabel_Previews: PreviewProvider {
static var previews: some View {
UILabelPorted {
$0.text = "This label should have multiple lines like it is in a UITableView cell."
}
.previewLayout(.sizeThatFits)
}
}
It is not very clear where is the problem, but you need something like
ContentView()
.previewLayout(.fixed(width: 414, height: 300))
I'm using a 3rd party library developed with UIKit. It's API needs a reference to a UIView.
How can I use this library inside SwiftUI? And how can I convert a SwiftUI view to a UIView?
I've tried creating a UIViewRepresentable like this:
struct SomeView: UIViewRepresentable {
let contentViewController: UIViewController
init<Content: View>(contentView: Content) {
self.contentViewController = UIHostingController(rootView: contentView)
}
func makeUIView(context: Context) -> UIKitView {
// Whatever I do here doesn't work. Frame is always 0
contentViewController.loadViewIfNeeded()
contentViewController.view.setNeedsDisplay()
contentViewController.view.layoutIfNeeded()
print(contentViewController.view.frame)
let uikitView = UIKitView()
uikitView.show(contentViewController.view)
return popover
}
func updateUIView(_ uiView: UIKitView, context: Context) {
}
}
I hope I'm wrong, but I have not been able to find a SwiftUI equivalent to an editable
UITextView. So, I built one using UIViewRepresentable. Populating both a SwiftUI Text
and my own view with the ObservableObject works - but updates made in my view are
not propagated to the ObservableObject. I must be missing something important with
the Binding concept. Any guidance would be appreciated.
import SwiftUI
import Combine
struct ContentView: View {
#ObservedObject var myOText: MyOText
var body: some View {
ScrollView {
VStack {
Text("This is a bound Text View")
.padding(.top, 10)
.font(.headline)
Text(myOText.inTheCourse)
.lineLimit(3)
.padding()
Text("This is a multi-line UITextView wrapper:")
.font(.headline)
MultilineTextView(myOText: myOText)
.frame(height: 100)
.padding()
Spacer()
}
}
}
}
struct MultilineTextView: UIViewRepresentable {
#ObservedObject var myOText: MyOText
func makeUIView(context: Context) -> UITextView {
let view = UITextView()
view.isScrollEnabled = true
view.isEditable = true
view.isUserInteractionEnabled = true
view.textAlignment = .center
view.font = UIFont(name: "Times New Roman", size: 20)
return view
}
func updateUIView(_ uiView: UITextView, context: Context) {
uiView.text = myOText.inTheCourse
}
}
class MyOText: ObservableObject {
#Published var inTheCourse: String = "When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them ..."
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView(myOText: MyOText())
}
}
Xcode Version 11.2 beta 2 (11B44), iOS 13.
Your multiline text view needs a coordinator to observe the text updates from UITextView
struct MultilineTextView: UIViewRepresentable {
#ObservedObject var myOText: MyOText
func makeUIView(context: Context) -> UITextView {
let view = UITextView()
view.isScrollEnabled = true
view.isEditable = true
view.isUserInteractionEnabled = true
view.textAlignment = .center
view.font = UIFont(name: "Times New Roman", size: 20)
view.delegate = context.coordinator
return view
}
func updateUIView(_ uiView: UITextView, context: Context) {
uiView.text = myOText.inTheCourse
}
func makeCoordinator() -> MultilineTextView.Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, UITextViewDelegate {
var control: MultilineTextView
init(_ control: MultilineTextView) {
self.control = control
}
func textViewDidChange(_ textView: UITextView) {
control.myOText.inTheCourse = textView.text
}
}
}