文档章节

Android进阶学习-使用Canvas自定义ArcView(4)

August1996_
 August1996_
发布于 2016/05/08 10:03
字数 499
阅读 80
收藏 0

效果图

中间一个圆+一个文本,外面是一个圆弧,可以用来显示一些进度的信息,弧线的角度可调.

  1. attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ArcView">
        <attr name="mProgress" format="integer"></attr>
        <attr name="mCenterText" format="string"></attr>
        <attr name="mCenterTextColor" format="color"></attr>
        <attr name="mCenterBackgroundColor" format="color"></attr>
        <attr name="mArcColor" format="color"></attr>
        <attr name="mArcWidth" format="dimension"></attr>
        <attr name="mRadius" format="dimension"></attr>
    </declare-styleable>
</resources>

 

2.模型图

3.代码:

package com.example.customview;
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;
public class ArcView extends View {
    
    /*
     * 画图工具
     */
    private Paint    mPaint;
                    
    /**
     * 属性
     */
    private int        mProgress;
    private String    mCenterText;
    private int        mCenterTextColor;
    private int        mCenterBackgroundColor;
    private int        mArcColor;
    private int        mArcWidth;
    private int        mRadius;
    private int        mTextHeight;
    private int        mTextWidth;
                    
    public ArcView(Context context) {
        this(context, null);
    }
    
    public ArcView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    
    public ArcView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ArcView, defStyleAttr, 0);
        
        int n = ta.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = ta.getIndex(i);
            switch (attr) {
                case R.styleable.ArcView_mProgress:
                    mProgress = ta.getInt(attr, 90);
                    break;
                case R.styleable.ArcView_mCenterText:
                    mCenterText = ta.getString(attr);
                    break;
                case R.styleable.ArcView_mCenterTextColor:
                    mCenterTextColor = ta.getColor(attr, Color.RED);
                    break;
                case R.styleable.ArcView_mCenterBackgroundColor:
                    mCenterBackgroundColor = ta.getColor(attr, Color.RED);
                    break;
                case R.styleable.ArcView_mArcColor:
                    mArcColor = ta.getColor(attr, Color.RED);
                    break;
                case R.styleable.ArcView_mArcWidth:
                    mArcWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, ta.getDimension(attr, 5),
                            getResources().getDisplayMetrics());
                    break;
                case R.styleable.ArcView_mRadius:
                    mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, ta.getDimension(attr, 5),
                            getResources().getDisplayMetrics());
                    break;
                    
                default:
                    break;
            }
        }
        
        ta.recycle();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }
    
    @Override
    protected void onDraw(Canvas canvas) {
        /**
         * 注: 文字必须在内圆之后绘画,否则内圆会把文字部分覆盖
         */
        
        super.onDraw(canvas);
        int mCenterX = getMeasuredWidth() / 2;
        int mCenterY = getMeasuredHeight() / 2;
        /**
         * 确定圆心位置,在中间
         */
        
        mPaint.setColor(mCenterBackgroundColor);
        canvas.drawCircle(mCenterX, mCenterY, mRadius - 2 * mArcWidth, mPaint);
        /**
         * 画出最外面的圆
         */
        
        mPaint.setColor(mArcColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mArcWidth);
        /**
         * 设置画笔类型与宽度
         */
        
        canvas.drawArc(new RectF(mCenterX - mRadius, mCenterY - mRadius, mCenterX + mRadius, mCenterY + mRadius), 270,
                mProgress, false, mPaint);
        /**
         * 画弧线
         */
        
        mPaint.setColor(mCenterTextColor);
        mPaint.setTextSize(
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()));
                
        mTextWidth = (int) mPaint.measureText(mCenterText);
        mTextHeight = getFontHeight(mPaint);
        
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawText(mCenterText, mCenterX - mTextWidth / 2, mCenterY + mTextHeight / 2, mPaint);
        /**
         * 画文字
         */
    }
    
    private int getFontHeight(Paint paint) {
        Paint.FontMetrics fm = paint.getFontMetrics();
        return (int) (Math.ceil(fm.descent - fm.ascent));
    }
}

 

