TextInputLayout:如何给出填充或边距提示?

时间:2015-09-16 13:16:17

标签: android android-layout androiddesignsupport android-textinputlayout

我必须在我的项目中使用TextInputLayout设计支持库。我想在hint中的EditTextTextInputLayout之间留出空格。我在TextInputLayout甚至EditText内设置了边距和填充,但两者都不起作用。所以如何解决这个问题。在这里,我附上了截图和我的编码。

==============================Style=================================

<style name="TextHint" parent="Base.TextAppearance.AppCompat">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/green</item>
</style>



=============================XML===================================  
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    app:hintTextAppearance="@style/TextHint"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_height="wrap_content">
<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/edttxtEmailAddress"
    android:singleLine="true"
    android:hint="@string/enter_valid_email"
    android:paddingLeft="20dp"
    android:textSize="20sp"
    android:background="@drawable/rounded_common"/>
</android.support.design.widget.TextInputLayout>

enter image description here

16 个答案:

答案 0 :(得分:99)

ganesh2shiv提出的解决方案在很大程度上起作用,尽管我发现它还会在没有聚焦的情况下对EditText内显示的提示文本进行去中心化。

更好的技巧是将所需的paddingTop设置为EditText,同时在EditText的背景中嵌入额外的填充。一个相当明智的方法是将原始背景包装在<layer-list>中并设置<item android:top="...">属性以匹配EditText的paddingTop

<android.support.design.widget.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/floating_hint_margin"
    android:background="@drawable/bg_edit_text" />
</android.support.design.widget.TextInputLayout>

bg_edit_text.xml可绘制文件:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

答案 1 :(得分:22)

我自己过去几天一直在寻找这个问题的解决方案。将我的头发撕成几个小时后,我终于找到了一个简单的解决方法。我注意到的是如果你在EditText上设置了自定义背景,那么android:paddingTop属性简单无法改变间距b / w提示文本和编辑文本(我真的不知道为什么)。因此,如果您已将自定义背景设置为EditText,可以在EditText中使用android:translationY属性

所以这是你的解决方案:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="10dp"
    app:hintTextAppearance="@style/TextHint">

    <EditText
        android:id="@+id/edttxtEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/rounded_common"
        android:hint="@string/enter_valid_email"
        android:paddingLeft="20dp"

        android:translationY="10dp" 

        android:singleLine="true"
        android:textSize="20sp" />
</android.support.design.widget.TextInputLayout>

希望它有所帮助。 :)

更新:我对最新的更新表示最诚挚的歉意。我最近很忙。 如果你还没有意识到,那么让我告诉你这个答案是直接的丑陋和错误。回想起来,我想我写的时候可能已经喝醉了。正如其他人所提到的,它可能会削减editText背景的底部区域,但也有一个丑陋的修复它 - 你可以设置(父)textInputLayout的高度更大(有多大?你应该通过试验找到它错误,哎!)比(子)editText。我希望你们都认识到那会疯狂,所以请不要这样做。查看@Radu Topor撰写的the answer,这是迄今为止这个问题最好,最干净的解决方案。感谢。

答案 2 :(得分:11)

我尝试了填充更改,但效果不佳。

一个简单的解决方法是更改TIL的高度:

android:layout_height="wrap_content"

到(例如)

android:layout_height="50dp"

它可能不会在所有屏幕尺寸上给出相同的结果。

并添加

android:gravity="bottom" 

将文字推下来。

答案 3 :(得分:7)

@RaduTopor的回答很好,但我认为我们还需要添加android:bottom,否则它还会在不聚焦时将EditText内显示的提示文本去中心

annotationHostLayer

之前(RaduTopor回答):

not centered

后:

centered

答案 4 :(得分:3)

要禁用底线剪切效果,我使用了边距,translationY和clipChildren =&#34; false&#34;

