您的位置:首页 > 移动开发 > Android开发

Android之shape与selector实现圆角

2014-11-10 10:23 465 查看
随着现在UI的设计,android界面上很多要求圆形的图片,我们总不可能叫美工切一个圆形的图吧,因为图片是通过控件显示在屏幕上的,那么只好使控件变成圆形的即可,android中为我们开发人员提供了使控件变成圆形,矩形等操作,因此shape和selector在美化控件中的作用是至关重要的

1.Shape

简介

作用:XML中定义的几何形状

位置:res/drawable/文件的名称.xml

使用的方法:

Java代码中:R.drawable.文件的名称

XML中:android:background="@drawable/文件的名称"

属性:
<shape>  android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形,oval椭圆,line水平直线,ring环形

<shape>中子节点的常用属性:

<gradient>  渐变

android:startColor  起始颜色

android:endColor  结束颜色

android:angle  渐变角度,0从上到下,90表示从左到右,数值为45的整数倍默认为0;

android:type  渐变的样式 liner线性渐变 radial环形渐变 sweep

<solid >  填充

android:color  填充的颜色

<stroke > 描边

android:width 描边的宽度

android:color 描边的颜色

android:dashWidth 表示'-'横线的宽度

android:dashGap 表示'-'横线之间的距离

<corners > 圆角

android:radius  圆角的半径 值越大角越圆

android:topRightRadius  右上圆角半径

android:bottomLeftRadius 右下圆角角半径

android:topLeftRadius 左上圆角半径

android:bottomRightRadius 左下圆角半径


2.Selector

简介

位置:res/drawable/文件的名称.xml

使用的方法:

Java代码中:R.drawable.文件的名称

XML中:android:background="@drawable/文件的名称"

selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true">
<shape>
<gradient android:angle="270" android:endColor="#99BD4C"
android:startColor="#A5D245" />
<size android:height="60dp" android:width="320dp" />
<corners android:radius="8dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<gradient android:angle="270" android:endColor="#99BD4C"
android:startColor="#A5D245"/>
<size android:height="60dp" android:width="320dp" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<gradient android:angle="270" android:endColor="#A8C3B0"
android:startColor="#C6CFCE"/>
<size android:height="60dp" android:width="320dp" />
<corners android:radius="8dp" />
</shape>
</item>
</selector>


现在写个例子玩玩:
btn.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<corners
android:radius="8dp"
/>
<solid
android:color="#123456"
/>
</shape>


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<Button
android:layout_width="150dp"
android:layout_height="150dp"
android:background="@drawable/btn"
android:layout_centerInParent="true"
/>

</RelativeLayout>


效果图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: