Not for all texts, but for specific length of text GeometryReader decides that Text should contains two lines:
public var body: some View {
ZStack {
if loading {
Text(text)
.foregroundColor(.clear)
.background(rectReader($frame))
.fixedSize(horizontal: false, vertical: true) //Setting vertical to false - solve unwanted behaviour, but I can have multiline text and it makes multiline text single line, so I can't solve it by this way
VStack {
RoundedRectangle(cornerRadius: 8)
.frame(width: frame.width, height: 16)
.foregroundColor(.colorDivider)
if frame.height > 24 {
RoundedRectangle(cornerRadius: 8)
.frame(width: frame.width, height: 16)
.foregroundColor(.colorDivider)
}
}
} else {
Text(text)
.accessibility(identifier: accessibilityIdentifier)
.fixedSize(horizontal: false, vertical: true)
}
}
.background(Color.red)
}
func rectReader(_ binding: Binding<CGRect>) -> some View {
return GeometryReader { geometry -> AnyView in
let rect = geometry.frame(in: .global)
DispatchQueue.main.async {
binding.wrappedValue = rect
}
return AnyView(Rectangle().fill(Color.clear))
}
}
As a result:
But should be:
As you can see in the first image wrong second line, but in the second image - wrong third line (multiline text)
The reason is not in Text but in shapes. The fixed variant is to use maxWidth instead of strong width. Tested with Xcode 11.4 / iOS 13.4
RoundedRectangle(cornerRadius: 8).stroke(Color.gray)
.frame(maxWidth: frame.width).frame(height: 16)
Related
So basically I need to come up with a layout that aligns the middle of a View to the bottom of other View in SwiftUI.
To make it more clear, all I need is something like this:
I guess the equivalent in a UIKit world would be:
redView.bottomAnchor.constraint(equalTo: whiteView.centerYAnchor)
Ive tried setting both in a ZStack and offsetting the white View but it won't work on all screen sizes for obvious reasons.
Any tips?
You can use .aligmentGuide (which is a tricky beast, I recommend this explanation)
Here is your solution, its independent of the child view sizes:
struct ContentView: View {
var body: some View {
ZStack(alignment: .bottom) { // subviews generally aligned at bottom
redView
whiteView
// center of this subview aligned to .bottom
.alignmentGuide(VerticalAlignment.bottom,
computeValue: { d in d[VerticalAlignment.center] })
}
.padding()
}
var redView: some View {
VStack {
Text("Red View")
}
.frame(maxWidth: .infinity)
.frame(height: 200)
.background(Color.red)
.cornerRadius(20)
}
var whiteView: some View {
VStack {
Text("White View")
}
.frame(maxWidth: .infinity)
.frame(width: 250, height: 100)
.background(Color.white)
.cornerRadius(20)
.overlay(RoundedRectangle(cornerRadius: 20).stroke())
}
}
You may try this:
ZStack {
Rectangle()
.frame(width: 300, height: 400)
.overlay(
GeometryReader { proxy in
let offsetY = proxy.frame(in: .named("back")).midY
Rectangle()
.fill(Color.red)
.offset(y: offsetY)
}
.frame(width: 150, height: 140)
, alignment: .center)
}
.coordinateSpace(name: "back")
Bascially the idea is to use coordinateSpace to get the frame of the bottom Rectangle and use geometryreader to get the offset needed by comparing the frame of top rectangle with the bottom one. Since we are using overlay and it is already aligned to the center horizontally, we just need to offset y to get the effect you want.
Based on OPs request in comment, this is a solution making use of a custom Layout.
The HalfOverlayLayout takes two subview and places the second half height over the first. The size of the first subview is flexible. As this is my first Layout I'm not sure if I covered all possible size variants, but it should be a start.
struct ContentView: View {
var body: some View {
HalfOverlayLayout {
redView
whiteView
}
.padding()
}
var redView: some View {
VStack {
ForEach(0..<20) { _ in
Text("Red View")
}
}
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red)
.cornerRadius(20)
}
var whiteView: some View {
VStack {
Text("White View")
}
.frame(width: 200, height: 150)
.background(Color.white)
.cornerRadius(20)
.overlay(RoundedRectangle(cornerRadius: 20).stroke())
}
}
struct HalfOverlayLayout: Layout {
func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
let heightContent = subviews.first?.sizeThatFits(.unspecified).height ?? 0
let heightFooter = subviews.last?.sizeThatFits(.unspecified).height ?? 0
let totalHeight = heightContent + heightFooter / 2
let maxsizes = subviews.map { $0.sizeThatFits(.infinity) }
var totalWidth = maxsizes.max {$0.width < $1.width}?.width ?? 0
if let proposedWidth = proposal.width {
if totalWidth > proposedWidth { totalWidth = proposedWidth }
}
return CGSize(width: totalWidth, height: totalHeight)
}
func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
let heightFooter = subviews.last?.sizeThatFits(.unspecified).height ?? 0
let maxHeightContent = bounds.height - heightFooter / 2
var pt = CGPoint(x: bounds.midX, y: bounds.minY)
if let first = subviews.first {
var totalWidth = first.sizeThatFits(.infinity).width
if let proposedWidth = proposal.width {
if totalWidth > proposedWidth { totalWidth = proposedWidth }
}
first.place(at: pt, anchor: .top, proposal: .init(width: totalWidth, height: maxHeightContent))
}
pt = CGPoint(x: bounds.midX, y: bounds.maxY)
if let last = subviews.last {
last.place(at: pt, anchor: .bottom, proposal: .unspecified)
}
}
}
I am trying to make a SwiftUI TextEditor with a Divider that adapts its position to stay under the bottom-most line of text inside of a edit-bio section of the app.
Note: I have a frame on my TextEditor so that it doesn't take up the whole-screen
Right now the Divider is static and stays in one place. Is there a built-in way to make the divider stay under the bottom most line of text?
I would think the Spacer would have given me this behavior?
Thank you!
struct EditBio: View {
#ObservedObject var editProfileVM: EditProfileViewModel
var body: some View {
VStack(spacing: 10) {
TextEditor(text: $editProfileVM.bio)
.foregroundColor(.white)
.padding(.top, 70)
.padding([.leading, .trailing], 50)
.frame(minWidth: 100, idealWidth: 200, maxWidth: 400, maxHeight: 200, alignment: .center)
Divider().frame(height: 1).background(.white)
Spacer()
}
}
}
It is doing exactly what you told it to do. But a background color on your TextEditor. You will see that it has a height of 200 + a spacing of 10 from the VStack.
I changed your code to make it obvious:
struct EditBio: View {
#State var editProfileVM = ""
var body: some View {
VStack(spacing: 10) {
TextEditor(text: $editProfileVM)
.foregroundColor(.white)
.padding(.top, 70)
.padding([.leading, .trailing], 50)
.frame(minWidth: 100, idealWidth: 200, maxWidth: 400, maxHeight: 200, alignment: .center)
.background(Color.gray)
Divider().frame(height: 1).background(.red)
Spacer()
}
}
}
to produce this:
You can see the TextEditor naturally wants to be taller than 200, but that is limiting it. Therefore, the Spacer() is not going to cause the TextEditor to be any smaller.
The other problem that setting a fixed frame causes will be that your text will end up off screen at some point. I am presuming what you really want is a self sizing TextEditor that is no larger than it's contents.
That can be simply done with the following code:
struct EditBio: View {
#State var editProfileVM = ""
var body: some View {
VStack(spacing: 10) {
SelfSizingTextEditor(text: $editProfileVM)
// Frame removed for the image below.
// .frame(minWidth: 100, idealWidth: 200, maxWidth: 400, maxHeight: 200, alignment: .center)
.foregroundColor(.white)
// made the .top padding to be .vertical
.padding(.vertical, 70)
.padding([.leading, .trailing], 50)
.background(Color.gray)
Divider().frame(height: 5).background(.red)
Spacer()
}
}
}
struct SelfSizingTextEditor: View {
#Binding var text: String
#State var textEditorSize = CGSize.zero
var body: some View {
ZStack {
Text(text)
.foregroundColor(.clear)
.copySize(to: $textEditorSize)
TextEditor(text: $text)
.frame(height: textEditorSize.height)
}
}
}
extension View {
func readSize(onChange: #escaping (CGSize) -> Void) -> some View {
background(
GeometryReader { geometryProxy in
Color.clear
.preference(key: SizePreferenceKey.self, value: geometryProxy.size)
}
)
.onPreferenceChange(SizePreferenceKey.self, perform: onChange)
}
func copySize(to binding: Binding<CGSize>) -> some View {
self.readSize { size in
binding.wrappedValue = size
}
}
}
producing this view:
I'm trying to achieve something that is quite easy in UIKit - one view that is always in in the center (image) and the second view (text) is on top of it with some spacing between two views. I tried many different approaches (mainly using alignmentGuide but nothing worked as I'd like).
code:
ZStack {
Rectangle()
.foregroundColor(Color.red)
VStack {
Text("Test")
.padding([.bottom], 20) // I want to define spacing between two views
Image(systemName: "circle")
.resizable()
.alignmentGuide(VerticalAlignment.center, computeValue: { value in
value[VerticalAlignment.center] + value.height
})
.frame(width: 20, height: 20)
}
}
.frame(width: 100, height: 100)
result:
As you can see image is not perfectly centered and it actually depends on the padding value of the Text. Is there any way to force vertical and horizontal alignment to be centered in the superview and layout second view without affecting centered view?
I think the “correct” way to do this is to define a custom alignment:
extension VerticalAlignment {
static var custom: VerticalAlignment {
struct CustomAlignment: AlignmentID {
static func defaultValue(in context: ViewDimensions) -> CGFloat {
context[VerticalAlignment.center]
}
}
return .init(CustomAlignment.self)
}
}
Then, tell your ZStack to use the custom alignment, and use alignmentGuide to explicitly set the custom alignment on your circle:
PlaygroundPage.current.setLiveView(
ZStack(alignment: .init(horizontal: .center, vertical: .custom)) {
Color.white
Rectangle()
.fill(Color.red)
.frame(width: 100, height: 100)
VStack {
Text("Test")
Circle()
.stroke(Color.white)
.frame(width: 20, height: 20)
.alignmentGuide(.custom, computeValue: { $0.height / 2 })
}
}
.frame(width: 300, height: 300)
)
Result:
You can center the Image by moving it to ZStack. Then apply .alignmentGuide to the Text:
struct ContentView: View {
var body: some View {
ZStack {
Rectangle()
.foregroundColor(Color.red)
Text("Test")
.alignmentGuide(VerticalAlignment.center) { $0[.bottom] + $0.height }
Image(systemName: "circle")
.resizable()
.frame(width: 20, height: 20)
}
.frame(width: 100, height: 100)
}
}
Note that as you specify the width/height of the Image explicitly:
Image(systemName: "circle")
.resizable()
.frame(width: 20, height: 20)
you can specify the .alignmentGuide explicitly as well:
.alignmentGuide(VerticalAlignment.center) { $0[.bottom] + 50 }
Here is possible alternate, using automatic space consuming feature
Tested with Xcode 12 / iOS 14
struct ContentView: View {
var body: some View {
ZStack {
Rectangle()
.foregroundColor(Color.red)
VStack(spacing: 0) {
Color.clear
.overlay(
Text("Test").padding([.bottom], 10),
alignment: .bottom)
Image(systemName: "circle")
.resizable()
.frame(width: 20, height: 20)
Color.clear
}
}
.frame(width: 100, height: 100)
}
}
Note: before I used Spacer() for such purpose but with Swift 2.0 it appears spacer becomes always just a spacer, ie. nothing can be attached to it - maybe bug.
Code to set underline，I want to make the space between the text and the underline larger.
Text("underline text")
.underline()
Underline is a font feature, you can do custom under just by drawing line anywhere needed
var body: some View {
HStack {
Text("Before")
Text("underline text")
.overlay(
Rectangle().frame(height: 1).offset(y: 4)
, alignment: .bottom)
Text("after.")
}
}
How about use a custom view instead of .underline ?
struct MyUnderline: View {
let color: Color = .black
let height: CGFloat = 1
var body: some View {
Rectangle()
.fill(color)
.frame(height: height)
}
}
Text("underline text")
MyUnderline()
.padding(.top, -10)
You could create a custom view that takes the text and underline padding as parameters
struct UnderlinedText: View {
var text: String
var underlinePadding: CGFloat
var body: some View {
VStack (spacing: underlinePadding) {
Text(text)
GeometryReader { proxy in
Rectangle()
.frame(width: proxy.size.width, height: 1)
}
}
}
}
And use it as follows
UnderlinedText(text: "Hello underlined text", underlinePadding: 10.0)
My goal is to make sure Text in a container to scale according to its parent. It works well when the container only contains one Text view, as following:
import SwiftUI
struct FontScalingExperiment: View {
var body: some View {
Text("Hello World ~!")
.font(.system(size: 500))
.minimumScaleFactor(0.01)
.lineLimit(1)
.padding()
.background(
RoundedRectangle(cornerRadius: 20)
.fill(Color.yellow)
.scaledToFill()
)
}
}
struct FontScalingExperiment_Previews: PreviewProvider {
static var previews: some View {
Group {
FontScalingExperiment()
.previewLayout(.fixed(width: 100, height: 100))
FontScalingExperiment()
.previewLayout(.fixed(width: 200, height: 200))
FontScalingExperiment()
.previewLayout(.fixed(width: 300, height: 300))
FontScalingExperiment()
.previewLayout(.fixed(width: 400, height: 400))
}
}
}
the result:
However, when we have more complex View, we cant use same approach to automatically scale the text based on its parent size, for example:
import SwiftUI
struct IndicatorExperiment: View {
var body: some View {
VStack {
HStack {
Text("Line 1")
Spacer()
}
Spacer()
VStack {
Text("Line 2")
Text("Line 3")
}
Spacer()
Text("Line 4")
}
.padding()
.background(
RoundedRectangle(cornerRadius: 20)
.fill(Color.yellow)
)
.aspectRatio(1, contentMode: .fit)
}
}
struct IndicatorExperiment_Previews: PreviewProvider {
static var previews: some View {
Group {
IndicatorExperiment()
.previewLayout(.fixed(width: 100, height: 100))
IndicatorExperiment()
.previewLayout(.fixed(width: 200, height: 200))
IndicatorExperiment()
.previewLayout(.fixed(width: 300, height: 300))
IndicatorExperiment()
.previewLayout(.fixed(width: 400, height: 400))
}
}
}
Simply adding these 3 modifiers:
.font(.system(size: 500))
.minimumScaleFactor(0.01)
.lineLimit(1)
wont produce result like the first example; Text enlarged beyond the frame.
I did successfully, produce the result that I want by using GeometryReader then scale the font size based on geometry.size.width. Is this the only approach for achieving the desired result in SwiftUI?
You can try make all the Texts the same height. To do this you will need to set the padding and spacing explicitly, so this will scale rather than the fixed default values.
Also, the Spacer() didn't make much sense here - if the requirement was that all the Text stay the same size, the Spacer would just make all the text small. For Text to scale based on space, and where Spacer tries to use as much space as possible, it's a contradiction. Instead, I decided to just set the VStack's spacing in the initializer.
Working code:
struct IndicatorExperiment: View {
private let size: CGFloat
private let padding: CGFloat
private let primarySpacing: CGFloat
private let secondarySpacing: CGFloat
private let textHeight: CGFloat
init(size: CGFloat) {
self.size = size
padding = size / 10
primarySpacing = size / 15
secondarySpacing = size / 40
let totalHeights = size - padding * 2 - primarySpacing * 2 - secondarySpacing
textHeight = totalHeights / 4
}
var body: some View {
VStack(spacing: primarySpacing) {
HStack {
scaledText("Line 1")
Spacer()
}
.frame(height: textHeight)
VStack(spacing: secondarySpacing) {
scaledText("Line 2")
scaledText("Line 3")
}
.frame(height: textHeight * 2 + secondarySpacing)
scaledText("Line 4")
}
.padding(padding)
.background(
RoundedRectangle(cornerRadius: 20)
.fill(Color.yellow)
)
.aspectRatio(1, contentMode: .fit)
.frame(width: size, height: size)
}
private func scaledText(_ content: String) -> some View {
Text(content)
.font(.system(size: 500))
.minimumScaleFactor(0.01)
.lineLimit(1)
.frame(height: textHeight)
}
}
Code to test with:
struct ContentView: View {
var body: some View {
ScrollView {
VStack(spacing: 50) {
IndicatorExperiment(size: 100)
IndicatorExperiment(size: 200)
IndicatorExperiment(size: 300)
IndicatorExperiment(size: 400)
}
}
}
}
Result:
Using GeometryReader and a .minimumScaleFactor modifier would probably the only way to scale text in a view. To have more control on sizing, one possible way is to provde the .frame size from the parent view.
Scalable Text View
GeometryReader { geo in
Text("Foo")
.font(
.system(size: min(geo.size.height, geo.size.width) * 0.95))
.minimumScaleFactor(0.05)
.lineLimit(1)
}
Parent View that uses the Scalable Text View
GeometryReader { geo in
ScaleableText()
.frame(width: geo.size.width, height: geo.size.height)
}