Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape的用法

学习Shape的用法

非著名程序员


在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,shape可以绘制矩形环形以及椭圆,所以只需要用椭圆即可,在使用的时候将控件比如imageview或textview的高宽设置成一样就是正圆,solid表示远的填充色,stroke则代表远的边框线,所以两者结合可以实现带边缘的圆,当然也可以直接加上size控制高宽。那么我首先带你们了解一下Shape下有哪些标签,并且都代表什么意思:
shape属性:
rectangle:矩形 

oval:椭圆 
line:线,需要 stroke 来设置宽度 
ring:环形 
solid属性:
color:填充颜色



stroke属性:
color:边框颜色 

width:边框宽度 
dashWidth:虚线框的宽度 
dashGap:虚线框的间隔 


corners属性:
radius:四个角的半径 
topRightRadius:右上角的半径 
bottomLeftRadius:右下角的半径 
opLeftRadius:左上角的半径 
bottomRightRadius:左下角的半径 


gradient属性:
startColor:其实颜色 

centerColor:中间颜色 
endColor:结束颜色 
centerX:中间颜色的相对X坐标(0 -- 1) 
centerY:中间颜色的相对Y坐标(0 -- 1) 
useLevel:(true/false), 是否用作LevelListDrawable的标志 
angle是渐变角度,必须为45的整数倍。0从左到右,90从下到上,180从右到左,270从上到下 
type:渐变模式。 默认线性渐变,可以指定渐变为radial(径向渐变)或者sweep(类似雷达扫描的形式) 
gradientRadius:渐变半径,径向渐变需指定半径。 


padding属性:
left:左内边距 

top:上内边距 
right:右内边距 
bottom:下内边距 


size属性:
width:宽 

height:高


现在接下来我们通过一个例子,画了五个不一样的形状,来详细了解有关Shape的用法。例子如下:
1、画椭圆虚线边框背景,资源文件代码如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >


    <!-- 圆角 -->
    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:radius="15dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />




    <!-- 描边 -->
    <stroke
        android:dashGap="4dp"
        android:dashWidth="4dp"
        android:width="2dp"
        android:color="@color/ellipse_dashed_line_color" />


</shape>
2、画实线透明边框背景,资源文件代码如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >


    <!-- 圆角 -->
    <corners
        android:bottomLeftRadius="6dp"
        android:bottomRightRadius="6dp"
        android:radius="10dp"
        android:topLeftRadius="6dp"
        android:topRightRadius="6dp" />




    <!-- 描边 -->
    <stroke
        android:width="1dp"
        android:color="@color/ellipse_dashed_line_color" />


</shape>
3、画实线填充颜色边框背景,资源文件代码如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >


    <!-- 圆角 -->
    <corners
        android:bottomLeftRadius="6dp"
        android:bottomRightRadius="6dp"
        android:radius="10dp"
        android:topLeftRadius="6dp"
        android:topRightRadius="6dp" />




    <!-- 描边 -->
    <solid
        android:width="1dp"
        android:color="@color/ellipse_dashed_line_color" />


</shape>
4、画实线透明半边椭圆边框,资源文件代码如下:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


    <item>
        <shape android:shape="rectangle" >
            <stroke
                android:width="1.2dp"
                android:color="#669df3" />


            <solid android:color="#00000000" />


            <corners
                android:bottomRightRadius="10dp"
                android:topRightRadius="10dp" />


            <padding
                android:bottom="8dp"
                android:left="12dp"
                android:right="12dp"
                android:top="8dp" />
        </shape>
    </item>


</layer-list>
5、画实线填充颜色半边椭圆边框,资源文件代码如下:
<?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="#669df3" />


            <corners
                android:bottomLeftRadius="10dp"
                android:topLeftRadius="10dp" />


            <padding
                android:bottom="8dp"
                android:left="12dp"
                android:right="12dp"
                android:top="8dp" />
        </shape>
    </item>


</layer-list>
效果图如下:

本文分享自微信公众号 - 非著名程序员(non-famous-coder)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-06-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MelonTeam专栏

日迹中视频编辑滤镜效果实现方法

导语 本文简要分析,日迹视频解码流程以及视频滤镜的实现原理 需求背景:日迹需要的编辑滤镜效果预览图 图1:日迹滤镜效果 要实现产品想要的...

30580
来自专栏我分享我快乐

CSS3滤镜效果可在动画中使用

<!doctype html> <html> <head> <style> img{display:block;} .box{width:600px;} .bo...

36880
来自专栏HTML5学堂

让元素呈现出“七十二变”的效果,就是这么简单

HTML5学堂:作为前端开发者,总会在设计图上看到各种各样奇怪的图形,想用图片解决又怕觉得很low,想用其它方法又一下子反应不过来。不管现在的你有没有面对过这样...

35850
来自专栏我分享我快乐

web前端设计基础单词表

A align 对齐 active 激活 absolute 绝对 alpha 图像通道 animate 动画 animation 动画片 alert 提醒 ad...

42980
来自专栏河湾欢儿的专栏

css3文本、盒模型阴影、倒影、自由缩放

css3新增盒模型阴影 box-shadow:[inset] x y blur [spread] color 参数 inset:投影方式 inset:内...

12510
来自专栏黑泽君的专栏

4道html笔试小题

17250
来自专栏拂晓风起

Flash Actionscript AS3 渐变透明 mask遮罩

15540
来自专栏Coding迪斯尼

实现红警式的建筑物拖拽生成特效

27730
来自专栏GIS讲堂

Arcgis for JavaSctipt之常用Layer详解

概述:Arcgis for Javasctipt中常见的layer有动态图层(ArcGISDynamicMapServiceLayer

21050
来自专栏Android开发经验

Android自定义View-记录一个简单却又常见的效果实现

代码 简单列下主要代码,完整代码地址放在了文字末尾。 1.为了更加灵活,我这里提供了很多属性用于用户自己来设置:

8920

扫码关注云+社区

领取腾讯云代金券