自定义文本输入布局

时间:2017-11-08 05:34:12

标签: android android-textinputlayout android-textinputedittext

我想将边框应用于TextInputLayout,如图所示。

现在我已经实现了这样的目标。

enter image description here

但是,我想要跟随图像所示(即标签放在边框内)。

enter image description here

我为EditText实施的代码如下所示。

<customviews.MyEditText
             android:id="@+id/email"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/edittext_border_background"
             android:layout_marginEnd="30dp"
             android:layout_marginStart="30dp"
             android:layout_marginTop="45dp"
             android:gravity="start"
             android:hint="@string/hint_username"
             android:imeOptions="actionNext|actionDone"
             android:inputType="textEmailAddress|text"
             android:padding="10dp"
             android:textColor="@color/primary_text"
             android:textColorHint="@color/secondary_text"
             android:textSize="16sp"
            />

并且,对于边框我已经应用了背景editetext_border_background.xml如下

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="20dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>

当我尝试将边框应用于TextInputLayout时,它不会给出预期的输出。

enter image description here

任何人都可以帮助我吗?

4 个答案:

答案 0 :(得分:1)

对于概述框,您应使用“材料设计”样式。只需简单使用:

Ctrl+R
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

。请参见Material Design Guide

中的 Android文本字段

enter image description here

答案 1 :(得分:0)

使用“android:state_focused”选项,您可以归档目标。

详细信息:https://stackoverflow.com/a/23417544/850347

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_enabled="true"
        android:state_focused="true">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="#0000FF" />

</shape>
</item>
<item android:state_enabled="true">
          <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>
</item>

并且,在java代码中:

editText.setBackgroundResource(R.drawable.yourFile);

答案 2 :(得分:0)

根据您的使用情况更改颜色和边框,以及在任何视图中您要应用此边框的位置以及它在背景属性中的位置,例如...... 机器人:背景= “@绘制/边界”

使用此代码在资源目录中的android drawable文件夹中创建带有名称边框的可绘制文件。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <solid android:color="#ffffff" />
    <stroke
       android:width="1dip"
       android:color="#000000" />
    <corners android:radius="4dip" />
    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip" />
</shape>

答案 3 :(得分:0)

This will work 'hint' is inside in box .I  changed this property and add roundbox in background
  app:boxBackgroundMode="none" and app:boxCollapsedPaddingTop="5dp"
This is layout and change design according to your need.

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="52dp"
                android:layout_marginTop="30dp"
                android:background="@drawable/round_box"
                app:boxBackgroundMode="none"
                app:boxCollapsedPaddingTop="5dp">
                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@null"
                    android:gravity="center_vertical"
                    android:hint="hint"
                    android:inputType="textMultiLine"
                    android:maxLines="6"
                    android:paddingStart="5dp"
                    android:textSize="14dp" />
            </com.google.android.material.textfield.TextInputLayout>

round_box.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listview_background_shape">
    <stroke android:width="2dp"
        android:color="#000000"
        />
    <padding android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <corners android:radius="4dp" />
    <solid android:color="#2C000000" />
</shape>

    enter code here

sorry for my bad english