Material Design 中的大纲编辑文本

Posted 2023-02-22

【中文标题】Material Design 中的大纲编辑文本

【英文标题】：Outlined Edit Text from Material Design

【发布时间】：2019-02-23 08:32:22

【问题描述】：

如何实现一个带轮廓的文本字段（如this material design page 所示）？

【参考方案1】：

阅读Outline Box。

大纲文本字段有一个描边边框并且不太强调。到 使用大纲文本字段，将以下样式应用于您的 文本输入布局：

 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_
   android:layout_
   >

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

DEMO

仅供参考

旧版支持在 Android 28 中结束。现在继续使用

implementation 'com.google.android.material:material:1.3.0'

【讨论】：

我对此不确定，但也许正确的样式名称是“@style/Widget.MaterialComponents.TextInputLayout.OutlineBox”，而不是上面的样式，用 OutlineBox 替换 OutlinedBox。如果你能简要介绍一下这可能会对我有所帮助。

如何在TextInputEditText字段中设置文字？ @Subhank Gupta 以编程方式

仅供参考：旧版支持在 Android 28 中结束。现在继续使用implementation 'com.google.android.material:material:1.3.0'

使用新标签 &

【参考方案2】：

更新

也可以正常使用

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_
    android:layout_
    android:orientation="vertical"
    tools:context="com.example.dangarmahesh.demoapp.MainActivity">

    <ImageView
        android:layout_
        android:layout_gravity="center"
        android:src="@mipmap/ic_launcher"
        android:layout_ />

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

        android:layout_margin="10dp"
        android:layout_>

        <android.support.design.widget.TextInputEditText
            android:id="@+id/userIDTextInputEditText"
            android:layout_
            android:layout_
            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_
        android:layout_>

        <android.support.design.widget.TextInputEditText
            android:id="@+id/passwordTextInputEditText"
            android:layout_
            android:layout_
            android:hint="Password" />

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


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

外出

【讨论】：

这会对安卓 api 27 及以下安装了该应用程序的手机产生负面影响吗？

@OrimDominic Will this negatively affect android api 27 不，我也在 API 26 中对其进行了测试

【参考方案3】：

迁移到 androidx 库您必须使用新的Material Components for android library。

使用TextInputLayout 组件：

<com.google.android.material.textfield.TextInputLayout
    android:layout_
    android:layout_
    android:hint="@string/hint_text">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_
      android:layout_/>

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

并应用这种风格：

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

要求：

您必须在 build.gradle 文件中添加 this dependencies

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

申请Material Components theme

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

【讨论】：

但不聚焦时颜色不会改变

@AbrahamMathew 使用boxStrokeColor 属性。使用像this这样的选择器。

不要小心 1)xml 查看器的可视化效果不好 2) 不要为 TextInputEditText 设置提示 3) 对于普通视图，如果没有文本，请单击编辑文本 4)parent="Theme.MaterialComponents.* " ofc 5) 在 TextInputLayout 中添加样式

【参考方案4】：

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

然后在你的 com.google.android.material.textfield.TextInputLayout 中使用这种风格，

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

从here结帐

---

如果您使用的是 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"

【参考方案5】：

如果您使用的是 appcompact 库，那么您可以使用这个 android.support.design.widget.TextInputLayout

如果您使用的是 ANDROIDX 构建，那么我得出一个结论，根据 android jetpack，谁拥有最新代码。

要使用这个，你需要在你的应用程序 gradle 中有这个依赖项

dependencies 
    implementation 'com.google.android.material:material:1.0.0'

那么这样你就可以为你的 xml 添加 UI 元素了

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/messageTextInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_
    android:layout_
    android:layout_margin="10dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/passwordTextInputEditText"
            android:layout_
            android:layout_
            android:hint="Enter Text here" />

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

【参考方案6】：

<com.google.android.material.textfield.TextInputLayout
    android:layout_
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_gravity="center_horizontal"
    android:layout_>
    <EditText
        android:layout_
        android:layout_
        android:background="@null"
        android:hint="First Name"/>
 </com.google.android.material.textfield.TextInputLayout>

【参考方案7】：

在 android 中使用 OutlinedTextField（与 Jetpack Compose 一起使用）-

            OutlinedTextField(
                                    modifier = Modifier.fillMaxWidth(),
                                    value = textState.value,
                                    onValueChange = 
                                        textState.value = it
                                        viewModel.setSteps(stepNo.plus(1), it.text)
                                    ,
                                    label = 
                                        Text(text = "Step ".plus(stepNo.plus(1)).plus("..."))
                                    ,
                                    shape = RoundedCornerShape(8.dp),
                                    colors = TextFieldDefaults.textFieldColors(
                                        backgroundColor = Color.Transparent
                                    ),
                                    trailingIcon = 
                                            IconButton(onClick = ) 
                                            Icon(
                                                modifier = Modifier.padding(start = 10.dp),
                                                imageVector = Icons.Filled.Image,
                                                tint = Color.Blue,
                                                contentDescription = "Select Image"
                                            )
                                        
                                    
                                )

Jetpack 编写示例代码-https://androidlearnersite.wordpress.com/2021/08/03/jetpack-compose-1-0-0-sample-codes/