钛合金标签对齐问题 [英] Issue with label alignment in titanium alloy

问题描述

我在我的应用程序中创建了自定义复选框.我对复选框没有问题，如果标签文本很小，它就是标签.如果标签文本很大(超过一行)，则对齐显示不正确.

I have created custom check boxes in my application. I have no issue with check box and it's label if the label text is small. If the label text is large (more than a one line) the alignment is not showing properly.

看上面的截图:第一个选项标签文本是请选择对程序测试程序进行评级的2个主要原因"，第二个选项标签文本是问题2".如果第一个标签中的文本很小，适合一行，那么 UI 看起来不错.但是如果文本不止一行，我就会面临上述问题.

Look at the above screenshot: the first option label text is "Please select the 2 primary reasons rating the program testing the program" and second option label text is "Question2". If the text in first label is small that is which fits in one line then the UI looks good. But If text is more than one line I am facing the above issue.

我的代码如下，

查看:

<Label class="standardType1">Please select the 2 primary reasons rating the program?</Label>

<View class="checkBoxContainerView">
    <Widget id="box1" src="checkbox" value="true"/>
    <Label class="question1">Please select the 2 primary reasons rating the program testing the program</Label>
</View>

<View class="checkBoxContainerView">
    <Widget id="box2" src="checkbox" value="true"/>
    <Label class="question1">Question2</Label>
</View>

风格:

"#box1":
{
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE,
    left:10
}

"#box2":
{
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE,
    left:10
}

".question1":
{
    top: 3,
    left: 13,
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: '#fff',
    font:{
        fontSize: 16, 
        fontWeight: 'normal'
    }
}

".checkBoxContainerView":
{
    left: 15,
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    layout: 'horizontal'
}

有人可以帮我吗?即使标签文本不止一行，视图的高度也应该自动增加并且选项应该是视图.请帮帮我.

Can any one help me with that? Even if label text is more than one line the height of the view should automatically increase and option should be view. Please help me.

推荐答案

在对您的问题进行了大量思考后，我进行了一些尝试.我没有使用复选框，但如果标签是多行标签，我会尝试接收正确的对齐方式.

After thinking a lot about your problem I experimented a little bit. I did not use the checkBox but tried to receive a proper alignment if the label is a multi-line label.

XML:

<View id="temp" layout="horizontal" top="0" left="0">
    <Label id="headline"/>
    <Label id="description"/>
</View>

还有我的 .tss:

"#headline": {
    top: "0",
    left: "0",
    width: "50%",
    text: "Headline",
    font: {
        fontSize: 20
    }
}
"#description": {
    left: "0",
    width: "50%",
    text: "Your long text here",
    font: {
        fontSize: 16
    }
}

如您所见，我没有为我的容器指定任何高度或宽度(不是在 .tss 中定义，而是在 xml 中定义)，并且只为我的标签设置了宽度参数.您应该考虑将 10-20% 用于复选框，其余用于标签.请勿指定任何高度参数，因为系统会自动执行此操作.

As you can see I did not specify any height or width for my container (not defined in the .tss but in the xml) and only set a width parameter for my labels. You should consider to use 10-20% for your checkBoxes and the rest for your label. Do not specify any height parameters since the system will do this automatically.

这篇关于钛合金标签对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！