Android 自定义View 画圆(奥运五环)

简介: Android 自定义View 画圆(奥运五环)

效果图


20200714164251938.png


前言


你会画画吗?你会写代码吗?你会用代码画画吗?


正文


自定义View,实际开发过程中,因为涉及用户体验的时候,UI通常会弄一些骚操作出来,这个时候就有两个选择,你是用GIF呢?还是自己自定义一个呢?用GIF当然会增加你的APP的体积,而自定义View难度也不小,于是很多人都会选择用GIF先解决这个问题,后面再去自己自定义,然后就没有然后了(PS:曾经我也是这样的一个人,但是,人是会变的,小老弟),好了,说了一些废话,下面进入主题,开始画画。


首先思考一个问题,用什么来画?废话,当然是纸和笔啊!那程序里面怎么画画呢?怎么把画出来的图形显示在页面上呢?你会不会思考这些呢?下面一一揭晓,Android中通过 Paint 和 Canvas 来画画,啥玩意儿?我怎么都没有听说过呢?触及到我的知识盲区!开始怀疑人生,我是谁?我在哪?中午吃什么?


Paint


这个就是笔,在Android中也叫画笔,你可以设置画笔的颜色,下面通过表格来看看这个画笔有哪些属性


1665489137047.png


上面也是一部分属性,我怕你没有耐心看完,所以就不写更多了,上面说完了笔,下面该说纸了


Canvas


这个你自己可以理解为纸,在Android中这个叫画布,它又有哪些属性呢?也通过一个表格来说明一下


1665489171381.png


OK,相信你看这个表已经看得不耐烦,(PS:其实我写的也烦了,悄悄地说)迫不及待的想要实践了,下面来实践一下


首先创建一个项目,我取名为PaintDemo,创建好之后,新建一个CustomView.java的文件,然后继承View,实现两个构造方法。如下所示


20200710100730160.png


然后我们在activity_main.xml使用这个Custom,自定义View使用时需要完整的包名路径,如下所示


20200710101418494.png


现在你运行可以运行一下,不管是真机还是模拟器都可以,先确保你的项目没有问题,这样出现问题的时候可以少排查一个因素,这是实际开发总结出来的。不过你运行之后会是一片空白,因为什么都没有。


下面在CustomView写下如下代码


  /**
     * 在纸上画画 (通俗理解)
     * @param canvas  纸
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();//创建画笔对象  笔
        paint.setColor(Color.BLACK);//设置颜色
        paint.setStyle(Paint.Style.STROKE);//画笔样式为空心,也可以理解为描边
        paint.setStrokeWidth(4);//描边的宽度
        paint.setAntiAlias(true);//抗锯齿(去掉锯齿)
        /**
         * 画圆
         * 参数一:圆心的X轴坐标
         * 参数二:圆心的Y轴坐标
         * 参数三:圆的半径
         * 参数四:画笔对象
         */
        canvas.drawCircle(150,150,100,paint);//完成
    }


我相信注释得已经很清楚了,这个时候你运行一下,就会看到一个黑色的空心圆


2020071408503453.png


然后再修改一下代码,画一个实心圆


2020071408524390.png


再运行一下


20200714085338857.png


**canvas.drawCircle(150,150,100,paint);**表示圆心在横坐标和纵坐标都为150的位置,以半径为100画一个圆,可以把这一行代码复制四次,然后改变半径的大小,为了看到效果,还是画空心圆


20200714085901657.png


然后运行一下,就可以看到


2020071409002147.png


是不是觉得有点意思了。平时像这种图案你会自己去画吗?还是找UI切图呢?

刚才我们只是改变了半径而已,下面试着改变横坐标和纵坐标。


我们试着画两个圆挨着,如果是横向挨着就要使一个圆的圆心横坐标位置等于另一个圆的圆心横坐标加上直径的和,刚才我们看到一个横坐标是150,半径是100,那么结果很明显第二个圆的圆心的位置就是350,这次我们不改变半径大小,只改变横坐标试一下


20200714090831237.png


运行结果如下图


20200714090900774.png


