61.自定义View练习(六)可展开、会呼吸的按钮
来源:互联网 发布:节奏大师刷钻石软件 编辑:程序博客网 时间:2024/04/28 05:46
转载请注明出处 http://blog.csdn.net/qq_31715429/article/details/77101114
本文出自:猴菇先生的博客
不专门练习的话,自定义View的知识又忘了许多。。正好新项目里有这个需求,就再练习一下,代码已上传:https://github.com/MonkeyMushroom/ExpandableBreathingButton
可以修改文本、文字大小、各种颜色:
1、按照国际惯例,就是新建attrs,写各种需要的属性,然后获取,新建各种所需的Paint、Rect,重写onMeasure计算宽高,重写onDraw画图搞起。。
2、关于可展开效果,其实就是点击发布时,启动一个ValueAnimator,对一个圆角矩形的左边距离不断改变:
int mBackgroundRectFLeft;RectF mBackgroundRectF = new RectF();@Overrideprotected void onDraw(Canvas canvas) { mBackgroundRectF.set(mBackgroundRectFLeft, 0, getWidth(), getHeight()); canvas.drawRoundRect(mBackgroundRectF, mOuterRadius, mOuterRadius, mmBackgroundRectPaint);//圆角背景矩形}private void openButton() { ValueAnimator rectLeftAnim = ValueAnimator.ofInt(mBackgroundRectFLeft, mArcWidth / 2); rectLeftAnim.setDuration(250); ValueAnimator textAlphaAnim = ValueAnimator.ofInt(0, mItemTextAlpha); textAlphaAnim.setDuration(120); rectLeftAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mBackgroundRectFLeft = (int) animation.getAnimatedValue(); invalidate(); } });}
3、关于呼吸效果,就是一个对外圆圈半径改变的ValueAnimator:
mBreatheRadius = getHeight() / 2 - mArcWidth / 4;mBreatheAnim = ValueAnimator.ofFloat(mBreatheRadius, mBreatheRadius - mArcWidth / 2);mBreatheAnim.setDuration(1000);mBreatheAnim.setRepeatMode(ValueAnimator.REVERSE);mBreatheAnim.setRepeatCount(Integer.MAX_VALUE);mBreatheAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mBreatheRadius = (float) animation.getAnimatedValue(); invalidate(); }});mBreatheAnim.start();@Overrideprotected void onDraw(Canvas canvas) { canvas.drawCircle(mInnerCircleCenterX, mInnerCircleCenterY, mBreatheRadius, mBreathePaint);//呼吸圈
4、关于文字位置居中计算,以前我用一个Rect,用
paint.getTextBounds(text, 0, text.length(), mTextRect);int textWidth = mTextRect.width();int textHeight = mTextRect.height();
这样计算不准确,可能是因为返回的宽高是int值,应该用FontMetrics类来计算,大家可以搜一下:
float buttonTextWidth = mButtonTextPaint.measureText(mButtonStr, 0, mButtonStr.length());Paint.FontMetrics publishFontMetrics = mButtonTextPaint.getFontMetrics();canvas.drawText(mButtonStr, 0, mButtonStr.length(), getWidth() - mOuterRadius - mArcWidth / 2 - buttonTextWidth / 2, mOuterRadius + mArcWidth / 2 + -(publishFontMetrics.ascent + publishFontMetrics.descent) / 2, mButtonTextPaint);
5、再有就是OnTouchEvent的处理,因为这个控件不是一直都是展开状态,那么就要求控件在闭合的时候,要不影响该控件下层控件对点击的处理。比如我这个ExpandableBreathngButton,下层是一个RecyclerView,并设置了OnItemClickListener,那我这个按钮在闭合时,点击按钮左侧但还是在这个View范围内的地方,如下图红框内
这个范围内应该不处理事件,return false
@Overridepublic boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: x = (int) event.getX(); y = (int) event.getY(); if (!isOpen && x < getWidth() - 2 * mOuterRadius && y > 0 && y < getHeight()) { //未展开状态下,点击发布圆左侧的位置,不处理事件 return false; } break; }}
然后在up事件中计算点击了发布按钮还是展开的item,就是计算点击的坐标是在圆半径内,还是在item矩形范围内。
最后源码奉上https://github.com/MonkeyMushroom/ExpandableBreathingButton
欢迎star~
- 61.自定义View练习(六)可展开、会呼吸的按钮
- 可移动的悬浮按钮(自定义View)
- Android自定义可动画展开收缩View的实现
- 自定义可动画展开收缩View的实现
- SurfaceView自定义View的使用 画会呼吸的圆和奔跑的爆米花
- 优惠券View(可展开的view)
- android 自定义View开发实战(六) 可拖动的GridView
- 按钮形式的可展开的listview
- 会呼吸的痛
- 会呼吸的圆
- 封装可展开和收缩的View
- Android自定义View——从零开始实现可展开收起的水平菜单栏
- ExpandableListView--------可展开的ListView(自定义箭头)
- Qt实用技巧:会呼吸的痛(呼吸点/呼吸灯)
- Qt实用技巧:会呼吸的痛(呼吸点/呼吸灯)
- 自定义可展开的菜单 MenuButtonLayout
- [Android]自定义可展开的ExpandTextView
- 自定义可折叠和展开的View
- Nginx + http basic 限制访问Elasticsearch
- JavaScript代码规范
- 使用 /sys 文件系统访问 Linux 内核
- Java Callable和Future学习
- BZOJ2588 Count on a tree <DFS序+LCA+值域主席树>
- 61.自定义View练习(六)可展开、会呼吸的按钮
- Django Ajax 登陆 验证
- 设计模式之模板方法模式--慕课网笔记
- GUI——Action事件
- AOP基础学习(一)
- 【深度学习下一大突破】吴恩达对话 Hinton、Bengio、Goodfellow(视频)
- Spring AOP 动态代理机制
- java文件上传下载
- 线程与进程 计算密集型 IO密集型