美文网首页
Android-->模仿360底部导航按钮

Android-->模仿360底部导航按钮

作者: angcyo | 来源:发表于2017-04-27 08:45 被阅读25次

效果图:


这里写图片描述

如果没有左右2个边界的判断, 其实还是很简单的.
那就不断绘制drawCircle就可以了.

难就难在左右边界这2个特殊的地方.
我这里使用了drawArc的方法,完成左右2个特殊的地方.


部分代码:

//首先绘制 内圆. 也就是没有透明颜色的圆
mPaint.setColor(mCircleColor);
canvas.drawCircle(mCx, mCy, Math.min(curRadius, mCircleRadius), mPaint);

//其次 绘制,带有透明颜色的圆
mPaint.setColor(mCircleColorOut);
canvas.drawCircle(mCx, mCy, Math.min(curRadius, mCircleRadiusOut), mPaint);

//最后判断是否是左右特殊位置, 绘制arc
if (drawLeft) {
  mPaint.setColor(mCircleColor);
  canvas.drawArc(getArcRecF(Math.min(curRadius, mCircleRadiusMax)), 90, 180, true, mPaint);
} else if (drawRight) {
  mPaint.setColor(mCircleColor);
  canvas.drawArc(getArcRecF(Math.min(curRadius, mCircleRadiusMax)), -90, 180, true, mPaint);
}

//为了动画,需要一直改变绘制的半径
if (curRadius < maxRadius) {
   curRadius += mRadiusDrawStep;
   invalidateSelf();
}

使用方法:

//设置普通的背景
button.setBackground(new CircleAnimDrawable().setPosition(CircleAnimDrawable.POS_LEFT));
button.setBackground(new CircleAnimDrawable().setPosition(CircleAnimDrawable.POS_CENTER));
button.setBackground(new CircleAnimDrawable().setPosition(CircleAnimDrawable.POS_RIGHT));
//如果要在RadioButton里面使用,需要包一层Drawable
private Drawable createRadioBackground(int position) {
  StateListDrawable listDrawable = new StateListDrawable();
  listDrawable.addState(new int[]{android.R.attr.state_checked}, new CircleAnimDrawable().setPosition(position));
  return listDrawable;
}

源码地址:
https://github.com/angcyo/RJcenter/blob/master/rsen/src/main/java/com/rsen/drawable/CircleAnimDrawable.java

至此: 文章就结束了,如有疑问: QQ群:274306954 欢迎您的加入.

相关文章

  • Android-->模仿360底部导航按钮

    效果图: 如果没有左右2个边界的判断, 其实还是很简单的.那就不断绘制drawCircle就可以了. 难就难在左右...

  • Android-->模仿QQ7.0底部导航效果

    来一波效果图 有没有一种蠢蠢欲动的想法? 反正我已经动了. 分析一波 1:选中状态, 和未选中状态显示的图片不一样...

  • 微信产品分析报告

    为什么微信底部导航按钮只有4个?按钮之间的间距是如何设计的? 查阅相关资料得知,底部导航按钮的设计原则是3-5个。...

  • 武汉晚报项目

    首页-一级 1.底部导航栏,fixed,四个链接。2.资料栏模仿陌陌。3.筛选按钮需要重新设计。 私信-一级 1....

  • Material Design布道师(2)

    这一节我们来对MD设计中的组件观察一二。 MD设计当中的组件有:底部导航、底部表单、按钮、浮动按钮、卡片、信息条、...

  • 2018-01-19 Axure 微信制作第九节

    1、点击底部导航的键盘、文本框、表情和加号按钮,对话和底部导航均能以线性的方式向上移动,时间为500ms。通过动态...

  • Flutter 使用 BottomAppBar 自定义底部导航(

    在之前的一篇博客Flutter 使用 BottomAppBar 自定义底部导航(中间浮出按钮)中基本实现了点击底部...

  • 导航基本用法

    导航栏图解 标题 导航背景色 导航标题的颜色 隐藏导航返回按钮 设置返回文字为白色 把导航的底部当做屏幕的原点开始...

  • viewpager的setCurrentItem 底部导航栏点击

    问题: viewpager的setCurrentItem 底部导航栏点击按钮实现直接跳转如果中间的tab多了切换的...

  • iOS导航栏使用总结

    目录: 一、设置导航栏样式二、自定义导航栏返回按钮后侧滑不可用问题三、隐藏导航栏底部的分割线四、导航栏引起的布局问...

网友评论

      本文标题:Android-->模仿360底部导航按钮

      本文链接:https://www.haomeiwen.com/subject/gnkgzttx.html