随着动态类型的增加，保持不同尺寸的文本在顶部保持一致

发布于 2025-01-24 21:06:52 字数 849 浏览 3 评论 0原文

我正在尝试将顶部不同尺寸的文本对齐，以便当动态类型大小变化时它们保持对齐。

import SwiftUI

struct ContentView: View {
    var body: some View {
      HStack(alignment: .center, spacing: 0) {
        Text("$")
          .font(Font.custom("Helvetica", size: 24, relativeTo: .footnote))
          .baselineOffset(7)
        Text("123")
          .font(Font.custom("Helvetica", size: 36, relativeTo: .footnote))
        Text("45")
          .font(Font.custom("Helvetica", size: 24, relativeTo: .footnote))
          .baselineOffset(7)
      }
    }
}

这是在顶部对齐的常规尺寸

，但随着动态类型的变化而失去顶部对齐：动态类型大小extraix extraimextraextralarge

关于如何使它们保持在顶部的任何想法，即使动态类型大小会更改？

原文

I'm trying to align texts of different sizes at the top so that they stay aligned when the Dynamic Type size changes.

import SwiftUI

struct ContentView: View {
    var body: some View {
      HStack(alignment: .center, spacing: 0) {
        Text("quot;)
          .font(Font.custom("Helvetica", size: 24, relativeTo: .footnote))
          .baselineOffset(7)
        Text("123")
          .font(Font.custom("Helvetica", size: 36, relativeTo: .footnote))
        Text("45")
          .font(Font.custom("Helvetica", size: 24, relativeTo: .footnote))
          .baselineOffset(7)
      }
    }
}

This is aligned at top at
Regular Size

But it loses the top alignment as the Dynamic Type gets bigger: Dynamic Type Size ExtraExtraExtraLarge

Any ideas on how to keep them aligned at top even as the Dynamic Type size changes?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眼眸里的快感 2025-01-31 21:06:52

即使动态类型大小变化，如何使它们保持在顶部的任何想法？

我从来不需要这种配置，但是您的问题引起了我的好奇心。

Any ideas on how to keep them aligned at top even as the Dynamic Type size changes?

I never needed this kind of configuration but your question arose my curiosity. ????
(I keep the same context you provided: 3 Text elements with the same text styles/font and two of them having the same font size)

How can I align two Text elements on top with different font sizes? ????‍????
I took a look at the font metrics to understand the returned values.

If these elements are aligned on top in a HStack view, it's the top edge that's concerned, not the letters nor the numbers inside.
So, I have to move vertically the biggest one to make its top content aligned to the smallest one.

To reach this goal, I used the alignmentGuide method that returns a view modified with respect to its horizontal alignment according to the computation performed in the method's closure by using the ascender and capHeight metrics difference.

How do I take into account the Dynamic Type feature in this implementation? ????
The initial font sizes can be adapted to the user's preferences by using the dynamic property wrapper @ScaledMetrics that scales a numeric value.????

I implement this information with Xcode 13.4 and iOS 15:????

import SwiftUI
import Foundation

struct ContentView: View {

    @ScaledMetric(relativeTo: .footnote) var sizeMax: CGFloat=60
    @ScaledMetric(relativeTo: .footnote) var sizeMin: CGFloat=24

    var body: some View {
        HStack(alignment: .top){
                Text("$1&")
                  .font(Font.custom("Helvetica", size: 24,
                                    relativeTo: .footnote))
                  .background(Color.blue)
        
                Text("a2A")
                .font(Font.custom("Helvetica", size: 60,
                                  relativeTo: .footnote))
                .alignmentGuide(VerticalAlignment.top){ d in
                    let customFontDescriptor = UIFontDescriptor.init(fontAttributes: [
                            UIFontDescriptor.AttributeName.family: "Helvetica",
                            UIFontDescriptor.AttributeName.textStyle:"footnote"
                        ])
                
//                  Values for the font with min size.
                    let fontMin=UIFont(descriptor: customFontDescriptor,
                                       size: sizeMin)
                    let ascMin = fontMin.ascender
                    let capHeightMin = fontMin.capHeight
                
//                  Values for the font with max size.
                    let fontMax=UIFont(descriptor: customFontDescriptor,
                                       size: sizeMax)
                    let ascMax = fontMax.ascender
                    let capHeightMax = fontMax.capHeight
                
                    return abs((ascMax-capHeightMax)-(ascMin-capHeightMin))
                }
                .background(Color.gray)
        
                Text("b3B")
                  .font(Font.custom("Helvetica", size: 24,
                                    relativeTo: .footnote))
                  .background(Color.red)
        }
    }
}

Following this rationale, I get the following result to keep texts of different sizes aligned at top as the dynamic type size changes. ????????????

Don't hesitate to adapt this code snippet that fits the example you provided and that's definitely not generic. ????