Nativescript：如何在 Android 上垂直对齐 Label 内的文本

Question

默认情况下，标签内的文本在 iOS 上垂直对齐，但在 Android 上并非如此。如何在 Android 上垂直居中（我对在 Label 中居中文本感兴趣，而不是在任何其他布局中包裹标签以获得相同的效果）？

明白我的意思运行下一段代码在 iOS 和 Android 上。

xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
    <Label text="test" />
</Page>

css:

Label {
    width: 60;
    height: 60;
    text-align: center;
    background-color: aquamarine;
    border-radius: 30;
}

Answer 1

根据 (width - font-size) / 2 相应地设置填充（对于大写或小写字母具有不同中心点的较小的框，粗略的近似值可能会有所不同）

例如

Label {
    width: 60;
    height: 60;
    border-radius: 30;
    text-align:center;
    background-color: aquamarine;
    padding: 15;
    font-size: 20;
}

或更大尺寸的示例：

Label {
    width: 200;
    height: 200;
    border-radius: 100;
    text-align:center;
    background-color: aquamarine;
    padding: 80;
    font-size: 20;
}

p.s 如果将标签包装在 StackLayout 中，则不需要高度

例如

  <StackLayout>
    <Label text="test" class="title"/>
  </StackLayout>

Label {
    width: 200;
    border-radius: 100;
    text-align:center;
    background-color: aquamarine;
    padding: 80;
    font-size: 20;
}

Answer 2

您可以在代码中原生启用它：

myLabel.android.setGravity(17)

17 是 Gravity.CENTER 常量 (https://developer.android.com/reference/android/view/Gravity.html#CENTER)

的值

Answer 3

如果您在 iOS 上使用相同的 css，使用填充会搞砸。 setGravity(17) 也会水平对齐文本。如果您只想垂直对齐文本，并保持水平对齐的正常行为，请使用

this.nativeView.android.setGravity(this.nativeView.android.getGravity() & 0xffffffdf);

这将从标签中删除 vertical-align=top 标志

我创建了这个指令来更改标签的默认值：

import {AfterViewChecked, Directive, ElementRef, Input} from '@angular/core';
import { Label } from 'ui/label';

@Directive({
    selector: 'Label',
})
export class UpdateLabelDirective implements AfterViewChecked {    
    private get nativeView(): Label {
        return this.el.nativeElement;
    }

    constructor(private readonly el: ElementRef) {}

    ngAfterViewChecked(): void {
        if (this.nativeView.android && (this.nativeView.android.getGravity() & 0x00000020)) {
            this.nativeView.android.setGravity(this.nativeView.android.getGravity() & 0xffffffdf);
        }
    }
}

Answer 4

每个 css 的最简单解决方案：

line-height: 100%;

Answer 5

另一种选择是重新考虑您尝试垂直对齐标签内容的原因。

我来到这个页面试图做同样的事情，但决定删除标签上的高度 css，只让标签成为文本的大小，并将标签在其父元素中垂直居中

Answer 6

经过一些时间的挖掘，我找到了这个解决方案，它将 vertical_center 作为您的默认设置。

在您的 AndroidManifest.xml 中，添加以下样式

<style name="MyTextViewStyle" parent="android:Widget.TextView">
        <item name="android:gravity">center_vertical</item>
</style>

然后在您的主题中应用样式

<style name="AppTheme" parent="AppThemeBase">
   <item name="actionMenuTextColor">@color/ns_white</item>
   <item name="android:actionMenuTextColor">@color/ns_white</item>   

   <item name="android:textViewStyle">@style/MyTextViewStyle</item>
</style>

Answer 7

不要将其视为垂直居中标签文本。而是将 Label 放在一个容器中，并使其相对于容器居中。

<StackLayout verticalAlignment="center">
  <Label text="test" />
</StackLayout>

这将使您的 Label（垂直）在 StackLayout 内居中对齐。您还会注意到 StackLayout 现在只会占用其子项所需的垂直 space。如果你想让它用得更垂直 space 你只需要给它一个高度。

下面创建了一个三行 GridLayout，每行占据屏幕的 33.3...%，标签居中。

<Page xmlns="http://www.nativescript.org/tns.xsd">
  <GridLayout rows="*, *, *">
    <StackLayout row="0" class="red stack">
      <Label text="red" class="label"/>
    </StackLayout>
    <StackLayout row="1" class="green stack">
      <Label text="green" class="label"/>
    </StackLayout>
    <StackLayout row="2" class="blue stack">
      <Label text="blue" class="label"/>
    </StackLayout>
  </GridLayout>
</Page>

.stack {
  height: 100%;
  vertical-align: center;
}

.label { text-align: center; }

.red { backgroundColor: red; }
.green { backgroundColor: green; }
.blue { backgroundColor: blue; }

如果您希望看到它在您的设备上运行，请查看上面的 Playground。尝试在 home-page.css （第 13 行）.

中注释掉 height 属性

Nativescript：如何在 Android 上垂直对齐 Label 内的文本

Nativescript: how to vertically align text inside Label on Android

nativescript