Android 自定义样式Shape

2020-09-25 13:38:35 浏览数 (1)

渐变、圆、椭圆、边框

Shape常用于自定义背景样式,通常Android开发中一些背景的样式会由UI给出,但是图片毕竟会占软件内存,所以在实现同样效果的情况下,可以用原生的Shape来编辑背景样式

实心圆

代码如下:

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="#000000"/>

    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

空心圆

代码语言:javascript复制
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">

    <!--<solid android:color="@color/red"/>-->
    <stroke
        android:width="1dp"
        android:color="#E6E6E6" />
    <size
        android:width="24dp"
        android:height="24dp" />
</shape>

实心圆带边框

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#EBFF01"/>

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

    <stroke android:width="2dp"
        android:color="#FFFFFF" />

</shape>

空心椭圆

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <stroke android:color="@color/warning_stroke_color" 
        android:width="@dimen/common_circle_width" />
</shape>

实心椭圆

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
</shape>

带边框的椭圆

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white" />
    <stroke android:color="@color/warning_stroke_color"
        android:width="@dimen/common_circle_width" />
</shape>

圆角矩形

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="7dp"/>
    <solid android:color="#257DF4"/>
</shape>

圆角边框背景

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="0.5dip" 
        android:color="#000000" />
    <corners android:radius="5dp" />
</shape>

渐变背景

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FFFFFF"
        android:endColor="#1391F8"
        android:angle="90"
        />
</shape>

拓展

感叹号

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="8dp" 
        android:left="1dp" android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#F8BB86"/>
            <corners android:radius="4dp"/>
            <size android:height="22dp" 
                android:width="3dp"/>
        </shape>
    </item>

    <item android:top="30dp">
        <shape android:shape="oval">
            <solid android:color="#F8BB86"/>
            <size android:height="5dp" 
                android:width="4dp"/>
        </shape>
    </item>
</layer-list>

指纹

