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

相应地设置填充(宽度 - 字体大小)/ 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;
}

ps如果在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

如果您在 iOS 上使用相同的 css，则使用 padding 会搞砸。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

不要将其视为垂直居中标签文本。而是将你的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。尝试注释掉(line 13) 中的height属性。home-page.css