<android.support.design.widget.TextInputLayout
        android:id="@+id/textinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:clipChildren="false">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_profile_contact_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="3dp"
            android:background="@drawable/image_back"
            android:hint="Contact name"
            android:padding="5dp"
            android:translationY="3dp" />
    </android.support.design.widget.TextInputLayout>

答案 5 :(得分:2)

我创建了一个特殊的类,目的是在EditText上面添加空视图,从而为提示添加填充。您可以将其用作简单的TextInputLayout。

public class PaddingTextInputLayout extends TextInputLayout {

public View paddingView;

public PaddingTextInputLayout(Context context) {
    super(context);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    super.addView(child, index, params);
    refreshPaddingView();
}

public void addPaddingView(){
    paddingView = new View(getContext());
    int height = (int) getContext().getResources()
            .getDimension(R.dimen.edittext_text_input_layout_padding);
    ViewGroup.LayoutParams paddingParams = new ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            height);
    super.addView(paddingView, 0, paddingParams);
}

public void refreshPaddingView(){
    if (paddingView != null) {
        removeView(paddingView);
        paddingView = null;
    }
    addPaddingView();
}
}

这个实现非常简单和愚蠢,你可以改进很多。

答案 6 :(得分:2)

这是我在项目中所做的,目的是在edittext和hint之间获得足够的空间

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_full_name"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginStart="40dp"
    android:layout_marginEnd="40dp"
    android:layout_marginTop="30dp"
    android:gravity="bottom"
    android:textColorHint="#fff"
    app:layout_constraintTop_toBottomOf="@+id/welcome_til_email">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#9a050505"
        android:hint="You email"
        android:inputType="textCapWords"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:singleLine="true"
        android:textAppearance="?android:textAppearanceSmall"
        android:textColor="#fff"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.design.widget.TextInputLayout>

答案 7 :(得分:2)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp"
          android:bottom="5dp">
        <shape>
            <!-- Background Color -->
            <solid android:color="#f1f1f1"/>
            <!-- Round Corners -->
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

<style name="text_input_edit_text_without_border_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">55dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">5dp</item>
    <item name="android:gravity">left|center_vertical</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:paddingRight">8dp</item>
    <item name="android:maxLines">1</item>
    <item name="android:singleLine">true</item>
    <item name="android:imeOptions">actionNext</item>
    <item name="android:textSize">@dimen/text_size_large</item>
    <item name="android:background">@drawable/bg_without_border_with_padding_top</item>
</style>

<style name="text_input_layout_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginBottom">@dimen/margin_medium</item>
</style>

答案 8 :(得分:1)

只需添加到EditText自定义背景

即可
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
        <shape android:shape="rectangle">
            <padding
                android:top="4dp"/> // your padding value
        </shape>
    </item>
// customize your background items if you need
</layer-list>
<android.support.design.widget.TextInputLayout
 ...>
    <android.support.design.widget.TextInputEditText
        ...
        android:background="@style/your_custom_background"/>

然后将其应用于EditText并使用填充值增加EditText的高度(如果使用修复高度)

答案 9 :(得分:1)

经过多次尝试,我找到了另一种解决方案(材料版本 1.2.1):

这是布局示例:

  <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputLayout"
            style="@style/CustomTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/textInputEditText"
                style="@style/CustomTextInputEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint" />

  </com.google.android.material.textfield.TextInputLayout>

这是样式示例:

 <style name="CustomTextInputLayout">
        <item name="boxCollapsedPaddingTop">-16dp</item>
        <item name="android:paddingTop">16dp</item>
        <item name="boxBackgroundColor">@color/backgroundColorWhite</item>
        <item name="android:textColorHint">...</item>
        <item name="android:textAppearance">...</item>
        <item name="hintTextAppearance">...</item>
        <item name="hintTextColor">...</item>
        <item name="boxStrokeColor">...</item>
    </style>

    <style name="CustomTextInputEditText">
        <item name="android:textAppearance">...</item>
        <item name="android:paddingTop">@dimen/margin_12</item>
        <item name="android:paddingBottom">@dimen/margin_12</item>
        <item name="android:paddingStart">0dp</item>
        <item name="android:paddingEnd">0dp</item>
    </style>

这 2 行为展开状态下的标题/提示视图设置垂直偏移量而不是折叠状态:

  <item name="boxCollapsedPaddingTop">-16dp</item>
  <item name="android:paddingTop">16dp</item>
 

这两行 - 用于文本和下划线之间的边距:

  <item name="android:paddingTop">@dimen/margin_12</item>
  <item name="android:paddingBottom">@dimen/margin_12</item>

那一行 - 用于消除背景色调错误:

 <item name="boxBackgroundColor">@color/backgroundColorWhite</item>

这 2 行 - 用于删除标准的水平填充

 <item name="android:paddingStart">0dp</item>
 <item name="android:paddingEnd">0dp</item>

答案 10 :(得分:0)

如果要求在光标和提示之间添加空格,则可以尝试

<?php
                //PHP Infos anzeigen lassen
            //phpinfo();
          header('Content-type: text/html; charset=utf-8');
            // Inhaltstyp und Zeichenkodierung für Skript festlegen
                $User_Agent = 'Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0';

            $id = $_POST["id"];             
                // Übernahme Formulareingabe
                $url = "http://hub.culturegraph.org/entityfacts/$id";
                // URL festlegen

                $request_headers[] = 'Accept: application/json';
              $request_headers[] = 'Content-Type: application/json; charset=utf-8';
              $request_headers[] = 'Accept-Encoding:    gzip, deflate, identity';
              $request_headers[] = 'Accept-Language: de,en-US;q=0.7,en;q=0.3';
              $request_headers[] = 'X-picturemaxx-api-key: key';
                $request_headers[] = "Authorization: Bearer token";
            // Optionale Anfrageoptimierungen

              $ch = curl_init($url);
              //  Initiate curl
        curl_setopt($ch, CURLOPT_USERAGENT, $User_Agent);
                curl_setopt($ch, CURLOPT_HTTPHEADER, $request_headers);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_ENCODING, "");
                // Anfrage optimieren
                // Execute
                $result = curl_exec($ch); // Performs the Request, with specified curl_setopt() options (if any).
        curl_close($ch);
        // Closing

        $data = json_decode($result, true); // Dekodiert eine JSON-Zeichenkette, Übergibt an Variable
        foreach($data['variantName'] as $alternativ) {
        echo $alternativ . " ; ";

}

答案 11 :(得分:0)

这个答案很晚,但希望对您有所帮助,我认为它是更好的解决方案。与其为您的editText提供背景,不如为您的TextInputLayout提供背景。并将edittext布局设置为透明。

<android.support.design.widget.TextInputLayout
                android:id="@+id/tinput_phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="05dp"
                android:background="@drawable/send_email_screen_element_bg"
                android:padding="05dp"
                android:theme="@style/grey_control_style">

                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/edt_phone"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:ems="10"
                    android:hint="@string/phone_hint_str"
                    android:inputType="text"
                    android:paddingStart="10dp"
                    android:paddingTop="10dp"
                    android:paddingBottom="10dp"
                    android:singleLine="true"
                    android:textColor="@color/black"
                    android:textSize="14sp" />
            </android.support.design.widget.TextInputLayout>

答案 12 :(得分:0)

只需使用padding-bottom

<com.google.android.material.textfield.TextInputLayout



             app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                >

                <com.google.android.material.textfield.TextInputEditText

                   ....
                    android:paddingBottom="@dimen/dp_25"
...
                   />
            </com.google.android.material.textfield.TextInputLayout>

答案 13 :(得分:0)

布局xml

<com.google.android.material.textfield.TextInputLayout
    style="@style/TextInputLayout"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:theme="@style/TextInputLayoutHint">

    <androidx.appcompat.widget.AppCompatEditText
        style="@style/TextInputEditText"
        android:hint="Email ID"
        android:inputType="textEmailAddress"
        android:maxLines="1" />

