EditText:今夜化了美美的装——shape

EditText在App里很常见,用来输入文本,但是功能都是差不多的,可是在美化方面,总是会有各式各样的需求,毕竟UI体验还是很重要的。
在新版的Api23(Android6.0)或Api24里的EditText是这个样子的。

EditText 6.0

嗯?!仅此而已?长的有点任性啊!所以用户又不满足于现实了……情何以堪。
不满足就要美化呗!
于是就是有了QQ搜索的样式
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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章