Android-Shape搞起来A

作者: MonkeyLei | 来源:发表于2019-07-12 09:34 被阅读124次

Android-Shape搞起来A
Android-Shape
Android-shape属性
Android-Shape标签使用
干起来
一年之计在于春
管他妈的
搞起来搞起来
2019-08-09
弱点

大部分初学者做Android项目基本都是搬效果，搬库，各种搬。基本小点的项目，搬搬也就差不多了。所以一段时候，甚至一年以后或许还是搬。在创业公司穿插做的项目差不多也是比较简单的，所以很少用到自定义的一些背景啥的，基本都是美工提供好图片资源。还有一些像自定义的控件，自定义的动画什么的，用的就更少了。哎！现在回过头来补补...好伐...

不多说了，直接看Shape内部属性: corners、gradient、padding、size、solid、stroke

Shape自身的属性(rectangle、oval、line、ring）

很多时候....我们的shape没有指定rectangle, oval这些属性。因为默认就是rectangle，所以如果没有特别的背景需求，基本就是这个设置。我们就基于rectangle，来看看corners等内部属性...

**corners **圆角为10dp（也可以分别设置四个角的半径...看需求）

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!--<corners                                    //定义圆角-->
    <!--android:radius="dimension"                  //全部的圆角半径-->
    <!--android:topLeftRadius="dimension"           //左上角的圆角半径-->
    <!--android:topRightRadius="dimension"          //右上角的圆角半径-->
    <!--android:bottomLeftRadius="dimension"        //左下角的圆角半径-->
    <!--android:bottomRightRadius="dimension" />    //右下角的圆角半径-->

    <!--搞个颜色，不然光设置圆角看不出来-->
    <solid android:color="#ff3333ee"/>
    <!--全部的圆角半径都是20dp-->
    <corners android:radius="10dp"/>
</shape>

image

是不是感觉没什么。。。其实也没什么，就是没用过，用的少罢了...

**padding **内部间距，这个本身控件也可以设置

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<corners                                    //定义圆角-->
    <!--android:radius="dimension"                  //全部的圆角半径-->
    <!--android:topLeftRadius="dimension"           //左上角的圆角半径-->
    <!--android:topRightRadius="dimension"          //右上角的圆角半径-->
    <!--android:bottomLeftRadius="dimension"        //左下角的圆角半径-->
    <!--android:bottomRightRadius="dimension" />    //右下角的圆角半径-->

    <!--搞个颜色，不然光设置圆角看不出来-->
    <solid android:color="#ff3333ee" />
    <!--全部的圆角半径都是20dp-->
    <corners android:radius="10dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
</shape>

image

更好看了，有没有....

**size **控件大小，这个本身控件也可以设置, 注意：当设置比内容还小的时候，没什么效果的

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<corners                                    //定义圆角-->
    <!--android:radius="dimension"                  //全部的圆角半径-->
    <!--android:topLeftRadius="dimension"           //左上角的圆角半径-->
    <!--android:topRightRadius="dimension"          //右上角的圆角半径-->
    <!--android:bottomLeftRadius="dimension"        //左下角的圆角半径-->
    <!--android:bottomRightRadius="dimension" />    //右下角的圆角半径-->

    <!--搞个颜色，不然光设置圆角看不出来-->
    <solid android:color="#ff3333ee" />
    <!--全部的圆角半径都是20dp-->
    <corners android:radius="10dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
    <size
        android:width="100dp"
        android:height="100dp" />
</shape>

image

**solid **填充颜色，这个就没什么了吧...搞点半透明<solid android:color="#a03333ee" />？

  <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<corners                                    //定义圆角-->
    <!--android:radius="dimension"                  //全部的圆角半径-->
    <!--android:topLeftRadius="dimension"           //左上角的圆角半径-->
    <!--android:topRightRadius="dimension"          //右上角的圆角半径-->
    <!--android:bottomLeftRadius="dimension"        //左下角的圆角半径-->
    <!--android:bottomRightRadius="dimension" />    //右下角的圆角半径-->

    <!--搞个半透明颜色，不然光设置圆角看不出来-->
    <solid android:color="#a03333ee" />
    <!--全部的圆角半径都是20dp-->
    <corners android:radius="10dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
    <size
        android:width="100dp"
        android:height="100dp" />
</shape>

image

**stroke **这是描边属性，可以定义描边的宽度，颜色，虚实线等，比如我们头像外面加一个边框？再比如有个控件的父布局添加一个描边边框作为该控件的外边框？

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<corners                                    //定义圆角-->
    <!--android:radius="dimension"                  //全部的圆角半径-->
    <!--android:topLeftRadius="dimension"           //左上角的圆角半径-->
    <!--android:topRightRadius="dimension"          //右上角的圆角半径-->
    <!--android:bottomLeftRadius="dimension"        //左下角的圆角半径-->
    <!--android:bottomRightRadius="dimension" />    //右下角的圆角半径-->

    <!--搞个颜色，不然光设置圆角看不出来-->
    <solid android:color="#a03333ee" />
    <!--全部的圆角半径都是20dp-->
    <corners android:radius="10dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
    <size
        android:width="100dp"
        android:height="100dp" />
    <!--加一个外边框-->
    <stroke android:width="2dp"
        android:color="#ff66aa44"/>
</shape>

image

虚线试下 , 注意 dashWidth指的是每条虚线的长度哟....

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<corners                                    //定义圆角-->
    <!--android:radius="dimension"                  //全部的圆角半径-->
    <!--android:topLeftRadius="dimension"           //左上角的圆角半径-->
    <!--android:topRightRadius="dimension"          //右上角的圆角半径-->
    <!--android:bottomLeftRadius="dimension"        //左下角的圆角半径-->
    <!--android:bottomRightRadius="dimension" />    //右下角的圆角半径-->

    <!--搞个颜色，不然光设置圆角看不出来-->
    <solid android:color="#a03333ee" />
    <!--全部的圆角半径都是20dp-->
    <corners android:radius="10dp" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
    <size
        android:width="100dp"
        android:height="100dp" />
    <!--加一个外边框-->
    <!--虚线间隔 dashGap-->
    <!--虚线宽度-本质上应该理解为长度 dashWidth-->
    <stroke android:width="2dp"
        android:dashGap="1dp"
        android:dashWidth="5dp"
        android:color="#ff66aa44"/>
</shape>

image

**gradient **渐变，这个就是比较酷的一个属性。很多时候美术需要的带渐变的纯颜色的按钮我们自己shape就可以做，而且你只需要渐变的属性如何对应美工提供的属性即可?

属性说明（我们大概知道渐变类型type, 渐变角度，渐变的中心点，渐变起始和终止颜色，基本上就能满足需求了！）：

  <gradient 
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变  
    android:angle="integer"     //渐变角度(只有线性渐变有效)，必须为45的倍数，0为从左到右，90为从上到下  
    android:centerX="float"     //渐变中心X的相当位置，范围为0～1  
    android:centerY="float"     //渐变中心Y的相当位置，范围为0～1  
    android:startColor="color"   //渐变开始点的颜色  
    android:centerColor="color"  //渐变中间点的颜色，在开始与结束点之间  
    android:endColor="color"    //渐变结束点的颜色  
    android:gradientRadius="float"  //渐变的半径，只有当渐变类型为radial时才能使用  
    android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果

比如我们作为新手，一开始也不是很熟悉渐变的使用，对渐变的理解也不熟悉的情况下怎么办？起始我们看美工给的设计图就好了，比如：

渐变类型 linear , 渐变角度90度（这个地方需要注意，美术给的90度，但是实际到了Android的shape里面对应的是180，这个是我实际调试的时候发现的？可能不同渲染引擎有所区别），渐变原点（对于线性渐变无效）(0, 1)，渐变起始颜色#f2b726, 渐变终止颜色#f5c940，圆角角度2px(我们就当是2dp)

image

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--全部的圆角半径都是2dp-->
    <corners android:radius="2dp" />
    <gradient
        android:angle="180"
        android:centerX="0"
        android:centerY="1"
        android:endColor="#f5c940"
        android:startColor="#f2b726"
        android:type="linear" />
</shape>

image

目前线性渐变用的比较多，基本上好多个项目都是这个。

放射性渐变(必须有android:gradientRadius="100"参数方可有效)也可以，不过得美术单独重新提供相关参数（我们自己改改看也行）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--全部的圆角半径都是2dp-->
    <corners android:radius="2dp" />
    <gradient
        android:endColor="#f2b726"
        android:startColor="#f5c940"
        android:type="radial"
        android:gradientRadius="100"/>
</shape>

image

扫描渐变差不多，就不说了。

特别说明： android:centerX与android:centerY

centerX、centerY两个属性用于设置渐变的中心点位置，仅当渐变类型为放射渐变时有效，类型为分数或小数，不接受Dimension。默认值是0.5，有效值是0.0~1.0，超出该范围后会看不出渐变效果。centerX、centerY的取值其实是宽和高的百分比；

所以美工如果给了线性渐变，但是给了渐变原点坐标，对于程序来讲很难通过shape的方式去实现和设计一样的效果。只能换种渐变方式....

到这里渐变内部的基本属性就差不多，妥妥的够用了。。。搞个selector都没问题了。以后就可以自定义按钮效果了，不用老是去搬人家的。。。

接下来看下shape自己的属性吧。有时候自己的属性还是挺有用的？

Shape的属性（rectangle、oval、line、ring）矩形，还有椭圆形，线形和环形

下面的属性只有在android:shape="ring时可用：  
android:innerRadius         尺寸，内环的半径。  
android:innerRadiusRatio    浮点型，以环的宽度比率来表示内环的半径，  
android:thickness           尺寸，环的厚度  
android:thicknessRatio      浮点型，以环的宽度比率来表示环的厚度，例如，如果android:thicknessRatio="2"，  
android:useLevel            boolean值，如果当做是LevelListDrawable使用时值为true，否则为false.

注意： 在shape为椭圆时，那corners标签就不会有效果

***oval ***- 要调节具体的效果，只能通过控件宽高来调整 -- 对应图形：（控件大小的矩形所对应的椭圆）：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:angle="180"
        android:centerX="0.7"
        android:centerY="0.4"
        android:endColor="#3a91fd"
        android:startColor="#28b3ff"
        android:type="linear"/>
</shape>

image

***line ***- 什么都没看见，擦，怎么玩? 回头我去看官方..

**ring **- 看我效果图说明即可，图糙了点，但是还是清楚的，就那么几个属性，了解清楚即可

image

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="5dp"
    android:thickness="20dp"
    android:useLevel="false">
    <solid android:color="#ff00ff"/>
</shape>

基本上shape可以了，或许还有一些地方没接触或者深入，有点话我们再补上就行。作为新手，我们需要慢慢补知识....