自定义ViewGroup,家谱树的简单做法

仿亲友+App的家谱

说明:这部分功能是参照亲友+App来做的,UI和亲友+App基本相似,逻辑应该不同,因为一开始是想反编译亲友+来看看人家是怎么做的,可惜亲友+用了360加固,我没时间去搞去壳,所以就自己琢磨逻辑。显示的内容是在亲友+的基础上多加了底层家庭成员的配偶显示。你也可以通过设置mBottomNeedSpouse变量来设置是否显示底层家庭成员的配偶。具体效果自己运行App看一下。

运行流程

1、添加家庭成员,并填写成员信息。

2、保存到数据库里。

3、将选中的家庭成员的ID传入控件里,控件会查询数据库拼装带关系的model对象,然后通过对象绘制关系图

对象

预览图,这里就放一张意思意思,因为关系图太庞大,具体效果自己运行App体验吧

静态预览图

思路说明

1、代码执行流程

1.1、首先当然时初始化数据,包括家庭成员对象、画笔等等。
1.2、然后就是根据传进来的家庭成员ID,进行一系列的数据库查询,分边装在不同的model或不同的list里。
1.3、初始化View,把家庭成员的View都初始化。初始化的时候已经定好了该view的位置。
1.4、在onMeasure测量家庭成员View的宽高。
1.5、在onLayout里编排好每个成员的具体位置。
1.6、在onDraw方法里,利用canvas画出家庭成员关系的连线。
1.7、最后在onTouchEvent方法写下触摸事件移动ViewGroup,在onInterceptTouchEvent写下移动时是否拦截成员View的点击事件。

2、定位流程

1、定位遵循由底层一层一层上去,因为子层位置确定了那么父层的位置就确定了。
2、流程顺序是:(1)(2) → (3) → (4)(5) → (6)(7) → (8)(9)(10) → (11)(12) → (13)(14),具体逻辑可以看initView()方法。
3、由于(1)(2)和(4)(5)和(11)(12)的定位逻辑是相似的,还有(6)(7)和(13)(14)也是相似的,所以就分别写成了相同的方法,然后传入是第几代,和数据源就可以定位了。
   然后我和配偶(3)的定位写一个方法,因为存在特殊性;还有父母、祖父母、外祖父母作为一个整体来写一个方法来定位,也是因为其特殊性。
结构图

3、画线流程

1、把每个和该view有关系的线画上:(1)(2) → (4)(5) → (6)(7) → (11)(12) → (13)(14) → (3) → (8) → (9) → (10)
2、把每部分有关联的线画上:
   我的子女之间的连线 → 我亲兄弟姐妹和我之间的连线 → 祖父母和父亲的连线 → 外祖父母和母亲的连线 → 父亲和其兄弟姐妹之间的连线 → 母亲和其兄弟姐妹之间的连线。具体是怎样我也不好描述,但是代码里已经分好了每个步骤,所以可以去看代码理解。

- 家谱树Demo

Github [https://github.com/ssj64260/FamilyTreeView)

- 基于这个Demo的APP已上架酷安:

酷安 [https://www.coolapk.com/apk/167343)

Github [https://github.com/ssj64260/MyFamilyTree]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,935评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,196评论 4 61
  • 你在我身旁,那样安心和平静,让我无端的想到了永远。 你是否也曾经历过在人生的某一个阶段被“卡住”,因为爱而不得,或...
    桃子小喵阅读 1,102评论 0 0
  • 昨天晚上依然和朱同学聊天,聊很多聊到很晚,他快要博士毕业了,我们面临着他工作上的选择,可是我总觉得他的工作并不是是...
    aqua36阅读 370评论 0 1
  • 此岸的你, 彼岸的我, 命运有了交集, 从此我深陷, 你逃避。 我万劫不复, 你痛苦不已, 你是那么可望不可及。 ...
    唯爱撒撒阅读 218评论 1 0