AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Android自定义view之太极图

2025-05-29 59
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文介绍了如何在Android中通过自定义View绘制太极图，并实现旋转动画效果。主要内容包括：使用Canvas绘制太极图案（半圆、小圆及点），定义自定义属性（颜色与动画速度），以及利用ObjectAnimator实现旋转动画。通过attrs文件配置属性，使View更具灵活性。代码详细分解了绘制步骤与动画逻辑，适合初学者了解自定义View开发流程。

太极图

周四课余时间比较多，正好前几天为了给小学弟解决问题，回顾了一些Android的知识，（上学还是不能把以前上班学到的东西丢掉）于是写一篇关于自定义view的文章。

最后完成的样子（可旋转）

1.png

这篇文章主要内容为使用Canvas画简单图案，自定义属性，以及属性动画ObjectAnimator中的旋转动画

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

提示：以下是本篇文章正文内容

一、先画一个太极

先介绍一下定义的东西：

    private int useWidth;  //最后测量得到的值
    private int leftcolor; //左太极的颜色（黑）
    private int rightcolor;//右太极的颜色（白）

1.第一步,画一个半边黑半边白的圆

        mPaint.setColor(leftcolor);
        canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, -180, true, mPaint);

        mPaint.setColor(rightcolor);
        canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, 180, true, mPaint);

效果：
2.png

2.第二步，画黑白两个小圆

        mPaint.setColor(leftcolor);
        canvas.drawArc(new RectF(useWidth / 4, 0, useWidth / 2 +useWidth / 4, useWidth / 2),
                270, 360, true, mPaint);

        mPaint.setColor(rightcolor);
        canvas.drawArc(new RectF(useWidth / 4, useWidth / 2, useWidth / 2 + useWidth / 4,useWidth),
                270, 360, true, mPaint);

效果：
3.png

3.第三步，画黑白两个更小的圆

        mPaint.setColor(leftcolor);
        canvas.drawCircle(useWidth/ 2, useWidth * 3 / 4, useWidth/16, mPaint);

        mPaint.setColor(rightcolor);
        canvas.drawCircle(useWidth / 2, useWidth / 4, useWidth/16, mPaint);

效果
4.png

二、让太极旋转

先简单介绍一下定义的东西

  private ObjectAnimator objectAnimator;//属性动画
  private int animaltime;//动画的旋转时间（速度）

1.旋转的开始方法

//旋转动画开始的方法
    public void createAnimation() {
   
        if (objectAnimator==null){
   
            objectAnimator = ObjectAnimator.ofFloat(this, "rotation", 0f, 360f);//添加旋转动画，旋转中心默认为控件中点
            objectAnimator.setDuration(animaltime);//设置动画时间
            objectAnimator.setInterpolator(new LinearInterpolator());//动画时间线性渐变
            objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
            objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
            objectAnimator.start();//动画开始
        }else{
   
            objectAnimator.resume();//动画继续开始
        }


    }

2.旋转的暂停方法（可继续旋转）

    public  void stopAnimation(){
   
        if (objectAnimator!=null){
   
            objectAnimator.pause();//动画暂停  .end()结束动画
        }
    }

3.旋转的停止方法（不可继续旋转）

    public  void cleanAnimation(){
   
        if (objectAnimator!=null){
   
            objectAnimator.end(); //结束动画
        }
    }

三、自定义属性（颜色，动画速度）

1.新建attrs文件
5.png

2.定义属性

   <declare-styleable name="TaiJiView">
        <attr name="leftcolor" format="reference|color"/>
        <attr name="rightcolor" format="reference|color"/>
        <attr name="animaltime" format="integer"/>
    </declare-styleable>

3.布局中使用

        app:leftcolor="@color/colorAccent"
        app:rightcolor="@color/colorPrimaryDark"
        app:animaltime="3000"

4.java文件中获取在布局中定义的值

 /**
     获取自定义属性
     */
    private void initCustomAttrs(Context context, AttributeSet attrs) {
   
        //获取自定义属性。
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TaiJiView);
        //获取太极颜色
        leftcolor = ta.getColor(R.styleable.TaiJiView_leftcolor, Color.BLACK);
        rightcolor=ta.getColor(R.styleable.TaiJiView_rightcolor, Color.WHITE);
        //时间
        animaltime=ta.getInt(R.styleable.TaiJiView_animaltime,1000);

        //回收
        ta.recycle();

    }

最后运行一下看一下效果
6.png

四、源码

1.TaiJiView.java

public class TaiJiView extends View{
   
    private Paint mPaint;
    private int mWidth;
    private int mHeight;
    private int useWidth;
    private int leftcolor;
    private int rightcolor;
    private ObjectAnimator objectAnimator;
    private int animaltime;
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public TaiJiView(Context context) {
   
        this(context,null);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public TaiJiView(Context context, @Nullable AttributeSet attrs) {
   
        this(context, attrs,0);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public TaiJiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
   
        this(context, attrs, defStyleAttr,0);
        initCustomAttrs(context,attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public TaiJiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
   
        super(context, attrs, defStyleAttr, defStyleRes);
        init();

    }
    private void init() {
   
        initPaint();
    }


    /**
     获取自定义属性
     */
    private void initCustomAttrs(Context context, AttributeSet attrs) {
   
        //获取自定义属性。
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TaiJiView);
        //获取太极颜色
        leftcolor = ta.getColor(R.styleable.TaiJiView_leftcolor, Color.BLACK);
        rightcolor=ta.getColor(R.styleable.TaiJiView_rightcolor, Color.WHITE);
        animaltime=ta.getInt(R.styleable.TaiJiView_animaltime,1000);

        //回收
        ta.recycle();

    }
    /**
     * 初始化画笔
     */
    private void initPaint() {
   
        mPaint = new Paint();        //创建画笔对象
        mPaint.setColor(Color.BLACK);    //设置画笔颜色
        mPaint.setStyle(Paint.Style.FILL); //设置画笔模式为填充
        mPaint.setStrokeWidth(10f);     //设置画笔宽度为10px
        mPaint.setAntiAlias(true);     //设置抗锯齿
        mPaint.setAlpha(255);        //设置画笔透明度
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
   
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        useWidth=mWidth;
        if (mWidth>mHeight){
   
            useWidth=mHeight;
        }
    }


    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    @Override
    protected void onDraw(Canvas canvas) {
   
        super.onDraw(canvas);
        mPaint.setColor(leftcolor);
        canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, -180, true, mPaint);

        mPaint.setColor(rightcolor);
        canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, 180, true, mPaint);

        mPaint.setColor(leftcolor);
        canvas.drawArc(new RectF(useWidth / 4, 0, useWidth / 2 +useWidth / 4, useWidth / 2),
                270, 360, true, mPaint);

        mPaint.setColor(rightcolor);
        canvas.drawArc(new RectF(useWidth / 4, useWidth / 2, useWidth / 2 + useWidth / 4,useWidth),
                270, 360, true, mPaint);
        mPaint.setColor(leftcolor);
        canvas.drawCircle(useWidth/ 2, useWidth * 3 / 4, useWidth/16, mPaint);

        mPaint.setColor(rightcolor);
        canvas.drawCircle(useWidth / 2, useWidth / 4, useWidth/16, mPaint);

    }

    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    public void createAnimation() {
   
        if (objectAnimator==null){
   
            objectAnimator = ObjectAnimator.ofFloat(this, "rotation", 0f, 360f);//添加旋转动画，旋转中心默认为控件中点
            objectAnimator.setDuration(animaltime);//设置动画时间
            objectAnimator.setInterpolator(new LinearInterpolator());//动画时间线性渐变
            objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
            objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
            objectAnimator.start();//动画开始
        }else{
   
            objectAnimator.resume();//动画继续开始
        }


    }
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    public  void stopAnimation(){
   
        if (objectAnimator!=null){
   
            objectAnimator.pause();//动画暂停  .end()结束动画
        }
    }
    public  void cleanAnimation(){
   
        if (objectAnimator!=null){
   
            objectAnimator.end(); //结束动画
        }
    }
}

2.attrs文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TaiJiView">
        <attr name="leftcolor" format="reference|color"/>
        <attr name="rightcolor" format="reference|color"/>
        <attr name="animaltime" format="integer"/>
    </declare-styleable>
</resources>

总结

希望能够对您有所帮助。如有疑问可留言。欢迎各位前辈点评

文章标签：
Android开发
前端开发
关键词：
Android自定义View
Android自定义
Android View
计蒙不吃鱼
目录
相关文章
计蒙不吃鱼
|
4月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画（灵感来源：金铲铲之战）
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份，利用`onSizeChanged`测量最小长度，并借助画笔绘制动态线条，实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退，最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤，并提供完整源码供参考。此动画适用于加载场景，提升用户体验。
计蒙不吃鱼
408 5
Android自定义view之线条等待动画（灵感来源：金铲铲之战）
计蒙不吃鱼
|
4月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量，结合`PathEffect`的子类（如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等）实现路径绘制的动态变化。文章详细解析了各子类的功能与参数，并通过案例代码展示了如何使用`ComposePathEffect`组合效果，以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动，源码附于文末供参考。
计蒙不吃鱼
69 0
计蒙不吃鱼
|
4月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先，作者自定义了一个圆角图片控件`MellowImageView`，用于绘制圆角矩形图片。接着，通过将布局放入`HorizontalScrollView`中，实现了左右滑动功能，并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例，包括XML布局、动画文件和Java代码，最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
计蒙不吃鱼
208 65
Android自定义view之网易云推荐歌单界面
计蒙不吃鱼
|
4月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程，涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现（如通过三个构造函数解决焦点问题），接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例，如跑马灯、折线图、太极图等。此外，文章详细解析了View绘制流程（measure、layout、draw）和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题，并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
计蒙不吃鱼
509 84
计蒙不吃鱼
|
4月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下，传统View可能引发卡顿的问题，进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法，包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
计蒙不吃鱼
102 3
计蒙不吃鱼
|
4月前
|
Android开发 开发者
Android自定义view之围棋动画（化繁为简）
本文介绍了Android自定义View的动画实现，通过两个案例拓展动态效果。第一个案例基于`drawArc`方法实现单次动画，借助布尔值控制动画流程。第二个案例以围棋动画为例，从简单的小球直线运动到双向变速运动，最终实现循环动画效果。代码结构清晰，逻辑简明，展示了如何化繁为简实现复杂动画，帮助读者拓展动态效果设计思路。文末提供完整源码，适合初学者和进阶开发者学习参考。
计蒙不吃鱼
76 0
Android自定义view之围棋动画（化繁为简）
计蒙不吃鱼
|
4月前
|
Java Android开发 开发者
Android自定义view之围棋动画
本文详细介绍了在Android中自定义View实现围棋动画的过程。从测量宽高、绘制棋盘背景，到创建固定棋子及动态棋子，最后通过属性动画实现棋子的移动效果。文章还讲解了如何通过自定义属性调整棋子和棋盘的颜色及动画时长，并优化视觉效果，如添加渐变色让白子更明显。最终效果既可作为围棋动画展示，也可用作加载等待动画。代码完整，适合进阶开发者学习参考。
计蒙不吃鱼
98 0
游客syv66y3m2ksnc
|
11月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
游客syv66y3m2ksnc
116 0
Android面试高频知识点(3) 详解Android View的绘制流程
悟道了凡
|
11月前
|
XML 前端开发 Android开发
Android面试高频知识点(3) 详解Android View的绘制流程
Android面试高频知识点(3) 详解Android View的绘制流程
悟道了凡
100 2
stefanie燕
|
11月前
|
XML 前端开发 Android开发
Android View的绘制流程和原理详细解说
Android View的绘制流程和原理详细解说
stefanie燕
251 3

热门文章

最新文章

  • 1
    Android 和iOS客户端网络数据收集
  • 2
    关于安卓判断通知权限
  • 3
    Android匿名共享内存（Ashmem）原理
  • 4
    Android教程之使用LiveAndroid来测试应用
  • 5
    Android studio Apk signature scheme v2扫盲
  • 6
    Android视图架构详解
  • 7
    Using JSON in Android
  • 8
    Android 调试桥(adb)
  • 9
    Android系统原理与源码分析（1）：利用Java反射技术阻止通过按钮关闭对话框
  • 10
    Android学习自定义View(一)——初识View
  • 1
    手机脚本录制器， 脚本录制器安卓，识图识色屏幕点击器【autojs】
    164
  • 2
    微信抢红包脚本安卓插件，微信xposed抢红包模块， magisk微信抢红包模块
    519
  • 3
    在Android开发中实现两个Intent跳转及数据交换的方法
    149
  • 4
    三色过人脸虚拟摄像头，安卓免root虚拟摄像头， 安卓虚拟摄像头过人脸
    1088
  • 5
    批量发送短信的平台，安卓群发短信工具插件脚本，批量群发短信软件【autojs版】
    189
  • 6
    Android API Level 到底是什么？和安卓什么关系？应用发布如何知道自己的版本？优雅草卓伊凡
    428
  • 7
    安卓版快捷指令，加了AI语音可以一句话操作v0.2.7
    216
  • 8
    安卓虚拟摄像头模块， 手机vcam虚拟摄像头模块，虚拟摄像头替换手机摄像头
    341
  • 9
    手机微信虚拟视频聊天，安卓免root虚拟摄像头，免root虚拟hook相机
    318
  • 10
    安卓虚拟摄像头免root版，虚拟摄像头替换真实摄像头，jar代码开源分享
    512

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南

    • 相关电子书

    更多
  • 58同城Android客户端Walle框架演进与实践之路
  • Android组件化实现
  • 蚂蚁聚宝Android秒级编译——Freeline
    • 下一篇
    蛋白质语言模型 ProGen：在实验室合成由 AI 预测的蛋白质