91av视频/亚洲h视频/操亚洲美女/外国一级黄色毛片 - 国产三级三级三级三级

資源簡(jiǎn)介

###序言:最近一段時(shí)間由于要忙學(xué)校畢業(yè)的事情和公司項(xiàng)目的事情,很久沒(méi)有更新博客了,這兩天項(xiàng)目中有個(gè)需要用到圓形進(jìn)度條的地方,想著這段時(shí)間正在學(xué)習(xí)自定義View以及屬性動(dòng)畫(huà)的知識(shí),然后剛好用這個(gè)來(lái)練練手,無(wú)圖無(wú)真相,直接看圖:

![真機(jī)上沒(méi)有這么卡頓的效果](http://upload-images.jianshu.io/upload_images/490111-f74f09fddab84c6b.gif?imageMogr2/auto-orient/strip)

簡(jiǎn)單自定義了一個(gè)比較通用的圓形進(jìn)度條,像上圖所示的可以定義圓的半徑,進(jìn)度顏色,寬度,中間字體等信息。下面我就一步一步來(lái)為大家講解:
>####1、首先我們先要找出有哪些屬性需要自定義的,進(jìn)度條顏色、進(jìn)度顏色、整個(gè)進(jìn)度條的半徑、進(jìn)度的寬度、進(jìn)度條內(nèi)文字顏色及大小、最大進(jìn)度、當(dāng)前進(jìn)度,后來(lái)我加了一個(gè)方向的屬性,方向表示進(jìn)度從哪里開(kāi)始(默認(rèn)有四個(gè)方向,上左下右),確定好之后我們就在attrs中定義出來(lái):

<declare-styleable name="CustomCircleProgressBar">
        <attr name="outside_color" format="color" />
        <attr name="outside_radius" format="dimension" />
        <attr name="inside_color" format="color" />
        <attr name="progress_text_color" format="color" />
        <attr name="progress_text_size" format="dimension" />
        <attr name="progress_width" format="dimension" />
        <attr name="max_progress" format="integer" />
        <attr name="progress" format="float" />
        <attr name="direction">
            <enum name="left" value="0" />
            <enum name="top" value="1" />
            <enum name="right" value="2" />
            <enum name="bottom" value="3" />
        </attr>
    </declare-styleable>
>####2、然后在自定義**View**的構(gòu)造方法中獲取一下這些值:

public CustomCircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomCircleProgressBar, defStyleAttr, 0);
        outsideColor = a.getColor(R.styleable.CustomCircleProgressBar_outside_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));
        outsideRadius = a.getDimension(R.styleable.CustomCircleProgressBar_outside_radius, DimenUtil.dp2px(getContext(), 60.0f));
        insideColor = a.getColor(R.styleable.CustomCircleProgressBar_inside_color, ContextCompat.getColor(getContext(), R.color.inside_color));
        progressTextColor = a.getColor(R.styleable.CustomCircleProgressBar_progress_text_color, ContextCompat.getColor(getContext(), R.color.colorPrimary));
        progressTextSize = a.getDimension(R.styleable.CustomCircleProgressBar_progress_text_size, DimenUtil.dp2px(getContext(), 14.0f));
        progressWidth = a.getDimension(R.styleable.CustomCircleProgressBar_progress_width, DimenUtil.dp2px(getContext(), 10.0f));
        progress = a.getFloat(R.styleable.CustomCircleProgressBar_progress, 50.0f);
        maxProgress = a.getInt(R.styleable.CustomCircleProgressBar_max_progress, 100);
        direction = a.getInt(R.styleable.CustomCircleProgressBar_direction, 3);

        a.recycle();

        paint = new Paint();
    }
>####3、接下來(lái)我們要重寫(xiě)onMeasure方法,讓其可以自適應(yīng)你的設(shè)置:

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width;
        int height;
        int size = MeasureSpec.getSize(widthMeasureSpec);
        int mode = MeasureSpec.getMode(widthMeasureSpec);

        if (mode == MeasureSpec.EXACTLY) {
            width = size;
        } else {
            width = (int) ((2 * outsideRadius) progressWidth);
        }
        size = MeasureSpec.getSize(heightMeasureSpec);
        mode = MeasureSpec.getMode(heightMeasureSpec);
        if (mode == MeasureSpec.EXACTLY) {
            height = size;
        } else {
            height = (int) ((2 * outsideRadius) progressWidth);
        }
        setMeasuredDimension(width, height);
    }
