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

相应地设置填充（宽度 - 字体大小）/ 2（对于大写或小写字母具有不同中心点的较小框，粗略近似可能不同）

e.g。

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中包装标签，则不需要高度

e.g。

  <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

如果你在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 3

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

myLabel.android.setGravity(17)

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

的值

Answer 4

不要以为它是标签文本的垂直居中位置。而是将Label放在容器中，并使其相对于容器居中。

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

这将使Label（垂直）在StackLayout内居中对齐。您还会注意到StackLayout现在将仅占据其子级所需的垂直空间。如果您希望它占用更多的垂直空间，则只需要给它一个高度即可。

以下代码创建了三行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。尝试注释掉height （第13行）中的home-page.css属性。

Answer 5

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

line-height: 100%;

Answer 6

另一个选择是重新考虑为什么要垂直对齐标签的内容。

我来到此页面尝试做同样的事情，但决定删除标签上的高度css，只是将标签设置为文本的大小，并将标签垂直放置在其父级中

Answer 7

经过一段时间的挖掘，我发现了该解决方案，它将把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>

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

7 个答案: