登录
当前位置： 首页 > 编程笔记 >

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

吕永嘉
2023-03-14
本文向大家介绍安卓自定义流程进度图控件实例代码，包括了安卓自定义流程进度图控件实例代码的使用技巧和注意事项，需要的朋友参考一下

先上效果图：

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

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自定义控件实现圆形进度条的使用技巧和注意事项，需要的朋友参考一下 项目中常用到的圆形进度条有好多个，从网上搜到的自定义进度条多是封装的比较好的代码，但是不利于初学者，现在本博客就教给大家如何一步步实现自定义进度条的效果： 先看效果如图… 代码实现过程–main布局 这个布局中就是一个简单的引用 自定义ProgressView

  • Android自定义View弧线进度控件

    本文向大家介绍Android自定义View弧线进度控件，包括了Android自定义View弧线进度控件的使用技巧和注意事项，需要的朋友参考一下 这个是一个以弧线为依托的进度控件，主要包括了两个圆弧、一个圆、一个文本。   当我们点击开始按钮的时候，会出现一个动画，逐渐的出现进度，好了，下面开始我们的编码。 新建一个类，继承自View，实现三个构造方法，接着定义变量，初始化变量的数据。代码如下： 可

  • Android自定义view实现水波进度条控件

    本文向大家介绍Android自定义view实现水波进度条控件，包括了Android自定义view实现水波进度条控件的使用技巧和注意事项，需要的朋友参考一下 通过自定义view实现了一个水滴滴落到水波面，溅起水花并且水波流动上涨的进度条控件。之前看到过好多水波流动的进度条，感觉欠缺些东西，就想到了水滴到水平面，溅起水花然后水流动上涨的进度条效果，于是自己动手写了出来。效果如下，视频录制有些卡顿，实际

  • Android环形进度条(安卓默认形式)实例代码

    本文向大家介绍Android环形进度条(安卓默认形式)实例代码，包括了Android环形进度条(安卓默认形式)实例代码的使用技巧和注意事项，需要的朋友参考一下 Android开发中，有很多的功能在实际应用中都起了很大的作用，比如android进度条的实现方式，下面给大家介绍Android环形进度条(安卓默认形式)，具体内容如下所示： .xml .java 以上内容是小编给大家介绍的Android环

  • 百度地图自定义控件分享

    本文向大家介绍百度地图自定义控件分享，包括了百度地图自定义控件分享的使用技巧和注意事项，需要的朋友参考一下 废话不多说了，直接奉上代码; 上面代码就是个人正在使用的百度地图的自定义控件，希望大家能够喜欢。

  • Android自定义顶部导航栏控件实例代码

    本文向大家介绍Android自定义顶部导航栏控件实例代码，包括了Android自定义顶部导航栏控件实例代码的使用技巧和注意事项，需要的朋友参考一下 下面一段代码给大家介绍了android 自定义顶部导航栏控件功能，具体代码如下所示： 总结 以上所述是小编给大家介绍的Android自定义顶部导航栏控件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家

相关阅读

百度地图自定义控件分享Android自定义顶部导航栏控件实例代码AngularJS自定义控件实例详解实例讲解Android自定义控件Android实现自定义轮播图片控件示例

相关文章

GWT 自定义组件Vue.js 组件 - 自定义事件ZEKU哲库安卓软件工程师面经Apache Ant自定义组件Lua 流程控制

相关问答

带有自定义控制器的JavaFX自定义组件SceneBuilder自定义控件类路径使用ChartJS v2.0自定义图例自定义圆形图像进度条与透明背景JavaFX-使用FXML的另一个自定义控件中的自定义控件列表

相关工具

安卓控制电脑自定义地图覆盖层BAMS 安卓版自定义UITabBar自定义NavigationBar

相关文档

安卓应用安全指南14天学会安卓开发F-Secure Safe 安卓版 用户指南深度学习进阶：自然语言处理App Inventor 编程实例及指南
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.