Appcelerator:Android TextField底部和顶部填充过大,无法更改 [英] Appcelerator: Android TextField bottom and top padding too large, unable to change
问题描述
我正在尝试使用大小非常特定的文本字段构建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>
但是,这种方法导致了另一个问题,正如我在另一个问题中所问的那样(显然,我的链接名不多,因为我没有足够的声誉.但是您可以在我的提问历史中看到它)
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 ,但是请注意多余的橙色在用户界面的顶部,即通过它显示的初始屏幕.
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" />
</View>
<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" />
</View>
请注意视图中的 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底部和顶部填充过大,无法更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!