用shape做搜索样式【原创】

栏目: IOS · Android · 发布时间: 7年前

内容简介:以往用shape做这种圆弧时四个角的弧度都是一样的,但是想实现上图所示效果,恐怕难以实现。实际上上图所示效果是用两个shape拼起来的,但是只要边距大小吻合就能是两个shpe合二为一实现下面的效果,下面是上面效果具体实现的代码。xml代码:

最近项目中碰到这样一个搜索框的样式,如下图:

用shape做搜索样式【原创】

    以往用shape做这种圆弧时四个角的弧度都是一样的,但是想实现上图所示效果,恐怕难以实现。实际上上图所示效果是用两个shape拼起来的,但是只要边距大小吻合就能是两个shpe合二为一实现下面的效果,下面是上面效果具体实现的代码。

xml代码:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/et_search"
        android:layout_width="160dp"
        android:layout_height="30dp"
        android:maxLines="1"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/search_left_shape"
        android:drawableLeft="@drawable/all_icon_search"
        android:drawablePadding="15dp"
        android:hint="Enter Community "
        android:gravity="center"
        android:paddingLeft="15dp"
        android:textColor="#333333"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/tv_search"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="@drawable/search_right_shape"
        android:gravity="center_vertical"
        android:textColor="#fff"
        android:paddingLeft="5dp"
        android:text="Search" />
</LinearLayout>

下面是shape里面的代码(另外一个shape换成<item android:left=”-20dp”>):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="-20dp">

<shape>
    <corners android:radius="25dp"></corners>
    <solid android:color="#fff"></solid>
    <stroke android:color="#ffb22d" android:width="1dp"/>
</shape>
</item>
</layer-list>

是不是实现起来很简单啊,shape的灵活运用在实际的项目中是必不可少的,网上也有许多关于shape的用法,只有多学多用才能更好的掌握这方面的知识。

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/24467.html

用shape做搜索样式【原创】

用shape做搜索样式【原创】 微信打赏

用shape做搜索样式【原创】 支付宝打赏

感谢您对作者sunshine的打赏,我们会更加努力!    如果您想成为作者,请点我


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ajax for Web Application Developers

Ajax for Web Application Developers

Kris Hadlock / Sams / 2006-10-30 / GBP 32.99

Book Description Reusable components and patterns for Ajax-driven applications Ajax is one of the latest and greatest ways to improve users’ online experience and create new and innovative web f......一起来看看 《Ajax for Web Application Developers》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具