Android 自定义样式Shape

简介: Android 自定义样式Shape

渐变、圆、椭圆、边框


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


实心圆


2019122615564157.png


代码如下:


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


空心圆


20191226160558368.png


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


实心圆带边框


20191226160810645.png



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


空心椭圆


20191226161112611.png


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


实心椭圆


20191226161330588.png


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


带边框的椭圆


20191226161447437.png


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


圆角矩形


20191226161647890.png


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


圆角边框背景


20191226162119215.png


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


渐变背景


20191226161842938.png


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


拓展


感叹号

20191226162259488.png


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


指纹


20191226162505823.png


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


错误


20191226162629213.png


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



相关文章
|
24天前
|
XML Java Android开发
Android实现自定义进度条(源码+解析)
Android实现自定义进度条(源码+解析)
51 1
|
4月前
|
XML Android开发 数据安全/隐私保护
Android 自定义开源库 EasyView
Android 自定义开源库 EasyView
|
4月前
|
XML Java Android开发
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
Android Studio App开发中改造已有的控件实战(包括自定义支付宝月份选择器、给翻页栏添加新属性、不滚动的列表视图 附源码)
42 1
|
4月前
|
XML 搜索推荐 Java
Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战(附源码 简单易懂)
Android App开发之自定义图形中位图与图形互转、剪裁图形内部区域、给图形添加部件的讲解及实战(附源码 简单易懂)
33 0
|
4月前
|
XML 前端开发 Java
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
Android Studio App自定义控件中自定义视图的绘制讲解及实战(附源码 包括自定义绘制各种图形)
37 1
|
3天前
|
移动开发 Java Unix
Android系统 自动加载自定义JAR文件
Android系统 自动加载自定义JAR文件
21 1
|
3天前
|
Shell Android开发 开发者
Android系统 自定义动态修改init.custom.rc
Android系统 自定义动态修改init.custom.rc
23 0
|
3天前
|
存储 安全 Android开发
Android系统 自定义系统和应用权限
Android系统 自定义系统和应用权限
19 0
|
4月前
|
XML API Android开发
Android 自定义View 之 圆环进度条
Android 自定义View 之 圆环进度条
|
28天前
|
Android开发
Android 开发 pickerview 自定义选择器
Android 开发 pickerview 自定义选择器
12 0