如何创建具有圆角而不是默认矩形角的 EditText
?
有一种比 CommonsWare 编写的更简单的方法。只需创建一个可绘制资源来指定 EditText
的绘制方式:
<?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>
然后,只需在您的布局中引用此可绘制对象:
<?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>
你会得到类似的东西:
https://i.stack.imgur.com/R03Gk.png
编辑
根据 Mark 的评论,我想添加您可以为 EditText
创建不同状态的方式:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_states.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="@drawable/rounded_focused" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="@drawable/rounded_focused" />
<item
android:state_enabled="true"
android:drawable="@drawable/rounded_edittext" />
</selector>
这些是状态:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_focused.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<stroke android:width="2dp" android:color="#FF0000" />
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
</shape>
而且...现在,EditText
应该如下所示:
<?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:text="@string/hello"
android:background="@drawable/rounded_edittext_states"
android:padding="5dip" />
</LinearLayout>
这是一个 XML 文件中的相同解决方案(带有一些额外的奖励代码):
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/edittext_rounded_corners.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_focused="true">
<shape>
<solid android:color="#FF8000"/>
<stroke
android:width="2.3dp"
android:color="#FF8000" />
<corners
android:radius="15dp" />
</shape>
</item>
<item android:state_pressed="true" android:state_focused="false">
<shape>
<solid android:color="#FF8000"/>
<stroke
android:width="2.3dp"
android:color="#FF8000" />
<corners
android:radius="15dp" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="true">
<shape>
<solid android:color="#FFFFFF"/>
<stroke
android:width="2.3dp"
android:color="#FF8000" />
<corners
android:radius="15dp" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="false">
<shape>
<gradient
android:startColor="#F2F2F2"
android:centerColor="#FFFFFF"
android:endColor="#FFFFFF"
android:angle="270"
/>
<stroke
android:width="0.7dp"
android:color="#BDBDBD" />
<corners
android:radius="15dp" />
</shape>
</item>
<item android:state_enabled="true">
<shape>
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
</shape>
</item>
</selector>
然后,您只需将背景属性设置为 edittext_rounded_corners.xml 文件:
<EditText android:id="@+id/editText_name"
android:background="@drawable/edittext_rounded_corners"/>
topRightRadius
和 topLeftRadius
,但所有四个角最终都被舍入了。请帮忙。 :(
试试这个,
在 Drawable
https://i.stack.imgur.com/Eba18.png
感谢诺费尔特的回答。我稍微改变了它的渐变以获得更好的内阴影效果。
<item android:state_pressed="false" android:state_focused="false">
<shape>
<gradient
android:centerY="0.2"
android:startColor="#D3D3D3"
android:centerColor="#65FFFFFF"
android:endColor="#00FFFFFF"
android:angle="270"
/>
<stroke
android:width="0.7dp"
android:color="#BDBDBD" />
<corners
android:radius="15dp" />
</shape>
</item>
在浅色背景布局中看起来很棒。
https://i.stack.imgur.com/faCg1.jpg
以我的思维方式,它已经有了圆角。
如果您希望它们更圆润,您将需要:
克隆构成 EditText 背景的所有九个补丁 PNG 图像(在您的 SDK 中找到) 修改每个以具有更多圆角 克隆将这些 EditText 背景组合成单个 Drawable 的 XML StateListDrawable 资源,并将其修改为指向您的更圆润的九个补丁 PNG 文件 使用新的 StateListDrawable 作为 EditText 小部件的背景
只是为了添加其他答案,我发现实现圆角的最简单解决方案是将以下内容设置为 Edittext 的背景。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white"/>
<corners android:radius="8dp"/>
</shape>
借助材料组件库,您可以使用 MaterialShapeDrawable
到 draw custom shapes。
使用 EditText
您可以:
<EditText
android:id="@+id/edittext"
../>
然后创建一个 MaterialShapeDrawable
:
float radius = getResources().getDimension(R.dimen.default_corner_radius);
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);
//Apply a background color
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.white));
//Apply a stroke
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color.colorAccent));
ViewCompat.setBackground(editText,shapeDrawable);
https://i.stack.imgur.com/an3E7.png
它需要库的 1.1.0 版本。
如果你只想要角落应该弯曲而不是整个末端,那么使用下面的代码。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners android:radius="10dp" />
<padding
android:bottom="3dp"
android:left="0dp"
android:right="0dp"
android:top="3dp" />
<gradient
android:angle="90"
android:endColor="@color/White"
android:startColor="@color/White" />
<stroke
android:width="1dp"
android:color="@color/Gray" />
</shape>
它只会弯曲 EditText
的四个角。
不定期副业成功案例分享
EditText
具有不同的聚焦、禁用、按下和选定背景。如果我们得到一些没有触摸屏的 Android 设备,比如谷歌电视,那么专注可能会很重要。android:radius
而不是定义 4 条线