美文网首页Android学习Android开发Android知识
Android学习笔记043之shape详解

Android学习笔记043之shape详解

作者: 张文文同学 | 来源:发表于2016-08-18 14:35 被阅读461次

    Android中提供了shape形状给我们使用,我们可以通过shape画出虚线、圆角、渐变等多种效果,而且,shape是XML代码,比图片更小,在开发中,我们推荐使用shape,能用shape就用shape。

    概述

    用shape画形状,XML的根节点是shape,shape的取值有四个,简单的说就是,我们需要在根节点设置android:shape=""属性,这个属性取值有4个:rectangle(长方形),oval(椭圆),line(线条),ring(圆环)。

    需要注意一下几个属性,只有在设置画的形状是ring(圆环)的时候才会起作用:

    • android:innerRadius=""属性:这个属性是设置内环的半径。

    • android:innerRadiusRatio=""属性:这个属性是设置内环的比例,假设我设置的值是2,那么内环半径就是外圆半径除以2,注意,如果设置了android:innerRadius=""属性,那么内环比例这个属性就不会起作用。

    • android:thickness=""属性:这个属性是设置圆环的厚度。

    • android:thicknessRatio=""属性:这个属性是设置圆环的厚度比例,假设我设置的值是2,那么圆环的厚度就是环半径除以2,但是如果设置了android:thickness=""属性,那么圆环厚度比例属性就不生效。

    • android:useLevel=""属性:这个属性是设置使用级别,只有当我们的shape使用在只有当我们的shape使用在LevelListDrawable中的时候,这个值为true,否则为false。

    shape可以在Layout和selector中使用,shape有6个子标签,分别是:

    • corners圆角:圆角标签可以设置android:Radius=""属性,表示4个角的半径,也可以通过下面4个属性单独设置

         android:topLeftRadius=""------>>设置左上角的半径 
         android:topRightRadius=""----->>设置右上角的半径 
         android:bottomLeftRadius=""--->>设置右下角的半径 
          android:bottomRightRadius=""-->>设置左下角的半径
      
    • gradient渐变:设置shape的渐变色,有如下属性:

    • android:angle=""属性:表示渐变的角度,必须是45的倍数,可以设置为0,0表示从左往右渐变,逆时针旋转,依次是45,90,135.....,90表示从下往上渐变,270表示从上往下渐变,依次下去

    • android:startColor=""属性:设置渐变的起始颜色

    • android:centerColor=""属性:设置渐变的过渡颜色

    • android:endColor=""属性:设置渐变的结束颜色

    • android:type=""属性:设置渐变的类型,有三种类型,分别是:linear(线性变化),radial(辐射渐变)以及sweep(扫描渐变)

    • android:gradientRadius=""属性,设置渐变半径,只有当渐变类型是radial(辐射渐变)的时候才需要设置

    • padding内边距:内边距没有什么好说的,就是设置上、下、左、右四个方向的距离。

    • size大下:大小也没什么好说的,就是设置宽度和高度

    • solid填充:设置填充颜色,如果设置了这个属性,那么gradient属性就不生效

    • stroke描边:设置边线的属性:虚线或者实线、大小、颜色。有如下属性:

        android:width=""------->>设置边边的宽度 
        android:color=""------->>设置边边的颜色 
        android:dashWidth=""--->>设置虚线的宽度 
        android:dashGap=""----->>设置虚线的间隔宽度
      

    需要注意的是:dashWidth和dashGap属性,只要其中一个设置为0dp或者不设置,边框是实线边框

    使用

    上面我们讲了很多shape的便签和属性,都是概念性的东西,下面我们来具体使用一下

    使用shape画一条虚线

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="line">
    <!-- 设置虚线的样式-->
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimaryDark"
        android:dashGap="5dp"
        android:dashWidth="8dp"/>
    
    <size android:height="20dp"/>
    
    </shape>
    

    使用shape画一条实线

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="line">
    <!-- 设置虚线的样式-->
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimaryDark"
        />
    
    <size android:height="20dp"/>
    
    </shape>
    

    使用shape画一个实线边框

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimaryDark"/>
    <corners android:radius="8dp"/>
    </shape>
    

    使用shape画一个虚线边框

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimaryDark"
        android:dashGap="3dp"
        android:dashWidth="5dp"/>
    
    <corners android:radius="8dp"/>
    </shape>
    

    使用shape画一个渐变边框

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp"/>
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimaryDark"/>
    <gradient
        android:angle="180"
        android:endColor="#197600"
        android:startColor="#9cff00"/>
    </shape>
    

    使用shape画一个圆环

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="ring"
       android:useLevel="false">
    <solid android:color="#006BB0"/>
    <stroke
        android:width="1dp"
        android:color="#ffffff"/>
    <size
        android:width="20dp"
        android:height="20dp"/>
    </shape>
    

    最终实现的效果图是:

    需要注意的是,在Android3.0之后会开启硬件加速功能,所以我们需要在Activity中添加

    android:hardwareAccelerated="false"
    

    这一句代码,否则不会显示虚线

    shape就简单介绍到这里了,我们可以使用shape画出很多形状,就看具体的需求了,使用shape比图片更小。

    相关文章

      网友评论

      本文标题:Android学习笔记043之shape详解

      本文链接:https://www.haomeiwen.com/subject/bouvsttx.html