自定义Android圆形进度条视图，支持显示数字和中心文字

作者：mobiledu2502913173 | 来源：互联网 | 2024-11-10 13:04

本文介绍了一种自定义的Android圆形进度条视图，支持在进度条上显示数字，并在圆心位置展示文字内容。通过自定义绘图和组件组合的方式实现，详细展示了自定义View的开发流程和关键技术点。示例代码和效果展示将在文章末尾提供。

这是一个自定义带数字的圆形进度条和中间是文字的圆形进度条View。自定义View的基本流程在这里就不多说了。（效果图在最后）

自定义View分好几种。我这个Demo主要用到了自己绘画的和组合的View。

首先看怎么自定义带数字的圆形进度条的View。注解读写在代码里了，在这里不多说。

类MyCirclePB自定义的View。具体代码如下：

package com.yehu.z01_circlepb;


import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.os.SystemClock;
import android.util.Log;
import android.view.View;
import android.widget.Toast;


import com.yehu.z01_circlepb.My_Cricle.My_CricleListern;


public class MainActivity extends Activity {


	private My_Cricle my_Cricle;
	private MyCirclePB myCirclePB;
	String[] strs = { "从未超越", "超越自我", "旗鼓相当" };


	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 圆形进条
		myCirclePB = (MyCirclePB) findViewById(R.id.my_criclePB);
		myCirclePB.setOnClickListener(new View.OnClickListener() {


			@Override
			public void onClick(View v) {
				myCirclePB.setEnabled(false);
				new Thread() {
					public void run() {
						int n = 1000;
						myCirclePB.setMax(n);
						for (int i = 0; i <= n; i++) {
							Log.e("TAG", "download i=" + i);
							myCirclePB.setProgress(i);
							if (myCirclePB.getProgress() == myCirclePB.getMax()) {
								handler.sendEmptyMessage(2);
							}
							SystemClock.sleep(5);
						}
					};
				}.start();
			}
		});
		// 文本 圆形框
		my_Cricle = (My_Cricle) findViewById(R.id.my_cricle);
		my_Cricle.init_view();
		my_Cricle.setOnClickListener(new View.OnClickListener() {


			@Override
			public void onClick(View v) {
				my_Cricle.setEnabled(false);
				final MyCirclePB circlePB = (MyCirclePB) (((My_Cricle) v)
						.getMyCirclePB());
				new Thread() {
					public void run() {
						int n = 1000;
						circlePB.setMax(n);
						for (int i = 0; i <= n; i++) {
							Log.e("TAG", "download i=" + i);
							circlePB.setProgress(i);
							String str = null;
							Message msg = Message.obtain();
							if (circlePB.getProgress() 								str = strs[0];


								msg.what = 3;
							} else if (circlePB.getProgress() 									.getMax() * 2 / 3) {
								str = strs[1];
								msg.what = 4;
							} else {
								str = strs[2];
								msg.what = 5;
							}
							msg.obj = str;
							handler.sendMessage(msg);
							if (circlePB.getProgress() == circlePB.getMax()) {
								handler.sendEmptyMessage(1);
							}
							SystemClock.sleep(5);
						}
					};
				}.start();
			}
		});
	}


	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			String str = (String) msg.obj;
			int flag = msg.what;
			if (flag == 1) {
				my_Cricle.setEnabled(true);
			} else if (flag == 2) {
				myCirclePB.setEnabled(true);
			} else if (flag == 3) {
				my_Cricle.getText2().setText(str);
				my_Cricle.getText2().setTextColor(0xffff0000);
			} else if (flag == 4) {
				my_Cricle.getText2().setText(str);
				my_Cricle.getText2().setTextColor(0xff0000ff);
			} else if (flag == 5) {
				my_Cricle.getText2().setText(str);
				my_Cricle.getText2().setTextColor(0xff00ff00);
			}
		};
	};


}

自定义带数字的圆形进度条View基本就完事了。写一个XML布局就可以使用了。在这里就不单个写了，布局都整合在一起了，后面补上。

这个是一个组合View。

先写布局吧！my_cricle.xml布局如下：

    android:layout_
    android:layout_ >

            android:id="@+id/mycirlepb"
        android:layout_
        android:layout_
        android:layout_margin="5dp" />

            android:layout_
        android:layout_
        android:layout_centerInParent="true"
        android:orientation="vertical" >

                    android:id="@+id/text1"
            android:layout_
            android:layout_
            android:layout_gravity="center"
            android:text="aaa" />

                    android:id="@+id/text2"
            android:layout_
            android:layout_
            android:textSize="18sp"
            android:text="aaaa" />

                    android:id="@+id/text3"
            android:layout_
            android:layout_
            android:layout_gravity="center"
            android:text="aaa" />

类My_Cricle具体代码如下：

