ithuangqing-Android样式开发之shape详细使用

阳光穿透心脏的1/2处 2021-09-14 11:54 276阅读 0赞

> **授人以鱼不如授人以渔：本篇文章不仅告诉你如何使用shape，更会告诉你初学shape该怎么学习？希望对你有用！**

说明：什么是shape呢？有什么用呢？我们平常在开发当中，通常会遇到这样的情况，就是会给控件增加一个背景，比如button，textview等！可以说shape就是一个形状定义工具。是xml绘图当中非常重要的一个工具，这样说你可能还是不太理解，那么我们就用实例来说明。你可能见过这样的的登录界面。

![这里写图片描述][SouthEast]

我们知道以上三个控件一般是两个EditText和一个Button，这个我们都会，但是你却发现上面的控件是有形状的，而且这个button还是有背景色的，你说可以给button设置背景色啊，但是你发现没，他这个背景色还不是纯色而是渐变的，这样的效果该怎么实现呢？你可能会说找一个这样的图片当背景，这倒是一种办法，但是这样不仅会增加apk的大小，而且实现起来也不一定就是这样的效果，其实要实现这样的效果，最好的方法就是使用shape。

# 以画矩形为例深入讲解shape #

下面我先用shpae实现上面button按钮的效果让大家看一下。

![这里写图片描述][SouthEast 1]

怎么样？还是比较相似的吧，至少效果我们实现了，可能在颜色的细节上还有些许出入，不过这个不是重点，重点是这样的效果是可以用shape完美实现出来的，下面我们来看下代码：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"; android:shape="rectangle" >
    
    
    
    
    <size android:width="600dp" android:height="100dp"></size>
    
    
    <corners android:radius="50dp"></corners>
    
    
    <gradient android:startColor="#6fd99d" android:centerColor="#63cfc3" android:endColor="#57c5e9"></gradient>
    
    
    </shape>

代码也是很简单的，这里使用到了shape的三个特性。好了到这里我已经简单介绍shape的作用以及用法，但是shape能做的可远远不止这些，下面就让我们正式开始学习吧！

首先你需要明白：使用shape一般是用来定义形状的，可以在xml上绘图，意思就是shape的表现形式就是一个xml文件，这个xml文件一般是放在drawable文件目录下，然后可以直接引用作为控件的背景。那么如何定义这样的一个xml文件呢？

在你项目的drawable目录上右击新建Drawable resource file，这代表新建一个可绘制图形资源，你会得到如下代码文件。

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

这里我们使用的是shape而不是selector（以后会讲到）,所以我们将selector换成shape。

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

这样我们就得到了一个shape的xml文件了，我们之前说过了，shape是用来定义形状的，那么它可以定义哪些形状呢？分别有如下几种形状

![这里写图片描述][SouthEast 2]

1. rectangle--矩形，总觉得这个用的比较多
    2. line---线，这个只能是水平的，不能定义竖直的。
    3. oval---椭圆，我们一般是定义一个正圆。
    4. ring---圆环，可以定义加载控件。

这是shape可以定义的几种形状，而且他们都离不开如下几种特性（我用导图整理了一下，方便查看）

![这里写图片描述][SouthEast 3]

以上就是shape的六种特性了，可以说，学习shape就是学习以上六种特性。下面我将一步一步的讲解以上六种特性的使用以及实现效果，我开篇也说了，这篇文章不仅教大家如何使用shape，更会告诉初学者如何学习shape，那学习shape的关键在哪呢？那就是你一定要动手实践，自己写代码看看效果。

我们知道了shape可以定义哪些形状，也知道了shape的六种核心特性，哪接下来我们就看看如何使用吧！

首先，我们以最常用的rectangle为例来讲解以上特性的使用，这个时候你就需要在shape的根元素指定你要绘制的shape类型，如下：

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

