从Material Design中概述编辑文本

Question

如何实现" Outlined text材料设计"页面中显示的字段

链接

Answer 1

读Outline Box .

大纲文本字段具有描边边框,并且不太强调.若要使用大纲文本字段,请将以下样式应用于TextInputLayout:

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

依赖

implementation 'com.android.support:design:28.0.0-alpha1' 

XML

   <android.support.design.widget.TextInputLayout
   android:id="@+id/name_text_input"
   style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   >

   <android.support.design.widget.TextInputEditText
       android:id="@+id/name_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="@string/label_name" />
</android.support.design.widget.TextInputLayout>

DEMO

Answer 2

UPDATE

也正常工作

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'

使用implementation 'com.android.support:design:28.0.0-alpha1'我低于错误

无法解析符号'@ style/Widget.MaterialComponents.TextInputLayout.OutlineBox'

解

在你的下面进行以下更改 Build.Gradle

使用 compileSdkVersion 28

使用 targetSdkVersion 28

使用以下依赖项

implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
implementation 'com.android.support:design:28.0.0-alpha3'

示例代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.dangarmahesh.demoapp.MainActivity">

    <ImageView
        android:layout_width="250dp"
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"
        android:layout_height="250dp" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/userIDTextInputLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"

        android:layout_margin="10dp"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/userIDTextInputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="User ID" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordTextInputLayout"
        android:layout_margin="10dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/passwordTextInputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password" />

    </android.support.design.widget.TextInputLayout>


    <Button
        android:layout_width="match_parent"
        android:layout_margin="10dp"
        android:text="LOGIN"
        android:textStyle="bold"
        android:background="@color/colorPrimary"
        android:textColor="@android:color/white"
        android:layout_height="wrap_content" />
</LinearLayout>

OUTOUT

Answer 3

您需要将此依赖项添加到“模块级别” build.gradle com.google.android.material才能使用Latestmaterial UI components。

在com.google.android.material.textfield.TextInputLayout那时使用这种风格，

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

从这里结帐

如果您使用的是com.android.support:design库，则应将应用程序样式更改为Theme.MaterialComponents...Bridge （即，将样式从更改Theme.AppCompat.Light为Theme.MaterialComponents.Light.Bridge）

第一，

接下来，您必须在以下代码中使用此样式 android.support.design.widget.TextInputLayout：

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

Answer 4

随着向androidx库的迁移，您必须使用新的Material Components for android库。

使用TextInputLayout组件：

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

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

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

并应用此样式：

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

要求：

• 您必须在文件中添加此依赖项build.gradle

  implementation 'com.google.android.material:material:<version>'

• 应用材料组件主题

  <style name="Theme.MyApp" parent="Theme.MaterialComponents">