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>



相关文章
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
744 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量,结合`PathEffect`的子类(如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等)实现路径绘制的动态变化。文章详细解析了各子类的功能与参数,并通过案例代码展示了如何使用`ComposePathEffect`组合效果,以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动,源码附于文末供参考。
254 0
|
Android开发 开发者
Android自定义view之利用drawArc方法实现动态效果
本文介绍了如何通过Android自定义View实现动态效果,重点使用`drawArc`方法完成圆弧动画。首先通过`onSizeChanged`进行测量,初始化画笔属性,设置圆弧相关参数。核心思路是不断改变圆弧扫过角度`sweepAngle`,并调用`invalidate()`刷新View以实现动态旋转效果。最后附上完整代码与效果图,帮助开发者快速理解并实践这一动画实现方式。
298 0
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
273 0
|
10月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
279 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
525 65
Android自定义view之网易云推荐歌单界面
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程,涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现(如通过三个构造函数解决焦点问题),接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例,如跑马灯、折线图、太极图等。此外,文章详细解析了View绘制流程(measure、layout、draw)和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题,并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
949 84
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下,传统View可能引发卡顿的问题,进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法,包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
347 3
|
Android开发 开发者
Android自定义view之围棋动画(化繁为简)
本文介绍了Android自定义View的动画实现,通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画,借助布尔值控制动画流程。第二个案例以围棋动画为例,从简单的小球直线运动到双向变速运动,最终实现循环动画效果。代码结构清晰,逻辑简明,展示了如何化繁为简实现复杂动画,帮助读者拓展动态效果设计思路。文末提供完整源码,适合初学者和进阶开发者学习参考。
240 0
Android自定义view之围棋动画(化繁为简)
|
Java Android开发 开发者
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景,到创建固定棋子及动态棋子,最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长,并优化视觉效果,如添加渐变色让白子更明显。最终效果既可作为围棋动画展示,也可用作加载等待动画。代码完整,适合进阶开发者学习参考。
306 0

热门文章

最新文章