我们这里就以开篇提到的那个button按钮的效果来实例操作一下，首先你要明确我们是利用shape来给button按钮绘制一个背景，所以我们先要定义这个背景的宽和高，这用到shape的哪个特性呢？（如果忘记都有哪些特性，可以浏览之前给的那张导图，建议下载下来，对照查看），我们可以看到在shape的特性当中有一个size，对这就是用来定义我们所要绘制图形的大小了，那我们来实际操作一下吧！

<size android:width="600dp" android:height="100dp"></size>

这行代码意思是定义一个宽高比例为6：1的矩形（宽高比例视需求而定），这个时候你可能看不到任何效果，因为背景色是没有的，这个时候就需要使用另外一个特性了—solid，我们使用这个特性来为我们绘制的图形填充颜色，代码如下:

<solid android:color="@color/colorPrimary"></solid>

如此一来我们就实现了这样的效果：

![这里写图片描述][SouthEast 4]

我们看最终效果发现矩形的四个角都是圆形的，这就要使用shape的coeners了，我们设置代码如下：

<corners android:radius="50dp"></corners>

以上代码是给我们要绘制的图形的四个角设置一个统一的圆角半径，我们看效果

![这里写图片描述][SouthEast 5]

好了，这里我们要实现的最终效果越来越近了，现在就是颜色的问题，我们使用solid只能给图形填充纯色背景，要想达到最终效果的渐变，我们需要使用到shape的gradient特性了，这个特性可以设定的属性值较多，我们先从简单的设置渐变色来开始学习。

<gradient android:startColor="#6fd99d" android:centerColor="#63cfc3" android:endColor="#57c5e9"></gradient>

以上代码用到了gradient的三个属性值：startColor，centerColor，endColor。这三个属性很好理解，分别是渐变开始，中间和结束的颜色，我们来看效果。

![这里写图片描述][SouthEast 6]

为了让你更加清楚startColor，centerColor，endColor这三个属性的作用，我们采取开始颜色为黑色，中间颜色为红色以及结束颜色为蓝色的渐变。

<gradient android:startColor="#0b0b0b" android:centerColor="#f10909" android:endColor="#067fe2"></gradient>

![这里写图片描述][SouthEast 7]

如此一来你对这个渐变三种夜色的过度应该很清楚了吧！接下来我们看看如何引用我们绘制好的shape吧！

此处的tv\_bg就是我们绘制的shape文件的名称。效果如下

![这里写图片描述][SouthEast 8]

# shape六种特性的详解 #

> 现在我们来稍微小结一下，在实现上述效果的过程中，我们使用到了shape的size，solid，corners以及gradient特性，我们在之前也说过，shape一共有六个特性需要我们学习，这里只使用到了其中的四个，为了方便大家学习，我将六种特性的含义解释分类如下：

## size—-定义形状的宽高 ##

![这里写图片描述][SouthEast 9]

## solid—-定义形状的背景填充色 ##

![这里写图片描述][SouthEast 10]

## corners—-设置形状四个角的圆角大小 ##

![这里写图片描述][SouthEast 11]

注意：如果使用radius属性会统一设置四个角的圆角大小，单独设置会覆盖radius的效果。

## gradient—-设置形状背景色的渐变（一共有九个属性） ##

在学习这个特性之前，我们要清楚这个渐变包含三种类型，一种是linear表示线性渐变，一种是放射性渐变还一种是扫描性渐变，由于这块比较复杂，我将gradient特性的各个渐变类型对应的属性值用导图整理了一下。

![这里写图片描述][SouthEast 12]

下面看各个渐变类型的效果图（我们画的依然是矩形）

### 线性渐变 ###

![这里写图片描述][SouthEast 13]

### 放射性渐变 ###

![这里写图片描述][SouthEast 14]

## stroke—-给形状设置描边 ##

![这里写图片描述][SouthEast 15]

## padding—-设置以此形状为背景的内容距形状四周的内边距。 ##

![这里写图片描述][SouthEast 16]

以上以画矩形为例借助图例的形式详细的将shape的六种特性的使用演示了一遍，现在我们来做个总结：

首先shape可以画三种类型的图形，分别是rectangle–矩形，oval–椭圆（一般用来画圆）,ring–环形.

