安卓自定义流程进度图控件实例代码

先上效果图：

如图，可实现设置：总流程数、已完进度程数、已完成颜色，各个标题

github地址戳这里

使用方法

1.导入compile 'com.github.pavlospt:circleview:1.3'依赖包（因为用到了CircleView）

2.直接把下面两个文件一个java一个xml，复制粘贴进项目（代码放在了文章最后，暂时还没弄成开源库，有时间直接做成依赖包倒进去）

在xml中写入ProcessImg控件

在java文件中实例化ProcessImg对象

根据需要调用几个方法

1.对象.setColor( int color )

设置已完成的进度的颜色，传入颜色的整型值

2.对象.setProcess( int total , int process )

设置总流程数和已完成进度数，第一个参数为总流程数（1~6，因为超过6个堆在一排很难看），第二个为已完成数，均为整型变量

3.对象.setTitle( int position , String text )

设置各流程的标题，第一个参数为标题对应的流程数（1~total），第二个参数为String格式标题文本
源码

源码很简单，注释也比较清楚，应该能看懂

process_img.xml

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/processImg_layout"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:baselineAligned="false"
 android:gravity="center_vertical"
 android:orientation="horizontal"
 android:padding="20dp">


 <LinearLayout
  android:id="@+id/process1"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:orientation="vertical"
  android:visibility="gone">

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:orientation="horizontal">


   <View
    android:id="@+id/view1l"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>

   <com.github.pavlospt.CircleView
    android:id="@+id/circle1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    app:cv_backgroundColorValue="#00000000"
    app:cv_fillColor="#00000000"
    app:cv_strokeColorValue="#00000000"
    app:cv_subtitleText=""
    app:cv_titleColor="#fff"
    app:cv_titleSize="20sp"
    app:cv_titleText="1"/>

   <View
    android:id="@+id/view1r"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>
  </LinearLayout>

  <TextView
   android:id="@+id/text1"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:text="text1"
   android:textColor="#00000000"/>
 </LinearLayout>

 <LinearLayout
  android:id="@+id/process2"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:orientation="vertical"
  android:visibility="gone">

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:orientation="horizontal">


   <View
    android:id="@+id/view2l"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>

   <com.github.pavlospt.CircleView
    android:id="@+id/circle2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    app:cv_backgroundColorValue="#00000000"
    app:cv_fillColor="#00000000"
    app:cv_strokeColorValue="#00000000"
    app:cv_subtitleText=""
    app:cv_titleColor="#fff"
    app:cv_titleSize="20sp"
    app:cv_titleText="2"/>

   <View
    android:id="@+id/view2r"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>
  </LinearLayout>

  <TextView
   android:id="@+id/text2"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:gravity="center"
   android:text="text2"
   android:textColor="#00000000"/>
 </LinearLayout>

 <LinearLayout
  android:id="@+id/process3"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:orientation="vertical"
  android:visibility="gone">

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:orientation="horizontal">


   <View
    android:id="@+id/view3l"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>

   <com.github.pavlospt.CircleView
    android:id="@+id/circle3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    app:cv_backgroundColorValue="#00000000"
    app:cv_fillColor="#00000000"
    app:cv_strokeColorValue="#00000000"
    app:cv_subtitleText=""
    app:cv_titleColor="#fff"
    app:cv_titleSize="20sp"
    app:cv_titleText="3"/>

   <View
    android:id="@+id/view3r"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>
  </LinearLayout>

  <TextView
   android:id="@+id/text3"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:gravity="center"
   android:text="text3"
   android:textColor="#00000000"/>
 </LinearLayout>

 <LinearLayout
  android:id="@+id/process4"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:orientation="vertical"
  android:visibility="gone">

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:orientation="horizontal">


   <View
    android:id="@+id/view4l"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>

   <com.github.pavlospt.CircleView
    android:id="@+id/circle4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    app:cv_backgroundColorValue="#00000000"
    app:cv_fillColor="#00000000"
    app:cv_strokeColorValue="#00000000"
    app:cv_subtitleText=""
    app:cv_titleColor="#fff"
    app:cv_titleSize="20sp"
    app:cv_titleText="4"/>

   <View
    android:id="@+id/view4r"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>
  </LinearLayout>

  <TextView
   android:id="@+id/text4"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:gravity="center"
   android:text="text4"
   android:textColor="#00000000"/>
 </LinearLayout>

 <LinearLayout
  android:id="@+id/process5"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:orientation="vertical"
  android:visibility="gone">

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:orientation="horizontal">


   <View
    android:id="@+id/view5l"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>

   <com.github.pavlospt.CircleView
    android:id="@+id/circle5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    app:cv_backgroundColorValue="#00000000"
    app:cv_fillColor="#00000000"
    app:cv_strokeColorValue="#00000000"
    app:cv_subtitleText=""
    app:cv_titleColor="#fff"
    app:cv_titleSize="20sp"
    app:cv_titleText="5"/>

   <View
    android:id="@+id/view5r"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>
  </LinearLayout>

  <TextView
   android:id="@+id/text5"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:gravity="center"
   android:text="text5"
   android:textColor="#00000000"/>
 </LinearLayout>

 <LinearLayout
  android:id="@+id/process6"
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:orientation="vertical"
  android:visibility="gone">

  <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:gravity="center_vertical"
   android:orientation="horizontal">


   <View
    android:id="@+id/view6l"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>

   <com.github.pavlospt.CircleView
    android:id="@+id/circle6"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="3"
    app:cv_backgroundColorValue="#00000000"
    app:cv_fillColor="#00000000"
    app:cv_strokeColorValue="#00000000"
    app:cv_subtitleText=""
    app:cv_titleColor="#fff"
    app:cv_titleSize="20sp"
    app:cv_titleText="6"/>

   <View
    android:id="@+id/view6r"
    android:layout_width="0dp"
    android:layout_height="5dp"
    android:layout_weight="2"
    android:background="#00000000"/>
  </LinearLayout>

  <TextView
   android:id="@+id/text6"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   android:gravity="center"
   android:text="text6"
   android:textColor="#00000000"/>
 </LinearLayout>
</LinearLayout>

ProcessImg.java

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

import com.github.pavlospt.CircleView;
import com.zxzhu.processtest.R;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by zxzhu on 2017/6/18.
 */

public class ProcessImg extends LinearLayout {
 private String TAG = "ProcessImg";
 private CircleView circleView1, circleView2, circleView3, circleView4, circleView5, circleView6;
 private TextView textView1, textView2, textView3, textView4, textView5, textView6;
 //view代表流程连接线
 private View view1l, view1r, view2l, view2r, view3l, view3r, view4l, view4r, view5l, view5r, view6l, view6r;
 private LinearLayout process1, process2, process3, process4, process5, process6;
 private List<LinearLayout> layouts = new ArrayList<>();//用于控制流程个数的列表
 private List<View> views = new ArrayList<>();
 private List<TextView> texts = new ArrayList<>();
 private List<CircleView> circleViews = new ArrayList<>();
 private Context context;
 private int color = Color.parseColor("#E0E0E0");
 private int total = 0, process = 0;

 public ProcessImg(Context context) {
  super(context);
  this.context = context;
  initViews();
 }

 public ProcessImg(Context context, AttributeSet attributeSet) {
  super(context, attributeSet);
  this.context = context;
  initViews();
 }

 private void initViews() {
  LayoutInflater.from(context).inflate(R.layout.process_img, this);
  circleView1 = (CircleView) findViewById(R.id.circle1);
  circleView2 = (CircleView) findViewById(R.id.circle2);
  circleView3 = (CircleView) findViewById(R.id.circle3);
  circleView4 = (CircleView) findViewById(R.id.circle4);
  circleView5 = (CircleView) findViewById(R.id.circle5);
  circleView6 = (CircleView) findViewById(R.id.circle6);
  process1 = (LinearLayout) findViewById(R.id.process1);
  process2 = (LinearLayout) findViewById(R.id.process2);
  process3 = (LinearLayout) findViewById(R.id.process3);
  process4 = (LinearLayout) findViewById(R.id.process4);
  process5 = (LinearLayout) findViewById(R.id.process5);
  process6 = (LinearLayout) findViewById(R.id.process6);
  textView1 = (TextView) findViewById(R.id.text1);
  textView2 = (TextView) findViewById(R.id.text2);
  textView3 = (TextView) findViewById(R.id.text3);
  textView4 = (TextView) findViewById(R.id.text4);
  textView5 = (TextView) findViewById(R.id.text5);
  textView6 = (TextView) findViewById(R.id.text6);
  view1l = findViewById(R.id.view1l);
  view1r = findViewById(R.id.view1r);
  view2l = findViewById(R.id.view2l);
  view2r = findViewById(R.id.view2r);
  view3l = findViewById(R.id.view3l);
  view3r = findViewById(R.id.view3r);
  view4l = findViewById(R.id.view4l);
  view4r = findViewById(R.id.view4r);
  view5l = findViewById(R.id.view5l);
  view5r = findViewById(R.id.view5r);
  view6l = findViewById(R.id.view6l);
  view6r = findViewById(R.id.view6r);
  circleViews.add(circleView1);
  circleViews.add(circleView2);
  circleViews.add(circleView3);
  circleViews.add(circleView4);
  circleViews.add(circleView5);
  circleViews.add(circleView6);
  layouts.add(process1);
  layouts.add(process2);
  layouts.add(process3);
  layouts.add(process4);
  layouts.add(process5);
  layouts.add(process6);
  texts.add(textView1);
  texts.add(textView2);
  texts.add(textView3);
  texts.add(textView4);
  texts.add(textView5);
  texts.add(textView6);
  views.add(view1l);
  views.add(view1r);
  views.add(view2l);
  views.add(view2r);
  views.add(view3l);
  views.add(view3r);
  views.add(view4l);
  views.add(view4r);
  views.add(view5l);
  views.add(view5r);
  views.add(view6l);
  views.add(view6r);
 }

