Android 版的adjustsFontSizeToFit 有啥替代品吗？

Posted 2023-03-06

【中文标题】Android 版的adjustsFontSizeToFit 有啥替代品吗？

【英文标题】：Are there any alternatives to adjustsFontSizeToFit for Android?Android 版的adjustsFontSizeToFit 有什么替代品吗？

【发布时间】：2018-05-19 07:56:47

【问题描述】：

我在文本字段中使用 flex 来显示我的值/范围。对于 ios，我使用 Text 的属性 adjustsFontSizeToFit 和 minimumFontScale 道具来实现理想的字体大小和缩放。我希望为 android 启用相同的缩放。有人对 Android 使用任何技巧吗？

<View style=flex: 40>
  
   (Platform.OS === 'ios') ?
    <Text style=flex: 1, paddingRight: 2 adjustsFontSizeToFit 
    minimumFontScale=0.5>
     //if decimal value exists show range
     (pointFivePart_1 === '5') ? 
        <Text style= flexDirection: 'row'  >
          <Text style=styles.mainValueStyle>first_1</Text>
          <Text style=styles.decimalValueStyle> .pointFivePart_1</Text>
          <Text style=styles.mainValueStyle>&deg;</Text>
         </Text>
         : <Text style=styles.mainValueStyle >min&deg;</Text>
        
        //if two values then show the second value as range
// render largest value if different than min
            (maxSet === minSet) ? null : (
                (pointFivePart_2 === '5') ?
                <Text style= flexDirection: 'row'  >
                    <Text style=styles.mainValueStyle> - first_2</Text>
                    <Text style=styles.decimalValueStyle>.pointFivePart_2</Text>
                    <Text style=styles.mainValueStyle>&deg;</Text>
                    </Text>
                :
                    <Text style=styles.mainValueStyle > - maxSet&deg;</Text>
                    )
                
                </Text>
                :
                //same styling for android

【问题讨论】：

这还没有解决吗？这似乎是一个严重的问题，基本上让 RN 无法用于 Android。

【参考方案1】：

简单但可行的解决方案（跨平台）：

fontSize = Math.sqrt(textWidth*textHeight/text.length)

其中 textWidth，textHeight - 文本组件的大小，text.length - 文本的长度。

minimumFontScale 可以通过

来实现

fontSize = Math.max(fontSize,minimumFontSize)

我通过求解这样的方程组得出了这个公式：

lettersInLine = textWidth/fontSize
lines = textLength/lettersInLine
lines*fontSize = textHeight

这里假设字体是正方形（宽度等于高度）的字母。

虽然这个公式即使没有方程式也有意义。你只是

计算整个文本元素的平方 计算每个字母的平方（将整个平方除以字母数字） 从字母平方取平方根得到字体大小

【讨论】：

我们如何找到textWidth 和textHeight？

您应该知道 textWidth 和 textHeight 因为这些是您调整文本大小的框的大小

如果您使用的是 Flexbox，您将不知道宽度或高度。

【参考方案2】：

只需设置 adjustFontSizeToFit 和 numberOfLines 不要设置字体大小

<Text adjustsFontSizeToFit numberOfLines=1>This text will fit the width of the container</Text>

【讨论】：

所有省略“fontSize”的做法，就是使用inherited fontSize。在我的测试中，设置 fontSize 不会阻止“adjustsFontSizeToFit”工作。然而，选择的初始大小似乎对调整算法有轻微的影响。 <Text adjustsFontSizeToFit numberOfLines=1 style= fontSize: 80 >...

【参考方案3】：

我正在使用 @nazar 解决方案的略微修改版本。我无法根据需要进行缩放，文本会被截断，因为基于屏幕设备的动态高度会对 fontSize 影响太大。

无论如何，这是我的解决方案。

var fontSize = width / text.length;
var maxSize = width / 5;
fontSize = Math.min(fontSize, maxSize);

最大字体大小由 5 个字母定义。在这种情况下，较少的字母会使 fontSize 过大。这个值当然可以是任何值。您可以从中制作简单的函数，并使用宽度参数在任何需要的地方调用它，理想情况下类似于 screen.width * 0.1，第二个参数是文本的长度，第三个参数是 maxSize。所以是这样的：

export function GetFontSize(width, length, max)       
    var fontSize = width / length;

    var maxSize = width / max;
    fontSize = Math.min(fontSize, maxSize);

    return fontSize;

【讨论】：

这里的行数是怎么确定的？

我需要一行的解决方案，所以这仅适用于 1 行文本。

@CosmicSeizure 这如何与 flexbox 视图一起工作？

【参考方案4】：

@aaltaf 在 android 中，我通常将 TextView 的尺寸定义到 values 内的尺寸文件中，对于 font 通常使用 的默认字体字体家族 这是一个例子......

<TextView
   android:id="@+id/shipment_text_view"
   android:layout_
   android:layout_
   android:layout_marginTop="@dimen/send_two_dp"
   android:gravity="center_vertical"
   android:text="@locationViewModel.sameDayShipmentText"
   android:textColor="@color/black"
   android:textSize="@dimen/send_fourteen_sp"
   android:fontFamily="sans-serif"
   tools:text="6-8 hour delivery" />

希望它会有所帮助:)

【讨论】：

感谢您的及时回复。我已经编辑了我最初的问题以添加代码 sn-p 如果您可以查看并建议一种技术以实现 ios 的结果作为 android。再次感谢！

@VrushaliRaut 这个问题是由 OP 发布的，用于 react-native 解决方案，而不是针对 android 特定的解决方案。

即使问题是针对 NATIVE Android（不是在 Android 上运行的 React Native），这也不是问题的解决方案。问题是关于自动将给定文本拟合到文本元素中。这个答案显示的只是如何在 Android 布局中指定文本大小。如果您知道在 Native Android 中有一种方法可以让 Android 自动调整文本（自动调整字体大小，以便根据需要缩小文本），那可能会有一些用处 - 可能会弄清楚如何调整它以响应原生。但就目前而言，这个答案没有帮助。