Question

我在文本字段中使用flex来显示我的值/范围。对于IOS，我使用属性adjustsFontSizeToFit和minimalFontScale for Text来实现理想的字体大小和缩放。我希望为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

Answer 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

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

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

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

Answer 2

只需设置AdjustFontSizeToFit和numberOfLines 不要设置fontSize

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

Answer 3

@aaltaf在android中我通常将 TextView 的维度定义为值内的维度文件，对于 font 通常使用中的默认字体fontFamily中
这是一个例子......

<TextView android:id="@+id/shipment_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" 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" />

希望它会有所帮助：）

Answer 4

我正在使用@nazar解决方案的稍作修改的版本。我无法使其按需缩放，文本会被截断，因为基于屏幕设备的动态高度会极大地影响fontSize。

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

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

最大字体大小由5个字母定义。在这种情况下，较少的字母将使fontSize太大。这个值当然可以是任何值。您可以使用它来制作简单的函数，并使用width参数来在任何需要的地方调用它，理想情况下，例如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;
}

有没有替代品来调整Android的FontSizeToFit？

4 个答案: