转载请注明出处：王亟亟的大牛之路

最近的一系列文章都是些的自定义控件的绘制，动画等效果，这一片就直接做一个自定义view，上一篇的地址：http://blog.csdn.net/ddwhan0123/article/details/50477030（没看的小伙伴可以看下）

照惯例，贴下演示效果

包结构：

设计分析

黄色为整个控件的整体，绿色部分为绘画出来的六边形，蓝色为一个标准的TextView

问题，为什么不把控件做在一起？

一开始有考虑过直接paint一整个控件把六边形和文字都画出来，想想还是觉得文字部分还是需要更丰富的延展性，而不只是固定的化成什么样子，他应该有自己的特性，所以就还是使用了控件，把整个一体的控件“分为”一个Layout的两部分。

代码实现

首先，我们要做第一个控件六边形的“CuteLoadingView”，怎么画？

 @Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//中心點XCenter = XDraw / 2;YCenter = YDraw / 2;mLength = XDraw / 2;double radian30 = 30 * Math.PI / 180;a = (float) (mLength * Math.sin(radian30));b = (float) (mLength * Math.cos(radian30));c = (YDraw - (2 * b)) / 2;initPaint();//        Path path = new Path();
//        path.moveTo(XDraw, YDraw / 2);
//        path.lineTo(XDraw - a, YDraw - c);
//        path.lineTo(XDraw - a - mLength, YDraw - c);
//        path.lineTo(0, YDraw / 2);
//        path.lineTo(a, c);µ
//        path.lineTo(XDraw - a, c);
//        path.close();
//        http://snowcoal.com/article/520.htmlLogUtils.d("--->CuteLoadingView initValue  getMeasuredWidth : " + XDraw + " getMeasuredHeight : " + YDraw+ " Image_AnimType : " + Image_AnimType);
//        canvas.drawPath(path, paint);paint.setColor(defaultColor[0]);canvas.drawLine(XDraw, YDraw / 2, XDraw - a, YDraw - c, paint);paint.setColor(defaultColor[1]);canvas.drawLine(XDraw - a, YDraw - c, XDraw - a - mLength, YDraw - c, paint);paint.setColor(defaultColor[2]);canvas.drawLine(XDraw - a - mLength, YDraw - c, 0, YDraw / 2, paint);paint.setColor(defaultColor[3]);canvas.drawLine(0, YDraw / 2, a, c, paint);paint.setColor(defaultColor[4]);canvas.drawLine(a, c, XDraw - a, c, paint);paint.setColor(defaultColor[5]);canvas.drawLine(XDraw, YDraw / 2, XDraw - a, c, paint);// makeAnim(this, Image_AnimType); 动画实现}

选用的DrawLine的方式来画每一条边，然后画一条换个颜色画一条换个颜色，六边形的左边怎么算就google吧，会有的（注释掉的部分是用DrawPath事先，但是因为他无法事先每一条边的单独着色，所以也就注释掉了，如果要使用一种着色的还是可以用drawPath的）

动画部分

选用了之前讲过的ObjectAnimator和AnimationSet的组合拳来实现，旋转，透明等操作，更细的演示可以看http://blog.csdn.net/ddwhan0123/article/details/50470237

为了让动画无限重复，我设置了她的动画模式

objectAnimator2.setRepeatCount(ValueAnimator.INFINITE);objectAnimator2.setRepeatMode(ValueAnimator.RESTART);

处理完六边形控件就做一个自定义的Layout把两部分包起来就OVER了。

首先先获取一系列初始化的参数：

 //获取标签数组TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CuteLoadingView);try {image_width = (int) typedArray.getDimension(R.styleable.CuteLoadingView_image_width, 120);image_height = (int) typedArray.getDimension(R.styleable.CuteLoadingView_image_height, 120);text = typedArray.getString(R.styleable.CuteLoadingView_image_text);Image_AnimType = typedArray.getString(R.styleable.CuteLoadingView_image_AnimType);} catch (Exception e) {LogUtils.e("Unable to parse attributes due to: " + e.getMessage());} finally {typedArray.recycle();}if (text == null || text.length() < 1) {text = "加载中 ..";}

如果没传就设置一些默认的值。
补充一句，TextView的text值shiyi“空格”为判断的，所以传入的字符串请像“王亟亟你好”这样，不然会有一个异常

在setColor时也会有类似逻辑，如果颜色数组不满足要求也会抛出异常。

获取完初始化参数之后，先设置我们的最外层Layout

这边用的是LinearLayout，顺便设置了剧中，不然我们的空间都默认靠左

//设置水平this.setOrientation(LinearLayout.VERTICAL);this.setGravity(Gravity.CENTER);

