安卓自定义流程进度图控件实例代码
程序员文章站
2023-11-29 21:01:28
先上效果图:
如图,可实现设置:总流程数、已完进度程数、已完成颜色,各个标题
github地址戳这里
使用方法
1.导入compile 'com.githu...
先上效果图:
如图,可实现设置:总流程数、已完进度程数、已完成颜色,各个标题
使用方法
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); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读