无论是画哪一种形状，都是要使用到我们上诉说的六种特性，分别是size，solid，corners，gradient，stroke，padding。只不过画某一种形状可能只用到六种特性中的部分特性，只要我们掌握了这六种特性，无论画哪一种形状应该都是毫无压力的。

# 椭圆 #

以上我们都是以画矩形为例详细介绍了六种特性的使用方式，对于椭圆和环形都是大同小异，非要说不同的话，环形有一些特殊的属性值需要我们学习，接下来，我们以画椭圆为例，介绍如何使用shape。

首先更改shape的根元素将shape的值改为oval。

android:shape="oval"

我们之前也说了，使用shape画oval我们一般就是用来画正圆比较多，所以我们可以将size特性的属性值宽高比例设为1：1即可。

<size android:width="1dp" android:height="1dp"></size>

我们看下效果

![这里写图片描述][SouthEast 17]

在绘制圆形的时候渐变用到的是比较多的，这里我们就主要介绍下在画圆中关于渐变的使用。

首先我们看第一种渐变类型–线性渐变且倾斜角度为0

我们首先看下效果。

![这里写图片描述][SouthEast 18]

代码如下

<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2" android:angle="0" android:type="linear" ></gradient>

这里如果你不指定渐变的类型，则其默认的渐变方式就是线性渐变且倾斜角度为0.

我们再来看下倾斜角度为90的线性渐变

![这里写图片描述][SouthEast 19]

你们要与倾斜角度为0的进行对比以属性angle属性的使用，下面我们再来看下另外一种渐变类型，那就是放射性渐变。  
![这里写图片描述][SouthEast 20]

这里需要注意一点，有的人可能得不到这样的效果，为什么呢？我们先来看下我的代码

<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2" android:angle="0" android:type="radial" android:gradientRadius="0.5dp" android:centerX="0.5" android:centerY="0.5" ></gradient>

知道你们注意到没我这里的gradientRadius设置的是0.5dp，你们一不小心设置成大于1的话就会出现这样的效果。

![这里写图片描述][SouthEast 21]

这是为什么呢？其实我这里为了说明一个问题给大家挖了一个坑，我们在之前设置圆形的size的时候还记得是怎么设置的吗？我当时说只要宽高比例为1：1就会得到一个正圆，于是我是这样写的代码。

<size android:width="1dp" android:height="1dp"></size>

看到没，我将宽和高都设置成了1dp，这样导致什么结果呢？我们要知道gradientRadius是用来设置放射的半径的，如果我们设置的参数大于1dp（要注意我们的正圆宽高才1dp）就会超过我们的正圆大小，这样就得不到我们想要的放射性渐变的效果了，所以这点要注意gradientRadius的属性值要根据设置的size的大小来设定。

我们子啊之前介绍画矩形的时候说到过，渐变的类型是有三种的，除了以上说的还有一种扫描型渐变，为什么在画矩形的时候没有介绍呢？因为我觉得在画圆形的时候看扫描型渐变才会更加直观，我们来做个测试，在矩形中的扫描型渐变是这个样子的。

![这里写图片描述][SouthEast 22]

第一次看可能你对什么是扫描型渐变可能还不太理解，下面我们看在圆形中的扫描型渐变。

![这里写图片描述][SouthEast 23]

怎么样，是不是有点明白了，其实扫描型渐变就是以图形中心为点从右侧水平线开始逆时针旋转依次历经开始的颜色，中间的颜色和结束的颜色。代码如下。

<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2" android:type="sweep" android:centerX="0.5" android:centerY="0.5" ></gradient>

好了，以上介绍了画椭圆的一些使用方法，这里你可能会发现，我并没有想之前介绍画矩形的时候那么详细把每一个特性的属性值什么意思怎么用都说了一遍，因为无论画什么这些属性表达的都是一个意思，关键在于适不适合在当前你绘制的图形中使用。

# line–线 #

我们说了shape可以绘制四种形状，我们以上讲了矩形和椭圆，接下来讲解下一个line–线型。

