Android样式shape

by admin on 2019年9月8日

大部分的人都不知道正确创建shape的XML文件的方法,都会通过修改已经使用过的shape的XML文件,来达到得到自定义shape的目的,其实这样是很麻烦的.通过在网上的不断学习,我总结了有以下三种方法来创建shape的XML文件

<shape>

xml定义的通用形状,<shape>标签必须作为根节点,或者包含在<item>标签元素里面,作为layer-list、selector等的子元素。

  1. 右键 res => new => android resource file

android的shape就是自己画各种形状,就是一些xml文件,放在drawable目录下。官方文档

  • 一般用shape定义的xml文件存放在drawable目录下
  • 使用shape可以自定义形状,可以定义下面四种类型的形状
  • 第一种切换到progect视图下
    ,把selector改成shape就OK了点击你的drawable,在new选项中选择New
    Drawable Resource File

    图片 1第一种创建shape的方法

    出现上图所示框之后,一般Root element框显示的是selector ,直接在Root
    element中修改输入为shape,再自定义您需要的File name即可

1、语法

<?xml version="1.0" encoding="utf-8"?>
<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"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["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>

图片 2

使用方法

在drawable目录新建shape资源文件。

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

</shape>

然后指定shape种类,有四个分类:

android:shape=["rectangle" | "oval" | "line" | "ring"]

分别代表矩形,椭圆,线条和环形。其中rectangle是默认的。

每种shape都有以下6个属性:
size、padding、solid、stroke、corners、gradient。

2、包含的标签元素以及相应的属性

Paste_Image.png

size

size是最简单的,就是宽和高。

<size
    android:width="integer"
    android:height="integer" />
rectangle: 矩形,默认的形状,可以画出直角矩形、圆角矩形、弧形等
oval: 椭圆形,用得比较多的是画正圆
line: 线形,可以画实线和虚线
ring: 环形,可以画环形进度条
  • 第二种同样切换到progect视图下 ,根据下列图进行操作

    图片 3第二种创建shape的方法图片 4第二种创建shape的方法图片 5创建shape成功

<shape>

必须作为根元素

  • xmlns:android:必备属性。定义XML命名空间,必须是”http://schemas.android.com/apk/res/android”。

  • android:shape:定义形状的类型,有以下四种类型:

    • rectangle:矩形,也是默认的形状。
    • oval:椭圆形
    • line:线
    • ring:环形
  • android:innerRadius(只对环形有效):定义环形内部的半径

  • android:innerRadiusRatio(只对环形有效)

  • android:thickness(只对环形有效)

  • android:thicknessRatio(只对环形有效)

  • android:useLevel(只对环形有效)

  1. 修改资源类型以及根节点

padding

内边距。

<padding
    android:left="integer"
    android:top="integer"
    android:right="integer"
    android:bottom="integer" />

rectangle

    rectangle是默认的形状,也是用得最多的形状,一些文字背景、按钮背景、控件或布局背景等

//填充色
solid: 设置形状填充的颜色,只有android:color一个属性

android:color 填充的颜色

//内间距
padding: 设置内容与形状边界的内间距,可分别设置左右上下的距离

android:left 左内间距
android:right 右内间距
android:top 上内间距
android:bottom 下内间距

//渐变色
gradient: 设置形状的渐变颜色,可以是线性渐变、辐射渐变、扫描性渐变

android:type 渐变的类型
    linear 线性渐变,默认的渐变类型
    radial 放射渐变,设置该项时,android:gradientRadius也必须设置
    sweep 扫描性渐变
android:startColor 渐变开始的颜色
android:endColor 渐变结束的颜色
android:centerColor 渐变中间的颜色
android:angle 渐变的角度,线性渐变时才有效,必须是45的倍数,0表示从左到右,90表示从下到上
android:centerX 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
android:centerY 渐变中心的相对X坐标,放射渐变时才有效,在0.0到1.0之间,默认为0.5,表示在正中间
android:gradientRadius 渐变的半径,只有渐变类型为radial时才使用
android:useLevel 如果为true,则可在LevelListDrawable中使用