</com.google.android.material.textfield.TextInputLayout>

styles.xml

<style name="TextInputLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginStart">15dp</item>
    <item name="android:layout_marginLeft">15dp</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginEnd">15dp</item>
    <item name="android:layout_marginRight">15dp</item>
</style>

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">@color/colorHintNormal</item>
    <item name="colorControlActivated">@color/colorOrange</item>
    <item name="android:textSize">11dp</item>
</style>

<style name="TextInputEditText" parent="">
    <item name="android:translationY">10dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@null</item>
    <item name="android:paddingBottom">15dp</item>
    <item name="android:textColor">@color/colorBlack</item>
    <item name="android:textColorHint">@color/colorHintActive</item>
    <item name="android:textSize">13sp</item>
</style>    

答案 14 :(得分:0)

我认为比使用修订大小更简单,只要您不必出于任何原因使用#string used for comparing code to alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" #strings for shifting the code shift = "ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ" punctuation = ".,!;:?" #ask user for the encrypted text code = input("Enter text: ") #variables storing the most common letters and the # of times they come up common1 = 0 common2 = 0 common3 = 0 ac = 0 bc = 0 cc = 0 for i in range(0, len(alphabet)): # print number of times each letter comes up --- print( str(alphabet[i]) + " is present " + str(code.count(alphabet[i])) + " number of times" ) #finding the number of times the most common letter comes up if code.count(alphabet[i]) > common1: common3 = common2 cc = bc common2 = common1 bc = ac common1 = code.count(alphabet[i]) ac = alphabet[i] elif code.count(alphabet[i]) > common2: common3 = common2 cc = bc common2 = code.count(alphabet[i]) bc = alphabet[i] elif code.count(alphabet[i]) > common3: common3 = code.count(alphabet[i]) cc = alphabet[i] print("Most common letter, " + str(ac) + ", comes up " + str(common1) + " times") print("Second most common letter, " + str(bc) + ", comes up " + str(common2) + " times") print("Third most common letter, " + str(cc) + ", comes up " + str(common3) + " times") for i in range(0, len(code)): a = shift.index("E") + 26 - shift.index(ac) print(shift[a + shift.index( code[i] ) ], end = "") ,否则公认的方法似乎可以正常工作。

wrap_content

在此示例之后,您有一个20dp的空间,可根据需要放置提示标签,并使用 <com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="60dp" android:gravity="bottom"> <EditText android:layout_width="match_parent" android:layout_height="40dp" android:layout_marginTop="10dp"/> </com.google.android.material.textfield.TextInputLayout> 属性。

答案 15 :(得分:-1)

我认为你应该考虑这个:

设计库采用了一种有趣的方法来自定义EditText:它不会直接更改它。相反,TextInputLayout用于包装EditText并提供增强功能。

第一个,当用户在字段中输入内容时显示浮动标签,是自动完成的。 TextInputLayout在其子项中找到EditText并将其自身附加为TextWatcher,因此它可以确定字段何时被修改并动画显示该提示从其常规位置的移动EditText到它上面的浮动标签位置。

显示错误消息的第二个增强功能需要稍微更改代码。不应在EditText上设置错误,而应在TextInputLayout上设置错误。这是因为在TextInputLayout上设置错误时,没有自动方式通知EditText。 这是布局的样子:

<android.support.design.widget.TextInputLayout
    android:id="@+id/username_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:id="@+id/username_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username_hint"/>
</android.support.design.widget.TextInputLayout>

请注意,EditTextTextInputLayout都需要布局ID。在片段中,我们需要配置TextInputLayout以启用显示错误:

TextInputLayout usernameTextInputLayout = (TextInputLayout) view.findViewById(R.id.username_text_input_layout);
usernameTextInputLayout.setErrorEnabled(true);
...
usernameTextInputLayout.setError(R.string.username_required);