问题描述
我正在尝试构建一个具有非常特定大小的文本字段的 UI.默认的顶部和底部填充会导致问题.
I am trying to build a UI with very specific sized text fields. The default top and bottom padding cause problems.
首先,当尝试使用相对值设置高度时,文本字段会显示,以便里面的文本被截断或什至不可见:相对大小
First when trying to set the height with a relative value the text field displays so that the text inside is either cut off or not even visible: Relative Sizing
所以使用非相对高度:
var itemValue = Ti.UI.createTextField({
backgroundColor:"#414042",
top:"65%",
width:"75%",
height: Ti.UI.SIZE,
color:"#FFF",
paddingLeft:"5dp",
borderColor:"#F4E09C",
borderWidth:"1dp",
keyboardType:Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION,
font:{
fontSize:varFontSize+"dp",
}
});
顶部和底部填充导致文本字段对于所需的 UI 而言太大.
the top and bottom padding cause the text field to be too large for the desired UI.
最后,我找到了一个允许我更改顶部和底部填充的解决方案,它需要更改自定义主题:
Finally, I found a solution that allows me to change the top and bottom padding, it requires altering the custom theme:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.NoActionBar" parent="@style/Theme.Titanium">
<!-- Depending on the parent theme, this may be called android:windowActionBar instead of windowActionBar -->
<item name="windowActionBar">false</item>
<item name="android:paddingBottom">2dp</item>
<item name="android:paddingTop">2dp</item>
</style>
</resources>
然而,这种方法导致了另一个问题,正如我在另一个问题中所问的那样(显然我不能有超过 2 个链接,因为我没有足够的声誉.但是你可以在我的提问历史中看到它)
However, this approach leads to another problem as that I asked about in another question (apparently I can't have more than 2 links because I don't have enough reputation. But you can see it in my history of asked questions)
但 UI 看起来像我想要的:良好的 UI 但请注意额外的橙色在 UI 的顶部,这是显示的初始屏幕.
But the UI looks like I want it: Good UI but notice the extra orange on the top of the UI, that is the splash screen showing through.
如何改变顶部和底部的填充方式,而不会导致整个窗口被填充?
How can I alter the top and bottom padding in a way that doesn't cause the whole window to be padded?
任何帮助将不胜感激.
推荐答案
在尝试找出可能的解决方案后,我只有两种方法:
After trying to find out the possible solutions, I got only two ways to do it:
- 要获得您想要的 UI 类型,请尝试此操作.
<View width="75%" height="YOUR_REQUIRED_HEIGHT" backgroundColor="#414042" borderWidth="1" borderColor="#F4E09C"><TextField left="5" right="5" bottom="-5" color="white" backgroundColor="transparent" hintText="Type here"/></查看>
注意视图中的YOUR_REQUIRED_HEIGHT,这是您想要的文本字段高度,并添加bottom=-5解决您的问题问题,因为它会将文本字段向下移动 5dp,这足以隐藏底部文本字段中的额外填充,但请确保您已设置 TextField 的backgroundColor="transparent" 这将使 TextField 下划线隐藏.
Notice the YOUR_REQUIRED_HEIGHT in View, this is the height you want for a text-field, and adding bottom=-5 solve your issue as it will move the text-field down by 5dp which is enough to hide the extra padding in text-field at bottom, but make sure that you have set the TextField's backgroundColor="transparent" which will make the TextField underline hidden.
- 要么不要使用现在不太传统的框式文本字段 - 显然你不会想要它:)
您可以像这样使用 .js 文件:
You can use .js file like this:
var win = Ti.UI.createWindow({
backgroundColor : "#444",
});
var view = Ti.UI.createView({
width : '75%',
height : YOUR_REQUIRED_HEIGHT,
backgroundColor : "#414042",
borderWidth : 1,
borderColor : "#F4E09C"
});
var field = Ti.UI.createTextField({
left : 5,
right : 5,
bottom : -5,
color : "white",
backgroundColor : "transparent",
hintText : "Type here"
});
view.add(field)
win.add(view);
win.open();
这篇关于Appcelerator:Android TextField 底部和顶部填充太大,无法更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!