D1-从N角星开始论述自定义控件

简介: 零、前言[1].个人对安卓绘制逻辑感到繁琐,自己封装了一个绘图框架[2].自定义控件的绘制流程都基于我的这个库,详见:开源计划之--Android绘图库--LogicCanvas [3].

零、前言

[1].个人对安卓绘制逻辑感到繁琐,自己封装了一个绘图框架
[2].自定义控件的绘制流程都基于我的这个库,详见:开源计划之--Android绘图库--LogicCanvas
[3].星星控件目的:总结自定义控件的流程
[4].功能:自定义星星的角数,高矮,胖瘦,填充与否,


一、准备

1.新建StarView继承自View,重写构造方法

这里为了方便,准备了dp转px的方法
一参数构造用于直接new视图
二参数构造用于支持视图在xml中有效

/**
 * 作者:张风捷特烈<br/>
 * 时间:2018/9/3 0003:19:01<br/>
 * 邮箱:1981462002@qq.com<br/>
 * 说明:星星控件
 */
public class StarView extends View {
   
    public StarView(Context context) {
        this(context, null, 0);
    }

    public StarView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public StarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    /**
     * 适配dp
     *
     * @param dp
     * @return
     */
    public Float dp2px(Float dp) {
        if (dp != null) {
            final Float scale = getContext().getResources().getDisplayMetrics().density;
            return dp * scale + 0.5f;
        }
        return dp;
    }
}

2.定义属性
/**
 * 星星的角数
 */
private int mAngleNum = 5;
/**
 * 星星高
 */
private float mHeight = dp2px(20f);
/**
 * 星星内接圆直径
 */
private float mr = dp2px(10f);
/**
 * 星星颜色
 */
private int mStarColor = Color.BLUE;
/**
 * 是否填充
 */
private boolean isFill = true;

3.先查看绘制效果:重写onDraw方法

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    ZCanvas zCanvas = new ZCanvas(canvas);
    //设置绘图对象
    Painter painter = new Painter().num(mAngleNum).R(mHeight / 2).r(mr / 2).b(dp2px(1f));
    //判断是否填充
    if (isFill) {
        painter.fs(mStarColor);
    } else {
        painter.ss(mStarColor);
    }
    //绘制图形
    zCanvas.drawNStar(painter);
}
star1.png
2.设置控件属性:先介绍一下自定义属性吧

我们常用的TextView、ImageView等都可以在xml里配置相关属性,就是自定义属性

第一步,明确自己的自定义属性有哪些,最后先想好名字
第二步,在res/values文件夹下创建attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--一个自定义控件-->
    <declare-styleable name="StarView">
        <!--自定义属性名 和 类型-->
        <attr name="z_star_height" format="dimension"/>
        <attr name="z_star_AngleNum" format="integer"/>
        <attr name="z_star_r" format="dimension"/>
        <attr name="z_star_color" format="reference"/>
        <attr name="z_star_isFill" format="boolean"/>
    </declare-styleable>
</resources>

其中:

1、reference 引用类型值 : @id/...
2、color 颜色类型值     #ff00ff
3、boolean 布尔类型值    true , false
4、dimension 尺寸类型值     dp / px /sp
5、integer 整数类型值       weight  progress max
6、float 浮点型值        0.1f
7、string 字符串类型值  "atrrs"
8、<enum> 枚举类型值 :水平/垂直
9、flag:位或运算
10、fraction:百分数
第三步:在自定义View的构造函数里使用
    /**
     * 初始化
     * @param attrs 自定义属性
     */
    private void init(AttributeSet attrs) {
        TypedArray ta = attrs == null ? null : getContext().obtainStyledAttributes(attrs, R.styleable.StarView);
        mAngleNum=ta.getInt(R.styleable.StarView_z_star_AngleNum, mAngleNum);
        mHeight=ta.getDimension(R.styleable.StarView_z_star_height, mHeight);
        mr=ta.getDimension(R.styleable.StarView_z_star_height, mr);
        mStarColor=ta.getColor(R.styleable.StarView_z_star_color, mStarColor);
        isFill = ta.getBoolean(R.styleable.StarView_z_star_isFill, isFill);
        ta.recycle();//一定记得回收!!!
    }
第四步:在xml里使用(为简洁、外层的布局省略):

其中标签头是类全名:com.toly1994.d.view.StarView
xmlns:toly="http://schemas.android.com/apk/res-auto"是名空间
因为我英文名叫toly,可见它的随意性,toly:z_star_AngleNum="6"也是基于此
我习惯自定义属性已z_开头,好找,AndroidStudio自动提示。

    <com.toly1994.d.view.StarView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        xmlns:toly="http://schemas.android.com/apk/res-auto"
        toly:z_star_AngleNum="6"
        toly:z_star_color="#f00"
        toly:z_star_height="40dp"
        toly:z_star_isFill="false"
        toly:z_star_r="20dp"/>
3.Activity中使用:
setContentView(R.layout.activity_star);

一个不同风格的星星跃然纸上


自定义属性.png

二、测量:

现在问题来了:添加背景可以看出控件区域竟然占了全屏,这不是我们想要的。

宽高.png
这时要重写测量方法:onMeasure方法

这个控件的测量很简单:无论什么测量模式,宽高相同并且等于mHeight,
也就是layout_width和layout_height无作用,全靠z_star_height确定布局宽高。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension((int)mHeight,(int) mHeight);
    }

现在你想要多少角星都不是事儿,拿走,不谢

效果图

三、事件:效果点击时填充与不填充切换

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                isFill = !isFill;
                invalidate();
        return true;
    }
点击事件.gif

点击事件是你的控件对外的接口,提供修改状态的可能性,你可以发挥无限想象力,这就是自定义控件的魅力。
比如随机颜色,当然你也可以随机大小,随机角数,一切创造取决于你!

点击事件升级.gif

这是一个非常简单的自定义控件,作为自定义控件的第一篇,总结一下绘制的流程还是挺不错的
自定义控件还有很多很多坑,来和我一起填吧。


后记、

1.声明:

[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正
[4]你的喜欢与支持将是我最大的动力

2.连接传送门:

更多安卓技术欢迎访问:安卓技术栈
我的github地址:欢迎star
简书首发,腾讯云+社区同步更新
张风捷特烈个人网站,编程笔记请访问:http://www.toly1994.com

3.联系我

QQ:1981462002
邮箱:1981462002@qq.com
微信:zdl1994328

4.欢迎关注我的微信公众号,最新精彩文章,及时送达:
公众号.jpg
相关文章
|
C++
基于Qt的简易文本编辑器设计与实现
基于Qt的简易文本编辑器设计与实现
438 1
|
Dart Java
Flutter Image内存--强引用分析方法
概述 据了解,很多Flutter业务上线后都出现内存占用较高的问题,首当其冲的是 Image 内存占用过多。 Image 图片内存过高,可能由于 Flutter ImageCache 对内存缺房控制力导致,也有可能是被业务代码强引用,泄漏导致。如果 Image 被业务强引用,则调整 ImageCache 容量,增加 gc 次数都没有效果。 面对这种“强引用”的泄漏
2454 0
Flutter Image内存--强引用分析方法
|
算法 架构师 安全
10年Java面试总结:Java程序员面试必备的面试技巧
作为一名资深10年Java技术专家,我参与了无数次的面试,无论是作为面试者还是面试官。在这里,我将分享我的一些面试经历和面试技巧,希望能帮助即将面临面试的Java程序员们。回顾我的Java职业生涯,我清晰地记得一次特别的面试经历。那是我申请一家知名科技公司的Java开发岗位。为了这次面试,我花了几周的时间准备,这不仅包括Java的基础和高级知识,还有关于公司产品的研究。
702 0
|
人工智能 弹性计算 Cloud Native
超强辅助,Bolt.diy 一步搞定创意建站
Bolt.new 是 stackblitz 推出的一款 AI 编辑器,结合人工智能与 WebContainers 技术,支持无需复杂配置的完整开发环境。其开源版本 Bolt.diy 基于阿里云百炼模型服务和函数计算 FC,提供灵活定制、全栈开发支持及多模型适配能力。
|
分布式计算 资源调度 大数据
【决战大数据之巅】:Spark Standalone VS YARN —— 揭秘两大部署模式的恩怨情仇与终极对决!
【8月更文挑战第7天】随着大数据需求的增长,Apache Spark 成为关键框架。本文对比了常见的 Spark Standalone 与 YARN 部署模式。Standalone 作为自带的轻量级集群管理服务,易于设置,适用于小规模或独立部署;而 YARN 作为 Hadoop 的资源管理系统,支持资源的统一管理和调度,更适合大规模生产环境及多框架集成。我们将通过示例代码展示如何在这两种模式下运行 Spark 应用程序。
624 3
|
12月前
|
机器学习/深度学习 人工智能 人机交互
智能语音识别:重塑人机交互的新纪元###
【10月更文挑战第18天】 想象一下,轻声细语间,机器便能懂你心意,这是科幻电影的桥段,也是智能语音识别技术为我们描绘的现实蓝图。本文将带您穿越语音识别的奇妙世界,从它的历史长廊漫步至前沿技术的应用场域,一探究竟这项技术如何在教育、医疗、家居等领域大放异彩,同时审视其面临的挑战与未来可能的突破方向。这不仅是一场技术的旅行,更是对未来生活的一次憧憬。 ###
135 1
|
12月前
|
机器学习/深度学习 并行计算 算法
GPU加速与代码性能优化:挖掘计算潜力的深度探索
【10月更文挑战第20天】GPU加速与代码性能优化:挖掘计算潜力的深度探索
|
运维 安全 Linux
【超实用秘籍】Linux文件传输新高度:10个scp命令让你瞬间变身文件传输达人,从此告别繁琐操作!
【8月更文挑战第13天】文件传输是运维工作的核心部分,尤其对Linux用户来说,了解高效且安全的传输方法非常重要。本文介绍10种scp命令的应用技巧,涵盖基础文件传输、密钥认证、目录复制等场景,助你灵活运用这一基于SSH协议的安全工具。从简单的文件传输到复杂的多主机文件迁移,scp都能轻松应对。通过本文的学习,你将能更熟练地使用scp命令,提高工作效能。
596 6
|
存储 监控 关系型数据库
【MySQL】InnoDB 什么情况下会产生死锁
【MySQL】InnoDB 什么情况下会产生死锁
|
机器学习/深度学习 算法 数据可视化
YOLO+混合注意力机制 | YOLOv5再加4.3%才可以做对手,Transformer混合设计依旧可以卷
YOLO+混合注意力机制 | YOLOv5再加4.3%才可以做对手,Transformer混合设计依旧可以卷
445 0