 /**
  * 设置已完成流程颜色
  *
  * @param color
  */
 public void setColor(int color) {
  this.color = color；
  setProcess(total, process);
 }

 /**
  * 设置进度
  *
  * @param total 总共流程个数(不超过6)
  * @param process 当前进度
  */
 public void setProcess(int total, int process) {
  this.total = total;
  this.process = process;
  //使流程总数的view显示出来
  for (int i = 0; i < total; i++) {
   layouts.get(i).setVisibility(VISIBLE);
  }
  // 设置已完成进度的颜色
  for (int i = 0; i < circleViews.size(); i++) {
   if (i < process) {
    circleViews.get(i).setFillColor(color);
    circleViews.get(i).setBackgroundColor(color);
    circleViews.get(i).setStrokeColor(color);
    texts.get(i).setTextColor(color);

   } else {
    //未完成设置为灰色
    circleViews.get(i).setFillColor(Color.parseColor("#CCCCCC"));
    circleViews.get(i).setBackgroundColor(Color.parseColor("#CCCCCC"));
    texts.get(i).setTextColor(Color.parseColor("#CCCCCC"));
    circleViews.get(i).setStrokeColor(color);
    circleViews.get(i).setStrokeColor(Color.parseColor("#CCCCCC"));
   }
  }
  //设置流程连接线的颜色
  for (int i = 0; i < views.size(); i++) {
   if (i < process * 2) {
    views.get(i).setBackgroundColor(color);
   } else {
    views.get(i).setBackgroundColor(Color.parseColor("#CCCCCC"));
   }
  }
  views.get(0).setBackgroundColor(Color.parseColor("#00000000"));
  if (total != 0) {
   views.get(2 * total - 1).setBackgroundColor(Color.parseColor("#00000000"));
  }
 }

 /**
  * 设置各进度标题
  *
  * @param position
  * @param text
  */
 public void setTitle(int position, String text) {
  texts.get(position - 1).setText(text);
 }
}

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

# Android自定义进度图  # Android自定义流程图  # Android带进度条的下载图片示例（AsyncTask异步任务）  # Android使用AsyncTask下载图片并显示进度条功能  # Android自定义View基础开发之图片加载进度条  # 第一个  # 第二个  # 整型  # 几个  # 还没  # 放在  # 均为  # 很简单  # 不超过  # 如图  # 设置为  # 开源  # 未完成  # 大家多多  # 弄成  # 能看懂  # 很难看  # 为总  # layout_width  # match_parent 

相关文章： 网站制作企业,网站的banner和导航栏是指什么？  如何用PHP工具快速搭建高效网站？  建站之星安装失败：服务器环境不兼容？  如何基于云服务器快速搭建个人网站？  如何高效配置IIS服务器搭建网站？  深圳网站制作的公司有哪些,dido官方网站？  如何通过山东自助建站平台快速注册域名？  宿州网站制作公司兴策,安徽省低保查询网站？  建站主机选购指南：核心配置优化与品牌推荐方案  沈阳个人网站制作公司,哪个网站能考到沈阳事业编招聘的信息？  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  如何快速建站并高效导出源代码？  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些？  如何快速使用云服务器搭建个人网站？  早安海报制作网站推荐大全,企业早安海报怎么每天更换？  常州自助建站费用包含哪些项目？  开心动漫网站制作软件下载,十分开心动画为何停播？  建站之星如何优化SEO以实现高效排名？  专业网站建设制作报价,网页设计制作要考什么证？  如何配置支付宝与微信支付功能？  青岛网站建设如何选择本地服务器？  高端建站三要素：定制模板、企业官网与响应式设计优化  免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？  番禺网站制作公司哪家值得合作,番禺图书馆新馆开放了吗？  如何在万网ECS上快速搭建专属网站？  如何选择高效响应式自助建站源码系统？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  北京制作网站的公司排名,北京三快科技有限公司是做什么？北京三快科技？  如何在香港服务器上快速搭建免备案网站？  武清网站制作公司,天津武清个人营业执照注销查询系统网站？  免费公司网站制作软件,如何申请免费主页空间做自己的网站？  C#怎么创建控制台应用 C# Console App项目创建方法  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  建站为何优先选择香港服务器？  宁波自助建站系统如何快速打造专业企业网站？  如何用美橙互联一键搭建多站合一网站？  如何选择服务器才能高效搭建专属网站？  如何挑选高效建站主机与优质域名？  如何打造高效商业网站？建站目的决定转化率  c# 服务器GC和工作站GC的区别和设置  制作网站的模板软件,网站怎么建设？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  建站之星安装后如何自定义网站颜色与字体？  企业微网站怎么做,公司网站和公众号有什么区别？  如何获取开源自助建站系统免费下载链接？  如何在Tomcat中配置并部署网站项目？  专业网站制作企业网站,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何在建站之星绑定自定义域名？  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？