我想设计一个 TextView
和 EditText
与圆角。
有一个直接的解决方案。使用 自定义形状背景.但由于材料设计1.1.0引入了 shapeAppearance
主题属性来应用不同的形状到角上,这对所有的材质组件都能正常工作,如 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>
你可以应用 MaterialShapeDrawable
材料组件库引入的也是一个 TextView
或 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);
你可以用一个 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();
with:
<style name="ShapeOverlay">
<item name="cornerSize">16dp</item>
</style>
用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中调用创建的drawable为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>
我想你可以走了