自定义view之动手实现一个简单的xmind思维导图结构

最新推荐文章于 2023-09-26 15:15:21 发布
最新推荐文章于 2023-09-26 15:15:21 发布
阅读量829 收藏 11
点赞数 3
分类专栏： Android界面探索 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanggang514260663/article/details/112597482
版权

文章目录


在这里插入图片描述

老样子，先放效果图吸引火力

1、思路拆分

猛一看这个图，感觉有种无从小手的感觉是不是？

那么让我先来拆分下思路，相信你会觉得很简单。

首先这个思维导图构成是由

主题：
在这里插入图片描述
子节点：
在这里插入图片描述
其中子节点支持控制都是还有子节点

链接线：
在这里插入图片描述
链接线是支持弧度的，第一感觉就是要用贝塞尔曲线来实现。

2、细分实现

其实观察下来，实现上面的难点主要是两个，第一个是文字换行，第二个是贝塞尔曲线弧度。下面我来一个个拆解下。

2-1、文字换行实现思路

如果是熟悉自定义view的同学，肯定知道单纯的canvas.drawText是不能实现文字换行的。你一定会说textview也是一个自定义view啊，为啥人家可以？如果你看过textview的源码，你一定会发现textview的所有核心操作，都是在三个layout中，分别是boringlayout、staticlayout、dynamiclayout。这三个layout分别是对应了单行、静态、动态的效果。而且这三个layout是支持用户使用的，api对外是开放的。所以如果想要实现换行。直接使用staticlayout.draw(canvas)即可。当然具体参数和操作，还要你自行去看源代码了，builder，你懂得，很方便。

除了使用layout，还有没有其他方式呢？收到layout的启发。我这里的实现，其实是比较取巧的，我直接使用textview来实现，最终在canvas里面执行textview.draw(canvas)。这样的话，很多绘制计算对其都不用算了。

 fun doRender(canvas: Canvas?) {
        measure(0, 0)
        layout(xMindNode.rect.left, xMindNode.rect.top, xMindNode.rect.right, xMindNode.rect.bottom)
        canvas?.save()
        canvas?.translate(xMindNode.rect.left.toFloat(), xMindNode.rect.top.toFloat())
        draw(canvas)
        canvas?.restore()
    }

细心的同学可能发现了，这里在draw之前，还进行了measure和layout，以及画布平移。
这里measure和layout其实就是为了在画之前计算出来布局的大小。平移是因为canvas默认会绘制在0，0位置，所以我们要平移到制定的位置。

2-2、贝塞尔曲线弧度实现思路

在这里插入图片描述
其实核心就是对两端进行贝塞尔曲线处理，完了链接对theme和childnode之间。

canvas.drawLine(0, getHeight() / 2, getWidth(), getHeight() / 2, new Paint());
        canvas.drawLine(getWidth() / 2, 0, getWidth() / 2, getHeight(), new Paint());

        canvas.drawRect(getWidth() / 2 - 50, getHeight() / 2 - 500,
                getWidth() / 2 + 50, getHeight() / 2 + 500, new Paint());

        Paint linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        linePaint.setStrokeWidth(4);
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setColor(Color.parseColor("#F14400"));

        Path path = new Path();
        path.moveTo(getWidth() / 2 - 50, getHeight() / 2 - 500);
        path.cubicTo(getWidth() / 2 - 50, getHeight() / 2 - 500,
                getWidth() / 2, getHeight() / 2 - 450,
                getWidth() / 2, getHeight() / 2 - 300
        );
        path.cubicTo(getWidth() / 2, getHeight() / 2 + 300,
                getWidth() / 2, getHeight() / 2 + 450,
                getWidth() / 2 + 50, getHeight() / 2 + 500
        );
        canvas.drawPath(path, linePaint);

3、核心源代码

package org.fireking.ap.custom.basic.viewgroup

import android.content.Context
import android.graphics.Canvas
import android.graphics.PointF
import android.widget.LinearLayout
import org.jetbrains.anko.dip

abstract class NodeRenderer(context: Context?, private val xMindNode: XMindNode) :
    LinearLayout(context) {

    fun doRender(canvas: Canvas?) {
        measure(0, 0)
        layout(xMindNode.rect.left, xMindNode.rect.top, xMindNode.rect.right, xMindNode.rect.bottom)
        canvas?.save()
        canvas?.translate(xMindNode.rect.left.toFloat(), xMindNode.rect.top.toFloat())
        draw(canvas)
        canvas?.restore()
    }

    fun getLeftHotSpot(): PointF {
        return PointF(
            xMindNode.rect.left.toFloat() + dip(2),
            (xMindNode.rect.top + xMindNode.rect.height() / 2).toFloat()
        )
    }

    fun getRightHotSpot(): PointF {
        return PointF(
            xMindNode.rect.right.toFloat() - dip(2),
            (xMindNode.rect.top + xMindNode.rect.height() / 2).toFloat()
        )
    }

    fun getLeftX(): Float {
        return xMindNode.rect.left.toFloat() + dip(2)
    }

    fun getLeftY(): Float {
        return (xMindNode.rect.top + xMindNode.rect.height() / 2).toFloat()
    }

    fun getRightX(): Float {
        return xMindNode.rect.right.toFloat() - dip(2)
    }

    fun getRightY(): Float {
        return (xMindNode.rect.top + xMindNode.rect.height() / 2).toFloat()
    }
}

package org.fireking.ap.custom.basic.viewgroup

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.LayoutInflater
import android.view.View
import org.fireking.ap.R
import org.jetbrains.anko.dip

class XMindView : View {

    private var themeNode: ThemeNode? = null
    private var childNodeList = ArrayList<ChildNode>()

    private var viewWidth = 0
    private var viewHeight = 0

    private lateinit var themeSize: XMindNodeSize
    private lateinit var childNodeSize: XMindNodeSize

    private val themeRectPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val childRectPaint = Paint(Paint.ANTI_ALIAS_FLAG)
    private val lineRectPaint = Paint(Paint.ANTI_ALIAS_FLAG)

    private var nodeTopBottomMargin: Int = 0
    private var nodeLeftRightMargin: Int = 0

    private val linePath = Path()

    constructor(context: Context) : super(context) {
        initView(context, null)
    }

    constructor(context: Context, attributes: AttributeSet) : super(context, attributes) {
        initView(context, attributes)
    }

    private fun initView(context: Context, attributes: AttributeSet?) {
        themeRectPaint.color = Color.parseColor("#1777FF")
        themeRectPaint.style = Paint.Style.FILL

        childRectPaint.color = Color.parseColor("#A9D8FF")
        childRectPaint.style = Paint.Style.FILL

        lineRectPaint.color = Color.parseColor("#66BAFF")
        lineRectPaint.style = Paint.Style.STROKE
        lineRectPaint.strokeWidth = dip(2).toFloat()

        nodeTopBottomMargin = dip(8)
        nodeLeftRightMargin = dip(24)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        viewWidth = w
        viewHeight = h
        initNodeSize()
    }

    private fun initNodeSize() {
        val themeLayout = LayoutInflater.from(context).inflate(R.layout.theme_node, null)
        themeLayout.measure(0, 0)
        themeSize = XMindNodeSize(themeLayout.measuredWidth, themeLayout.measuredHeight)
        val childLayout = LayoutInflater.from(context).inflate(R.layout.child_node, null)
        childLayout.measure(0, 0)
        childNodeSize = XMindNodeSize(childLayout.measuredWidth, childLayout.measuredHeight)
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        themeNode?.let { theme ->

            // 绘制子节点
            childNodeList.forEachIndexed { _, xMindNode ->
                xMindNode.doRender(canvas)
                drawLinkLine(canvas, theme, xMindNode)
            }

            // 绘制主题节点
            theme.doRender(canvas)
        }
    }

    private fun drawLinkLine(canvas: Canvas?, theme: ThemeNode, child: ChildNode) {
        linePath.reset()
        if (child.isLeft()) {
            linePath.moveTo(child.getRightX(), child.getRightY())
            val lineMaxLength = theme.getLeftY() - child.getRightY()
            linePath.cubicTo(
                child.getRightX(),
                child.getRightY(),
                child.getRightX() + nodeLeftRightMargin / 2,
                child.getRightY() + lineMaxLength / 10,
                child.getRightX() + nodeLeftRightMargin / 2,
                child.getRightY() + lineMaxLength / 10 * 3
            )
            linePath.cubicTo(
                theme.getLeftX() - nodeLeftRightMargin / 2,
                theme.getLeftY() - lineMaxLength / 10 * 3,
                theme.getLeftX() - nodeLeftRightMargin / 2,
                theme.getLeftY() - lineMaxLength / 10,
                theme.getLeftX(),
                theme.getLeftY()
            )
        } else {
            linePath.moveTo(child.getLeftX(), child.getLeftY())
            val lineMaxLength = theme.getRightY() - child.getRightY()
            linePath.cubicTo(
                child.getLeftX(),
                child.getLeftY(),
                child.getLeftX() - nodeLeftRightMargin / 2,
                child.getLeftY() + lineMaxLength / 10,
                child.getLeftX() - nodeLeftRightMargin / 2,
                child.getLeftY() + lineMaxLength / 10 * 3
            )
            linePath.cubicTo(
                theme.getRightX() + nodeLeftRightMargin / 2,
                theme.getRightY() - lineMaxLength / 10 * 3,
                theme.getRightX() + nodeLeftRightMargin / 2,
                theme.getRightY() - lineMaxLength / 10,
                theme.getRightX(),
                theme.getRightY()
            )
        }
        canvas?.drawPath(linePath, lineRectPaint)
    }

    fun setData(nodeList: ArrayList<MapNode>) {
        nodeList.find { it.isTheme }?.let { calculationThemeNode(it.nodeName, it.hasSubNode) }
        val leftChildNode = ArrayList<MapNode>()
        val rightChildNode = ArrayList<MapNode>()
        nodeList.filterNot { it.isTheme }.forEachIndexed { index, mapNode ->
            if (index % 2 == 0) {
                leftChildNode.add(mapNode)
            } else {
                rightChildNode.add(mapNode)
            }
        }
        calculationLeftChildNode(leftChildNode)
        calculationRightChildNode(rightChildNode)
        invalidate()
    }

    private fun calculationThemeNode(nodeName: String, hasChild: Boolean) {
        val themeXMindNode = XMindNode(
            Rect(
                viewWidth / 2 - themeSize.width / 2,
                viewHeight / 2 - themeSize.height / 2,
                viewWidth / 2 + themeSize.width / 2,
                viewHeight / 2 + themeSize.height / 2
            ), nodeName, hasChild
        )
        themeNode = ThemeNode(context, themeXMindNode)
    }

    private fun calculationRightChildNode(rightChildNode: ArrayList<MapNode>) {
        val startX =
            (viewWidth / 2 + themeSize.width / 2 + nodeLeftRightMargin + childNodeSize.width)
        if (rightChildNode.size % 2 == 1) {
            calculationChildNodeOdd(startX, rightChildNode, false)
        } else {
            calculationModelNodeEven(startX, rightChildNode, false)
        }
    }

    private fun calculationModelNodeEven(
        startX: Int,
        childNode: java.util.ArrayList<MapNode>,
        isLeft: Boolean
    ) {
        childNode.forEachIndexed { index, mapNode ->
            if (index % 2 == 0) {
                val rect = Rect(
                    startX - childNodeSize.width,
                    viewHeight / 2 - nodeTopBottomMargin - childNodeSize.height
                            - (2 * nodeTopBottomMargin + childNodeSize.height) * (index / 2),
                    startX,
                    viewHeight / 2 - nodeTopBottomMargin - (2 * nodeTopBottomMargin + childNodeSize.height) * (index / 2)
                )
                val node = XMindNode(rect, mapNode.nodeName, mapNode.hasSubNode)
                childNodeList.add(ChildNode(context, node, isLeft))
            } else {
                val rect = Rect(
                    startX - childNodeSize.width,
                    viewHeight / 2 + nodeTopBottomMargin + (2 * nodeTopBottomMargin + childNodeSize.height) * (index / 2),
                    startX,
                    viewHeight / 2 + nodeTopBottomMargin + childNodeSize.height + (2 * nodeTopBottomMargin + childNodeSize.height) * (index / 2)
                )
                val node = XMindNode(rect, mapNode.nodeName, mapNode.hasSubNode)
                childNodeList.add(ChildNode(context, node, isLeft))
            }
        }
    }

    private fun calculationChildNodeOdd(
        startX: Int,
        childNode: java.util.ArrayList<MapNode>,
        isLeft: Boolean
    ) {
        childNode.forEachIndexed { index, mapNode ->
            if (index == 0) {
                val rect = Rect(
                    startX - childNodeSize.width,
                    viewHeight / 2 - childNodeSize.height / 2,
                    startX,
                    viewHeight / 2 + childNodeSize.height / 2
                )
                val node = XMindNode(rect, mapNode.nodeName, mapNode.hasSubNode)
                childNodeList.add(ChildNode(context, node, isLeft))
            } else {
                if (index % 2 == 0) {
                    val rect = Rect(
                        startX - childNodeSize.width,
                        viewHeight / 2 - childNodeSize.height / 2 + (2 * nodeTopBottomMargin + childNodeSize.height) * (index / 2),
                        startX,
                        viewHeight / 2 + childNodeSize.height / 2 + (2 * nodeTopBottomMargin + childNodeSize.height) * (index / 2)
                    )
                    val node = XMindNode(rect, mapNode.nodeName, mapNode.hasSubNode)
                    childNodeList.add(ChildNode(context, node, isLeft))
                } else {
                    val rect = Rect(
                        startX - childNodeSize.width,
                        viewHeight / 2 - childNodeSize.height / 2 - (2 * nodeTopBottomMargin + childNodeSize.height) * ((index + 1) / 2),
                        startX,
                        viewHeight / 2 + childNodeSize.height / 2 - (2 * nodeTopBottomMargin + childNodeSize.height) * ((index + 1) / 2)
                    )
                    val node = XMindNode(rect, mapNode.nodeName, mapNode.hasSubNode)
                    childNodeList.add(ChildNode(context, node, isLeft))
                }
            }
        }
    }

    private fun calculationLeftChildNode(leftChildNode: ArrayList<MapNode>) {
        val startX = (viewWidth / 2 - themeSize.width / 2 - nodeLeftRightMargin)
        if (leftChildNode.size % 2 == 1) {
            calculationChildNodeOdd(startX, leftChildNode, true)
        } else {
            calculationModelNodeEven(startX, leftChildNode, true)
        }
    }

    inner class XMindNodeSize(var width: Int, var height: Int)
}
王先生技术栈
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
xmind_canvas_draw:使用html5的canvas绘制xmind
05-09
##用js解析xmind，用canvas绘制出来 1.解压.xmind后缀的文件，本质上是个zip的压缩包，得到content.xml 2.在xmind的程序中找到markers的资源包，xmind似乎是个eclipse定制的程序 3.firefox打开xmind.html xmind demo 预览 canvas demo 预览
Android 自定义view之画图板实现方法
01-05
看效果： 中间一个画图板 上方小控件用来显示实时画出的图形 下方小控件用来做一些画图的控制 2个小控件都能移动 顺带还有一个刮刮卡效果，只需要改一个参数： 自定义view首先要自定义属性： 在values下面创建attrs.xml： <!--画图板--> <declare name=DrawImg> <attr name=PaintColor> //画笔颜色 <attr name=PaintWidth> // 画笔宽度 <attr name=CanvasImg> //画板图片
前端知识架构图.xmind
10-14
前端知识架构的xmind图，欢迎下载，欢迎提宝贵意见，大家一起学习
JMind:基于Canvas技术，使用Janvas封装库实现的XMind的核心功能
04-01
JMind 基于Canvas技术，使用封装库实现的的核心功能。 JMind使用手册 功能 描述 快捷键 新增子节点 新增一个官员到当前基线右侧 标签 向下添加补充 新增一个官员到当前议员下侧 进入 向上添加补充 新增一个官员到当前议员上侧 Shift + Enter 新增父基线 新增一个官员到当前摘要开头 Ctrl + Enter 删除摘要 删除当前摘要及其子例程 删除|退格 选择议事日程 选择待操作的目标例程 ↑|←|↓|→ 选择多节点 选择多个待操作的目标例程 Ctrl +↑|←|↓|→ 移动节点 移动目标基线到附近位置 Shift +↑|←|↓|→ 剪切基线 复制并删除当前例程 Ctrl + x 复制摘要 复制摘要内容 Ctrl + c 克隆议员 复制摘要内容为Markdown并粘贴 Ctrl + d 贴附摘要 张贴摘要内容 Ctrl + v 伸缩基线 展开或收缩目标例程 Ctrl
android自定义view之实现日历界面实例
08-31
本篇文章主要介绍了android自定义view之实现日历界面实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
开源Android自定义思维导图控件ThinkMap树状图TreeView(类似xMind那种效果)
Goals1989的博客
05-17 1071
仿xmind android
Android思维导图布局：效果展示及使用方法
PYJTLK的博客
07-07 901
思维导图布局的前身是树形布局，对树形布局基本使用还不太了解的朋友可以先看看我写的树形布局系列教程，了解了树形布局的使用方法后再来阅读本文章。 先睹为快 来看看效果吧，横向效果如下： 纵向效果如下：（布局可拖拽，后面会讲解） 基本使用 为了方便讲解，下面来实现如下的效果，先写布局代码。 注意下面的代码，MindMapLayout是思维导图布局，TreeLayout是树形布局。一定要按照如下的方式摆放，否则会报错。 左树 + 根 + 右树 或者 上树 + 根 + 下树 app:orientati
使用vue3和svg画布标签实现一个思维导图功能的开发
最新发布
m0_54050217的博客
09-26 2535
SVG是一种用XML定义的语言，用来描述二维矢量及矢量或栅格图形。SVG提供了3种类型的图形对象，矢量图形、图象、文本。SVG是一种图像文件格式，它的英文全称为，意思为可缩放的矢量图形。矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。XML是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。
我花了一个月整理的Android思维导图
木寸~
01-08 856
Activity相关 IntentFilter匹配：使用action/category/data等数据匹配对应的Activity和携带数据进行跳转 IPC Android中启动多进程只能通过指定组件的进程名来开启 IPC的基础Serializable、Parcelable、Binder Binder Bundle：在启动组件时携带、Bundle实现了Parcelable接口，可以方便的在不同进程组件之间携带数据，但是它的大小受到限制 文件共享 Messager：服务端使用MessageHand
android自定义view过程(图解).xmind
12-18
android自定义view过程(图解).xmind,不可用于商业用途，如有版权问题，请联系删除！
Android自定义View实现支付宝咻一咻效果
01-05
本篇文章介绍自定义View配合属性动画来实现如下的效果 实现思路挺简单： 画一个半透明的圆 实现两种动画效果，点击时扩散和不点击时扩散回收 使用线程的方式将上面两步结合起来 首先看下画半透明圆的部分 ...
Android自定义view系列之99.99%实现QQ侧滑删除效果实例代码详解
09-01
给大家介绍android自定义view系列之99.99%实现QQ侧滑删除效果，本文介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧
Android手工打造脑图控件
lifeidroid的专栏
07-14 1005
背景 所有的背景都是项目需要。 效果 功能 脑图展示 样式订制（文字颜色、图标、样式、边框..） 折叠方式支持两种：a、同侧折叠不影响其他。b、同侧展开其他项折叠 整体拖动 待扩展... ...
XMind思维导图安卓PC直装入门下载及常见问题解决教程
CaiHuaZeiPoJie的博客
11-02 719
XMind作为一款优秀的思维导图软件，被应用于各个领域，不失为一款易用、高效的可视化思维软件，从用户的角度出发，帮助用户实现真正意义上的提高生产率。 XMind是一款让你专注思维，捕捉每一个灵感瞬间的 App。每当你有一个想法，「XMind」帮你专注于它的扩展延伸和梳理，融合艺术与创造力，让思维清晰可见。你可以创建 workflow，接下来心无旁骛投入工作流程；以灵感为中心，在无限的脑图幕布上延伸想法；随手记录点滴灵感、待办清单、会议记录或是项目规划，尽情享受逻辑思维。 XMIND采用Java语言开发，具
05-思维导图Xmind快速入门
Serendipity_zyx的博客
03-06 3146
1、思维导图的作用；2、思维导图的应用场景；3、Xmind的主要功能？4、Xmind的主要结构？5、Xmind的主题有？主题元素有？
android 绘制几何背景,Android VIew绘图机制
weixin_39937412的博客
05-26 129
本篇博客是我对View的绘图方面的理解和归纳，也不会说的非常的细，只是类似于一个思维导图的作用，因为有人写得更好了，我就没必要写了，况且写了还不一定如别人的。本文大纲如下：大纲View形状绘制View颜色绘制View几何变换和裁剪View的绘制顺序一、绘制形状1)、Paint类的基本用法paint.setAntiAlias(true); //抗锯齿功能，一般都会加入的paint.setColor...
Android自定义脑图布局
明宇博客
05-07 333
public class TreeLayout extends ViewGroup { Tree tree; int mDy = 60; int mDx = 100; private ScaleGestureDetector mScaleGestureDetector = new ScaleGestureDetector(getContext(), new ScaleGestureDetector...
仿微信多人音视频通话界面
步行者
06-22 8423
package com.dnaer.android.telephone.widgets; import android.content.Context; import android.os.Build; import android.support.annotation.RequiresApi; import android.util.AttributeSet; import android.u...
用 Android 实现一个简单的自定义view
03-31
本文将介绍如何使用 Android Studio 实现一个简单的自定义 View。 1. 创建一个新项目并新建一个自定义 View 类 在 Android Studio 中创建一个新的项目，并在其中创建一个新的类，命名为 CustomView。CustomView ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值