×

实践自定义UI—View

96
SongNick
2015.11.14 10:55* 字数 2016

目前IOS和Android两个系统的交互设计都在相互的借鉴,所以有的时候我们需要在Android系统中实现IOS的一些UI效果,那我们就必须自己实现啦(没有现成的控件)。现在也看到很多公司也把能够自定义UI放到招聘要求中,可见我们还是要学习如何去自定义。当然我们自定义UI的过程中,可以让我们对Android系统的一些机制理解的更加透彻。那么自定义UI真的很难吗,我感觉没有那么难,只要多练习,自然就可以了。按照我的理解,其实我们自定义UI是可以通过这三种方法实现:

1.继承View,直接在Canvas上面绘制。

2.继承ViewGroup,根据ViewGroup的绘制流程实现自己需要的效果。

3.利用已有的UI控件(RelativeLayout,LinearLayout,FrameLayout....),继承改造或者组合使用等。

接下来就以上的方法,一个一个实践来练习吧!

自定义UI(利用View)

利用View实现自定义主要是继承View并利用OnDraw(Canvas canvas)方法绘制自己需要的UI,利用canvas主要可以绘制矩形(包括圆角矩形)、圆、点、线、扇形等,同时还可以根据类Path设置需要的路径,利用Canvas将Path绘制出来。具体的使用通过实践学习吧。这里我们还要关心View中的OnMeasure()方法,这个方法主要是设定我们当前这个View的大小。关于View中的这些方法的分析可以看看这篇文章,分析的比较详细。好了,还是实战吧(在实战中遇到问题不断的解决,自然对很多东西就了解了,总是看理论的东西还是理解的不透彻哦),今天利用View实现如下的效果(gif 效果不是很好0_0,这里我们只分析第二个效果图,其他的读者可以自己扩展实现):

效果图

分解效果图

任何复杂的事情都要学会分解成多个简单的事情去处理。动画效果的某个瞬间的静态UI如下所示:

运动的某个瞬间

通过这个静态的UI,可以看出它的组成很简单:一个大圆,一个实心的小圆————这个小圆的中心点是在大圆的圆环上。这样就把这个静态的UI分解为:一个大圆和一个小圆。

接下来想想怎么让实心小圆动起来呢?前面说了,小圆的中心在大圆的圆环上,如果这个中心不停的沿着大圆的圆环上走,不就动起来的。怎么沿着走呢,看看下面的图!

坐标图

上图我们绘制了小球(实心小圆)的中心位置,这里我们选取的顺时针方向为正方向,并且0度角为X轴正方向。这里选取了45度角的一个静态分析,假设定义一个变量为angle,当这个angle不断的从0到360变化时,小球就是沿着大圆跑了。根据上面的图和前面的分析,应该比较清晰的知道原理了吧_

实现分解效果图

这里将实现上面分解的结果啦,应该很简单的!

1.绘制圆环

在onDraw(Canvas canvas)这个方法中利用canvas绘制,直接上代码:

private void drawBigCircle(Canvas canvas){
    canvas.drawCircle(rectF.centerX(), rectF.centerY(), getBigCircleRadius(), mCirclePaint);
}

(这里的rect变量主要是利用Rect累框定绘制圆的范围)这里主要是利用了canvas的方法(当然,绘制circle的方法还有其他几个方法可以调用,根据自己的需求):

drawCircle(float cx, float cy, float radius, @NonNull Paint paint)

简单介绍一下参数,这里cx,cy表示的是圆心位置;radius表示圆半径的大小,paint主要是画笔,可以设置颜色等。这个应该比较简单吧+_+

2.绘制实心小圆——小球

还是直接看代码,然后分析_

double sweepAngle = Math.PI/180 * 45;
//caculate the circle's center(x, y)
float y = (float)Math.sin(sweepAngle)*(getBigCircleRadius());
float x = (float)Math.cos(sweepAngle)*(getBigCircleRadius());
int restoreCount = canvas.save();
//change aix center position
canvas.translate(rectF.centerX(), rectF.centerY());
canvas.drawCircle(x, y, mAccBallRadius, mAccBallPaint);
canvas.restoreToCount(restoreCount);

这里的第一步是计算角度,第二是计算实心小圆的中心位置,这两步根据上面分解章节的数学计算应该很好理解的。第三步是绘制实心小球,这里实现实心是通过Paint的方法setStyle(Paint.Style.FILL)设置充满整个圆;

接下来就是绘制这个“小球”啦。首先移动画布(改变坐标系的中心位置):在计算小球的中心位置(cx,cy)的时候,是根据大圆的半径计算的,所以这里的(cx,cy)是到大圆中心点的距离。因此,Canvas的起始位置应该移动到大圆的中心位置。

这里首先要保存一下画布,在绘制结束了还要恢复到原来的状态,为什么?因为在绘制之前我们需要对画布进行移动,当绘制结束的时候如果不恢复到原来的状态,Canvas将一直保持在目前的状态,而后面的有可能是需要在没有移动的画布上绘制其他图案,这时候的中心位置改变了,就会存在问题。

3.让小球动起来

上面的两步我们已经把静态的状态绘制完成了,但是还需要让这个小球动起来(顺着大圆环跑Y(_)Y)。其实在绘制第二步绘制小球的时候我们是固定了一个45度角,如果我们让这个角度变化(0-360),那么不就OK了。那么怎么才能做到呢?那就想啊..........,这里想到了利用ValueAimator来实现,关于这个类的使用这里就不做介绍。大家可以另外寻找相应的文章自行补脑!

AccTypeEvaluator accCore = new AccTypeEvaluator();
ValueAnimator animator = ValueAnimator.ofObject(accCore, 0.0f, 360.0f);
animator.setDuration(mDuration);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        Float value = (Float) animation.getAnimatedValue();
        sweepAngle = value;
        invalidate();
    }
});
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.start();

这里的AccTypeEvaluator定义如下:

public class AccTypeEvaluator implements TypeEvaluator<Float>{

@Override
public Float evaluate(float fraction, Float startValue, Float endValue) {
    Log.d("", " current fraction == " + fraction);
    return fraction * (endValue - startValue);
  }
}

根据上面的代码,我们就可以获得0-360变化了,并且是随着时间的变化。当我们获取到角度时通过调用invalidate()方法,触发View重新绘制界面。这样就可以达到我们需要的动画效果啦。

总结

上面一步一步介绍了自定义UI的过程,现在应该对这个过程有所了解了——其实主要还是一个模型的建立过程。这里简单总结一下:

1.一点一点的分解UI,把复杂的界面分解成一个一个静态、简单的界面,并实现它们。

2.当静态界面绘制完了,需要动画的——观察需要改变哪些参数,并且不断的触发View绘制,不就动起来了_

3.一些比较复杂的动画或者效果就需要一些物理、数学方面的知识来辅助了——塞贝尔曲线等,其实这些就需要花费你一些时间去研究了(但是,还是那句话,从简单到复杂)。

4.多多的练习,只有练习你才能对自定义有更深的理解。

这里放一个简单的自定义UI,让大家自己实现吧(这里是静态的,大家也可以让它动起来0_0)!

练习效果

附上这个自定义UI的源码吧——github地址

如何利用ViewGroup自定义UI请阅读实践自定义UI-ViewGroup

如何利用RLF...(RelativeLayout、LinearLayout、FrameLayout...)自定义UI请阅读实践自定义UI—RLF...(RelativeLayout LinearLayout FrameLayout....)

希望在Android学习的路上,大家共同成长!

Android分享
Web note ad 1