Android中Shape属性

痞子三分冷 提交于 2019-12-03 01:59:32

Android基础之 Shape

Shape是android中一个比较基础但是也比较重要的部分,巧妙利用shape可以用代码写出比较好看的形状、背景等等,方便快捷,同时也减少图片资源的使用,为app瘦身。

1.Shape的四种类型

["rectangle" | "oval" | "line" | "ring"]    

rectangle:矩形  
oval:椭圆形

line:线性

ring:环形

默认为rectangle。即默认为矩形

定义:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

环形的属性:

android:innerRadius="dimension"     //内环半径  
    android:innerRadiusRatio="float"    //内环半径相对于环的宽度的比例,比如环的宽度为50,比例为2.5,那么内环半径为20  
    android:thickness="dimension"   //环的厚度  
    android:thicknessRatio="float"     //环的厚度相对于环的宽度的比例  
    android:useLevel="boolean">    //如果当做是LevelListDrawable使用时值为true,否则为false. 

圆角:

 <!--
        圆角
        android:radius              整型 半径
        android:topLeftRadius       整型 左上角半径
        android:topRightRadius      整型 右上角半径
        android:bottomLeftRadius    整型 左下角半径
        android:bottomRightRadius   整型 右下角半径
     -->
    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="25dp"
        android:radius="8dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="15dp" />

渐变色:

   <!--
       渐变色
       android:startColor  颜色值                             起始颜色
       android:endColor    颜色值                             结束颜色
       android:centerColor 整型                              渐变中间颜色,即开始颜色与结束颜色之间的颜色
       android:angle       整型                              渐变角度(PS:当angle=0时,渐变色是从左向右。 
                                                然后逆时针方向转,当angle=90时为从下往上。angle必须为45的整数倍)
       android:type        ["linear" | "radial" | "sweep"] 渐变类型(取值:linear、radial、sweep)
                           linear 线性渐变,这是默认设置
                           radial 放射性渐变,以开始色为中心。
                           sweep 扫描线式的渐变。
      android:useLevel     ["true" | "false"]              如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色
      android:gradientRadius 整型                            渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。
      android:centerX      整型                              渐变中心X点坐标的相对位置
      android:centerY      整型                              渐变中心Y点坐标的相对位置
   -->

边距:

  <!--
        内边距,即内容与边的距离
        android:left    整型 左内边距
        android:top     整型 上内边距
        android:right   整型 右内边距
        android:bottom  整型 下内边距
      -->
    <padding
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp" />

大小、填充颜色:

    <!--
        size 大小
        android:width   整型 宽度
        android:height  整型 高度
    -->
    <size android:width="600dp" />

    <!--
        内部填充
        android:color   颜色值 填充颜色
    -->
    <solid android:color="#ffff9d77" />

描边:

 <!--
       描边
       android:width       整型  描边的宽度
       android:color       颜色值     描边的颜色
       android:dashWidth   整型  表示描边的样式是虚线的宽度, 值为0时,表示为实线。值大于0则为虚线。
       android:dashGap     整型  表示描边为虚线时,虚线之间的间隔 即“ - - - - ”
    -->
    <stroke
        android:width="2dp"
        android:color="#dcdcdc" />
几个示例:

圆角矩形,扫描式渐变

    <shape  
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:shape="rectangle"  
        android:useLevel="false" >  
      
        <corners  
            android:topLeftRadius="10dp"  
            android:topRightRadius="10dp"  
            android:bottomLeftRadius="10dp"  
            android:bottomRightRadius="10dp" />  
      
        <gradient  
            android:type="sweep"  
            android:endColor="@android:color/holo_blue_bright"  
            android:startColor="@android:color/holo_green_dark"  
            android:centerColor="@android:color/holo_blue_dark"  
            android:useLevel="false" />  
      
        <size android:width="60dp" android:height="60dp" />  
    </shape>  

效果如图:

圆形,线性渐变:

    <?xml version="1.0" encoding="utf-8"?>  
    <shape  
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:shape="oval"  
        android:useLevel="false" >  
      
        <gradient  
            android:type="linear"  
            android:angle="45"  
            android:startColor="@android:color/holo_green_dark"  
            android:centerColor="@android:color/holo_blue_dark"  
            android:endColor="@android:color/holo_red_dark"  
            android:useLevel="false" />  
      
        <size android:width="60dp" android:height="60dp" />  
      
        <stroke android:width="1dp"  
            android:color="@android:color/white" />  
      
    </shape>  

虚线:

    <?xml version="1.0" encoding="utf-8"?>  
    <shape  
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:shape="line" >  
      
        <size android:width="60dp"  
            android:height="60dp" />  
      
        <stroke android:width="2dp"  
            android:color="@android:color/holo_purple"  
            android:dashWidth="10dp"  
            android:dashGap="5dp" />  
    </shape>  

环形,放射性渐变:

    <?xml version="1.0" encoding="utf-8"?>  
    <shape  
        xmlns:android="http://schemas.android.com/apk/res/android"  
        android:shape="ring"  
        android:useLevel="false"  
        android:innerRadius="40dp"  
        android:thickness="3dp">  
      
        <gradient android:type="radial"  
            android:gradientRadius="150"  
            android:centerY="0.1"  
            android:centerX="0.2"  
            android:startColor="@android:color/holo_red_dark"  
            android:centerColor="@android:color/holo_green_dark"  
            android:endColor="@android:color/white" />  
      
        <size android:width="90dp"  
            android:height="90dp" />  
      
    </shape>  

参考文章:http://blog.csdn.net/nature_day/article/details/52301375












标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!