【问题标题】:How to add border to EditText in android如何在android中为EditText添加边框
【发布时间】:2017-11-20 14:36:31
【问题描述】:

您好,我想在 android 应用程序中添加一个文本框,就像上面的图片一样。我使用了edittext控件,但无法显示边框。

【问题讨论】:

标签: android android-edittext


【解决方案1】:

在可绘制文件夹中创建一个新的 xml 文件 edit_text_border.xml,或提供您选择的名称。然后添加以下代码:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="@android:color/transparent"/>

    <corners
        android:bottomRightRadius="12dp"
        android:bottomLeftRadius="12dp"
        android:topLeftRadius="12dp"
        android:topRightRadius="12dp"/>
    <stroke
        android:color="#ffffff"
        android:width="1dp"/>
</shape>

您可以根据需要调整描边颜色和半径值。最后,在您的edittext 中将其设置为背景,如下所示。

<EditText
    android:id="@+id/edit_text"
    android:background="@drawable/edit_text_border"/>

【讨论】:

  • @android:color/transparent
【解决方案2】:

现在,正确的方法是使用 TextInputLayout 和相应的样式。
它不仅会绘制轮廓背景,还会保留漂亮的提示动画。

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:hint="@string/some_hint"
        app:boxCornerRadiusBottomEnd="5dp"
        app:boxCornerRadiusBottomStart="5dp"
        app:boxCornerRadiusTopEnd="5dp"
        app:boxCornerRadiusTopStart="5dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            tools:ignore="KeyboardInaccessibleWidget" />

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

如果你想改变线条颜色 - 这有点棘手:

创建样式:

<style name="Til" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
      <item name="boxStrokeColor">@color/text_input_box_stroke</item>
</style>

颜色res/color/text_input_box_stroke.xml 是:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--    TODO play with these around -->
    <item android:color="#0cc" android:state_focused="true"/>
    <item android:color="#fcc" android:state_hovered="true"/>
    <item android:color="#f0f"/>
</selector>

将您的新样式应用到 TextInputLayout 为 style="@style/Til"

不要忘记在你的 app/build.gradle 中添加一个依赖:

implementation "com.google.android.material:material:1.1.0-alpha09"

【讨论】:

    【解决方案3】:

    在drawable中创建xml文件 shape_border_and_background_login.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle"
        >
        <corners android:radius="25dip" />
        <solid android:color="#55ffffff">
    
        </solid>
        <stroke
            android:width="2dp"
            android:color="@color/white" />
    </shape>
    

    将形状文件添加到 EditText 背景:

     <EditText
                          android:id="@+id/edt_email"
                          android:layout_width="0dp"
                          android:layout_height="wrap_content"
                          android:layout_weight="10"
                        android:background="@drawable/shape_border_and_background_login"
                          android:inputType="textPersonName"
                          android:padding="@dimen/size15"
                          android:textSize="@dimen/size17"
                         />
    

    【讨论】:

      【解决方案4】:

      试试下面的代码:

      1. 在drawable文件夹中创建shape.xml文件,并在其中写入以下代码:

        <?xml version="1.0" encoding="utf-8"?>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
        
        <!-- Background Color -->
        <solid android:color="#ffffff" />
        
        <!-- Border Color -->
        <stroke android:width="1dp" android:color="#ff9900" />
        
        <!-- Round Corners -->
        <corners android:radius="5dp" />
        </shape>
        
        1. 现在在您的 EditText 中通过添加 android:background="@drawable/shape" 使用此 xml

      【讨论】:

        【解决方案5】:

        您可以通过多种方式做到这一点。

        您可以在 xml 中创建一个可绘制对象(具有圆角和边框的形状项的选择器可绘制对象)-Similar Question (and example code)

        或者您可以创建一个 9-patch 图像并使用它。 (Documentation and Example)

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2021-12-17
          • 2014-10-18
          • 2012-02-16
          • 1970-01-01
          • 2014-07-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多