EditText在App里很常见,用来输入文本,但是功能都是差不多的,可是在美化方面,总是会有各式各样的需求,毕竟UI体验还是很重要的。
在新版的Api23(Android6.0)或Api24里的EditText是这个样子的。
嗯?!仅此而已?长的有点任性啊!所以用户又不满足于现实了……情何以堪。
不满足就要美化呗!
于是就是有了QQ搜索的样式
于是赶紧仿制了一枚 <附上一个傻笑的emoji>
实现步骤:
1.在drawable文件夹下新建shape文件,这里我命名为shape_edit,内容如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#f2f0f2"/>
<corners android:radius="13px"/>
</shape>
<!--corners圆角及radius半径,color颜色-->
我们的小灰灰圆角框就完成了,(shape不光可以运用在edittext上,而且可以用在其他某些控件)。
2.在xml布局里添加editText控件,代码如下
<EditText
android:layout_width="wrap_content"
android:layout_height="35dp"
android:ems="10"
android:hint="说点什么吧..."
android:gravity="center|center_horizontal"
android:id="@+id/editText2"
android:background="@drawable/shape_edit"
android:layout_below="@+id/editText"
android:layout_marginTop="101dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true" />
<!--hint隐藏文字及gravity居中显示-->
<!-- background背景显示-->
嗯,上述代码单独显示的那一行就是关键,我们在background里引用drawable资源,然后效果达成。
由于QQ截图显示的是搜索框,点击它的话会跳转到下一个界面,而里面的icon和hint都会变化位置,而我添加的仅仅是edit输入框,暂时不能变换位置,所以再显示icon的话会很丑,不过不显示icon也是蛮像的对吧。
另外还有其他shape样式,这个都可以自定义的,完全由你自己设计,但是原理是差不多的。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00ff00ff"/>
<corners android:radius="8px"/>
<stroke android:color="#32CD32" android:width="2px" />
</shape>
<!--圆角,透明内容,实线边框,颜色-->
效果
这是透明输入框的样式
另外还有登录的卡片式输入框,都可以只使用shape实现。
<本文原创,转载请注明出处,实现方法不是唯一的,本文仅代表个人看法,如有错误或者其他建议请在评论区指正,谢谢。>
2016.8.11 Surine