Android自定义View实现可展开、会呼吸的按钮

不专门练习的话,自定义View的知识又忘了许多。。正好新项目里有这个需求,就再练习一下,代码已上传:地址

可以修改文本、文字大小、各种颜色:

1、按照国际惯例,就是新建attrs,写各种需要的属性,然后获取,新建各种所需的Paint、Rect,重写onMeasure计算宽高,重写onDraw画图搞起。。

2、关于可展开效果,其实就是点击发布时,启动一个ValueAnimator,对一个圆角矩形的左边距离不断改变:

int mBackgroundRectFLeft;
RectF mBackgroundRectF = new RectF();

@Override
protected 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();

@Override
protected 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

@Override
public 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矩形范围内。

最后源码奉上: 详细地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义View制作动态炫酷按钮实例解析

    普通按钮也就那么几种样式,看着都审美疲劳,先放效果图: 你会不会以为这个按钮是集结了很多动画的产物,我告诉你,并没有.所有的实现都是基于自定义View,采用最底层的onDraw一点一点的画出来的.没有采用一丁点的动画.虽然演示时间很短,但是要完成这么多变化,还是挺吃力. 首先讲解用法: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState)

  • android为ListView每个Item上面的按钮添加事件

    本文介绍了ListView给每个Item上面的按钮添加事件,具体如下: 1.先看下效果图: 在这里仅供测试,我把数据都写死了,根据需要可以自己进行修改,此外实现ListView上面每个Item上的Button的事件有两种方法: 1.使用final变量扩展局部变量的生命周期范围主要代码(本文最后附全部代码): //注意原本getView方法中的int position变量是非final的,现在改为final @Override public View getView(final int posit

  • android中在Activity中响应ListView内部按钮的点击事件的两种方法

    最近交流群里面有人问到一个问题:如何在Activity中响应ListView内部按钮的点击事件,不要在Adapter中响应? 对于这个问题,我最初给他的解答是,在Adapter中定义一个回调接口,在Activity中实现该接口,从而实现对点击事件的响应. 下班后思考了一下,觉得有两种方式都能比较好的实现:使用接口回调和使用抽象类回调. 正好可以复习一下接口和抽象类的区别,于是写了两个Demo: 1.使用接口回调: Adapter类 package com.ivan.adapter; import

  • Android ListView ImageView实现单选按钮实例

    做Android开发两年的时间,技术稍稍有一些提升,刚好把自己实现的功能写出来,记录一下,如果能帮助到同行的其他人,我也算是做了件好事,哈哈!!废话不多说,先上个图. 先上一段代码: 1 if (lastposition == position){ 2 viewHolder.setImageResource(R.id.iv_yuandian1,R.mipmap.ic_button_checked); 3 } else { 4 viewHolder.setImageResource(R.id.iv

  • Android自定义View实现拖动选择按钮

    本文为大家分享了Android实现拖动选择按钮的具体代码,供大家参考,具体内容如下 效果图 View代码 第一步:自定义属性 <declare-styleable name="DragView"> <attr name="icon_drag" format="reference"/> <attr name="color_circle" format="color"/> &

  • Android ListView实现仿iPhone实现左滑删除按钮的简单实例

    需要自定义ListView.这里就交FloatDelListView吧. 复写onTouchEvent方法.如下: @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN:<BR> // 获取按下的条目视图(child view) int childCount = getChildCount(); int[] listViewCo

  • Android基于ImageView绘制的开关按钮效果示例

    本文实例讲述了Android基于ImageView绘制的开关按钮效果.分享给大家供大家参考,具体如下: 今天弄了一下用图片绘制开关按钮. 效果图: 还有我两张start图片和stop图片就是上面的图片,到时候大家可以按照自己的图片调用.. Main.xml文件 在xml进入这段代码就ok了. <ImageView Android:id="@+id/start" android:layout_width="150.px" android:layout_heigh

  • Android自定义View实现开关按钮

    前言:Android自定义View对于刚入门乃至工作几年的程序员来说都是非常恐惧的,但也是Android进阶学习的必经之路,平时项目中经常会有一些苛刻的需求,我们可以在GitHub上找到各种各样的效果,能用则用,不能用自己花功夫改改也能草草了事.不过随着工作经验和工作性质,越来越觉得自定义View是时候有必要自己花点功夫研究一下. 一.经过这两天的努力,自己也尝试着写了一个Demo,效果很简单,就是开关按钮的实现. 可能有的人会说这效果so easy,找UI切三张图就完事了,何必大费周折自定义.

  • 自定义滑动按钮为例图文剖析Android自定义View绘制

    自定义View一直是横在Android开发者面前的一道坎. 一.View和ViewGroup的关系 从View和ViewGroup的关系来看,ViewGroup继承View. View的子类,多是功能型的控件,提供绘制的样式,比如imageView,TextView等,而ViewGroup的子类,多用于管理控件的大小,位置,如LinearLayout,RelativeLayout等,从下图可以看出 从实际应用中看,他们又是组合关系,我们在布局中,常常是一个ViewGroup嵌套多个ViewGro

  • Android自定义View之圆形进度条式按钮

    介绍 今天上班的时候有个哥们问我怎么去实现一个按钮式的进度条,先来看看他需要实现的效果图. 和普通的圆形进度条类似,只是中间的地方有两个状态表示,未开始,暂停状态.而且他说圆形进度的功能已经实现了.那么我们只需要对中间的两个状态做处理就行了. 先来看看实现的效果图: 上面说了我们只需要处理中间状态的变化就可以了,对于进度的处理直接使用了弘洋文章中实现: http://blog.csdn.net/lmj623565791/article/details/43371299 下面开始具体实现. 具体实

随机推荐