SwiftUI UITextView wrapper how to size it content to match parent - uitextview

I have such UITextView wrapper and it works but when I place it inside List row. I would like it to autosize, i.e. have width that match parent in this case List Row VStack { }, and height that is autosize based on text length. Text should wrap.
Now it nearly works but the longer text like a URL goes outside available row width.
List {
VStack(alignment: .leading) {
if self.hasNote {
TextView(text: text)
}
}
struct TextView: UIViewRepresentable {
// MARK: - Properties
let text: String
init(text: String) {
self.text = text
}
func makeUIView(context: Context) -> UITextView {
let textView = UITextView()
//textView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
textView.backgroundColor = UIColor.clear
textView.isScrollEnabled = false
textView.attributedText = self.attributedText
textView.textContainer.lineBreakMode = .byWordWrapping
//textView.layoutIfNeeded()
textView.sizeToFit()
return textView
}
}
UPDATE
Now I have something like this it does fit parent SwiftUI views (rows in List) but instead it does not wrap text (or stretch vertically based on content size. If scrolled it wraps text correctly.
Also if I set .frame(height: 500) I can see it wraps text. But it doesn't autosize correctly.
func makeUIView(context: Context) -> UITextView {
let textView = UITextView()
textView.backgroundColor = UIColor.clear
textView.isScrollEnabled = false
textView.isSelectable = true
let linkAttrs : [NSAttributedString.Key : Any] = [
.foregroundColor: accentColor,
.underlineColor: accentColor,
.underlineStyle: NSUnderlineStyle.single.rawValue
]
textView.linkTextAttributes = linkAttrs
textView.attributedText = self.attributedText
textView.textContainer.lineBreakMode = .byWordWrapping
textView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
textView.setContentCompressionResistancePriority(.defaultHigh, for: .vertical)
textView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
textView.setContentHuggingPriority(.defaultLow, for: .vertical)
textView.sizeToFit()
return textView
}

Related

Speed Up TextEditing on Long Text

With the following code performance degrades drastically as the text gets longer due to the view getting redrawn for every character typed (due to textViewDidChange). There are also a number of nasty side effects as well, such as insertion of sentence breaks likely due to autocorrect or some other mechanism. If I comment out or eliminate the textViewDidChange function, performance is much better and the side effects disappear, but then I no longer can capture the text to save it or interrogate it on the fly.
Does anyone know of a way around this? I thought that if I could just not refresh the text variable until the focus was moved to a different view, then I could capture the text before it needs to be saved. If that might work, I can't determine how to trap the focus change. I have tried implementing textViewDidEndEditing but that only gets triggered when the parent view ends editing. I'm using a save button and want to capture the text then.
I realize that there is a TextEditor view available, but it is just as slow on large text so I assume it is doing the same thing.
import SwiftUI
struct TextView: UIViewRepresentable {
#Binding var text: String
#Binding var textStyle: UIFont.TextStyle
func makeUIView(context: Context) -> UITextView {
let textView = UITextView()
textView.delegate = context.coordinator
textView.font = UIFont.preferredFont(forTextStyle: textStyle)
textView.autocapitalizationType = .none
textView.isSelectable = true
textView.isUserInteractionEnabled = true
return textView
}
func updateUIView(_ uiView: UITextView, context: Context) {
uiView.text = text
uiView.font = UIFont.preferredFont(forTextStyle: textStyle)
}
func makeCoordinator() -> Coordinator {
Coordinator($text)
}
class Coordinator: NSObject, UITextViewDelegate {
var text: Binding<String>
init(_ text: Binding<String>) {
self.text = text
}
func textViewDidChange(_ textView: UITextView) {
self.text.wrappedValue = textView.text
}
}
}
Content View
import SwiftUI
struct ContentView: View {
#State private var message = ""
#State private var textStyle = UIFont.TextStyle.body
var body: some View {
ZStack(alignment: .topTrailing) {
TextView(text: $message, textStyle: $textStyle)
.padding(.horizontal)
Button(action: {
self.textStyle = (self.textStyle == .body) ? .title1 : .body
}) {
Image(systemName: "textformat")
.imageScale(.large)
.frame(width: 40, height: 40)
.foregroundColor(.white)
.background(Color.purple)
.clipShape(Circle())
}
.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Set range of colored text for UISegmentedControl

According to the following documentation (https://developer.apple.com/documentation/uikit/uisegmentedcontrol/1618570-settitletextattributes)
I should be able to add attributes to change how it looks for a particular mode.
modalitySegmentedControl.setTitle("LDR ("+(stateController?.tdfvariables.selectedRadionuclide.name ?? "-") + ")", forSegmentAt: Constants.LDRButton)
let colorAttribute = [ NSAttributedString.Key.foregroundColor: UIColor.systemTeal ]
modalitySegmentedControl.setTitleTextAttributes(colorAttribute, for: .selected)
In short the text on the control is basically "LDR (I-125)". Currently this code highlights the entire selection teal. I'm looking for a way to only highlight the (I-125) only with a teal color. I can do this with regular UILabels by defining a range that the attributes act upon, but I can't seem to find a way to set a specific color range with the UISegmentedControl?
Is this possible to do?
It currently looks like this:
I want the LDR to be white color and only teal on the (I-125) part.
In short I think it's not possible. Check my hacky playground:
//: A UIKit based Playground for presenting user interface
import UIKit
import PlaygroundSupport
extension UIView {
class func getAllSubviews<T: UIView>(from parentView: UIView) -> [T] {
return parentView.subviews.flatMap { subView -> [T] in
var result = getAllSubviews(from: subView) as [T]
if let view = subView as? T { result.append(view) }
return result
}
}
class func getAllSubviews(from parentView: UIView, types: [UIView.Type]) -> [UIView] {
return parentView.subviews.flatMap { subView -> [UIView] in
var result = getAllSubviews(from: subView) as [UIView]
for type in types {
if subView.classForCoder == type {
result.append(subView)
return result
}
}
return result
}
}
func getAllSubviews<T: UIView>() -> [T] { return UIView.getAllSubviews(from: self) as [T] }
func get<T: UIView>(all type: T.Type) -> [T] { return UIView.getAllSubviews(from: self) as [T] }
func get(all types: [UIView.Type]) -> [UIView] { return UIView.getAllSubviews(from: self, types: types) }
}
class MyViewController : UIViewController {
var myString: String = "LDR (I-125)"
var myString42: String = "424242424242"
var attributedString = NSMutableAttributedString()
override func loadView() {
let view = UIView()
view.backgroundColor = .white
let items = ["EBRT", "LDR (I-125)", "PERM"]
let modalitySegmentedControl = UISegmentedControl(items: items)
modalitySegmentedControl.frame = CGRect(x: 20, y: 200, width: 300, height: 20)
modalitySegmentedControl.backgroundColor = .white
attributedString = NSMutableAttributedString(string: myString, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 18)])
attributedString.addAttribute(NSAttributedString.Key.foregroundColor, value: UIColor.red, range: NSRange(location:4, length:7))
let subviews = modalitySegmentedControl.getAllSubviews()
for view in subviews {
if view is UILabel {
if let label = view as? UILabel, label.text == myString {
print(label.attributedText)
label.attributedText = attributedString
//label.text = "42" // this works
print(label.attributedText) // looks changed
}
}
}
let subviews2 = modalitySegmentedControl.getAllSubviews()
for view in subviews2 {
if view is UILabel {
if let label = view as? UILabel, label.text == myString {
print(label.attributedText) // but it didn't change
}
}
}
let lab = UILabel()
lab.frame = CGRect(x: 40, y: 250, width: 300, height: 20)
lab.attributedText = attributedString
view.addSubview(lab)
view.addSubview(modalitySegmentedControl)
self.view = view
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
You can find specific UILabel subview of UISegmentedControl and even can change the text, but attribute changes doesn't work.
Related question: Segmented Control set attributed title in each segment

Action when user click on the delete button on the keyboard in SwiftUI

I try to run a function when the user click on the delete button on the keyboard when he try to modify a Textfield.
How can I do that ?
Yes it is possible, however it requires subclassing UITextField and creating your own UIViewRepresentable
This answer is based on the fantastic work done by Costantino Pistagna in his medium article but we need to do a little more work.
Firstly we need to create our subclass of UITextField, this should also conform to the UITextFieldDelegate protocol.
class WrappableTextField: UITextField, UITextFieldDelegate {
var textFieldChangedHandler: ((String)->Void)?
var onCommitHandler: (()->Void)?
var deleteHandler: (() -> Void)?
override func deleteBackward() {
super.deleteBackward()
deleteHandler?()
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
if let nextField = textField.superview?.superview?.viewWithTag(textField.tag + 1) as? UITextField {
nextField.becomeFirstResponder()
} else {
textField.resignFirstResponder()
}
return false
}
func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
if let currentValue = textField.text as NSString? {
let proposedValue = currentValue.replacingCharacters(in: range, with: string)
textFieldChangedHandler?(proposedValue as String)
}
return true
}
func textFieldDidEndEditing(_ textField: UITextField) {
onCommitHandler?()
}
}
Because we are creating our own implementation of a TextField we need three functions that we can use for callbacks.
textFieldChangeHandler this will be called when the text property updates and allows us to change the state value associated with our Textfield.
onCommitHandler this will be called when we have finished editing our TextField
deleteHandler this will be called when we perform he delete action.
The code above shows how these are used. The part that you are particularly interested in is the override func deleteBackward(), by overriding this we are able to hook into when the delete button is pressed and perform an action on it. Depending on your use case, you may want the deleteHandler to be called before you call the super.
Next we need to create our UIViewRepresentable.
struct MyTextField: UIViewRepresentable {
private let tmpView = WrappableTextField()
//var exposed to SwiftUI object init
var tag:Int = 0
var placeholder:String?
var changeHandler:((String)->Void)?
var onCommitHandler:(()->Void)?
var deleteHandler: (()->Void)?
func makeUIView(context: UIViewRepresentableContext<MyTextField>) -> WrappableTextField {
tmpView.tag = tag
tmpView.delegate = tmpView
tmpView.placeholder = placeholder
tmpView.onCommitHandler = onCommitHandler
tmpView.textFieldChangedHandler = changeHandler
tmpView.deleteHandler = deleteHandler
return tmpView
}
func updateUIView(_ uiView: WrappableTextField, context: UIViewRepresentableContext<MyTextField>) {
uiView.setContentHuggingPriority(.defaultHigh, for: .vertical)
uiView.setContentHuggingPriority(.defaultLow, for: .horizontal)
}
}
This is where we create our SwiftUI version of our WrappableTextField. We create our WrappableTextField and its properties. In the makeUIView function we assign these properties. Finally in the updateUIView we set the content hugging properties, but you may choose not to do that, it really depends on your use case.
Finally we can create a small working example.
struct ContentView: View {
#State var text = ""
var body: some View {
MyTextField(tag: 0, placeholder: "Enter your name here", changeHandler: { text in
// update the state's value of text
self.text = text
}, onCommitHandler: {
// do something when the editing finishes
print("Editing ended")
}, deleteHandler: {
// do something here when you press delete
print("Delete pressed")
})
}
}

TornadoFX datagrid empty

So I have been following this tutorial that tells you how to make a datagrid in TornadoFX, and everything works fine. However, I want to add multiple Views to each cell of my datagrid, so I want to replace the stackpane with a borderpane. This breaks it. Cells still show up, but they are blank white squares. None of the Views show up inside.
I'm not really sure why this happens. It seems to me that cellFormat and cellCache act like for-each loops, making a graphic described inside of them for each element in the list of cells that need formatting. I'm not sure, though.
As such, I'm really not sure how to fix this. I really appreciate it if anybody can help.
Code that puts a green circle and a label on each of the white squares:
class DatagridDemo: View("Datagrid Demo") {
val data = listOf("one", "two", "three")
override val root = datagrid(data) {
cellFormat {
graphic = stackpane() {
circle(radius = 50.0) {
fill = Color.ALICEBLUE;
}
label(it);
}
}
}
}
My code:
class DatagridDemo: View("Datagrid Demo") {
val data = listOf("one", "two", "three")
override val root = datagrid(data) {
cellFormat {
graphic = borderpane() {
//The widgets implement View()
top<TopWidget>();
bottom<BottomWidget>()
label(it);
}
}
}
}
This uses two custom Fragments to create objects that are added to the top and the bottom.
class TopWidget(msg : String) : Fragment() {
override val root = label(msg)
}
class BottomWidget(msg : String) : Fragment() {
override val root = label(msg)
}
class DatagridDemo: View("Datagrid Demo") {
val data = listOf("one", "two", "three")
override val root = datagrid(data) {
cellFormat {
graphic = borderpane {
top { add(TopWidget("Top ${it}")) }
center { label(it) }
bottom { add(BottomWidget("Bottom ${it}")) }
}
}
}
}
class DGDemo : App(DatagridDemo::class)

Pan to new mapView Annotation Location - not zoom

When adding an annotation to my mapView using mapView.addAnnotation, mapView.setRegion correctly animates and displays the map's center & span.
But when adding a new annotation and then calling mapView.setRegion, the view again starts from very wide, and then animates/zooms in to the new center & span.
I would like to know if there is a way to PAN from the previous region to the new region (center & span), rather than starting zoomed out, then zooming all the way back in again.
mapView.setRegion starts zoom from way out here each time:
I have defined 2 custom classes : MarkAnnotation & MarkAnnotationView
class MarkAnnotation : NSObject, MKAnnotation {
var coordinate: CLLocationCoordinate2D
var title: String?
var subtitle: String?
init(coordinate: CLLocationCoordinate2D, title: String, subtitle: String) {
self.coordinate = coordinate
self.title = title
self.subtitle = subtitle
}
}
class MarkAnnotationView: MKAnnotationView {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(annotation: MKAnnotation?, reuseIdentifier: String?) {
super.init(annotation: annotation, reuseIdentifier: reuseIdentifier)
guard let markAnnotation = self.annotation as? MarkAnnotation else { return }
image = UIImage(named: "customAnnotation")
}
}
and in my MKMapViewDelegate :
func addMarkAnnotation() {
for mark in marks {
let markName : String = mark.name
let markLat : Double = mark.lat
let markLon : Double = mark.lon
let markLL = CLLocationCoordinate2DMake(markLat, markLon)
let markAnnotation = MarkAnnotation(coordinate:markLL, title:markNumStr, subtitle: markName)
mapView.addAnnotation(markAnnotation)
}
}
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
let annotationView = MarkAnnotationView(annotation: annotation, reuseIdentifier: "MarkView")
annotationView.canShowCallout = true
return annotationView
}
func centerMapOnLocation(location:CLLocation, span:Double) {
let mapSpan = MKCoordinateSpanMake(0.2, 0.2)
let recenterRegion = MKCoordinateRegion(center: location.coordinate, span: mapSpan)
mapView.setRegion(recenterRegion, animated: true)
}
And then in the ViewController, when user presses a button, a mark is added at a specified lat/lon
func addMarkBtnPressed() {
// .... (have not shown : conversion of text fields from String to Double, adding Mark to marks array, etc ) ... All this works fine
addMarkAnnotation()
let mapCenter = CLLocation(latitude: markLat, longitude: markLon)
centerMapOnLocation(location: mapCenter, span: span)
}
Try the following code:
func centerMapOnLocation(location:CLLocation, span:Double) {
let mapSpan = mapView.region.span
let recenterRegion = MKCoordinateRegion(center: location.coordinate, span: mapSpan)
mapView.setRegion(recenterRegion, animated: true)
}

Resources