>####4、這兩塊就不多說(shuō)了,相信大多數(shù)看官應(yīng)該都知道,接下來(lái)我們來(lái)分析要畫(huà)些什么?怎么畫(huà)?首先肯定是畫(huà)最底層的那個(gè)圓環(huán)了,給畫(huà)筆設(shè)置空心屬性,然后設(shè)置線的寬度,就可以畫(huà)一個(gè)圓環(huán)了:

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int circlePoint = getWidth() / 2;
        //第一步:畫(huà)背景(即內(nèi)層圓)
        paint.setColor(insideColor); //設(shè)置圓的顏色
        paint.setStyle(STROKE); //設(shè)置空心
        paint.setStrokeWidth(progressWidth); //設(shè)置圓的寬度
        paint.setAntiAlias(true);  //消除鋸齒
        canvas.drawCircle(circlePoint, circlePoint, outsideRadius, paint); //畫(huà)出圓

    }
![](http://upload-images.jianshu.io/upload_images/490111-f1650614c8e2523a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>####5、然后我們接著畫(huà)外面的進(jìn)度,外面進(jìn)度就是一段弧,根據(jù)我們獲取的進(jìn)度和總進(jìn)度來(lái)畫(huà)這段弧,畫(huà)弧需要用到`canvas.drawArc()`這個(gè)方法,這個(gè)方法有兩個(gè)重載方法:
`drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)`
`drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle,boolean useCenter,Paint paint)`
其實(shí),可以看作是一個(gè)方法,因?yàn)閌RectF`這個(gè)東西呢就是由`left top right bottom`構(gòu)成的,那`RectF`這玩意兒到底什么東西呢,我也不知道,那就去看源碼唄:

RectF holds four float coordinates for a rectangle.
The rectangle isrepresented by the coordinates of its 4 edges (left, top, right bottom).
These fields can be accessed directly. 
Use width() and height() to retrieve the rectangle's width and height. 
Note: most methods do not check to see that the coordinates are sorted correctly (i.e. left <= right and top <= bottom).
>簡(jiǎn)單點(diǎn)說(shuō),這東西可以構(gòu)造一個(gè)矩形,左上右下就是矩形四條邊離`X Y`軸的距離(這里分正負(fù),圓點(diǎn)下邊和圓點(diǎn)右邊為正),詳細(xì)可以看下面這個(gè)圖,以圓心(屏幕的中心)構(gòu)造一個(gè)矩形,矩形的左上右下邊距離`X Y`軸的距離就是我們所需要的`left top right bottom`值了:

![RectF的左上右下](http://upload-images.jianshu.io/upload_images/490111-050305a7735f1292.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

寫(xiě)法一:
RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius);  //用于定義的圓弧的形狀和大小的界限
寫(xiě)法二:
RectF oval = new RectF();
oval.left=circlePoint - outsideRadius;
    oval.top=circlePoint - outsideRadius;
    oval.right=circlePoint outsideRadius;
    oval.bottom=circlePoint outsideRadius;
>然后`drawArc()`方法中的第二(五)個(gè)參數(shù)`startAngle`表示我們畫(huà)弧度開(kāi)始的角度,這里的值為**0-360**,**0**表示三點(diǎn)鐘方向,**90**表示六點(diǎn)鐘方向,以此類(lèi)推;后面那個(gè)參數(shù)`sweepAngle`表示要畫(huà)多少弧度,這里的取值也是從**0-360**,我們通常使用當(dāng)前進(jìn)度占總進(jìn)度的百分之多少,再乘以弧度**360**就是我們所要畫(huà)的弧度了;再后面那個(gè)參數(shù)`useCenter`表示是否連接圓心一起畫(huà),下面來(lái)看看代碼:

//第二步:畫(huà)進(jìn)度(圓弧)不連接圓心
    paint.setColor(outsideColor);  //設(shè)置進(jìn)度的顏色
    RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius);  //用于定義的圓弧的形狀和大小的界限
    canvas.drawArc(oval, CustomCircleProgressBar.DirectionEnum.getDegree(direction), 360 * (progress / maxProgress), false, paint);  //根據(jù)進(jìn)度畫(huà)圓弧

![不連接圓心](http://upload-images.jianshu.io/upload_images/490111-7e4b5289589e4a3f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    //第二步:畫(huà)進(jìn)度(圓弧)連接圓心
    paint.setColor(outsideColor);  //設(shè)置進(jìn)度的顏色
    RectF oval = new RectF(circlePoint - outsideRadius, circlePoint - outsideRadius, circlePoint outsideRadius, circlePoint outsideRadius);  //用于定義的圓弧的形狀和大小的界限
    canvas.drawArc(oval, CustomCircleProgressBar.DirectionEnum.getDegree(direction), 360 * (progress / maxProgress), true, paint);  //根據(jù)進(jìn)度畫(huà)圓弧
![連接圓心](http://upload-images.jianshu.io/upload_images/490111-fbb8b084df3a37c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
>6、接下來(lái)就是畫(huà)圓環(huán)內(nèi)的百分比文字了,可能有的人就說(shuō),畫(huà)文字嘛,那不是很簡(jiǎn)單,直接`drawText`方法畫(huà)不就好了,要什么值就傳什么唄!大兄弟別急撒,下面給大家看看直接畫(huà)文字的效果:

paint.setColor(progressTextColor);
    paint.setTextSize(progressTextSize);
    paint.setStrokeWidth(0);
    progressText = (int) ((progress / maxProgress) * 100) "%";
    canvas.drawText(progressText, circlePoint , circlePoint, paint);
![](http://upload-images.jianshu.io/upload_images/490111-39922ed83c633a5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
>**WTF**,發(fā)生了什么???所以說(shuō)大兄弟,憋著急,這里`drawText`方法是從文字的左上角開(kāi)始畫(huà)的,所以我們需要剪去文字一半的寬高:

rect = new Rect();
    paint.getTextBounds(progressText, 0, progressText.length(), rect);
    canvas.drawText(progressText, circlePoint- rect.width() / 2 , circlePoint- rect.height() / 2, paint);
![](http://upload-images.jianshu.io/upload_images/490111-976c527b3d0bf1ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
>再次**WTF**,可能又有人說(shuō),LZ你騙人,它還是沒(méi)有居中,這尼瑪心中頓時(shí)有一萬(wàn)只草泥馬在奔騰,別急,還沒(méi)講完,給你看看源碼你就知道了:

/**
     * Draw the text, with origin at (x,y), using the specified paint. The
     * origin is interpreted based on the Align setting in the paint.
     *
     * @param text  The text to be drawn
     * @param x     The x-coordinate of the origin of the text being drawn
     * @param y     The y-coordinate of the baseline of the text being drawn
     * @param paint The paint used for the text (e.g. color, size, style)
     */
    public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
        native_drawText(mNativeCanvasWrapper, text, 0, text.length(), x, y, paint.mBidiFlags,
                paint.getNativeInstance(), paint.mNativeTypeface);
    }
>不知道各位有沒(méi)有看到第三個(gè)參數(shù)`y`的解釋?zhuān)皇强v軸的坐標(biāo),而是基準(zhǔn)線`y`坐標(biāo),至于這個(gè)基準(zhǔn)線,LZ不打算在這里展開(kāi)講,因?yàn)檫@個(gè)也有很多內(nèi)容,給大家推薦一篇講的非常詳細(xì)的博客:
[自定義控件之繪圖篇( 五):drawText()詳解](http://blog.csdn.net/harvic880925/article/details/50423762)
接下來(lái)來(lái)看看咱是怎么寫(xiě)的:

//第三步:畫(huà)圓環(huán)內(nèi)百分比文字
    rect = new Rect();
    paint.setColor(progressTextColor);
    paint.setTextSize(progressTextSize);
    paint.setStrokeWidth(0);
    progressText = getProgressText();
    paint.getTextBounds(progressText, 0, progressText.length(), rect);
    Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
    int baseline = (getMeasuredHeight() - fontMetrics.bottom fontMetrics.top) / 2 - fontMetrics.top;  //獲得文字的基準(zhǔn)線
    canvas.drawText(progressText, getMeasuredWidth() / 2 - rect.width() / 2, baseline, paint);
>再來(lái)看看最終的效果:

![](http://upload-images.jianshu.io/upload_images/490111-bb07e687be2b896a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

好了,現(xiàn)在進(jìn)度和文字都畫(huà)出來(lái)了,個(gè)人覺(jué)得就這樣直接展示在用戶(hù)眼前顯得有點(diǎn)生硬,有沒(méi)有什么辦法讓它的進(jìn)度從零開(kāi)始跑動(dòng)畫(huà)到我們要設(shè)置的進(jìn)度值呢,答案是肯定的咯,這里我們可以用屬性動(dòng)畫(huà)來(lái)實(shí)現(xiàn),前面幾篇博客我們有講到屬性動(dòng)畫(huà)的知識(shí),如果你還沒(méi)有看過(guò)的話(huà),請(qǐng)移步:

####[Android自定義view之屬性動(dòng)畫(huà)熟悉](http://www.jianshu.com/p/50d974db7bc5)

####[Android自定義view之屬性動(dòng)畫(huà)初見(jiàn)](http://www.jianshu.com/p/0e10a6ed80dc)

這里我們使用的是`ValueAnimator`,通過(guò)監(jiān)聽(tīng)動(dòng)畫(huà)改變進(jìn)度的值來(lái)設(shè)置圓環(huán)的進(jìn)度:

private void startAnim(float startProgress) {
        animator = ObjectAnimator.ofFloat(0, startProgress);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                CustomCircleProgressBar.this.progress = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animator.setStartDelay(500);   //設(shè)置延遲開(kāi)始
        animator.setDuration(2000);
        animator.setInterpolator(new LinearInterpolator());   //動(dòng)畫(huà)勻速
        animator.start();
    }
到此就完成了自定義的原型進(jìn)度條了。源碼已上傳至[Github](https://github.com/Jakemesdg/CustomCircleProgressBar),有需要的同學(xué)可以下載下來(lái)看看,歡迎**Star,F(xiàn)ork**
#####同時(shí)感謝以上引用到博客的主人,感謝!!!

###這是我建的一個(gè)android小白的群,歡迎各位有興趣的小白加群共同學(xué)習(xí),知無(wú)不言;也歡迎各位大神進(jìn)群指導(dǎo),共勉。群號(hào):541144061

資源截圖

代碼片段和文件信息

/**
?*?Automatically?generated?file.?DO?NOT?MODIFY
?*/
package?com.share.jack.customcircleprogressbar.test;

public?final?class?BuildConfig?{
??public?static?final?boolean?DEBUG?=?Boolean.parseBoolean(“true“);
??public?static?final?String?APPLICATION_ID?=?“com.share.jack.customcircleprogressbar.test“;
??public?static?final?String?BUILD_TYPE?=?“debug“;
??public?static?final?String?FLAVOR?=?““;
??public?static?final?int?VERSION_CODE?=?1;
??public?static?final?String?VERSION_NAME?=?“1.0“;
}

?屬性????????????大小?????日期????時(shí)間???名稱(chēng)
-----------?---------??----------?-----??----
?????目錄???????????0??2017-04-12?14:58??CustomCircleProgressBar\
?????目錄???????????0??2017-04-14?14:25??CustomCircleProgressBar\.git\
?????文件??????????28??2017-04-14?10:45??CustomCircleProgressBar\.git\COMMIT_EDITMSG
?????文件?????????260??2017-04-12?14:56??CustomCircleProgressBar\.git\config
?????文件??????????73??2017-04-12?14:56??CustomCircleProgressBar\.git\description
?????文件?????????106??2017-04-12?14:58??CustomCircleProgressBar\.git\FETCH_HEAD
?????文件??????????23??2017-04-12?14:56??CustomCircleProgressBar\.git\HEAD
?????目錄???????????0??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\
?????文件?????????478??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\applypatch-msg.sample
?????文件?????????896??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\commit-msg.sample
?????文件?????????189??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\post-update.sample
?????文件?????????424??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-applypatch.sample
?????文件????????1642??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-commit.sample
?????文件????????1348??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-push.sample
?????文件????????4951??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-rebase.sample
?????文件?????????544??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\pre-receive.sample
?????文件????????1239??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\prepare-commit-msg.sample
?????文件????????3610??2017-04-12?14:56??CustomCircleProgressBar\.git\hooks\update.sample
?????文件????????4862??2017-04-14?14:19??CustomCircleProgressBar\.git\index
?????目錄???????????0??2017-04-12?14:56??CustomCircleProgressBar\.git\info\
?????文件?????????240??2017-04-12?14:56??CustomCircleProgressBar\.git\info\exclude
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\
?????文件?????????512??2017-04-14?10:45??CustomCircleProgressBar\.git\logs\HEAD
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\refs\
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\refs\heads\
?????文件?????????512??2017-04-14?10:45??CustomCircleProgressBar\.git\logs\refs\heads\master
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\refs\remotes\
?????目錄???????????0??2017-04-12?14:57??CustomCircleProgressBar\.git\logs\refs\remotes\origin\
?????文件?????????480??2017-04-14?10:46??CustomCircleProgressBar\.git\logs\refs\remotes\origin\master
?????目錄???????????0??2017-04-14?10:54??CustomCircleProgressBar\.git\objects\
?????目錄???????????0??2017-04-14?10:45??CustomCircleProgressBar\.git\objects\00\
............此處省略2125個(gè)文件信息

評(píng)論

共有 條評(píng)論