RoundMenuView一一自定义扇形菜单控件

作者简介  原创微信公众号郭霖 WeChat ID: guolin_blog

大家早上好,新的一周开始啦!

本篇来自凶残的程序员的投稿,分享了一个扇形的菜单控件,希望大家喜欢!

凶残的程序员的博客地址:

http://blog.csdn.net/qian520ao

正文

第一次写博客,不知道什么姿势才能显示出一副好像很老练的样子。老大让写一个菜单栏控件,借鉴了Idtk自定义view,站在巨人的肩上思路是豁然开朗。


效果图


使用方式

开始绘制(分2种情况,触摸|未触摸)

①:未触摸显示解刨

展示的图形分为4个模块,标签层rectFLabl、绘制bmp的rectF、白金层rectFGold(因为不会拼写银这个单词白金高大上啊),对应不同的半径如上图所示。代码中rectF 表示未触摸层,rectFF表示触摸弹出层,下面会讲解。

②:绘制

xfermode详情跳转

http://blog.csdn.net/harvic880925/article/details/51264653

③:触摸touch显示解刨

与触摸层有点类似,标签层改为阴影部分,原本绘制bmp区域现在绘制文字。不过所有的半径变大。绘制的方法和上面的神似,这里就不举栗说出了。

④:开始绘制文字

绘制文字和bmp首先要先复习一下数学公式。再此我希望我的数学老师们都把学费还给我,毕竟我知识也还给你们了啊。

x=Math.sin(2∗PI/360∗angle)∗r

y=Math.cos(2∗PI/360∗angle)∗r

上面公式中,2*PI/360*angle,即求angle的弧度。

Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间;

Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数;

这两个函数中的X 都是指的“弧度”而非“角度”,而我们可以用Math.toRadians(angle)求出当前的弧度,所以最终我们可以用

x=Math.sin(Math.toRadians(angle))∗r 来获取当前角度对应的半径所在的的x轴坐标,y轴亦可。

我们先绘制文字,如上图的9个文字。“不辣,川菜一点都不辣” :

绘制文字 和 绘制模块RECTF 有一点区别,模块是一个角度一个角度绘制,为了用户体验。但是绘制文字选择的是根据 animatedValue(从0到最大显示角度所返回的animation.getAnimatedValue值) 的角度去处理不同区域的文字。

举个栗子:如果当前有3个模块共180°,那么 animatedValue==60° 的时候我们绘制第一个模块的文字, animatedValue<120度 的时候我们还是绘制第一个模块的文字。

⑤:绘制bitmap

绘制之前首先我们要得到 bitmap 最大width/height,再获取 bitmap 中心点。获取中心点上面的栗子已经有说明了,那么我们现在着重获取 bitmap 的最大宽高。然后得到两者的较小值即可设定为 bitmap 区域。

灵魂画家。。。

⑥:绘制原点旋转的bitmap

我们将bitmap挪动到屏幕中心点,即bitmap中心点==绘制中心点。再根据当前animatedValue的角度进行旋转。

了解更多的matrix

http://www.gcssloop.com/customview/Matrix_Basic

OnTouch处理

首先,我们绘图 onDraw() 的时候将画板canvas移动到中心点,所以我们这样处理坐标点

float x = event.getX() - (mWidth / 2);

float y = event.getY()- (mHeight / 2);

第二步我们要求出触摸的角度,因为Android里面坐标系与我们数学上的不同,android由第4 - 3 - 2 -1 象限开始绘制角度。

获取角度的方法:Math.toDegrees(Math.atan(y/x));

但是当 x<0 的时候,,求出的角度实为 [0°,-90°) ,此时我们给它掰正。当 x<0,角度就+180°。

求出触摸的角度之后我们再算出触摸的半径,这样子就可以判断当前是否触摸到了我们所绘制的各个模块上。

另外,老大对 onTouch 触摸的时候有个提议,那就是触摸中心bmp菜单之后不松手(此时 animator显示),然后滑动屏幕选择对应的模块后松手,一气呵成。也就是 一个ACTION_DOWN 和 一个ACTION_UP,中间 N个ACTION_MOVE,这没关系,有需求我们就去做是吧。


没关系,我们在当前Activity做一下处理,在move和up事件中不处理,传给我们自定义view,传入的event.getRawX() - pieLocation[0]就可以视为是在我们MenuChart里面对应的坐标点了。[可以试一下点击小二,来份菜单btn的时候手指不松开移动到展示开的模块。]

结束语

因为毕竟新手上路,所以可能会存在某些问题,不过感言应该就是动手写东西的确比想象中的难,不积跬步无以至千里。有什么不正确的地方,希望大家指正。

项目地址:

https://github.com/qdxxxx/MenuChart

文章原创作者GuoLin 书籍推荐

郭林大神原创android 书籍:《第一行代码 android》

淘宝链接:

https://s.click.taobao.com/t?e=m%3D2%26s%3DgKUfuKdAZKocQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67p2n%2BQBNMyE6Rku8%2Bpj6eJall3bs%2B3NRhNHnsKI%2BqxhyM0iVZhTFBom4YIorMPnmg8G0g2OJi%2FzmXHfenomYtn5EW9vzeG8LzfPUwktUBEmkxg5p7bh%2BFbQ%3D&pvid=10_106.6.161.154_3367_1490163222155

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,117评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,963评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,897评论 0 240
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,805评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,208评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,535评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,797评论 2 311
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,493评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,215评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,477评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,988评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,325评论 2 252
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,971评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,807评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,544评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,455评论 2 266

推荐阅读更多精彩内容