先创建，我们的六边形，长款为传入的大小，如果没传默认120

 if (cuteLoadingView == null) {cuteLoadingView = new CuteLoadingView(context, attrs, Image_AnimType);cuteLoadingView.setLayoutParams(new LayoutParams(image_width, image_height));this.addView(cuteLoadingView);}

再设置我们的TextView,让他动起来，设置默认的字体大小，设置文字内容

  if (textView == null) {// 添加TextView组件textView = new TextView(context);// 设置组件TextView的内容textView.setText(text);textView.setTextSize(textSize);makeJump();// 设置组件的高，宽textView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);lp.setMargins(0, 30, 0, 0);textView.setLayoutParams(lp);// 将组件添加到布局中this.addView(textView);}

这就大功告成了，再之后就是写一点java的set代码，方便大家该内容了，是不是so easy

源码地址：https://github.com/ddwhan0123/CuteLoadingLayoutGit
微博：http://weibo.com/u/5298245888（新产品会先在微博发出）

走过路过 Star下，谢谢

自定义View时，用到Paint Canvas的一些温故，自定义Loading控件（动画五，“六边形”的旋转跳跃)相关推荐

自定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，掏粪男孩Gif顺便再提提onWindowFocusChanged）
转载请注明出处:王亟亟的大牛之路之前在绘画的过程中提到了静态的旋转啊,缩放啊,平移等一些效果.那么自定义的View当然也有动态的效果也就是我们的Animation,常用的有三种 View Anima ...
转载爱哥自定义View系列－－Paint详解
上图是paint中的各种set方法这些属性大多我们都可以见名知意,很好理解,即便如此,哥还是带大家过一遍逐个剖析其用法,其中会不定穿插各种绘图类比如Canvas.Xfermode.ColorFilt ...
android 动画之漂移,[超棒]自定义View居然还能这样？用 Android 实现一条小金鱼游动动画...
原标题:[超棒]自定义View居然还能这样?用 Android 实现一条小金鱼游动动画前言此篇中的小鱼动画是模仿国外一个大牛做的flash动画,第一眼就爱上它了,简约灵动又不失美学,于是抽空试着尝 ...
自定义View时，用到Paint Canvas的一些温故，讲讲平时一些效果是怎么画的（基础篇一）...
转载请注明出处王亟亟的大牛之路之前也有一个类似于画板的操作,但是不够详细,这边先补上链接,有兴趣的小伙伴可以看看http://blog.csdn.net/ddwhan0123/article/det ...
自定义View时，用到Paint Canvas的一些温故，讲讲用路径绘画实现动画效果（基础篇三）
转载请注明出处王亟亟的大牛之路上礼拜上了一篇关于动画的自定义View的文章,然后里面的实现是PathMeasure,然后这一部分貌似以前没有讲过,那么就再补一篇来介绍下这部分的知识(之前一篇的传送门 ...
自定义View时，用到Paint Canvas的一些温故，讲讲平时一些效果是怎么画的（基础篇二，图像遮盖，Canvas静态变化）
转载请注明出处:王亟亟的大牛之路上一篇把简单的一些概念理一理,还画了个圈,那这一篇讲一下图像遮盖"Xfermode"和Canvas的旋转.平移等效果 Xfermode: Avoi ...
Android 自定义view时用到的TypedArray
前言: 在自定义控件的时候,如果我们想额外的添加一些属性,就会用到TypedArray这个类,那么这个类是怎么得到的,以及怎么使用的,这里作个简单介绍. 创建自定义属性首先创建values\attr ...
自定义View(二)，强大的Canvas
本文转自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2012/1212/703.html Android中使用图形处理引擎,2D部分是 ...
Android使用自定义View时：Error inflating class错误的原因。
当在布局文件里使用自定义的View的时候,出现Error inflating class错误的原因: 1.没有定义inflate需要的默认构造函数: eg:自定义View为TestView,需要定义T ...
Android View的elevation属性，CardView始终在布局顶层覆盖其它控件的解决方式；
elevation属性字面意思是海拔.你可以理解为它是控件的厚度:我们日常使用控件都是只在乎宽高的,这个控件的厚度却很少在意:如果你不太理解,看一下CardView覆盖其它控件的例子: Android ...

自定义View时，用到Paint Canvas的一些温故，自定义Loading控件（动画五，“六边形”的旋转跳跃)

转载请注明出处：王亟亟的大牛之路

获取完初始化参数之后，先设置我们的最外层Layout

走过路过 Star下，谢谢

自定义View时，用到Paint Canvas的一些温故，自定义Loading控件（动画五，“六边形”的旋转跳跃)相关推荐

最新文章

热门文章