画线的时候主要用到了size和stroke，也就是靠这两个特性才会显示线，而且要注意使用size的时候只能画高，不要画宽。

我们看下代码。

<size android:height="20dp"></size>
    
    
    <stroke android:color="#ef0b0b" android:width="1dp" android:dashGap="20dp" android:dashWidth="32dp" ></stroke>

以上代码实现的效果如下。

![这里写图片描述][SouthEast 24]

# ring–环 #

画线的时候没有像画矩形或者圆的时候那么麻烦，用到的属性也没那么多，相对而言还是比较简单的，下面让我们继续，继续学习最后一个形状ring–环型。

为什么要最后一个来将ring呢？因为它还是有点特殊的，我们子啊之前写代码的时候对于shape的根元素我们只写了这么一个属性。

就是指定我们要画的图形的类型的，但是对于shape的根元素还是可以设置一些特殊元素的，而这些元素只适用于ring，下面一起来看下吧！

* android:innerRadius 设置内环的半径
    * android:innerRadiusRatio 以环的宽度比率来表示内环的半径，这个值默认为3，表示内环半径为环的宽度除以3，但是这个值会被android:innerRadius给覆盖
    * android:thickness 环的厚度
    * android:thicknessRatio 以环的宽度比率来表示环的厚度，这个值默认为9，表示环的厚度为环的宽度除以9，同样这个值会被android:thickness覆盖
    * android:useLevel 一般为false，否则可能环形无法显示，只有作为LevelListDrawable使用时才设为true

我们先来看下效果图吧。

![这里写图片描述][SouthEast 25]

代码如下。

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"; android:shape="ring" android:innerRadiusRatio="3" android:thicknessRatio="9" android:useLevel="false" >
    
    
    
    
    <size android:height="10dp"></size>
    
    
    <gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2" android:type="sweep" android:centerX="0.5" android:centerY="0.5" ></gradient>
    
    
    <stroke android:color="#151515" android:width="1dp" android:dashGap="20dp" android:dashWidth="32dp" ></stroke>
    
    </shape>

大家在使用ring画圆环的时候可能对那几个特有的元素不是太清楚，这里重点说下这几个属性。

![这里写图片描述][SouthEast 26]

大家在使用ring的这些特殊属性的时候参照我给的这个图（虽然有点丑）可能有助于你理解，尤其是innerRadiusRatio和thicknessRatio这两个属性。

到此我们已经将Android中关于shape的使用全部讲解完成了，现在来个大总结吧！首先shape是用来进行xml绘制图形的，可以给一些控件设置背景来达到我们想要的效果，shape其实就是一个xml文件，一般放在我们项目中的drawable文件目录下，使用shape可以画四种图形分别是矩形（常用）,椭圆（一般用来画正圆）,直线和环形。无论是画哪一种图形都离不开shape的六种特性，只要掌握这六种特性的使用方法就可以掌握各种图形的绘制，区别就在于不同的特性适不适合当前所绘制的图形（这句话是重点，圈起来要考）,关于ring-画环形这块它有一些特殊的属性，结合文中我给出的图掌握起来难度也不大，好了，再放出这非常重要的六种特性吧！

![这里写图片描述][SouthEast 27]

只要熟练掌握上图给出的shape的各个特性的使用方法，接下来就可以自己探索去绘制出一些别出心裁的图形了！

开篇我们提到，这篇文章不仅告诉你如何使用shape，更会告诉你如果是新手该如何学习shape，本片文章到这也就结束了，不知道你学会了没有，我不知道你是怎么看这篇文章的，如果你真想学会如何使用shape，我建议你在看本片文章的时候一定要跟着文中提到的步骤去亲自实现那些效果，也就是说，你一定要亲自上手实践，要记住只看不动手是学不会的，另外大家在学shape的时候可能也发现了，shape其实就是各种属性的应用，只要掌握了这些属性也就没什么难度了，但是如何去学些这么多的属性呢？我这里给大家一个方法，比如shape最为复杂的一个特性就是渐变—gradient

![这里写图片描述][SouthEast 28]