//圆角
corners: 设置圆角,只适用于rectangle类型,可分别设置四个角不同半径的圆角,当设置的圆角半径很大时,比如200dp,就可变成弧形边了

android:radius 圆角半径,会被下面每个特定的圆角属性重写
android:topLeftRadius 左上角的半径
android:topRightRadius 右上角的半径
android:bottomLeftRadius 左下角的半径
android:bottomRightRadius 右下角的半径

//实线或虚线
stroke: 设置描边,可描成实线或虚线

android:color 描边的颜色
android:width 描边的宽度
android:dashWidth 设置虚线时的横线长度
android:dashGap 设置虚线时的横线之间的距离

<?xml version="1.0" encoding="utf-8"?>
<!-- android:shape指定形状类型,默认为rectangle -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- solid指定形状的填充色,只有android:color一个属性 -->
    <solid android:color="#2F90BD" />
    <!-- padding设置内容区域离边界的间距 -->
    <padding
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp" />
    <!-- corners设置圆角,只适用于rectangle -->
    <corners android:radius="200dp" />
    <!-- stroke设置描边 -->
    <stroke
        android:width="2dp"
        android:color="@android:color/darker_gray"
        android:dashGap="4dp"
        android:dashWidth="4dp" />
</shape>

<size>

定义形状的大小,当作为背景需要填充到view里的时候,会按照size定义的比例进行等比例缩放。ImageView中可以通过将
android:scaleType 设置为”center”来显示XML文件里设置的大小。

  • android:height:定义形状的高度
  • android:width:定义形状的宽度

图片 6

solid

填充颜色。

<solid
    android:color="color" />

oval

    oval用来画椭圆,而在实际应用中,更多是画正圆,比如消息提示,圆形按钮等

<?xml version="1.0" encoding="utf-8"?>
<!-- android:shape指定形状类型 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <!-- padding设置内间距 -->
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
    <!-- size设置形状的大小 -->
    <size
        android:width="40dp"
        android:height="40dp" />
    <!-- gradient设置渐变 -->
    <gradient
        android:endColor="#000000"
        android:gradientRadius="40dp"
        android:startColor="#FFFFFF"
        android:type="radial" />
</shape>
  • 第三种考虑到我们经常处于android视图下,所以也可以不用切换到project视图下进行操作,直接点击drawable文件夹

    图片 7第三种创建shape的方法

<solid>

定义形状的填充色

  • android:color:设置颜色

Paste_Image.png

stroke

边框,width是边框宽度,color是边框颜色。dashWidth是虚线的线条长度,dashGap是虚线的线条间隔。这里有个问题,怎么设置边框是实线还是虚线?答案是dashGap为0就是实线呗。

<stroke
    android:width="integer"
    android:color="color"
    android:dashWidth="integer"
    android:dashGap="integer" />

line

    line主要用于画分割线,是通过stroke和size特性组合来实现的

画线时,有几点特性必须要知道的:

1.只能画水平线,画不了竖线;
2.线的高度是通过stroke的android:width属性设置的;
3.size的android:height属性定义的是整个形状区域的高度;
4.size的height必须大于stroke的width,否则,线无法显示;
5.线在整个形状区域中是居中显示的;
6.线左右两边会留有空白间距,线越粗,空白越大;
7.引用虚线的view需要添加属性android:layerType,值设为"software",否则显示不了虚线

<?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:color="#2F90BD"
        android:dashGap="2dp"
        android:dashWidth="4dp" />
    <!-- 形状的高度 -->
    <size android:height="4dp" />
</shape>

紧接着会出现以下选项,直接输入你自定义的File name即可

<corners>

设置形状的圆角,只对矩形有用。

  • android:radius:所有圆角的半径,对于特定的角如果定义了具体的数值,会被覆盖。
  • android:topLeftRadius:左上角的半径
  • android:topRightRadius:右上角的半径
  • android:bottomLeftRadius:左下角的半径
  • android:bottomRightRadius:右下角的半径