接下来运用这个思路来画一个奥运五环吧


20200714092326282.png


运行效果如下图所示


20200714092402326.png


除了没有颜色还是比较像的。你想要改颜色就可以自由改变setColor就可以了。下面改动一下代码


  /**
     * 根据传入的颜色配置不同的画笔
     * @param color 颜色
     * @return
     */
    private Paint customPaint(int color){
        Paint paint = new Paint();//创建画笔对象  笔
        paint.setColor(color);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(8);
        paint.setAntiAlias(true);
        return paint;
    }


然后我们在onDraw中调用


  /**
     * 在纸上画画 (通俗理解)
     * @param canvas  纸
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 画圆
         * 参数一:圆心的X轴坐标
         * 参数二:圆心的Y轴坐标
         * 参数三:圆的半径
         * 参数四:画笔对象
         */
        canvas.drawCircle(150,150,100,customPaint(Color.BLUE));//完成
        canvas.drawCircle(370,150,100,customPaint(Color.BLACK));
        canvas.drawCircle(590,150,100,customPaint(Color.RED));
        canvas.drawCircle(260,250,100,customPaint(Color.YELLOW));
        canvas.drawCircle(480,250,100,customPaint(Color.GREEN));
    }


运行效果如下:


20200714164251938.png

相关文章
|
3月前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图:从零到英雄
【10月更文挑战第42天】 在安卓的世界里,自定义视图是一块画布,让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门,通过深入浅出的方式,让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤,以及如何优化你的视图以提高性能和兼容性。准备好了吗?让我们开始这段创造性的旅程吧!
54 1
|
3月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
59 2
|
3月前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中,自定义视图是那抹不可或缺的亮色,它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图,并展示如何通过代码实现这一过程。我们将从基础出发,逐步引导你理解自定义视图的核心概念,然后通过一个实际的代码示例,详细讲解如何将理论应用于实践,最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能,还是仅仅出于对安卓开发的兴趣,这篇文章都将为你提供价值。
|
3月前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域,自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View,以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理,进而探索内存和布局优化技巧,最终实现既美观又高效的安卓界面。
63 5
|
4月前
|
缓存 数据处理 Android开发
在 Android 中使用 RxJava 更新 View
【10月更文挑战第20天】使用 RxJava 来更新 View 可以提供更优雅、更高效的解决方案。通过合理地运用操作符和订阅机制,我们能够轻松地处理异步数据并在主线程中进行 View 的更新。在实际应用中,需要根据具体情况进行灵活运用,并注意相关的注意事项和性能优化,以确保应用的稳定性和流畅性。可以通过不断的实践和探索,进一步掌握在 Android 中使用 RxJava 更新 View 的技巧和方法,为开发高质量的 Android 应用提供有力支持。
|
4月前
|
缓存 调度 Android开发
Android 在子线程更新 View
【10月更文挑战第21天】在 Android 开发中,虽然不能直接在子线程更新 View,但通过使用 Handler、AsyncTask 或 RxJava 等方法,可以实现子线程操作并在主线程更新 View 的目的。在实际应用中,需要根据具体情况选择合适的方法,并注意相关的注意事项和性能优化,以确保应用的稳定性和流畅性。可以通过不断的实践和探索,进一步掌握在子线程更新 View 的技巧和方法,为开发高质量的 Android 应用提供支持。
66 2
|
4月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
|
Android开发
Android Studio 自定义设置注释模板
Android Studio 自定义设置注释模板
516 0
Android Studio 自定义设置注释模板
|
10天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
85 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
27 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章

  • 1
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 4
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 5
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 6
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    android studio 学习之一
  • 10
    安卓逆向系列教程 4.1 字符串资源
  • 1
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    47
  • 2
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    27
  • 3
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    68
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    85
  • 5
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
    29
  • 6
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
    225
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    57
  • 8
    【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    35
  • 9
    【03】优雅草央千澈详解关于APP签名以及分发-上架完整流程-第三篇安卓APP上架华为商店后面的步骤-华为应用商店相对比较麻烦一些-华为商店安卓上架
    52
  • 10
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
    79