自定义View实例(一)----微博运动积分的实现

最新推荐文章于 2021-05-27 02:35:54 发布

QiLin_

最新推荐文章于 2021-05-27 02:35:54 发布

阅读量336

点赞数 1

本文转载自：http://blog.youkuaiyun.com/tyk0910/article/details/51483462

自定义View一直是自己的短板，趁着公司项目不紧张的时候，多加强这方面的练习。这一系列文章主要记录自己在自定义View的学习过程中的心得与体会。

刷微博的时候，发现微博运动界面，运动积分的显示有一个很好看的动画效果。OK，就从这个开始我的自定义view之路！

看一下最后的效果图：
这里写图片描述

分数颜色，分数大小，外圆的颜色，圆弧的颜色都支持自己设置，整体还是和微博那个挺像的。可以设置初始分数，增加分数，减少分数。一起看看自定义View是怎样一步一步实现的：

1.自定义view的属性：
在res/values/ 下建立一个attrs.xml ，在里面定义我们的属性以及声明我们的整个样式。

<code class="hljs xml has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">resources</span>></span>
    //自定义属性名,定义公共属性
    <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"titleSize"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"dimension"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"titleColor"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"outCircleColor"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"inCircleColor"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"lineColor"</span> <span class="hljs-attribute">format</span>=<span class="hljs-value">"color"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>

    //自定义控件的主题样式
    <span class="hljs-tag"><<span class="hljs-title">declare-styleable</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"MySportView"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"titleSize"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"titleColor"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"outCircleColor"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">attr</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"inCircleColor"</span>></span><span class="hljs-tag"></<span class="hljs-title">attr</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">declare-styleable</span>></span>
<span class="hljs-tag"></<span class="hljs-title">resources</span>></span></code>

依次定义了字体大小，字体颜色，外圆颜色，圆弧颜色4个属性，format是值该属性的取值类型。
然后就是在布局文件中申明我们的自定义view：

<code class="hljs avrasm has-numbering">
                <<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.example</span><span class="hljs-preprocessor">.tangyangkai</span><span class="hljs-preprocessor">.myview</span><span class="hljs-preprocessor">.MySportView</span>
                android:id=<span class="hljs-string">"@+id/sport_view"</span>
                android:layout_width=<span class="hljs-string">"200dp"</span>
                android:layout_height=<span class="hljs-string">"200dp"</span>
                android:layout_margin=<span class="hljs-string">"20dp"</span>
                app:inCircleColor=<span class="hljs-string">"@color/strong"</span>
                app:outCircleColor=<span class="hljs-string">"@color/colorAccent"</span>
                app:titleColor=<span class="hljs-string">"@color/colorPrimary"</span>
                app:titleSize=<span class="hljs-string">"50dp"</span> /></code>

自定义view的属性我们可以自己进行设置，记得最后要引入我们的命名空间，
xmlns:app=”http://schemas.Android.com/apk/res-auto”

2.获取自定义view的属性：

<code class="hljs java has-numbering"><span class="hljs-javadoc">/**
 * Created by tangyangkai on 16/5/23.
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MySportView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span> {</span>


    <span class="hljs-keyword">private</span> String text;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> textColor;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> textSize;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> outCircleColor;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> inCircleColor;
    <span class="hljs-keyword">private</span> Paint mPaint, circlePaint;
    <span class="hljs-comment">//绘制文本的范围</span>
    <span class="hljs-keyword">private</span> Rect mBound;
    <span class="hljs-keyword">private</span> RectF circleRect;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mCurrentAngle;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> mStartSweepValue;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> mCurrentPercent, mTargetPercent;

    <span class="hljs-keyword">public</span> <span class="hljs-title">MySportView</span>(Context context) {
        <span class="hljs-keyword">this</span>(context, <span class="hljs-keyword">null</span>);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-title">MySportView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword">this</span>(context, attrs, <span class="hljs-number">0</span>);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-title">MySportView</span>(Context context, AttributeSet attrs, <span class="hljs-keyword">int</span> defStyleAttr) {
        <span class="hljs-keyword">super</span>(context, attrs, defStyleAttr);


        <span class="hljs-comment">//获取我们自定义的样式属性</span>
        TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MySportView, defStyleAttr, <span class="hljs-number">0</span>);
        <span class="hljs-keyword">int</span> n = array.getIndexCount();
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">int</span> i = <span class="hljs-number">0</span>; i < n; i++) {
            <span class="hljs-keyword">int</span> attr = array.getIndex(i);
            <span class="hljs-keyword">switch</span> (attr) {
                <span class="hljs-keyword">case</span> R.styleable.MySportView_titleColor:
                    <span class="hljs-comment">// 默认颜色设置为黑色</span>
                    textColor = array.getColor(attr, Color.BLACK);
                    <span class="hljs-keyword">break</span>;
                <span class="hljs-keyword">case</span> R.styleable.MySportView_titleSize:
                    <span class="hljs-comment">// 默认设置为16sp，TypeValue也可以把sp转化为px</span>
                    textSize = array.getDimensionPixelSize(attr, (<span class="hljs-keyword">int</span>) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_SP, <span class="hljs-number">16</span>, getResources().getDisplayMetrics()));
                    <span class="hljs-keyword">break</span>;
                <span class="hljs-keyword">case</span> R.styleable.MySportView_outCircleColor:
                    <span class="hljs-comment">// 默认颜色设置为黑色</span>
                    outCircleColor = array.getColor(attr, Color.BLACK);
                    <span class="hljs-keyword">break</span>;
                <span class="hljs-keyword">case</span> R.styleable.MySportView_inCircleColor:
                    <span class="hljs-comment">// 默认颜色设置为黑色</span>
                    inCircleColor = array.getColor(attr, Color.BLACK);
                    <span class="hljs-keyword">break</span>;

            }

        }
        array.recycle();
        init();

    }

    <span class="hljs-comment">//初始化</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">init</span>() {
        <span class="hljs-comment">//创建画笔</span>
        mPaint = <span class="hljs-keyword">new</span> Paint();
        circlePaint = <span class="hljs-keyword">new</span> Paint();
        <span class="hljs-comment">//设置是否抗锯齿</span>
        mPaint.setAntiAlias(<span class="hljs-keyword">true</span>);
        <span class="hljs-comment">//圆环开始角度 (-90° 为12点钟方向)</span>
        mStartSweepValue = -<span class="hljs-number">90</span>;
        <span class="hljs-comment">//当前角度</span>
        mCurrentAngle = <span class="hljs-number">0</span>;
        <span class="hljs-comment">//当前百分比</span>
        mCurrentPercent = <span class="hljs-number">0</span>;
        <span class="hljs-comment">//绘制文本的范围</span>
        mBound = <span class="hljs-keyword">new</span> Rect();
    }</code>

自定义View一般需要实现一下三个构造方法，这三个构造方法是一层调用一层的，属于递进关系。因此，我们只需要在最后一个构造方法中来获得View的属性了。

第一步通过theme.obtainStyledAttributes()方法获得自定义控件的主题样式数组；第二步就是遍历每个属性来获得对应属性的值，也就是我们在xml布局文件中写的属性值；第三步就是在循环结束之后记得调用array.recycle()来回收资源；第四步就是进行一下必要的初始化，不建议在onDraw的过程中去实例化对象，因为这是一个频繁重复执行的过程，new是需要分配内存空间的，如果在一个频繁重复的过程中去大量地new对象会造成内存浪费的情况。

3.重写onMesure方法确定view大小：
当你没有重写onMeasure方法时候，系统调用默认的onMeasure方法：

<code class="hljs java has-numbering"> <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onMeasure</span>(<span class="hljs-keyword">int</span> widthMeasureSpec, <span class="hljs-keyword">int</span> heightMeasureSpec) {
        <span class="hljs-keyword">super</span>.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
</code>

这个方法的作用是：测量控件的大小。其实Android系统在加载布局的时候是由系统测量各子View的大小来告诉父View我需要占多大空间，然后父View会根据自己的大小来决定分配多大空间给子View。MeasureSpec的specMode模式一共有三种：

MeasureSpec.EXACTLY：父视图希望子视图的大小是specSize中指定的大小；一般是设置了明确的值或者是MATCH_PARENT
MeasureSpec.AT_MOST：子视图的大小最多是specSize中的大小；表示子布局限制在一个最大值内，一般为WARP_CONTENT
MeasureSpec.UNSPECIFIED：父视图不对子视图施加任何限制，子视图可以得到任意想要的大小；表示子布局想要多大就多大，很少使用。

想要”wrap_content”的效果怎么办？不着急，只有重写onMeasure方法:

<code class="hljs java has-numbering">    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onMeasure</span>(<span class="hljs-keyword">int</span> widthMeasureSpec, <span class="hljs-keyword">int</span> heightMeasureSpec) {
        <span class="hljs-keyword">int</span> widthMode = MeasureSpec.getMode(widthMeasureSpec);
        <span class="hljs-keyword">int</span> widthSize = MeasureSpec.getSize(widthMeasureSpec);
        <span class="hljs-keyword">int</span> heightMode = MeasureSpec.getMode(heightMeasureSpec);
        <span class="hljs-keyword">int</span> heightSize = MeasureSpec.getSize(heightMeasureSpec);
        <span class="hljs-keyword">int</span> width;
        <span class="hljs-keyword">int</span> height;
        <span class="hljs-comment">//如果布局里面设置的是固定值,这里取布局里面的固定值;如果设置的是match_parent,则取父布局的大小</span>
        <span class="hljs-keyword">if</span> (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } <span class="hljs-keyword">else</span> {

            <span class="hljs-comment">//如果布局里面没有设置固定值,这里取布局宽度的1/2</span>
            width = widthSize * <span class="hljs-number">1</span> / <span class="hljs-number">2</span>;
        }

        <span class="hljs-keyword">if</span> (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } <span class="hljs-keyword">else</span> {
            height = heightSize * <span class="hljs-number">1</span> / <span class="hljs-number">2</span>;
        }
        setMeasuredDimension(width, height);
    }</code>

4.重写onDraw方法进行绘画：

<code class="hljs mel has-numbering">    <span class="hljs-variable">@Override</span>
    protected void onDraw(Canvas <span class="hljs-keyword">canvas</span>) {
        <span class="hljs-comment">//设置外圆的颜色</span>
        mPaint.setColor(outCircleColor);
        <span class="hljs-comment">//设置外圆为空心</span>
        mPaint.setStyle(Paint.Style.STROKE);
        <span class="hljs-comment">//画外圆</span>
        <span class="hljs-keyword">canvas</span>.drawCircle(getWidth() / <span class="hljs-number">2</span>, getWidth() / <span class="hljs-number">2</span>, getWidth() / <span class="hljs-number">2</span>, mPaint);
        <span class="hljs-comment">//设置字体颜色</span>
        mPaint.setColor(textColor);
        <span class="hljs-comment">//设置字体大小</span>
        mPaint.setTextSize(textSize);
        <span class="hljs-comment">//得到字体的宽高范围</span>
        <span class="hljs-keyword">text</span> = String.valueOf(mCurrentPercent);
        mPaint.getTextBounds(<span class="hljs-keyword">text</span>, <span class="hljs-number">0</span>, <span class="hljs-keyword">text</span>.length(), mBound);
        <span class="hljs-comment">//绘制字体</span>
        <span class="hljs-keyword">canvas</span>.drawText(<span class="hljs-keyword">text</span>, getWidth() / <span class="hljs-number">2</span> - mBound.width() / <span class="hljs-number">2</span>, getWidth() / <span class="hljs-number">2</span> + mBound.height() / <span class="hljs-number">2</span>, mPaint);

        <span class="hljs-comment">//设置字体大小</span>
        mPaint.setTextSize(textSize / <span class="hljs-number">3</span>);
        <span class="hljs-comment">//绘制字体</span>
        <span class="hljs-keyword">canvas</span>.drawText(<span class="hljs-string">"分"</span>, getWidth() * <span class="hljs-number">3</span> / <span class="hljs-number">5</span>, getWidth() / <span class="hljs-number">3</span>, mPaint);

        circlePaint.setAntiAlias(true);
        circlePaint.setStyle(Paint.Style.STROKE);
        <span class="hljs-comment">//设置圆弧的宽度</span>
        circlePaint.setStrokeWidth(<span class="hljs-number">10</span>);
        <span class="hljs-comment">//设置圆弧的颜色</span>
        circlePaint.setColor(inCircleColor);
        <span class="hljs-comment">//圆弧范围</span>
        circleRect = new RectF(<span class="hljs-number">20</span>, <span class="hljs-number">20</span>, getWidth() - <span class="hljs-number">20</span>, getWidth() - <span class="hljs-number">20</span>);
        <span class="hljs-comment">//绘制圆弧</span>
        <span class="hljs-keyword">canvas</span>.drawArc(circleRect, mStartSweepValue, mCurrentAngle, false, circlePaint);
        <span class="hljs-comment">//判断当前百分比是否小于设置目标的百分比</span>
        <span class="hljs-keyword">if</span> (mCurrentPercent < mTargetPercent) {
            <span class="hljs-comment">//当前百分比+1</span>
            mCurrentPercent += <span class="hljs-number">1</span>;
            <span class="hljs-comment">//当前角度+360</span>
            mCurrentAngle += <span class="hljs-number">3.6</span>;
            <span class="hljs-comment">//每100ms重画一次</span>
            postInvalidateDelayed(<span class="hljs-number">100</span>);
        }
    }</code>

代码注释写的灰常详细，这里和大家分享一个小技巧，就是在重写onDraw方法的之前，自己在本子上画一遍，坐标，位置等简单标注一下。真的很实用！！！

这里写图片描述

(1)绘制文本的时候，传入的第二个参数与第三个参数也就是图中A点的位置

<code class="hljs avrasm has-numbering">canvas<span class="hljs-preprocessor">.drawText</span>(text, getWidth() / <span class="hljs-number">2</span> - mBound<span class="hljs-preprocessor">.width</span>() / <span class="hljs-number">2</span>, getWidth() / <span class="hljs-number">2</span> + mBound<span class="hljs-preprocessor">.height</span>() / <span class="hljs-number">2</span>, mPaint)<span class="hljs-comment">;</span></code>

(2)绘制圆弧先确定圆弧的范围，传入的四个参数就是图中内圆的外接正方形的坐标

<code class="hljs fix has-numbering"><span class="hljs-attribute">     circleRect </span>=<span class="hljs-string"> new RectF(20, 20, getWidth() - 20, getWidth() - 20);</span></code>

(3)绘制圆弧,参数依次是圆弧范围；开始的角度；圆弧的角度；第四个为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形，我们选false；圆弧画笔

<code class="hljs bash has-numbering">    canvas.drawArc(circleRect, mStartSweepValue, mCurrentAngle, <span class="hljs-literal">false</span>, circlePaint);</code>

分数增加与圆弧动画的实现，这时就需要调用postInvalidateDelayed这个方法，这个方法会每隔指定的时间来调用View的invalidate()方法，最终会重新调用onDraw方法，完成一个周期。所以如果想控制动画，我们就可以定义一个全局的mCurrentPercent与mCurrentAngle变量，在onDraw方法中不断的递增，达到动画的效果。

然后就是增加分数与减少分数的实现：

<code class="hljs cs has-numbering">   <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">setNumber</span>(<span class="hljs-keyword">int</span> size) {
        mCurrentPercent = <span class="hljs-number">0</span>;
        mTargetPercent = size;
        mCurrentAngle = <span class="hljs-number">0</span>;
        postInvalidate();
    }</code>

传递一个设置的值，在自定义view中将值都设置为0，然后重新绘制即可。

最后就是在Activity中的应用了：

<code class="hljs java has-numbering">    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">initview</span>() {
        view = (MySportView) findViewById(R.id.sport_view);
        view.setmTargetPercent(<span class="hljs-number">30</span>);
        sportBtn = (Button) findViewById(R.id.sport_btn);
        sportBtn.setOnClickListener(<span class="hljs-keyword">new</span> View.OnClickListener() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onClick</span>(View v) {
                view.setNumber(<span class="hljs-number">40</span>);
            }
        });
        sportDownBtn = (Button) findViewById(R.id.sport_down_btn);
        sportDownBtn.setOnClickListener(<span class="hljs-keyword">new</span> View.OnClickListener() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onClick</span>(View v) {
                view.setNumber(<span class="hljs-number">20</span>);
            }
        });

    }</code><pre class="save_code tracking-ad" style="display: none;" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.youkuaiyun.com/images/save_snippets.png" alt="" /></a>

OK，到这里自定义view的实现就全部结束了，其实重头梳理一遍，也没有那么恐怖。

下一篇自定义View再见~~