corners

圆角半径,只有rectangle需要设置这个值。
radius是圆角半径,topLeftRadius、topRightRadius、bottomLeftRadius、bottomRightRadius分别是左上、右上、左下、右下的圆角半径。

<corners
    android:radius="integer"
    android:topLeftRadius="integer"
    android:topRightRadius="integer"
    android:bottomLeftRadius="integer"
    android:bottomRightRadius="integer" />

ring

shape根元素有些属性只适用于ring类型,以下这些属性:

android:innerRadius 内环的半径
android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径,默认为3,表示内环半径为环的宽度除以3,该值会被android:innerRadius覆盖
android:thickness 环的厚度
android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,默认为9,表示环的厚度为环的宽度除以9,该值会被android:thickness覆盖
android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="9"
    android:useLevel="false">
    <gradient
        android:endColor="#2F90BD"
        android:startColor="#FFFFFF"
        android:type="sweep" />
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
</shape>
  • 如果想让这个环形旋转起来,变成可用的进度条,则只要在shape外层包多一个rotate元素就可以了

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="1080.0">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false">
        <gradient
            android:endColor="#2F90BD"
            android:startColor="#FFFFFF"
            android:type="sweep" />
    </shape>
</rotate>

图片 8第三种创建shape的方法

<padding>

设置内边距,但是这个内边距什么情况下生效呢?我在shape里面设置了

  • android:left
  • android:top
  • android:right
  • android:bottom

gradient

渐变颜色,有三种类型:linear线性,radial放射性,sweep扫描性。
startColor、centerColor和endColor分别代表开始,结束和中间颜色。
angle是linear的属性,值为45的倍数,表示渐变的角度。
gradientRadius是radial的属性,表示发射的半径,如果type为radial这个值必须设置。
centerX和centerY是radial的属性,表示圆心的位置,默认都为0.5表示圆心在正中央。
useLevel为true时能在LevelListDrawable使用。

<gradient
    android:type=["linear" | "radial" | "sweep"]
    android:startColor="color"
    android:centerColor="integer"
    android:endColor="color"
    android:angle="integer"
    android:gradientRadius="integer"
    android:centerX="float"
    android:centerY="float"
    android:useLevel=["true" | "false"] />

然后会出现以下界面

<gradient>

定义形状的渐变颜色

  • android:type:渐变的类型

    • linear:线性渐变,默认
    • radial:径向渐变,起始颜色为中心的颜色
    • sweep:流线型渐变
  • android:startColor:渐变起始颜色

  • android:endColor:渐变结束的颜色

  • android:centerColor:起始颜色与结束颜色中间的颜色

  • android:angle:渐变的角度。只对线性渐变有效,默认值为0,也就是从左到右渐变,90表示从下到上,而且必须是45的倍数。

  • android:centerX:渐变中心相对于X轴的位置,取值范围是0到1.0

  • android:centerY:渐变中心相对于y轴的位置,取值范围是0到1.0

  • android:gradientRadius:渐变半径,只对于径向渐变类型有用

  • android:useLevel

图片 9第三种创建shape的方法

<stroke>

定义形状的边框

  • android:width:边框的线宽
  • android:color:边框的颜色

如果想实现虚线边框效果,必须同时定义以下两个属性:

  • android:dashGap:虚线之间的间隔
  • android:dashWidth:虚线的宽度

我们只需要把selector改成shape即可

参考资料

Android API
Reference

图片 10第三种创建shape的方法

这就是三种创建shape的方法

shape的常用标签:

corners —-圆角gradient —-渐变padding —–内容离边界距离size
—–大小 solid —–填充颜色stroke —-描边

需要注意的是:corners的属性:bottomLeftRadius为右下角bottomRightRadius为左下角如果需要四个角的圆角的弧度一样,那么就选择radius属性

图片 11corners的属性

若想要在layout文件中引入shape,则

android:background=”@drawable/shape”

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图