如何使用 Material 在 Android 中设计在 EditText 和 TextView 中应用 shapeAppreanace

Question

我想设计一个TextView和EditText的圆角。

对此有一个直接的解决方案。使用 custom shape background。但是由于 material 设计 1.1.0 引入了 shapeAppearance 主题属性以将不同的形状应用于角，这适用于所有 Material 组件，如 MaterialButton、BottomSheet , MaterialCardView, 等等但它不适用于 EditText 和 TextView。我也尝试使用 MaterialTextView 但它没有用。这就是我为 EditText 设置样式的方式，它也类似于 TextView。

<style name="ThemeOverlay.Chat" parent="AppTheme">
        <item name="editTextStyle">@style/Overlay.Chat.EditText</item>
    </style>


    <style name="Overlay.Chat.EditText" parent="Widget.AppCompat.EditText">
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.Overlay.FullRound</item>
    </style>

    <style name="ShapeAppearance.Overlay.FullRound" parent="ShapeAppearance.MaterialComponents.LargeComponent">
        <item name="cornerSize">50dp</item>
    </style>

Answer 1

使用 rounded_edittext.xml

创建可绘制资源文件

    <?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

然后在您的 editText 中将创建的可绘制对象调用为 andriod:background

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:padding="5dip"
    android:background="@drawable/rounded_edittext" />
</LinearLayout>

我觉得你可以走了。

Answer 2

您可以将 Material 组件库引入的 MaterialShapeDrawable 应用到 TextView 或 EditText。
在这种情况下，您不能在布局或样式中使用 shapeAppearanceOverlay 属性，因为这些组件没有默认定义为 MaterialButton、MaterialCardView 的 MaterialShapeDrawable。
但是您以编程方式应用相同的 ShapeAppearence。

例如：

<TextView
    android:id="@+id/textview"
    android:backgroundTint="@color/secondaryColor"
    ../>

以编程方式，您可以使用类似的东西：

float radius = getResources().getDimension(R.dimen.default_corner_radius);
TextView textView = findViewById(R.id.textview);

定义 ShapeAppearanceModel 圆角：

ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
        .toBuilder()
        .setAllCorners(CornerFamily.ROUNDED,radius)
        .build();

用这个 ShapeAppearanceModel 创建一个 MaterialShapeDrawable:

MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);

将此背景应用于您的视图：

ViewCompat.setBackground(textView,shapeDrawable);

您可以使用 EditText 实现相同的行为（但在这种情况下您也可以使用 TextInputLayout）：

在您的布局中定义：

    <EditText
        android:id="@+id/edittext"
        android:paddingLeft="4dp"
        android:drawableLeft="@drawable/ic_add_24px"
        android:drawableTint="@color/..."
        android:hint="@string/...."
        ..>

然后应用 MaterialShapeDrawable:

EditText editText = findViewById(R.id.edittext);
//Apply the rounded corners 
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
                .toBuilder()
                .setAllCorners(CornerFamily.ROUNDED,radius)
                .build();

MaterialShapeDrawable shapeDrawable = 
            new MaterialShapeDrawable(shapeAppearanceModel);
//Fill the background color
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color....));
//You can also apply a stroke
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color....));

//Apply the shapeDrawable to the background.
ViewCompat.setBackground(editText,shapeDrawable);

如果您想使用 ShapeAppareace 中定义的样式，您可以使用不同的 ShapeAppearanceModel 构造函数。例如：

ShapeAppearanceModel shapeAppearanceModel =
            ShapeAppearanceModel.builder( this,
                    R.style.ShapeAppearance_MaterialComponents_MediumComponent,
                    R.style.ShapeOverlay).build();

与：

<style name="ShapeOverlay">
    <item name="cornerSize">16dp</item>
</style>

如何使用 Material 在 Android 中设计在 EditText 和 TextView 中应用 shapeAppreanace

How to apply shapeAppreanace in EditText and TextView using Material Design in Android

android

android-edittext

android-theme

android-styles

material-components-android