Android Shape类型资源

梦里梦外; 2022-06-02 02:36 193阅读 0赞

文章转自：[https://www.jianshu.com/p/ef734937b521][https_www.jianshu.com_p_ef734937b521]

# 说明 #

在Android开发中，使用shape可以很方便的帮我们画出想要的背景，相对于png图片来说，使用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="integer" android:centerY="integer" 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>

这里面已经列出了所有的shape属性。

--------------------

从 android:shape=\[“rectangle” | “oval” | “line” | “ring”\]  
这里可以看出，shape可以画四种图形，分别是：矩形（rectangle）、椭圆（oval）、线（line）、圆环（ring）。

先上效果图：

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

## 矩形（rectangle） ##

### 直角矩形： ###

solid：填充颜色

### 圆角矩形： ###

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    
        <corners android:radius="10dp"></corners>
    
        <solid android:color="@color/colorPrimary"></solid>
    
        <padding android:bottom="12dp" android:left="12dp" android:right="12dp" android:top="12dp"></padding>
    
    </shape>

corners：圆角大小。

android:radius="integer"
    android:topLeftRadius="integer"
    android:topRightRadius="integer"
    android:bottomLeftRadius="integer"
    android:bottomRightRadius="integer"

android:radius：表示4个角的圆角大小；

还可以分别设置四个角的，使用下面四个属性：android:topLeftRadius、android:topRightRadius、android:bottomLeftRadius、android:bottomRightRadius分别表示：左上、右上、左下、右下。

padding：设置内边距。

### 无填充带边框： ###

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

stroke  
android:width：边框大小  
android:color：边框颜色

### 渐变： ###

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    
        <solid android:color="@color/colorPrimary"></solid>
    
        <padding android:bottom="12dp" android:left="12dp" android:right="12dp" android:top="12dp"></padding>
    
        
        <gradient android:startColor="@android:color/white" android:endColor="@android:color/black" android:angle="0"></gradient>
    </shape>

gradient：  
android:startColor：渐变起始颜色  
android:endColor：渐变结束颜色  
android:angle：渐变角度：0:左到右;90:下到上;180:右到左;270:上到下

## 椭圆（oval） ##

一般用来画圆。

### 纯色的圆： ###

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    
        <solid android:color="@color/colorPrimary"></solid>
    
        <size android:height="100dp" android:width="100dp"></size>
    
    </shape>

size的height和width设置为一样大小就是一个圆了。  
然后直接使用solid填充颜色即可。

### 渐变效果： ###

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    
        <size android:height="100dp" android:width="100dp"></size>
    
        <gradient android:centerX="0.5" android:centerY="0.5" android:type="sweep" android:startColor="@color/colorPrimary" android:endColor="@color/colorAccent"></gradient>
    </shape>

android:centerX：表示渐变的X轴起始位置，范围0-1，0.5表示圆心。  
android:centerY：表示渐变的Y轴起始位置，范围0-1，0.5表示圆心。  
android:type：渐变类型，有三种  
分别是：  
linear 线性渐变，默认的渐变类型  
radial 放射渐变，设置该项时，android:gradientRadius也必须设置  
sweep 扫描性渐变

## 线（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" android:color="@color/colorAccent" android:dashGap="3dp" android:dashWidth="4dp"></stroke>
    
        <size android:height="3dp"></size>
    </shape>

线是居中显示的。  
android:width：填充颜色的高度  
android:dashGap：虚线间距宽度  
android:dashWidth：虚线宽度  
`<size android:height="3dp"></size>`：line的高度，size大小必须大于android:width

## 圆环（ring） ##

android:thickness：圆环宽度

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:useLevel="false" android:thickness="10dp">
        
    
        <solid android:color="@color/colorAccent"></solid>
    
        <gradient android:startColor="@color/colorAccent" android:endColor="@color/colorPrimary" android:type="sweep"></gradient>
    
    </shape>

以上只是简单的介绍了一下shape的用户，里面有很多属性还没有用到，需要大家自己去实践一下，写出来看到效果才能更好的理解。

[https_www.jianshu.com_p_ef734937b521]: https://www.jianshu.com/p/ef734937b521
[SouthEast]: /images/20220602/3265cac3eae94b2d9fb53fa2cb684715.png