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>



相关文章
|
1月前
|
Android开发 开发者
安卓应用开发中的自定义视图
【9月更文挑战第37天】在安卓开发的海洋中,自定义视图犹如一座座小岛,等待着勇敢的探索者去发现其独特之处。本文将带领你踏上这段旅程,从浅滩走向深海,逐步揭开自定义视图的神秘面纱。
37 3
|
1月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
73 0
|
11天前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
12天前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
25 5
|
1月前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石,它为开发者提供了无限的可能。通过掌握其原理和实现方法,可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程,包括绘制技巧、事件处理以及性能优化等关键步骤。
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
60 10
|
2月前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
44 3
|
2月前
|
前端开发 Android开发 开发者
安卓应用开发中的自定义视图基础
【9月更文挑战第13天】在安卓开发的广阔天地中,自定义视图是一块神奇的画布,它允许开发者将想象力转化为用户界面的创新元素。本文将带你一探究竟,了解如何从零开始构建自定义视图,包括绘图基础、触摸事件处理,以及性能优化的实用技巧。无论你是想提升应用的视觉吸引力,还是追求更流畅的交互体验,这里都有你需要的金钥匙。
|
2月前
|
缓存 搜索推荐 Android开发
安卓应用开发中的自定义View组件实践
【9月更文挑战第10天】在安卓开发领域,自定义View是提升用户体验和实现界面个性化的重要手段。本文将通过一个实际案例,展示如何在安卓项目中创建和使用自定义View组件,包括设计思路、实现步骤以及可能遇到的问题和解决方案。文章不仅提供了代码示例,还深入探讨了自定义View的性能优化技巧,旨在帮助开发者更好地掌握这一技能。
|
2月前
|
前端开发 搜索推荐 Android开发
探索安卓开发中的自定义视图##
【9月更文挑战第6天】 在安卓应用开发的世界里,自定义视图如同绘画艺术中的色彩,它们为界面设计增添了无限可能。通过掌握自定义视图的绘制技巧,开发者能够创造出既符合品牌形象又提升用户体验的独特界面元素。本文将深入浅出地介绍如何从零开始构建一个自定义视图,包括基础框架搭建、关键绘图方法实现、事件处理机制以及性能优化策略。准备好让你的安卓应用与众不同了吗?让我们开始吧! ##