package com.yehu.z01_circlepb;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class My_Cricle extends RelativeLayout {

	private Context context;
	private View v;
	private TextView text2;
	private MyCirclePB myCirclePB;

	public MyCirclePB getMyCirclePB() {
		return myCirclePB;
	}

	/**
	 * 这里写一些事件的回调
	 * @author sunmj
	 *
	 */
	public interface My_CricleListern {
		public void back(String name);
	}

	public My_Cricle(Context context) {
		this(context, null);
		init(context);
	}

	public My_Cricle(Context context, AttributeSet attrs) {
		super(context, attrs);
		init(context);

	}

	private void init(Context context) {
		// TODO Auto-generated method stub
		this.cOntext= context;
		v = LayoutInflater.from(context).inflate(R.layout.my_cricle, this, true);
		text2 = (TextView) v.findViewById(R.id.text2);
	}

	/**
	 * 这个方法里面写一些配置的文件例如
	 */
	public void init_view() {
		myCirclePB = (MyCirclePB) v.findViewById(R.id.mycirlepb);
		int n = 100;
		myCirclePB.setMax(n);
		myCirclePB.setRoundColor(Color.GRAY);
		myCirclePB.setRoundProgressColor(Color.RED);
		myCirclePB.setRoundWidth(40);
		myCirclePB.setProgress(0);
		myCirclePB.setShowProgress(false);
		
	}
	
	public TextView getText2() {
		return text2;
	}

	//回调回去
	public void set_listern(My_CricleListern nCricleListern)
	{
		nCricleListern.back("1111");
	}
}

到这里基本就实现了带数字的圆形进度条，和中间是文字的圆形进度条。下面就是具体的使用了。

主布局activity_main.xml如下：

    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    android:gravity="center_horizontal"
    android:orientation="vertical" >

            android:layout_
        android:layout_
        android:padding="10dp"
        android:text="圆形进度条"
        android:textSize="16sp" />

            android:id="@+id/my_criclePB"
        android:layout_
        android:layout_ />

            android:layout_
        android:layout_
        android:padding="10dp"
        android:text="圆形文本框"
        android:textSize="16sp" />

            android:id="@+id/my_cricle"
        android:layout_
        android:layout_ />

类MainActivity具体代码如下：

package com.yehu.z01_circlepb;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.os.SystemClock;
import android.util.Log;
import android.view.View;
import android.widget.Toast;

import com.yehu.z01_circlepb.My_Cricle.My_CricleListern;

public class MainActivity extends Activity {

	private My_Cricle my_Cricle;
	private MyCirclePB myCirclePB;
	String[] strs = { "从未超越", "超越自我", "旗鼓相当" };

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 圆形进条
		myCirclePB = (MyCirclePB) findViewById(R.id.my_criclePB);
		myCirclePB.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				myCirclePB.setEnabled(false);
				new Thread() {
					public void run() {
						int n = 1000;
						myCirclePB.setMax(n);
						for (int i = 0; i <= n; i++) {
							Log.e("TAG", "download i=" + i);
							myCirclePB.setProgress(i);
							if (myCirclePB.getProgress() == myCirclePB.getMax()) {
								handler.sendEmptyMessage(2);
							}
							SystemClock.sleep(5);
						}
					};
				}.start();
			}
		});
		// 文本 圆形框
		my_Cricle = (My_Cricle) findViewById(R.id.my_cricle);
		my_Cricle.init_view();
		my_Cricle.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				my_Cricle.setEnabled(false);
				final MyCirclePB circlePB = (MyCirclePB) (((My_Cricle) v)
						.getMyCirclePB());
				new Thread() {
					public void run() {
						int n = 1000;
						circlePB.setMax(n);
						for (int i = 0; i <= n; i++) {
							Log.e("TAG", "download i=" + i);
							circlePB.setProgress(i);
							String str = null;
							Message msg = Message.obtain();
							if (circlePB.getProgress() 								str = strs[0];

								msg.what = 3;
							} else if (circlePB.getProgress() 									.getMax() * 2 / 3) {
								str = strs[1];
								msg.what = 4;
							} else {
								str = strs[2];
								msg.what = 5;
							}
							msg.obj = str;
							handler.sendMessage(msg);
							if (circlePB.getProgress() == circlePB.getMax()) {
								handler.sendEmptyMessage(1);
							}
							SystemClock.sleep(5);
						}
					};
				}.start();
			}
		});
	}

	private Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			String str = (String) msg.obj;
			int flag = msg.what;
			if (flag == 1) {
				my_Cricle.setEnabled(true);
			} else if (flag == 2) {
				myCirclePB.setEnabled(true);
			} else if (flag == 3) {
				my_Cricle.getText2().setText(str);
				my_Cricle.getText2().setTextColor(0xffff0000);
			} else if (flag == 4) {
				my_Cricle.getText2().setText(str);
				my_Cricle.getText2().setTextColor(0xff0000ff);
			} else if (flag == 5) {
				my_Cricle.getText2().setText(str);
				my_Cricle.getText2().setTextColor(0xff00ff00);
			}
		};
	};

}

