溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Android自定義View實現(xiàn)體重表盤的方法是什么

發(fā)布時間：2021-11-01 11:48:26 來源：億速云 閱讀：118 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“Android自定義View實現(xiàn)體重表盤的方法是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

    效果視頻

    Android自定義View實現(xiàn)體重表盤的方法是什么

    分析

    起始角度

    如下圖所示，起點角度為150，終點角度為240

    Android自定義View實現(xiàn)體重表盤的方法是什么

    圓弧

    白色圓弧為整個圓弧范圍，藍(lán)色圓弧為根據(jù)數(shù)據(jù)變動而覆蓋白色圓弧，藍(lán)色圓弧比白色圓弧大一點，突出顯示

     InnerArcPaint.setStrokeWidth( Width * (float)0.1 );
 OuterArcPaint.setStrokeWidth( Width * (float)0.12 );

    指針

    中間的水滴指針是一個白色的水滴圖片，下圖藍(lán)色為選擇文件的背景顏色（截圖），由于水滴指向-135度，將圖像旋轉(zhuǎn)-75度，水滴尖剛好指向150度的起點。

    Android自定義View實現(xiàn)體重表盤的方法是什么

    代碼

    初始化屬性

     private void InitPaint(){
        InnerArcPaint = new Paint(  );
        InnerArcPaint.setColor( Color.WHITE );
        InnerArcPaint.setAntiAlias( true );
        InnerArcPaint.setStyle( Paint.Style.STROKE );

        OuterArcPaint = new Paint(  );
        OuterArcPaint.setColor( Color.BLUE );
        OuterArcPaint.setAntiAlias( true );
        OuterArcPaint.setStyle( Paint.Style.STROKE );
        OuterArcPaint.setShadowLayer( (float)10,(float)10,(float)10,Color.parseColor( "#99000000" ) );

        TextPaint = new Paint(  );
        TextPaint.setColor( Color.RED );
        TextPaint.setStyle( Paint.Style.STROKE );
        TextPaint.setTextSize( 60 );
        TextPaint.setStrokeWidth( 2 );

        ScalePaint = new Paint(  );
        ScalePaint.setColor( Color.WHITE );
        ScalePaint.setTextSize( 25 );
        //硬件加速
        setLayerType( LAYER_TYPE_SOFTWARE,null );
    }

    畫布

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure( widthMeasureSpec, heightMeasureSpec );
        int Width = MeasureSpec.getSize( widthMeasureSpec );
        InnerArcPaint.setStrokeWidth( Width * (float)0.1 );
        OuterArcPaint.setStrokeWidth( Width * (float)0.12 );

        oval = new RectF(  );
        oval.left = Width * (float)0.2;
        oval.top = Width * (float)0.2;
        oval.right = Width * (float)0.8;
        oval.bottom = Width * (float)0.8;
        //寬、高一致，使畫布無論邊長如何變化，都成為一個正方形
        setMeasuredDimension( Width,Width );
    }

    繪制內(nèi)圓弧

     //繪制內(nèi)圓弧
    private void DrawInnerArc(Canvas canvas){
        //保存之前的畫布
        canvas.save();
        canvas.drawArc( oval, StartAngle,SweepAngle,false,InnerArcPaint);
    }

    繪制外圓弧

    //繪制外圓弧
    private void DrawOuterArc(Canvas canvas){
        canvas.save();
        canvas.drawArc( oval, StartAngle,SweepAngle * CurrentData / 300,false,OuterArcPaint);
    }

    繪制中間指針

     //繪制中間指針
    private void DrawArrow(Canvas canvas){
       canvas.save();
        Bitmap bitmap = BitmapFactory.decodeResource( getResources(),R.mipmap.waterdrop );
        int width = 75;
        int height = 75;
        int NewWidth = (int)(getWidth() * 0.08);
        float ScaleWidth = (float) (NewWidth / width);
        float ScaleHeight = (float) (NewWidth / height);
        Matrix matrix = new Matrix(  );
        //順序不能顛倒
        matrix.setRotate( -75 + (SweepAngle * CurrentData / 300),bitmap.getWidth()/2,bitmap.getHeight()/2 );
        matrix.postScale( ScaleWidth,ScaleHeight );

        Bitmap bitmap1 = Bitmap.createBitmap( bitmap,0,0,width,height,matrix,true );
        canvas.drawBitmap( bitmap1,getWidth()/2 - bitmap1.getWidth()/2,getHeight()/2 - bitmap1.getHeight()/2,InnerArcPaint );
        bitmap.recycle();
        bitmap1.recycle();
    }

    繪制中間文字

    private void DrawCurrentDataText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str = String.valueOf( CurrentData ) + "KG";
        TextPaint.setColor( Color.RED );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        canvas.drawText( str,getWidth()/2 - rect.width()/2,(int)(getHeight() * (float)0.38),TextPaint );
    }

    繪制左右兩邊文字

     private void DrawScaleRightText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str =  "300KG";
        TextPaint.setTextSize( 45 );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        TextPaint.setColor( Color.WHITE );
        canvas.drawText( str,getWidth()-getWidth()/6,(getHeight()/2+getWidth()/5) ,TextPaint );
    }
    private void DrawScaleLeftText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str =  "0KG";
        TextPaint.setTextSize( 45 );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        TextPaint.setColor( Color.WHITE );
        canvas.drawText( str,(getWidth()/2-(getWidth()/3 + 75)),(getHeight()/2+getWidth()/5) ,TextPaint );
    }

    動畫

     public void SetCurrentData(final float data, TimeInterpolator interpolator){
        long time = ( (long)Math.abs( data- CurrentData ) *20);
        final ValueAnimator valueAnimator = ValueAnimator.ofFloat( CurrentData,data ).setDuration( time );
        valueAnimator.setInterpolator( interpolator );
        valueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                CustomView_ClockDial.this.CurrentData = (float)valueAnimator.getAnimatedValue();
                invalidate();
            }
        } );
        valueAnimator.start();
    }

    全部代碼

    public class CustomView_ClockDial extends View {
    //內(nèi)圓弧畫筆
    private Paint InnerArcPaint;
    //外圓弧畫筆
    private Paint OuterArcPaint;
    //文字畫筆
    private Paint TextPaint;
    //刻度畫筆
    private Paint ScalePaint;
    //圓弧范圍
    private RectF oval;
    //當(dāng)前數(shù)據(jù)
    private float CurrentData = 0;
    //起點角度
    private float StartAngle = 150;
    //終點角度
    private float SweepAngle = 240;
    public CustomView_ClockDial(Context context) {
        super( context );
        InitPaint();
    }

    public CustomView_ClockDial(Context context, @Nullable AttributeSet attrs) {
        super( context, attrs );
        InitPaint();
    }

    public CustomView_ClockDial(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super( context, attrs, defStyleAttr );
        InitPaint();
    }
    private void InitPaint(){
        InnerArcPaint = new Paint(  );
        InnerArcPaint.setColor( Color.WHITE );
        InnerArcPaint.setAntiAlias( true );
        InnerArcPaint.setStyle( Paint.Style.STROKE );

        OuterArcPaint = new Paint(  );
        OuterArcPaint.setColor( Color.BLUE );
        OuterArcPaint.setAntiAlias( true );
        OuterArcPaint.setStyle( Paint.Style.STROKE );
        OuterArcPaint.setShadowLayer( (float)10,(float)10,(float)10,Color.parseColor( "#99000000" ) );

        TextPaint = new Paint(  );
        TextPaint.setColor( Color.RED );
        TextPaint.setStyle( Paint.Style.STROKE );
        TextPaint.setTextSize( 60 );
        TextPaint.setStrokeWidth( 2 );

        ScalePaint = new Paint(  );
        ScalePaint.setColor( Color.WHITE );
        ScalePaint.setTextSize( 25 );
        //硬件加速
        setLayerType( LAYER_TYPE_SOFTWARE,null );
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure( widthMeasureSpec, heightMeasureSpec );
        int Width = MeasureSpec.getSize( widthMeasureSpec );
        InnerArcPaint.setStrokeWidth( Width * (float)0.1 );
        OuterArcPaint.setStrokeWidth( Width * (float)0.12 );

        oval = new RectF(  );
        oval.left = Width * (float)0.2;
        oval.top = Width * (float)0.2;
        oval.right = Width * (float)0.8;
        oval.bottom = Width * (float)0.8;
        //寬、高一致，使畫布無論邊長如何變化，都成為一個正方形
        setMeasuredDimension( Width,Width );
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw( canvas );
        DrawInnerArc(canvas);
        DrawOuterArc(canvas);
        DrawArrow(canvas);
        DrawCurrentDataText(canvas);
        DrawScaleRightText(canvas);
        DrawScaleLeftText(canvas);
    }
    //繪制內(nèi)圓弧
    private void DrawInnerArc(Canvas canvas){
        //保存之前的畫布
        canvas.save();
        canvas.drawArc( oval, StartAngle,SweepAngle,false,InnerArcPaint);
    }
    //繪制外圓弧
    private void DrawOuterArc(Canvas canvas){
        canvas.save();
        canvas.drawArc( oval, StartAngle,SweepAngle * CurrentData / 300,false,OuterArcPaint);
    }
    //繪制中間指針
    private void DrawArrow(Canvas canvas){
       canvas.save();
        Bitmap bitmap = BitmapFactory.decodeResource( getResources(),R.mipmap.waterdrop );
        int width = 75;
        int height = 75;
        int NewWidth = (int)(getWidth() * 0.08);
        float ScaleWidth = (float) (NewWidth / width);
        float ScaleHeight = (float) (NewWidth / height);
        Matrix matrix = new Matrix(  );
        //順序不能顛倒
        matrix.setRotate( -75 + (SweepAngle * CurrentData / 300),bitmap.getWidth()/2,bitmap.getHeight()/2 );
        matrix.postScale( ScaleWidth,ScaleHeight );

        Bitmap bitmap1 = Bitmap.createBitmap( bitmap,0,0,width,height,matrix,true );
        canvas.drawBitmap( bitmap1,getWidth()/2 - bitmap1.getWidth()/2,getHeight()/2 - bitmap1.getHeight()/2,InnerArcPaint );
        bitmap.recycle();
        bitmap1.recycle();
    }
    private void DrawCurrentDataText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str = String.valueOf( CurrentData ) + "KG";
        TextPaint.setColor( Color.RED );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        canvas.drawText( str,getWidth()/2 - rect.width()/2,(int)(getHeight() * (float)0.38),TextPaint );
    }
    private void DrawScaleRightText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str =  "300KG";
        TextPaint.setTextSize( 45 );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        TextPaint.setColor( Color.WHITE );
        canvas.drawText( str,getWidth()-getWidth()/6,(getHeight()/2+getWidth()/5) ,TextPaint );
    }
    private void DrawScaleLeftText(Canvas canvas){
        canvas.save();
        Rect rect = new Rect(  );
        String str =  "0KG";
        TextPaint.setTextSize( 45 );
        TextPaint.getTextBounds( str,0,str.length(),rect );
        TextPaint.setColor( Color.WHITE );
        canvas.drawText( str,(getWidth()/2-(getWidth()/3 + 75)),(getHeight()/2+getWidth()/5) ,TextPaint );
    }
    public void SetCurrentData(final float data, TimeInterpolator interpolator){
        long time = ( (long)Math.abs( data- CurrentData ) *20);
        final ValueAnimator valueAnimator = ValueAnimator.ofFloat( CurrentData,data ).setDuration( time );
        valueAnimator.setInterpolator( interpolator );
        valueAnimator.addUpdateListener( new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                CustomView_ClockDial.this.CurrentData = (float)valueAnimator.getAnimatedValue();
                invalidate();
            }
        } );
        valueAnimator.start();
    }
}

    “Android自定義View實現(xiàn)體重表盤的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

    向AI問一下細(xì)節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI
    助
    手