广告
返回顶部
首页 > 资讯 > 移动开发 >Android自定义view实现半圆环效果
  • 687
分享到

Android自定义view实现半圆环效果

2024-04-02 19:04:59 687人浏览 八月长安
摘要

本文实例为大家分享了Android自定义view实现半圆环的具体代码,供大家参考,具体内容如下 1.自定义属性 <declare-styleable name="Semicir

本文实例为大家分享了Android自定义view实现半圆环的具体代码,供大家参考,具体内容如下

1.自定义属性

<declare-styleable name="SemicircleView">
        <attr name="radius" fORMat="dimension" />
        <attr name="strokeWidth" format="dimension" />
        <attr name="bgArcColor" format="color" />
        <attr name="usedArcColor" format="color" />
        <attr name="usedTextSize" format="dimension" />
        <attr name="usedPercentTextSize" format="dimension" />
        <attr name="percentTextSize" format="dimension" />
</declare-styleable>

2.自定义View

package com.anhuitelecom.share.activity.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.canvas;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;

import com.anhuitelecom.share.activity.R;



public class SemicircleView extends View{ 

    //线圆弧画笔
    private Paint mLineArcPaint;
    //背景圆弧画笔
    private Paint mBackgroudArcPaint;
    //已使用圆弧画笔
    private Paint mUsedArcPaint;
    //已使用以及流量文字画笔
    private Paint mUsedTxtPaint;
    //已使用百分比文字画笔
    private Paint mUsedPercentTxtPaint;
    //百分号画笔
    private Paint mPercentTxtPaint;

    //最外层圆弧线颜色
    private int mLineArcColor;
    //背景圆环颜色
    private int mBackgroundArcColor;
    //已使用圆弧颜色
    private int mUsedArcColor;
    //圆弧半径
    private float mArcRadius;
    //外线大半径
    private float mLineRadius;
    //圆弧宽度
    private float mArcStrokeWidth;
    // 圆心x坐标
    private int mXCenter;
    // 圆心y坐标
    private int mYCenter;
    //已使用百分比
    private float mProgress=0;
    //动画展示弧度
    private float mShowProgress;
    private Context mContext;
    //已使用和总流量
    private String mUserdAndAll;
    private float mUsedTextSize;
    private float mUsedPercentTextSize;
    private float mPercentTextSize;
    private float mUsedPercentTxtHeight;
    //private CircleThread

