美化UI,谈谈XML中的Shape
shape drawbable用于在xml文件中绘制一个几何图形,多样的搭配能带来不同的效果使UI进行美化。 shape的形状 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <corners android:radius="integer" <!--半径--> android:topLeftRadius="integer" <!--左上角半径--> android:topRightRadius="integer" <!--右上角半径--> android:bottomLeftRadius="integer" <!--左下角半径--> android:bottomRightRadius="integer" /> <!--右下角半径--> <gradient android:angle="integer" <!--渐变角度(必须为45°的倍数)--> android:centerX="integer" <!--渐变中心x坐标的相对位置--> android:centerY="integer" <!--渐变中心Y坐标的相对位置--> android:centerColor="color" <!--渐变中间颜色--> android:endColor="color" <!--渐变结束颜色--> android:gradientRadius="integer" android:startColor="color" <!--渐变开始颜色--> android:type=["linear" | "radial" | "sweep"] <!--渐变类型:linear线性渐变;radial放射性渐变;sweep扫描线式渐变--> android:useLevel=["true" | "false"] /> <!--如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色(这个我也不太懂)--> <padding <!--内边距--> android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size <!--大小:宽度/高度--> android:width="integer" android:height="integer" /> <solid <!--内部填充色--> android:color="color" /> <stroke <!--描边--> android:width="integer" <!--描边的宽度--> android:color="color" <!--描边的颜色--> android:dashWidth="integer" <!--折线的宽度(绘制虚线用)--> android:dashGap="integer" /> <!--折线的间距(绘制虚线用)--> </shape>
渐变角度0°时,渐变从左到右。 下面来看看效果代码 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<stroke android:width="1dp" android:dashWidth="5dp" android:dashGap="2dp" android:color="#000000"/>
</shape>
PS:只有关闭了硬件加速后才能显示出虚线,但是这个BUG并不影响虚线框的显示。 2.绘制微信聊天框 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#0ac39e" />
</shape>
</item>
<item android:bottom="6dp">
<shape android:shape="rectangle" >
<solid android:color="#ffffff" />
</shape>
</item>
<item android:bottom="1dp" android:left="1dp" android:right="1dp">
<shape android:shape="rectangle" >
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
3.绘制虚线框 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke android:dashGap="2dp" android:dashWidth="6dp" android:width="0.5dp" android:color="#ff4560" />
<!-- dashWidth 折线宽度 dashGap 间距宽度 -->
<solid android:color="#ffffff" />
</shape>
4.绘制阴影背景 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 背影部分 -->
<item android:left="2dp" android:top="2dp">
<shape android:shape="rectangle" >
<gradient android:angle="270" android:endColor="#2f000000" android:startColor="#0f000000" />
<corners android:radius="6dp" />
</shape>
</item>
<!-- 背景部分 -->
<item android:bottom="3dp" android:right="3dp">
<shape android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:radius="6dp" />
</shape>
</item>
</layer-list>
通过android:right和android:bottom属性让上下两层错层,绘制出阴影效果。 android:left/right/top/bottom分别表示leftMargin、rightMargin、topMargin、bottomMargin (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |