FortuneTelling

Introduction: 仿文墨天机命盘界面,自定义 view
More: Author   ReportBugs   
Tags:

仿文墨天机命盘界面,自定义 view 宫格实现是通过 drawline 画直线,拿到 View 的 width 和 height 的 1/4,按照对应宫格宽度和高度进行偏移划线;因为中间的是占了 4 个小宫格矩形位置组成的大宫格矩形,因此需要分部分处理,观察图形后发现按照从上到下分为 4 部分最为合适,最上边申、酉、戌、亥四个宫位划分为 TopTopArea,中上部分的未、子两个宫位划分为 TopCenterArea,中下部分的午、丑两个宫位分为 BottomCenterArea,最下边巳、辰、卯、寅四个宫位划分为 BottomBottomArea。 x 方向也是屏幕宽度方向,按照宫格所占宽度划线偏移。y 方向也就是屏幕高度方向,从上往下按照宫格所占高度偏移划线。 宫格中的文字部分,按照申宫调用 drawText 绘制出文字,并通过 Paint 设置文字的大小,文字的位置,以及文字的颜色,酉、戌、亥宫中的文字布局位置通过申宫中的文字位置按照宫位所处的位置偏移即可,其它宫位原理亦如此,具体查看 demo 中的代码实现。

中宫需要注意的是它会有多行文字的显示,但是 drawText 只能实现单行文字效果,那么要想实现多行代码效果,需要用到官方提供另外一个专门用来实现多行文字的函数 StaticLayout,我们要展示的数据 val centerStrFromText ="姓名:匿名 ${info.性别} ${info.五行局}\n" + "真太阳时:${info.真太阳时}\n" + "钟表时间:${info.钟表时间}\n" + "农历:${info.年干}" + "${info.年支}年${info.农历月}月${info.农历日}日 ${info.时干}\n" + "命主:${info.命主} 身主:${info.身主} 子斗:${info.身宫}\n"] val centerStaticLayout = StaticLayout(centerStrFromText,mTextPaint,600,Layout.Alignment.ALIGN_NORMAL,1f,0f,true)

StaticLayout(CharSequence source, TextPaint paint, int width, Layout.Alignment align, float spacingmult, float spacingadd, boolean includepad) width 是文字区域的宽度,文字到达这个宽度后就会自动换行; align 是文字的对齐方向; spacingmult 是行间距的倍数,通常情况下填 1 就好; spacingadd 是行间距的额外增加值,通常情况下填 0 就好; includepad 是指是否在文字上下添加额外的空间,来避免某些过高的字符的绘制出现越界。 多行文字偏移,需要配合 canvas 的 translate 方法实现,调用 StaticLayout 的 draw 方法进行绘制

添加点击事件,重写 onTouchEvent 方法,在 MotionEvent.ACTION_UP 中判断用户点击位置是不是符合所在宫位的范围内如果是改变字体颜色,调用 invalidate 重新绘制其它宫位显示

实现效果 1 实现效果 2

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools