美文网首页
自定义View(三)

自定义View(三)

作者: aafa41d78d15 | 来源:发表于2017-08-24 14:58 被阅读0次

    圆环交替等待效果

    废话不多说,先上图

    image.png

    可以学到

    1.如何画圆
    2.如何画圆弧
    3.如何显示出具有动画效果的自定义view
    4.自定义属性带了哪些好处
    5.圆环交替的速度是如何实现的
    6.如何动态实现圆环的宽度

    注意:一般在自定义View中,如果使用wrap_content来设置控件的宽或者高,需要重写onMeasure方法。

    核心源码

    1.attrs.xml

     <attr name="firstColor" format="color" />
        <attr name="secondColor" format="color" />
        <attr name="circleWidth" format="dimension" />
        <attr name="speed" format="integer" />
    
        <declare-styleable name="CustomProgressBar">
            <attr name="firstColor" />
            <attr name="secondColor" />
            <attr name="circleWidth" />
            <attr name="speed" />
        </declare-styleable>
    

    2.CustomProgressBar.java

    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.RectF;
    import android.util.AttributeSet;
    import android.util.TypedValue;
    import android.view.View;
    import com.zhy.customeview03.R;
    
    public class CustomProgressBar extends View
    {
        /**
         * 第一圈的颜色
         */
        private int mFirstColor;
        /**
         * 第二圈的颜色
         */
        private int mSecondColor;
        /**
         * 圈的宽度
         */
        private int mCircleWidth;
        /**
         * 画笔
         */
        private Paint mPaint;
        /**
         * 当前进度
         */
        private int mProgress;
    
        /**
         * 速度
         */
        private int mSpeed;
    
        /**
         * 是否应该开始下一个
         */
        private boolean isNext = false;
    
        public CustomProgressBar(Context context, AttributeSet attrs)
        {
            this(context, attrs, 0);
        }
    
        public CustomProgressBar(Context context)
        {
            this(context, null);
        }
    
        /**
         * 必要的初始化,获得一些自定义的值
         * 
         * @param context
         * @param attrs
         * @param defStyle
         */
        public CustomProgressBar(Context context, AttributeSet attrs, int defStyle)
        {
            super(context, attrs, defStyle);
            TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyle, 0);
            int n = a.getIndexCount();
    
            for (int i = 0; i < n; i++)
            {
                int attr = a.getIndex(i);
                switch (attr)
                {
                case R.styleable.CustomProgressBar_firstColor:
                    mFirstColor = a.getColor(attr, Color.GREEN);
                    break;
                case R.styleable.CustomProgressBar_secondColor:
                    mSecondColor = a.getColor(attr, Color.RED);
                    break;
                case R.styleable.CustomProgressBar_circleWidth:
                    mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CustomProgressBar_speed:
                    mSpeed = a.getInt(attr, 20);// 默认20
                    break;
                }
            }
            a.recycle();
            mPaint = new Paint();
            // 绘图线程
            new Thread()
            {
                public void run()
                {
                    while (true)
                    {
                        mProgress++;
                        if (mProgress == 360)
                        {
                            mProgress = 0;
                            if (!isNext)
                                isNext = true;
                            else
                                isNext = false;
                        }
                        postInvalidate();
                        try
                        {
                            Thread.sleep(mSpeed);
                        } catch (InterruptedException e)
                        {
                            e.printStackTrace();
                        }
                    }
                };
            }.start();
    
        }
    
        @Override
        protected void onDraw(Canvas canvas)
        {
    
            int centre = getWidth() / 2; // 获取圆心的x坐标
            int radius = centre - mCircleWidth / 2;// 半径
            mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
            mPaint.setAntiAlias(true); // 消除锯齿
            mPaint.setStyle(Paint.Style.STROKE); // 设置空心
            RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
            if (!isNext)
            {// 第一颜色的圈完整,第二颜色跑
                mPaint.setColor(mFirstColor); // 设置圆环的颜色
                canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
                mPaint.setColor(mSecondColor); // 设置圆环的颜色
                canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
            } else
            {
                mPaint.setColor(mSecondColor); // 设置圆环的颜色
                canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
                mPaint.setColor(mFirstColor); // 设置圆环的颜色
                canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
            }
    
        }
    
    }
    
    

    3.使用的main.xml

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.customeview03"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity" >
    
       
    
        <com.zhy.customeview03.view.CustomProgressBar
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_alignParentTop="true"
            android:layout_marginTop="20dp"
            android:layout_centerHorizontal="true"
            zhy:circleWidth="15dp"
            zhy:firstColor="#D4F668"
            zhy:secondColor="#2F9DD2"
            zhy:speed="20" />
    
        <com.zhy.customeview03.view.CustomProgressBar
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            zhy:circleWidth="24dp"
            android:layout_marginBottom="40dp"
            zhy:firstColor="#16A3FA"
            zhy:secondColor="#D20F02"
            zhy:speed="10" />
    
    </RelativeLayout>
    

    源码参考我的github地址

    相关文章

      网友评论

          本文标题:自定义View(三)

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