代码的不怎么简洁，一直在努力中……

具体的效果图如下：

推荐阅读

utf-8
Android开发技巧：实现带描边的圆角图片

本文介绍了一种在Android应用中实现带描边的圆角图片的方法。通过使用BitmapShader类，开发者可以轻松地为图片添加圆角和描边效果，提升应用的视觉体验。 ... [详细]

蜡笔小新 2024-12-13 13:19:00
utf-8
实现Android中的时间轴效果

本文介绍了在Android项目中实现时间轴效果的方法，通过自定义ListView的Item布局和适配器逻辑，实现了动态显示和隐藏时间标签的功能。文中详细描述了布局文件、适配器代码以及时间格式化工具类的具体实现。 ... [详细]

蜡笔小新 2024-12-17 12:34:41
default
Android自定义ListView实现上拉加载与下拉刷新

本文介绍如何通过自定义控件LoadLayout实现ListView的上拉加载更多和下拉刷新功能。LoadLayout支持上拉加载，而下拉刷新则利用了android.support.v4.widget.SwipeRefreshLayout组件。 ... [详细]

蜡笔小新 2024-12-04 13:44:41
web
Nginx 反向代理与负载均衡实验

本实验旨在通过配置 Nginx 实现反向代理和负载均衡，确保从北京本地代理服务器访问上海的 Web 服务器时，能够依次显示红、黄、绿三种颜色页面以验证负载均衡效果。 ... [详细]

蜡笔小新 2024-12-22 15:15:48
default
深入解析Spring启动过程

本文详细介绍了Spring框架的启动流程，帮助开发者理解其内部机制。通过具体示例和代码片段，解释了Bean定义、工厂类、读取器以及条件评估等关键概念，使读者能够更全面地掌握Spring的初始化过程。 ... [详细]

蜡笔小新 2024-12-21 17:33:44
export
深入解析 Android IPC 中的 Messenger 机制

本文详细介绍了 Android 中基于消息传递的进程间通信（IPC）机制——Messenger。通过实例和源码分析，帮助开发者更好地理解和使用这一高效的通信工具。 ... [详细]

蜡笔小新 2024-12-21 11:11:40
post
烤鸭|本文_Spring之Bean的生命周期详解

烤鸭|本文_Spring之Bean的生命周期详解 ... [详细]

蜡笔小新 2024-12-19 16:57:11
main
Android中实现复合旋转动画效果

本文将探讨如何在Android应用中实现动态且吸引人的旋转动画。通过结合多种动画类型，如透明度变化、旋转、缩放和位移，可以创造出更为复杂的视觉效果。我们将从XML布局和Java代码两个方面进行详细介绍。 ... [详细]

蜡笔小新 2024-12-16 18:38:19
post
Android商城应用开发指南（第二部分）：创建启动欢迎页

大多数商城应用程序在启动时会显示一个欢迎页面，以提升用户体验。本文将指导您如何实现一个基本的欢迎页，该页面会在用户打开应用后短暂展示，随后自动跳转至主界面。 ... [详细]

蜡笔小新 2024-12-16 17:34:59
main
Eclipse 下 JavaFX 程序开发指南

本文介绍了 JavaFX，这是一个用于创建富客户端应用程序的 Java 图形和媒体工具包，并详细说明了如何在 Eclipse 环境中配置和开发 JavaFX 应用。 ... [详细]

蜡笔小新 2024-12-15 16:02:48
export
开发笔记:Python:GUI之tkinter学习笔记1控件的介绍及使用

开发笔记:Python:GUI之tkinter学习笔记1控件的介绍及使用 ... [详细]

蜡笔小新 2024-12-13 08:51:29
default
CoordinatorLayout滑动抖动问题

目录介绍01.CoordinatorLayout滑动抖动问题描述02.滑动抖动问题分析03.自定义AppBarLayout.Behavior说明04.CoordinatorLayo ... [详细]

蜡笔小新 2024-12-12 11:05:51
object
纵向|发生_ListView和EditText使用解决方案

纵向|发生_ListView和EditText使用解决方案 ... [详细]

蜡笔小新 2024-12-08 12:33:37
default
利用HTML5 Canvas高效构建电信网络拓扑图

电信网络拓扑图在实际应用中具有很高的实用价值。本文介绍了一个基于HTML5 Canvas的电信网络拓扑图项目，不仅实现了基本的图形展示功能，还加入了自动布局和属性栏功能，使项目更加完善。此Demo经过细微调整即可直接应用于实际项目中。 ... [详细]

蜡笔小新 2024-12-08 07:31:01
require
Flutter入门指南：实现自动关闭的对话框与提示

本文为Flutter系列教程的一部分，专注于讲解如何在Flutter应用中实现自动关闭的对话框和提示。通过具体的代码示例，帮助开发者掌握SnackBar、BottomSheet和Dialog的使用方法。 ... [详细]

蜡笔小新 2024-12-03 13:40:43

mobiledu2502913173

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章