Android 形状图形

秒速五厘米 2022-06-05 04:14 348阅读 0赞

今天我们来一起看看android中一种用来描述形状定义的xml图形文件-shape图形。  
形状图形的定义文件以shape元素为根节点。在我们初始创建好的xml文件中，应该是这个样子的，只有根节点shape。

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

shape是该类型xml文档的根节点，用来描述该形状图形是那种几何图形，下面是shapge节点经常用到的属性说明。  
![这里写图片描述][SouthEast]  
rectangle：矩形，同时也是shape的默认值  
oval：椭圆，此时corners节点会失效的  
line：直线。此时必须设置stroke节点，没有边框可定不会有线的效果，不设置当然会出错了  
ring：圆环

首先让我们呢看下四种不同设置的显示效果。

1.ring

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="15dp" android:thickness="5dp" android:useLevel="false">
        <stroke android:width="1dp"/>
    </shape>

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

2.rectangle

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

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

3.line

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
        <stroke android:width="1dp"/>
    </shape>

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

4.oval

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <stroke android:width="1dp"/>
    </shape>

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

上面是shape四种几何形状类型，下面我们在一一看下shape的子节点都有哪些，分别是做什么用的。

1.corners  
corners是shape的下级节点，它是用来描述四个角的规格定义，如果没有设置，则表示这个形状是没有圆角效果的。它呢又有下面的属性可以让我们设置  
![这里写图片描述][SouthEast 5]

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

当然了设置出来的效果是很难看的，这里写不同的值是想说这些值是可以取不同值的。

2.size  
size是shape的子节点，用来描述形状图形的尺寸大小，如果没有size节点，表示宽高是自适应的。

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <stroke android:width="1dp"/>
        <corners android:radius="5dp" />
        <size android:width="50dp" android:height="50dp"/>
    </shape>

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

width：像素类型，图形的宽度  
height：像素类型，图形的高度

3.solid  
solid是shape的子节点，用来描述形状图形的内部填充色。如果没有solid节点，表示无填充色。  
它的属性就一个color：颜色类型，内部填充的颜色。

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

4.stroke  
stroke是shap的子节点，用来描述形状图形四周边线的规格定义。如果没有stroke节点，则表示不存在描边。  
![这里写图片描述][SouthEast 9]

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

5.padding  
用来描述形状图形与周围视图的间隔大小。如果没有padding节点，表示于四周不设间隔。  
常用属性：  
bottom：与下边的距离  
top：与上边的距离  
left：与左边的距离  
right：与右边的距离

让我们先来看看不设padding的显示效果：

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

布局代码：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" tools:context="com.easygoing.androidshapes.MainActivity">
    
        <TextView android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/tv_shape_drawable" android:text="Hello World！" />
    
    </LinearLayout>

显示效果：  
![这里写图片描述][SouthEast 11]

然后我们加padding

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <stroke android:width="1dp"/>
        <padding android:top="10dp" android:right="10dp" android:left="10dp" android:bottom="10dp"/>
    </shape>

显示效果如下：  
![这里写图片描述][SouthEast 12]

6.gradien  
用来描述形状内部颜色的渐变定义。如果没有gradien节点，表示没有渐变效果，下面是gradien的常用属性说明

angle：整形，渐变的起始角度。为0时表示时钟的九点位置，值变大的时候表示朝着逆时针方向旋转。  
值为90时表示时钟的6点位置，180：3点钟位置 270：0/12点钟位置

type：渐变类型，常用的有下面三种  
\*linear：线性渐变，默认值  
\*radial：放射渐变，其实颜色是圆心颜色  
\*sweep：滚动渐变，即一个线段以某个端点为圆心做360度旋转

centerX:圆心X坐标， type=linear时不可用  
centerY:圆心Y坐标，type=linear时不可用  
gradientRadius：渐变的半径，当type=radial时需要设置该属性  
centerColor：渐变的中间色  
startColor：渐变的起始颜色  
endColor：渐变的终止颜色  
useLevel:值为true时表示无渐变色，false时有渐变色

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:useLevel="false" android:innerRadius="80dp" android:thickness="10dp">
      <gradient android:useLevel="false" android:type="sweep" android:startColor="#6BD3FF" android:centerColor="#FF7121" android:centerY="0.50" android:endColor="#FFFF00"/>
    </shape>

显示效果：  
![这里写图片描述][SouthEast 13]

当然这里我修改了下页面布局来显示这个效果��

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" tools:context="com.easygoing.androidshapes.MainActivity">
    
        <TextView android:layout_width="200dp" android:layout_height="200dp" android:layout_gravity="center" android:gravity="center" android:background="@drawable/tv_shape_drawable" android:text="Hello World！" />
    
    </LinearLayout>

[SouthEast]: /images/20220605/7f34737495d6448e8ba7eb26acd8717e.png
[SouthEast 1]: /images/20220605/3cd13bcfeae5408ab73db46afd16aa61.png
[SouthEast 2]: /images/20220605/d61bf683ceca4494af440208d62951ce.png
[SouthEast 3]: /images/20220605/d879ae5f6aef45fc841d1e604f7bf73d.png
[SouthEast 4]: /images/20220605/10f1e302a834407a9ce4039e74cedf40.png
[SouthEast 5]: /images/20220605/bd41b9ea9fa8404b8af231b0effc647e.png
[SouthEast 6]: /images/20220605/704a04c4ffd84c2680969c6da6def80e.png
[SouthEast 7]: /images/20220605/0a2e8a501832456885b4665f50b33215.png
[SouthEast 8]: /images/20220605/ed670acf30db43d7ba618767d8657cb7.png
[SouthEast 9]: /images/20220605/c8ca3f85a2924ca980efc3a7a12c07e0.png
[SouthEast 10]: /images/20220605/feab68edb0eb450b9e94c4b3688bb7af.png
[SouthEast 11]: /images/20220605/8193ecacda0f4844945654c592e3a036.png
[SouthEast 12]: /images/20220605/a469a8c4ac0a4e7f8342e57cd34bc56e.png
[SouthEast 13]: /images/20220605/16c126ec91c345f8a6b4b7b498e26ce7.png