Appcelerator: Android TextField bottom and top padding too large, unable to change

问题

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

So using non relative height:

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",
    }
});

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)

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?

Any help would be appreciated.

回答1:

After trying to find out the possible solutions, I got only two ways to do it:

To get the kind of UI what you want, try this.

<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>

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.

Either do not use box type text-fields which are not in very much tradition nowadays - Obviously you won't want it :)

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();

来源：https://stackoverflow.com/questions/38488989/appcelerator-android-textfield-bottom-and-top-padding-too-large-unable-to-chan

标签

appcelerator

textfield