Nativescript:如何在Android上垂直对齐标签内的文本
Nativescript:如何在Android上垂直对齐标签内的文本
提问于 2016-09-29 11:54:31
默认情况下，在iOS上，标签内的文本是垂直对齐的，而在Android上则不是。如何在Android上垂直居中(我感兴趣的是在标签中对文本进行居中，而不是在任何其他布局中包装标签以获得相同的效果)？
为了了解我的意思，在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;
}回答 7
Stack Overflow用户
回答已采纳
发布于 2016-09-29 12:22:21
相应地将填充设置为(宽度-字体大小)/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;
}如果你用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;
}Stack Overflow用户
发布于 2018-05-30 09:29:28
如果您在iOS上使用相同的css，那么使用填充会把事情搞砸。setGravity(17)也将水平对齐文本。如果只想垂直对齐文本，并保持水平对齐的正常行为，请使用
this.nativeView.android.setGravity(this.nativeView.android.getGravity() & 0xffffffdf);这将从标签中移除垂直对齐=顶标志。
我已经创建了这个指令，它应该更改标签的默认设置：
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);
}
}
}Stack Overflow用户
发布于 2019-04-03 03:26:01
不要把它看作是标签文本的垂直对中。相反，将您的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; }这是上面的一个游乐场，如果你想看到它在你的设备上工作的话。尝试在height中注释掉home-page.css属性(第13行)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39769640
复制相关文章
相似问题
腾讯云开发者
