代码之家 › 专栏 › 技术社区 › Talib

自定义编辑带边框的文本

material-design label textview android-edittext android

Talib · 技术社区 · 7 年前

这个问题已经有了答案:

Outlined Edit Text from Material Design 5个答案

我试着在编辑文本上加上边框并在上面加上标签。我把边界弄成这样:

 <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="#A0A0A0" />
</shape>

但我不能达到我想要的结果。

我想要如下的东西:

请帮忙。

5 回复 | 直到 7 年前

Alireza Noorali Pedro Gonzalez 6 年前

试试这个:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="15dp"
        android:background="@drawable/boarder"
        android:paddingLeft="5dp"
        android:text="input" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="7dp"
        android:background="#ffffff"
        android:text="Label" />
</RelativeLayout>

boarder.xml文件:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<stroke
    android:width="2dp"
    android:color="#03A6F0" />

<corners android:radius="12dp" />

JannahPro 7 年前

请检查此链接以获取有关创建所需新材料设计文本字段的指南。

https://material.io/design/components/text-fields.html#usage

-如何使用:

若要创建材质文本字段,请将textinputlayout添加到XML布局中,并将textinputtext作为直接子级添加。

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="@string/hint_text"/>

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

注意:您也可以使用edittext作为输入文本组件。但是,使用text input text可以让textinputlayout更好地控制输入文本的视觉方面-它允许textinputlayout在处于提取模式(例如横向模式)时在文本字段中显示提示。

-设计风格:

填充框(默认)

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

大纲框

style="@style/Widget.MaterialComponents.TextInputLayout.OutlineBox"

我希望这会有帮助。

Mobile Team ADR-Flutter 7 年前

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#CDCDCE"
                android:orientation="vertical"
                android:padding="10dp">


    <EditText
        android:id="@+id/si_btnSignIn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/button_round_corner"
        android:padding="20dp"
        android:text="Inp"
        android:textColor="@color/white"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="#CDCDCE"
        android:gravity="center"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="Label"
        android:textColor="#741c7a"/>

</RelativeLayout>

下面是可抽出的代码按钮

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">

<stroke
    android:color="#741c7a"
    android:width="1dp"/>

<corners android:radius="5dp"/>

</shape>

Rahul Mishra 6 年前

我知道,有点晚了,但你可能想看看 this 和 this .