    private Handler circleHandler = new Handler(){

        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if(msg.what == 1){
                float temp = (Float)msg.obj;
                setShowProgress(temp);
            }
        };
    };

    public SemicircleView(Context context) {
        this(context, null);
    }

    public SemicircleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SemicircleView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mContext = context;
        // 获取自定义的属性
        initAttrs(context, attrs);
        initVariable();
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
                R.styleable.SemicircleView, 0, 0);
        mLineRadius = typeArray.getDimension(R.styleable.SemicircleView_radius, 120);
        mArcStrokeWidth = typeArray.getDimension(R.styleable.SemicircleView_strokeWidth, 12);
        mBackgroundArcColor = typeArray.getColor(R.styleable.SemicircleView_bgArcColor, 0xFFFFFFFF);
        mUsedArcColor = typeArray.getColor(R.styleable.SemicircleView_usedArcColor, 0xFFFF3D3B);
        mUsedTextSize = typeArray.getDimension(R.styleable.SemicircleView_usedTextSize, 14);
        mUsedPercentTextSize = typeArray.getDimension(R.styleable.SemicircleView_usedPercentTextSize, 52);
        mPercentTextSize = typeArray.getDimension(R.styleable.SemicircleView_percentTextSize, 16);
        typeArray.recycle();
    }


    private void initVariable() {
        //初始化一些值
        mLineRadius = mLineRadius + mArcStrokeWidth / 2;
        mArcRadius = mLineRadius-1.8f*mArcStrokeWidth;
        mLineArcColor = 0x33FFFFFF;
        mUserdAndAll = "0M/0M";
        //外层线圆弧画笔设置
        mLineArcPaint = new Paint();
        mLineArcPaint.setAntiAlias(true);
        mLineArcPaint.setColor(mLineArcColor);
        mLineArcPaint.setStyle(Paint.Style.STROKE);
        mLineArcPaint.setStrokeWidth(1);
        mLineArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形
        //背景圆弧画笔设置
        mBackgroudArcPaint = new Paint();
        mBackgroudArcPaint.setAntiAlias(true);
        mBackgroudArcPaint.setColor(mBackgroundArcColor);
        mBackgroudArcPaint.setStyle(Paint.Style.STROKE);
        mBackgroudArcPaint.setStrokeWidth(mArcStrokeWidth);
        mBackgroudArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形

        //已使用多少圆环画笔设置
        mUsedArcPaint = new Paint();
        mUsedArcPaint.setAntiAlias(true);
        mUsedArcPaint.setColor(mUsedArcColor);
        mUsedArcPaint.setStyle(Paint.Style.STROKE);
        mUsedArcPaint.setStrokeWidth(mArcStrokeWidth);
        mUsedArcPaint.setStrokeCap(Paint.Cap.ROUND);//开启显示边缘为圆形

        mUsedTxtPaint  = new Paint();
        mUsedTxtPaint.setAntiAlias(true);
        mUsedTxtPaint.setStyle(Paint.Style.FILL);
        mUsedTxtPaint.setColor(0x80FFFFFF);
        mUsedTxtPaint.setTextSize(mUsedTextSize);

        //百分比数字画笔
        mUsedPercentTxtPaint  = new Paint();
        mUsedPercentTxtPaint.setAntiAlias(true);
        mUsedPercentTxtPaint.setStyle(Paint.Style.FILL);
        mUsedPercentTxtPaint.setColor(0xFFFFFFFF);
        mUsedPercentTxtPaint.setTextSize(mUsedPercentTextSize);
        //百分号画笔
        mPercentTxtPaint  = new Paint();
        mPercentTxtPaint.setAntiAlias(true);
        mPercentTxtPaint.setStyle(Paint.Style.FILL);
        mPercentTxtPaint.setColor(0xFFFFFFFF);
        mPercentTxtPaint.setTextSize(mPercentTextSize);

        //获取字体高度
        FontMetrics fm = mUsedPercentTxtPaint.getFontMetrics();
        mUsedPercentTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        mXCenter = getWidth() / 2;
        mYCenter = getHeight() / 2;

        RectF lineOval = new RectF();
        lineOval.left = (mXCenter - mLineRadius);
        lineOval.top = (mYCenter - mLineRadius);
        lineOval.right = mLineRadius * 2 + (mXCenter - mLineRadius);
        lineOval.bottom = mLineRadius * 2 + (mYCenter - mLineRadius);

        RectF oval = new RectF();
        oval.left = (mXCenter - mArcRadius);
        oval.top = (mYCenter - mArcRadius);
        oval.right = mArcRadius * 2 + (mXCenter - mArcRadius);
        oval.bottom = mArcRadius * 2 + (mYCenter - mArcRadius);
        //绘制最外面圆弧线
        canvas.drawArc(lineOval, -225, 270, false, mLineArcPaint);
        //绘制背景圆弧
        canvas.drawArc(oval, -225, 270, false, mBackgroudArcPaint);
        //绘制已使用圆弧
        float mShowDegree = mShowProgress/100*270;
        canvas.drawArc(oval, -225, mShowDegree, false, mUsedArcPaint);

        //已使用文字
        Rect usedRect = new Rect();
        String usedStr = "已使用";
        mUsedTxtPaint.getTextBounds(usedStr, 0, usedStr.length(), usedRect);
        int usedX = mXCenter - usedRect.width() / 2;
        canvas.drawText(usedStr, usedX, mYCenter-mArcRadius*0.6f, mUsedTxtPaint);
        //已使用和总流量
        Rect ua_rect = new Rect();
        mUsedTxtPaint.getTextBounds(mUserdAndAll, 0, mUserdAndAll.length(), ua_rect);
        int uaX = mXCenter - ua_rect.width() / 2;
        canvas.drawText(mUserdAndAll, uaX, mYCenter+mArcRadius*0.6f, mUsedTxtPaint);

        //百分比数字
        String progressStr = (int)mShowProgress+"";
        String percentStr = "%";
        float usedPercentWidth = mUsedPercentTxtPaint.measureText(progressStr, 0, progressStr.length());
        float percentWidth = mPercentTxtPaint.measureText(percentStr, 0, percentStr.length());
        float upX = mXCenter-(usedPercentWidth + percentWidth)/2;
        canvas.drawText(progressStr, upX, mYCenter+mUsedPercentTxtHeight/3, mUsedPercentTxtPaint);
        float pX = upX + usedPercentWidth;
        canvas.drawText(percentStr, pX, mYCenter+mUsedPercentTxtHeight/3, mPercentTxtPaint);
    }

    private void setShowProgress(float progress){
        this.mShowProgress = progress;
        postInvalidate();
    }

    public void setProgress(float progress) {
        mProgress = progress;
        new Thread(new CircleThread()).start();
    }


    public void setUsedArcColor(int usedArcColor) {
        this.mUsedArcColor = usedArcColor;
        if(mUsedArcPaint!=null){
            mUsedArcPaint.setColor(mUsedArcColor);
        }
    }

    public void setUsedAndAll(String usedAndAll) {
        this.mUserdAndAll = usedAndAll;
    }

    public static int dp2px(Context context, float dipValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    public static int sp2px(Context context, float spValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (spValue * fontScale + 0.5f);
    }

    public static int px2sp(Context context, float pxValue) {
        final float fontScale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (pxValue / fontScale + 0.5f);
    }


    private class CircleThread implements Runnable{

        int m=0;
        float i=0;

        @Override
        public void run() {
            // TODO Auto-generated method stub
            while(!Thread.currentThread().isInterrupted()){
                try {
                    Thread.sleep(30);
                    m++;
                    Message msg = new Message();
                    msg.what = 1;
                    if(i < mProgress){
                        i += m;
                        msg.obj = i;
                        circleHandler.sendMessage(msg);
                    }else{
                        i = mProgress;
                        msg.obj = i;
                        circleHandler.sendMessage(msg);
                        return;
                    }
                } catch (InterruptedException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        }

    }

}

3.外部调用

<com.view.SemicircleView
   android:id="@+id/semicircleView"
   android:layout_width="215dp"
   android:layout_height="215dp"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="30dp"
   halfArc:bgArcColor="#ffffff"
   halfArc:percentTextSize="16sp"
   halfArc:radius="100dp"
   halfArc:strokeWidth="11dp"
   halfArc:usedArcColor="#FF3D3B"
   halfArc:usedPercentTextSize="52sp"
   halfArc:usedTextSize="14sp" />
semicircleView.setUsedAndAll("170M/200M");
semicircleView.setProgress(81);

4.实现效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Android自定义view实现半圆环效果

本文链接: https://www.lsjlt.com/news/139382.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android自定义view实现半圆环效果
    本文实例为大家分享了Android自定义view实现半圆环的具体代码,供大家参考,具体内容如下 1.自定义属性 <declare-styleable name="Semicir...
    99+
    2022-11-13
  • Android如何自定义view实现半圆环效果
    小编给大家分享一下Android如何自定义view实现半圆环效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下1.自定义属性<declare-s...
    99+
    2023-06-29
  • Android自定义View实现圆环交替效果
    下面请先看效果图:    看上去是不很炫的样子,它的实现上也不是很复杂,重点在与onDraw()方法的绘制。 首先是我们的attrs文件: <?xml ver...
    99+
    2022-06-06
    view Android
  • Android自定义view实现圆环进度条效果
    本文实例为大家分享了Android自定义view实现圆环进度条效果的具体代码,供大家参考,具体内容如下 一、实现效果图 二、核心代码 自定义view的属性 <xml vers...
    99+
    2022-11-13
  • Android自定义view实现圆形与半圆形菜单
    前不久看到鸿洋大大的圆形菜单,就想开始模仿,因为实在是太酷了,然后自己根据别人(zw哥)给我讲的一些思路、一些分析,就开始改造自己的圆形菜单了。 文章结构:1.功能介绍以及展示...
    99+
    2022-06-06
    菜单 view Android
  • Android如何实现自定义view画圆效果
    这篇文章主要介绍了Android如何实现自定义view画圆效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。看图代码:package sjx.com.custonv...
    99+
    2023-05-30
    android view
  • Android中怎么自定义view实现圆环进度条效果
    这篇文章主要讲解了“Android中怎么自定义view实现圆环进度条效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android中怎么自定义view实现圆环进度条效果”吧!核心代码自定义...
    99+
    2023-06-29
  • Android自定义view实现圆形进度条效果
    Android中实现进度条有很多种方式,自定义进度条一般是继承progressBar或继承view来实现,本篇中讲解的是第二种方式。 先上效果图: 实现圆形进度条总体来说并不难,还...
    99+
    2022-11-13
  • Android自定义View实现简单的圆形Progress效果
    先给大家展示下效果图,如果感觉不错,请参考实现思路: 我们要实现一个自定义的再一个圆形中绘制一个弧形的自定义View,思路是这样的:   先要创建一个类ProgressVie...
    99+
    2022-06-06
    view progress Android
  • Android怎么自定义View实现圆弧进度效果
    这篇文章主要介绍“Android怎么自定义View实现圆弧进度效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Android怎么自定义View实现圆弧进度效果”文章能帮助大家解决问题。技术实现Ar...
    99+
    2023-07-06
  • android 自定义圆角button效果的实例代码(自定义view Demo)
    概述 在平时开发过程中经常会碰到需要使用圆角button的情况,一般也会包括很多其他小功能,比如要在里面添加img,设置不同的圆角大小等。 针对这样的场景,直接使用创建多个s...
    99+
    2022-06-06
    button 自定义 view demo 自定义view Android
  • Android如何自定义带动画的半圆环型进度效果
    小编给大家分享一下Android如何自定义带动画的半圆环型进度效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下package com.ne...
    99+
    2023-05-31
    android
  • Android之自定义View实现带4圆角或者2圆角的效果
    1 问题 实现任意view经过自定义带4圆角或者2圆角的效果 2 原理 1) 实现view 4圆角 我们只需要把左边的图嵌入到右边里面去,最终显示左边的图就行。 2) 实现v...
    99+
    2022-06-06
    view 自定义view Android
  • Android自定义Drawable实现圆角效果
    Drawable是一种可绘制资源的载体,如图形、图像等。在实际开发中可以作为view的背景。主要有静态和动态两种方式,静态通过xml描述使用,动态即自定义Drawable。本文实现一个圆形和圆角的背景图片效果。效果图:实现方式:初始化一个B...
    99+
    2023-05-30
    drawable 圆角 roi
  • android自定义view制作圆形进度条效果
    还是我们自定View的那几个步骤: 1、自定义View的属性 2、在View的构造方法中获得我们自定义的属性 [ 3、重写onMesure ] 4、重写onDraw 1、自定...
    99+
    2022-06-06
    view 进度条 Android
  • android自定义view实现钟表效果
    本文实例为大家分享了android view实现钟表的具体代码,供大家参考,具体内容如下 先看效果图: 自定义view大家肯定已经不陌生了,所以直接今天直接步入正题:如何利用...
    99+
    2022-06-06
    view Android
  • Android自定义View实现扫描效果
    本文实例为大家分享了Android自定义View实现扫描效果的具体代码,供大家参考,具体内容如下 演示效果如下: 实现内容: 1、控制动画是竖向或者横向 2、控制动画初始是从底部/...
    99+
    2022-11-12
  • Android自定义View实现时钟效果
    本文实例为大家分享了Android自定义View实现时钟效果的具体代码,供大家参考,具体内容如下 自定义时钟 初学自定义View,先画一个不太成熟的时钟(甚至只有秒针) 时钟效果 ...
    99+
    2022-11-12
  • Android自定义View之酷炫圆环(二)
    先看下最终的效果 静态: 动态: 一、开始实现 新建一个DoughnutProgress继承View public class DoughnutProgress...
    99+
    2022-06-06
    view Android
  • Android中自定义View实现圆环等待及相关的音量调节效果
    圆环交替、等待效果 效果就这样,分析了一下,大概有这几个属性,两个颜色,一个速度,一个圆环的宽度。 自定View的几个步骤: 1、自定义View的属性 2、在View的构造...
    99+
    2022-06-06
    view 自定义view Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作