我们写出这个特性会发现它有很多属性，这个时候一般人看到就会感到很难，这都是什么意思啊？刚接触都会这样，不管你怎么想，这个时候你最重要的做法就是把这些属性一个一个的去尝试，去设置看看有什么效果，这会让你对这些属性的掌握非常牢固，增加你的印象，当你一个个的去尝试去设置最终掌握的时候，你会有种极大的满足感，不信你试试！

说明：本篇为Android中样式开发的第一篇，接下来会有一个系列，主要就是讲解Android中样式的开发的，这个系列力求详细，尤其对于新手是很好的学习样式开发的系列教程，当然在编写文章教程的时候难免会出现一些问题，还请各位给予指正，力求达到完美，做到真正对学习样式开发有帮助！谢谢大家，欢迎交流！

关注公众号一起交流学习！—一个自学的程序员！

![这里写图片描述][SouthEast 29]

[SouthEast]: /images/20210813/ca0c1270f0e641ca94284b5d4c9af1da.png
[SouthEast 1]: /images/20210813/46d81af3b72f4638987ea18dd0df6994.png
[SouthEast 2]: /images/20210813/aeb3e003bd994c0e87e7e78dfcb3a5a2.png
[SouthEast 3]: /images/20210813/feca0e8804f646d68c6a641765ca18d3.png
[SouthEast 4]: /images/20210813/94c6c0791b6a4637abb940c247554454.png
[SouthEast 5]: /images/20210813/f35c8388408a4e018b16f993a3d8bacf.png
[SouthEast 6]: /images/20210813/a2d7db6c57ae4398b0beac0f82dbe33b.png
[SouthEast 7]: /images/20210813/a3f88ac6d95d4598a02d6326d8a8c1e5.png
[SouthEast 8]: /images/20210813/06ecc6b370fb4c2385292af47cd3d493.png
[SouthEast 9]: /images/20210813/06ee0cb8c40d42d59e2d81a7b07d46b5.png
[SouthEast 10]: /images/20210813/c31b04ce5c284903a2796d46da4cc870.png
[SouthEast 11]: /images/20210813/d2ea4348bf0d4be5b1664e707c01df8d.png
[SouthEast 12]: /images/20210813/f6ed659f38874ad2a24aa3e3f3073e5b.png
[SouthEast 13]: /images/20210813/dcb9158fe6744680a5b2b7576d434fdf.png
[SouthEast 14]: /images/20210813/2ae70fc0f1564cc5a49137b0e0ce756c.png
[SouthEast 15]: /images/20210813/a0eeeae478d34ac299d34e68e65b2df8.png
[SouthEast 16]: /images/20210813/a560b7bee2d64c3cb7202e8ec9181c43.png
[SouthEast 17]: /images/20210813/58b37640fca0468ea0e61a48b9d83e1f.png
[SouthEast 18]: /images/20210813/3c7aa6bee9fa45c6a100fdac61b64c35.png
[SouthEast 19]: /images/20210813/ed1508c782c141d7ac8cc00c1ebfea96.png
[SouthEast 20]: /images/20210813/bd6f991f2e3948ef82ba1eda0df43ba6.png
[SouthEast 21]: /images/20210813/cf1697d3354d460c8a54fad1c845f33b.png
[SouthEast 22]: /images/20210813/02739eb624cd4fceabbdac5f63cf2748.png
[SouthEast 23]: /images/20210813/452ac921d0b14ba788d7ef2c822beb15.png
[SouthEast 24]: /images/20210813/656ebc2bea3641be84238a90dad402ac.png
[SouthEast 25]: /images/20210813/b2f77a91d4a743f7a824c009e8258435.png
[SouthEast 26]: /images/20210813/757485c7c8ee46489b338305f42a6d44.png
[SouthEast 27]: /images/20210813/1124cbe67bc64c50815ceb0541d018b3.png
[SouthEast 28]: /images/20210813/df0aca66dd2c40c4a5028fb6f4944444.png
[SouthEast 29]: /images/20210813/b299faab718f4e32be9aa9acb9b4f4ba.png