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>

然而，这种方法导致了另一个问题，正如我在另一个问题中所问的那样(显然我不能有超过 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:

1. 要获得您想要的 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.

1. 要么不要使用现在不太传统的框式文本字段 - 显然你不会想要它:)

您可以像这样使用 .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屋！