代码语言:javascript复制
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="27dp"
    android:height="27dp"
    android:viewportHeight="54"
    android:viewportWidth="54">
    <path
        android:fillColor="#419BF9"
        android:fillType="evenOdd"
        android:pathData="M27,27m-27,0a27,27 0,1 1,54 0a27,27 0,1 1,-54 0"
        android:strokeColor="#00000000"
        android:strokeWidth="1" />
    <path
        android:fillColor="#FFFFFF"
        android:fillType="evenOdd"
        android:pathData="M32.06,43C31.9989,43 31.9148,42.9858 31.8492,42.9672C29.3088,42.2642 27.6451,41.3221 25.9017,39.607C23.6616,37.3854 22.429,34.4236 22.429,31.2555C22.429,28.6638 24.6364,26.5502 27.3569,26.5502C30.0775,26.5502 32.2848,28.6638 32.2848,31.2555C32.2848,32.9706 33.7751,34.358 35.6124,34.358C37.4541,34.358 38.9399,32.9706 38.9399,31.2555C38.9399,25.2238 33.7423,20.3287 27.3405,20.3287C22.7969,20.3287 18.6375,22.8571 16.7653,26.7751C16.14,28.0732 15.8209,29.5917 15.8209,31.2555C15.8209,32.5021 15.9334,34.4705 16.8941,37.0294C17.0534,37.4509 16.8449,37.9105 16.4302,38.0556C16.013,38.2151 15.5491,37.9946 15.4039,37.5917C14.6212,35.4968 14.2369,33.4159 14.2369,31.2555C14.2369,29.3341 14.6048,27.5908 15.3242,26.0721C17.4519,21.6081 22.1713,18.7118 27.3405,18.7118C34.6189,18.7118 40.5381,24.3287 40.5381,31.2413C40.5381,33.8329 38.3351,35.9422 35.6124,35.9422C32.8941,35.9422 30.6866,33.8329 30.6866,31.2413C30.6866,29.5262 29.1964,28.1343 27.3569,28.1343C25.5174,28.1343 24.0294,29.5262 24.0294,31.2413C24.0294,33.9737 25.084,36.5371 27.0195,38.4541C28.5403,39.9584 29.9978,40.7926 32.252,41.4159C32.6833,41.5284 32.9268,41.9737 32.8143,42.3908C32.7347,42.7609 32.3974,43 32.06,43M35.275,39.7008C33.3722,39.7008 31.6898,39.2227 30.3165,38.2805C27.9314,36.6638 26.5087,34.0393 26.5087,31.2555C26.5087,30.8057 26.8602,30.4541 27.3078,30.4541C27.7576,30.4541 28.1091,30.8057 28.1091,31.2555C28.1091,33.5142 29.262,35.642 31.2117,36.9542C32.3504,37.7227 33.6768,38.0884 35.275,38.0884C35.6593,38.0884 36.3013,38.0416 36.9431,37.9291C37.3745,37.8494 37.7915,38.1354 37.8711,38.5851C37.9508,39.0163 37.6604,39.429 37.215,39.5131C36.3013,39.6866 35.4999,39.7008 35.275,39.7008M23.8046,42.6626C23.596,42.6626 23.3898,42.5829 23.2445,42.4236C21.8526,41.0316 21.1004,40.1365 20.0295,38.2008C18.9236,36.2325 18.3471,33.8329 18.3471,31.2555C18.3471,26.5033 22.4126,22.6321 27.4039,22.6321C32.3974,22.6321 36.4606,26.5033 36.4606,31.2555C36.4606,31.7008 36.1091,32.0569 35.6593,32.0569C35.2139,32.0569 34.8624,31.7008 34.8624,31.2555C34.8624,27.3843 31.5163,24.2326 27.4039,24.2326C23.2936,24.2326 19.9498,27.3843 19.9498,31.2555C19.9498,33.5611 20.4607,35.6889 21.4355,37.4137C22.4618,39.2555 23.1648,40.0382 24.3973,41.2849C24.702,41.6081 24.702,42.1003 24.3973,42.4236C24.2194,42.5829 24.013,42.6626 23.8046,42.6626M13.8057,23.3515C13.6441,23.3515 13.4847,23.3046 13.3417,23.2085C12.9726,22.9509 12.893,22.4564 13.1496,22.0885C14.7336,19.8483 16.7489,18.0885 19.1485,16.856C24.1724,14.2642 30.6026,14.2479 35.6452,16.8395C38.0447,18.0721 40.06,19.8155 41.644,22.0393C41.9018,22.3909 41.8218,22.904 41.4518,23.1594C41.0817,23.4149 40.5895,23.3352 40.3318,22.9672C38.8929,20.9519 37.0698,19.3679 34.9093,18.2642C30.3165,15.9115 24.4442,15.9115 19.8701,18.2784C17.6932,19.4007 15.8682,20.999 14.4291,23.0164C14.3002,23.239 14.0612,23.3515 13.8057,23.3515M36.7042,14.9509C36.5731,14.9509 36.4465,14.9203 36.334,14.8571C33.2598,13.2727 30.6026,12.6005 27.4202,12.6005C24.2521,12.6005 21.2434,13.3524 18.5087,14.8571C18.1244,15.0634 17.644,14.9203 17.4192,14.536C17.2128,14.1517 17.3581,13.657 17.7401,13.4488C20.7161,11.8319 23.9803,11 27.4202,11C30.8275,11 33.8034,11.7522 37.0698,13.4324C37.4683,13.6406 37.6134,14.121 37.4072,14.5033C37.262,14.7915 36.9901,14.9509 36.7042,14.9509"
        android:strokeColor="#00000000"
        android:strokeWidth="1" />
</vector>

错误

代码语言:javascript复制
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="50%" android:pivotY="50%">
            <shape android:shape="rectangle">
                <solid android:color="@color/error_stroke_color"/>
                <corners android:radius="4dp"/>
                <size android:height="3dp" android:width="28dp"/>
            </shape>
        </rotate>
    </item>

    <item>
        <rotate android:fromDegrees="315" android:toDegrees="315" android:pivotX="50%" android:pivotY="50%">
            <shape android:shape="rectangle">
                <solid android:color="@color/error_stroke_color"/>
                <corners android:radius="4dp"/>
                <size android:height="3dp" android:width="28dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

0 人点赞