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

Question

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

对于这个问题有一个直接的解决方案。使用自定义形状背景。但由于 Material Design 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

MaterialShapeDrawable您也可以将材质组件库引入的应用到 aTextView或EditText。
在这种情况下，您无法shapeAppearanceOverlay在布局或样式中使用该属性，因为这些组件没有MaterialShapeDrawable默认定义为MaterialButton, MaterialCardView。
但您以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();

MaterialShapeDrawable用这个创建一个ShapeAppearanceModel：

MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);

将此背景应用到您的视图中：

ViewCompat.setBackground(textView,shapeDrawable);

您可以使用 an 实现相同的行为（但在本例中EditText也可以使用 a ）：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>