Android初级进阶之自定义酷炫菜单-低调大师

Android初级进阶之自定义酷炫菜单

2016-08-26 645

效果图

image

前言

最近一直在学习自定义控件，发现自己依然是那么的渣渣。上面的UI效果来自这个网站，果然，交互设计的效果与实际做出来的效果还是相差很大啊。

分析

整个效果实现起来还是十分的简单，分析一下：

中间是一个圆用drawCircle()就可以画出来。
圆中心是两条线：drawLine()
后边的背景是一个圆角矩形：drawRoundRect()
动画效果使用ValueAnimator发散1--0之间的数值，不断的更改长度和坐标即可完成。
不想吐槽那四个小正方形。

开始编码

Step 1

继承自原生的View，重写构造方法，在构造方法中初始化画笔等操作

 /**
 * 初始化画笔等
 */
private void initSomeThing() {
    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(1);
}

Step 2 Measure（测量）

测量View的宽高，支持Padding，wrap_content等

 @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int measureWidth = measureSize(widthMeasureSpec, getWindowMsg(getContext())[0] - getPaddingLeft() - getPaddingRight() - mCenterMenuOffset);
    int measureHeight = measureSize(heightMeasureSpec, dp2px(getContext(), 90)) + getPaddingBottom() + getPaddingTop();
    setMeasuredDimension(measureWidth, measureHeight);
}

测量封装方法

/**
 * 测量宽高 模式
 *
 * @param measureSpec
 * @return
 */
private  int measureSize(int measureSpec,int defaultSize) {
    int result;
    int size = MeasureSpec.getSize(measureSpec);
    int mode = MeasureSpec.getMode(measureSpec);
    if (mode == MeasureSpec.EXACTLY) {
        result = size;
    } else {
        result = defaultSize;
        if (mode == MeasureSpec.AT_MOST) {
            result = Math.min(result, size);
        }
    }
    return result;
}

获取屏幕宽高

 /**
 * 获取屏幕宽高
 *
 * @return wh[1] 屏幕高度
 */
private   int[] getWindowMsg(Context context) {
    int[] wh = new int[2];
    WindowManager wm = (WindowManager) context
            .getSystemService(Context.WINDOW_SERVICE);
    wh[0] = wm.getDefaultDisplay().getWidth();
    wh[1] = wm.getDefaultDisplay().getHeight();
    //Log.d("vivi", "屏幕宽 =" + wh[0]);
    //Log.d("vivi", "屏幕高 =" + wh[1]);
    return wh;
}

dp2px

/**
 * dp转px
 *
 * @param context
 * @param dpVal
 * @return
 */
private  int dp2px(Context context, float dpVal) {
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
            dpVal, context.getResources().getDisplayMetrics());
}

Step 3 在onSizeChanged中初始化宽高的一些属性

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth = w;//宽度
    mHeight = h;//高度
    mCenterMenuOffset = (int) (mHeight * 0.3);//中间 圆形菜单的上下偏移量
    mMenuBackgroundOffset = (int) ((mHeight * 0.5) / 2); //紫色圆角矩形的上下偏移量
    mCenterMenuRadius = (mHeight - mCenterMenuOffset) / 2;//中间圆形的半径
    mForkLenght = (int) (mCenterMenuRadius * 0.4);//中间两个线的长度

    //得到中心菜单的矩阵 start
    int l = mWidth / 2 - mCenterMenuRadius;
    int t = mCenterMenuOffset / 2;
    int b = mHeight - mCenterMenuOffset / 2;
    int r = mWidth / 2 + mCenterMenuRadius;
    mCenterMenuRect = new Rect(l, t, r, b);//中心的圆的矩阵，用来响应点击事件的
    //得到中心菜单的矩阵 end
}

Step 4 画中心的圆

画个圆，没什么难度，偏移量，半径都在onSizeChanged中初始化完成了。这里要给圆加上阴影

  //画中心的圆 start
    mPaint.setShadowLayer(7, 4, 5, 0xff999999);//设置阴影图层
    this.setLayerType(View.LAYER_TYPE_SOFTWARE, mPaint);
    mPaint.setColor(mCenterMenuColor);
    canvas.drawCircle(mWidth / 2, mHeight / 2, mCenterMenuRadius, mPaint);

Step 5 圆中心的两根线

仔细看效果图，两个线上边的点是相同的，只是在动画的时候更改X轴的坐标就可以从 ^ 变成X了。首先要将画布的坐标点移到中心，这样更方便绘制这两条线。

//圆形菜单中的 叉叉
    canvas.translate(mWidth / 2, mHeight / 2);//移动坐标点
    mPaint.setColor(Color.WHITE);
    mPaint.setStrokeWidth(10);
    canvas.drawLine(0, -mForkLenght, -mForkLenght, mForkLenght, mPaint);
    canvas.drawLine(0, -mForkLenght, mForkLenght, mForkLenght, mPaint);

效果就出来啦：

image

只要将左边的线的坐标更改为负数，右边更改为正数，就变成了X了

 canvas.drawLine(mForkLenght, -mForkLenght, -mForkLenght, mForkLenght, mPaint);
 canvas.drawLine(1mForkLenght, -mForkLenght, mForkLenght, mForkLenght, mPaint);

image

Step 6 绘制背景矩形

绘制静态的矩形，也就是整个展开的效果

 // 菜单背景 start
int left = mWidth / 2;//100
float nowWidth = (left - mMenuBackgroundOffset / 2);
RectF mMenuRectF = new RectF(left - nowWidth, mMenuBackgroundOffset, left + nowWidth, mHeight - mMenuBackgroundOffset);
mPaint.setColor(mMenuBackgroundColor);
canvas.drawRoundRect(mMenuRectF, mCenterMenuRadius, mCenterMenuRadius, mPaint);

效果出来了有没有？

展开初始状态

Step 7 为中心的按钮响应点击事件

自定义原生View应该如何响应点击事件呢？其实非常的简单，在onSizeChanged里面计算出了中心圆的矩形区域mCenterMenuRect。而Rect提供了一个方法contains(x, y)来判断xy坐标是不是在这个矩形当中，于是这就简单了，只需要重写onTouch方法判断xy坐标就好。

  @Override
public boolean onTouchEvent(MotionEvent event) {
    int x = (int) event.getX();//获得点击的坐标
    int y = (int) event.getY();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            break;
        case MotionEvent.ACTION_UP:
            if (mCenterMenuRect.contains(x, y)) {//包含 打开菜单获关闭
                openOrClose();
            }
            break;
    }
    return true;
}

/**
 * 打开或关闭
 */
public void openOrClose() {
    if (isOpen) {
        startAnimator(1, 0);
    } else {
        startAnimator(0, 1);
    }
    isOpen = !isOpen;
}

Step 8 增加动画

使用ValueAnimator来发散1--0之间的数值，相当于百分比，然后不断的postInvalidate达到效果

/**
 * 开启启动动画
 *
 * @param from
 * @param end
 */
private void startAnimator(final int from, int end) {
    if (mAnimatorBackground != null && mAnimatorBackground.isRunning()) {
        mAnimatorBackground.cancel();
        mAnimatorBackground = null;
    }
    mAnimatorBackground = ValueAnimator.ofFloat(from, end).setDuration(500);
    mAnimatorBackground.setInterpolator(new OvershootInterpolator());
    mAnimatorBackground.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            mPreValue = (float) animation.getAnimatedValue();
            postInvalidate();
        }
    });
    mAnimatorBackground.start();
}

onDraw方法代码

 @Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 菜单背景 start
    int left = mWidth / 2;//100
    float nowWidth = (left - mMenuBackgroundOffset / 2) * mPreValue;
    RectF mMenuRectF = new RectF(left - nowWidth, mMenuBackgroundOffset, left + nowWidth, mHeight - mMenuBackgroundOffset);
    mPaint.setColor(mMenuBackgroundColor);
    canvas.drawRoundRect(mMenuRectF, mCenterMenuRadius, mCenterMenuRadius, mPaint);
    // 菜单背景 end
    //画中心的圆 start
    mPaint.setShadowLayer(7, 4, 5, 0xff999999);//设置阴影图层
    this.setLayerType(View.LAYER_TYPE_SOFTWARE, mPaint);
    mPaint.setColor(mCenterMenuColor);
    canvas.drawCircle(mWidth / 2, mHeight / 2, mCenterMenuRadius, mPaint);
    mPaint.setShadowLayer(0, 0, 0, Color.TRANSPARENT);
    // canvas.rotate(360 * mPreValue, mWidth / 2, mHeight / 2);

    //画中心的圆 end
    //圆形菜单中的 叉叉
    canvas.translate(mWidth / 2, mHeight / 2);//移动坐标点
    mPaint.setColor(Color.WHITE);
    mPaint.setStrokeWidth(10);
    canvas.drawLine(mForkLenght * mPreValue, -mForkLenght, -mForkLenght, mForkLenght, mPaint);
    canvas.drawLine(-mForkLenght * mPreValue, -mForkLenght, mForkLenght, mForkLenght, mPaint);
}

效果如下：

酷炫菜单2

 // canvas.rotate(360 * mPreValue, mWidth / 2,

这句注释打开后就会有一个旋转的效果，如下：

酷炫菜单3

最后

OK，这个效果基本上到这里也就完成了，不要问我为什么没有画矩形，我只是想偷懒，最后会附上源码的地址，自己研究去，也就是计算矩形的位置加上动画而已。

自己造轮子，才是最快的进步方式。

源码

微信关注我们

原文链接：https://yq.aliyun.com/articles/641066

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

IBeacon（i 比肯）物联网最快速的连接器

Ibeacon一项低耗能蓝牙技术技术，工作原理类似之前的蓝牙技术，由iBeacon发射信号，IOS设备定位接受，反馈信号。根据这项简单的定位技术可以做出许多的相应技术应用。[ 兼容设备编辑支持蓝牙4.0的IOS设备（iPhone4s及以上，iPad第三代及以上，iPad mini第一代及以上，iPod Touch第五代）。支持OS X Mavericks 10.9操作系统和蓝牙4.0的苹果计算机。安卓4.3及以上（如三星 Galaxy S3/S4/S4 Mini, 三星 Galaxy Note 2/3, HTC One, Google/LG Nexus 7 2013 version/Nexus 4/Nexus 5, HTC Butterfly, OnePlus One）支持Lumia Cyan及以上更新服务Windows Phone设备（报告显示，不包含Windows Phone 8.1）

2016-08-27

572

继续Appium环境的搭建。第二节安装Android开发环境如果你的环境是MAC那么可以直接跳过这一节。就像我们在用Selenium进行web自动化测试的时候一样，我们需要一个浏览器来执行测试脚本。那么移动端自动化测试，我们同样需要一部Android手机（手机需要链接电脑）或者Android模拟器。安装java环境众所周知，Android是由Java语言开发的，所以想开发Android应用首先需要Java环境，所以，我们首先需要安装Java环境。 java下载地址：http://www.java.com/zh_CN/download/manual.jsp 小知识： java环境分JDK和JRE，JDK就是JavaDevelopmentKit.简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。JRE是JavaRuntimeEnviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。打开下载链接选择相应的版本进行下载。我们以Windows安装JDK为例，双击下载的JDK，设置安装路径。这里我们选择默认安装在 D:\...

2016-08-27

586

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。