用Drawable XML绘制带阴影效果的圆形按钮



转载:  http://iaiai.iteye.com/blog/2088381



众所周知,在Android开发里,为了优化在各种分辨率设备上的显示效果,同一份图片素材往往要提供mdpi、hdpi、xhdpi三种(以前还有ldpi),尤其是按钮类的素材,考虑到normal、pressed、focused更是需要至少3×3=9张图片。NinePatch技术虽然可以解决一部分尺寸灵活性的问题,但大部分修改和适配还是要再次制作一批图片的。 
根据交互设计的需要,可以考虑用Drawable的XML绘制按钮,好处有: 

  • 矢量绘制,易于缩放;
  • 字节数更少(一般而言);
  • 基于XML文本,属性值易于调整;
  • Drawable组件间可嵌套,可重用;
  • XML与项目其他源代码在一起,便于版本控制。

当然也有缺点: 
  • 没有可视化的编辑器,编辑不够直观;
  • 受限于基本的图形和填充方式;
  • 美工人员很难上手。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- outer circle -->
    <item>
        <shape android:shape="oval" >
            <solid android:color="#FFACB8C3" />
        </shape>
    </item>
 
    <!-- inner shadow of outer circle -->
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="oval">
            <solid android:color="#FFbdcad6" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="oval">
            <solid android:color="#FFc3cfd9" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="oval">
            <solid android:color="#FFcbd6df" />
        </shape>
    </item>
    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="oval">
            <solid android:color="#FFd4dee5" />
        </shape>
    </item>
 
    <!-- gap -->
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape android:shape="oval" >
            <solid android:color="#FFdae2e8" />
        </shape>
    </item>
 
    <!-- outer shadow of center circle -->
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="oval">
            <solid android:color="#FFced5dc" />
        </shape>
    </item>
    <item
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp">
        <shape android:shape="oval">
            <solid android:color="#FFbcc4c9" />
        </shape>
    </item>
    <item
        android:bottom="13dp"
        android:left="13dp"
        android:right="13dp"
        android:top="13dp">
        <shape android:shape="oval">
            <solid android:color="#FFb4bbc0" />
        </shape>
    </item>
    <item
        android:bottom="14dp"
        android:left="14dp"
        android:right="14dp"
        android:top="14dp">
        <shape android:shape="oval">
            <solid android:color="#FFacb3b8" />
        </shape>
    </item>
 
    <!-- center circle -->
    <item
        android:bottom="15dp"
        android:left="15dp"
        android:right="15dp"
        android:top="15dp">
        <shape android:shape="oval">
            <stroke android:width="1dp" android:color="#FFFCFCFC"/>
            <gradient
                android:angle="270"
                android:endColor="#FFCFD7DD"
                android:startColor="#FFF0F5F9" />
        </shape>
    </item>
 
</layer-list>


Android开发中,我们可以使用drawable绘制圆角。DrawableAndroid中用于绘制图形和颜色的对象。要绘制圆角,我们可以使用ShapeDrawable和RoundRectShape来创建一个圆角矩形。 首先,我们需要在res目录下创建一个名为"rounded_corner.xml"的drawable文件。在这个文件中,我们可以使用<shape>标签来定义一个圆角矩形的形状。其中,我们可以通过<corners>标签来设置圆角的半径。 以下是一个示例的"rounded_corner.xml"文件的内容: ```xml <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="20dp" /> <solid android:color="#FF0000" /> </shape> ``` 在这个示例中,我们将圆角的半径设置为20dp,并将填充颜色设置为红色。 接下来,我们可以在布局文件中使用这个drawable。例如,如果我们要将圆角矩形用作按钮的背景,我们可以这样使用: ```xml <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" android:background="@drawable/rounded_corner" /> ``` 通过将"rounded_corner"设置为按钮的背景,我们可以看到按钮的背景被绘制为圆角矩形。 总而言之,通过使用drawable和ShapeDrawable,我们可以轻松地绘制圆角矩形。只需创建一个名为"rounded_corner.xml"的drawable文件,使用<corners>标签来设置圆角的半径,并在布局文件中使用这个drawable作为背景,即可实现圆角效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值