4.布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.example.customview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >
    <com.example.customview.ArcView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:mArcColor="#f00"
        app:mArcWidth="5dp"
        app:mCenterBackgroundColor="#f00"
        app:mCenterText="Arc View"
        app:mCenterTextColor="#fff"
        app:mProgress="180"
        app:mRadius="50dp" />
</LinearLayout>

 

© 著作权归作者所有

August1996_
粉丝 2
博文 51
码字总数 29055
作品 0
湛江
程序员
私信 提问
Android知识图谱:我们到底需要学习哪些Android知识?

前言 如果你也学习Android,那么你大概率会看过我的文章。经常有读者给我留言:“该怎么学习Android?”、“日常学习Android的方法是什么”。 所以,今天,我将献上一份《Android知识图谱》,...

Carson_Ho
04/22
0
0
Android实战经验之图像处理及特效处理的集锦(总结版)

1 Android学习笔记进阶之在图片上涂鸦(能清屏) 2 Android学习笔记之详细讲解画圆角图片 3 Android学习笔记进阶20之得到图片的缩略图 4 Android学习笔记进阶19之给图片加边框 5 Android学习笔...

xiaosi
2012/03/12
40.1K
25
【我的Android进阶之旅】优化自定义View时onDraw方法警告Avoid object allocations during draw/layout operations (prealloca

版权声明:本文为【欧阳鹏】原创文章,欢迎转载,转载请注明出处! 【http://blog.csdn.net/ouyang_peng】 https://blog.csdn.net/qq446282412/article/details/86505319 一、问题描述 之前的...

欧阳鹏
01/16
0
0
HenCoder Android 开发进阶:自定义 View 1-4 Canvas 对绘制的辅助 clipXXX() 和 Matrix

这期是 HenCoder 自定义绘制的第 1-4 期:Canvas 对绘制的辅助——范围裁切和几何变换。 之前的内容在这里: HenCoder Android 开发进阶 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶...

扔物线
2017/08/04
0
0
android蓝牙手柄、仿QQ看房、仿慕课网、数据库二维码框架等源码

Android精选源码 可自定义图片指示器并支持自定义Tab宽度的TabLayout源码(http://www.apkbus.com/thread-599243-1-1.html) android蓝牙控制手柄操作源码(http://www.apkbus.com/thread-59928...

逆鳞龙
2018/05/15
26
0

没有更多内容

加载失败,请刷新页面

加载更多

EDI 电子数据交换全解指南

EDI(Electronic Data Interchange,电子数据交换)技术使得企业与企业(B2B)实现通信自动化,帮助交易伙伴和组织更快更好地完成更多工作,并消除了人工操作带来的错误。从零售商到制造商、物...

EDI知行软件
今天
3
0
CentOS7的LVM动态扩容

# 问题 CentOS7上面的磁盘空间有点紧张,需要扩容。 解决 查询当前磁盘状态 [root@xxx ~]# lsblkNAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTfd0 2:0 1 4K ...

亚林瓜子
今天
3
0
Kafka 0.8 Producer (0.9以前版本适用)

Kafka旧版本producer由scala编写,0.9以后已经废除 示例代码如下: import kafka.producer.KeyedMessage;import kafka.javaapi.producer.Producer;import kafka.producer.ProducerConfig;......

实时计算
今天
5
0
Giraph源码分析(八)—— 统计每个SuperStep中参与计算的顶点数目

作者|白松 目的:科研中,需要分析在每次迭代过程中参与计算的顶点数目,来进一步优化系统。比如,在SSSP的compute()方法最后一行,都会把当前顶点voteToHalt,即变为InActive状态。所以每次...

数澜科技
今天
6
0
Navicat 快捷键

操作 结果 ctrl+q 打开查询窗口 ctrl+/ 注释sql语句 ctrl+shift +/ 解除注释 ctrl+r 运行查询窗口的sql语句 ctrl+shift+r 只运行选中的sql语句 F6 打开一个mysql命令行窗口 ctrl+l 删除一行 ...

低至一折起
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部