Android shape学习记录

目前从事的工作Android开发一直断断续续，更多的是更新、修改、维护目前已经上线的App。这段时间也一直在做h5混合开发的app。闲下来，发现自己android基础还是很差的，所以难瘦香菇。然而并没有什么卵用，想想生活还要继续，好吧，那就找点东西学一下咯，顺便恶补一下android基础。

想想从14年末开始接触、学习android，现在已经有快两年的时间，居然想不起，自己到底学了什么，还有什么比这跟悲伤的么。恩，不行，得做些改变。罗胖在做《时间的朋友》跨年演讲中说：“做一件有价值的事,一直做,然后等待时间的回报”，好吧，那就从写博客开始吧，就当做是自己学习的记录，也方便以后查阅，复习。

就从Drawable Shape开始：

官方的定义：This is a generic shape defined in XML.（额，好像单词还挺简单的，好像大意是“XML定义的通用图形”，对于一个英语渣渣来说，没什么比看英语文档更痛苦的了。）

   FILE LOCATION:res/drawable/filename.xml没错，文件必须存放在res下的drawable目录下（如果默认不存在，就创建一个）

翻阅一下官方api文档，找到以下代码段，这应该就是shape 定义的所有要素了，那就逐个看一下。

<?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>

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

定义的类型有四种，分别为：矩形（默认）、椭圆（设置宽高相等就是圆）、水平横线、环形。

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

圆角：radius可同时设置四个角的圆角半径，也可用其他四个属性分别设置。

<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"] />

渐变效果，有三种类型:linear(线性型)、radial(放射型)、sweep(扫描型)

angle 表示渐变角度 需为45的整数倍，0（默认）表示从左到右、90表示从下到上 。

centerX centerY   渐变的中心坐标，在radial、sweep这两种类型中起作用，默认是中心即50%。

startColor、centerColor 、endColor 分别表示渐变的开始颜色、中间颜色、结束颜色。

gradientRadius 渐变半径，当为放射型时需设置该属性，否则会报错（亲测）。

useLevel   Boolean. "true" if this is used as a LevelListDrawable 这个水平有限，不是太懂，有知道的就告诉我一下。




 <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" />

边框：width 边框宽度、color边框颜色、dashWidth虚线中实线端的长度、dashGap虚线中实线间隔长度。

这就完了？？呵呵，你想太多了，好像还有几个shape的属性，其实也快完了，哈哈。

这几个属性只有在环形才需设置

android:innerRadius   内圆半径。

android:innerRadiusRatio内圆半径（相对宽度） 例如设置该属性为5，即圆环内圆半径为宽度的1/5，默认为9，改属性会覆盖innerRadius属性。

android:thickness       圆环宽度

android:thicknessRatio  圆环宽度（相对整个宽度）,与innerRadiusRatio同理，默认为3.

接下来再看看官方给的例子：

shap1.xml

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFF0000"
        android:endColor="#80FF00FF"
        android:angle="45"/>
    <padding android:left="7dp"
        android:top="7dp"
        android:right="7dp"
        android:bottom="7dp" />
    <corners android:radius="8dp" />
</shape></span>

引用

<span style="font-size:18px;"> <TextView
    android:background="@drawable/shap1"
    android:text="效果一"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content" /></span>

 额，这效果，确实挺难看，那就自己练习写两个好看点的效果咯。

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid
        android:color="#2F90BD"></solid>
	<padding 
	    android:top="5dp"
	    android:bottom="5dp"
	    android:left="5dp"
	    android:right="5dp"/>
	<corners
	    android:radius="10dp"></corners>
	<gradient
	    android:type="linear"
	    android:startColor="#80a2d2"
	    android:endColor="#d39952"
	    android:centerColor="#ffffff"
	    >
	</gradient>
	<stroke
	    android:color="#000000"
	    android:width="1dp"
	    android:dashWidth="3dp"
	    android:dashGap="1dp">
	</stroke>
</shape>
</span>

确实比官网的效果好看些

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:innerRadius="35dp"
    android:shape="ring"
    android:thicknessRatio="12"
    android:useLevel="false"
    >
   <solid
        android:color="#2F90BD"></solid>
   <gradient 
        android:type="sweep"
        android:startColor="#2F90BD"
        android:endColor="#ffffff"
    /> 
</shape></span>

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
    android:shape="line" >  
    <stroke  
        android:dashGap="3dp"  
        android:dashWidth="6dp"  
        android:width="3dp"  
        android:color="#63a219" />  
    <!-- 虚线的高度 -->
   <!--android:layerType="software" 4.0以上需在显示该背景的view上设置该属性，才会显示虚线  --> 
       
</shape> </span>

<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <solid
        android:color="#ffffff"></solid>
    <size 
        android:width="50dp"
        android:height="50dp"/>
    <stroke
        android:width="2dp"
        android:color="#000000"></stroke>
    <gradient 
        android:startColor="#ffffff"
        android:endColor="#aaaaaa"
        android:type="radial"
        android:gradientRadius="50"/>
</shape>
</span>