欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2023-11-29 21:01:28
先上效果图: 如图,可实现设置:总流程数、已完进度程数、已完成颜色,各个标题 github地址戳这里 使用方法 1.导入compile 'com.githu...

先上效果图:

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

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

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);
 }
}

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