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

先上效果图:

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

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

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

时间: 2024-10-25 21:25:09

安卓自定义流程进度图控件实例代码的相关文章

Android 底部导航控件实例代码_Android

一.先给大家展示下最终效果 通过以上可以看到,图一是简单的使用,图二.图三中为结合ViewPager共同使用,而且都可以随ViewPager的滑动渐变色,不同点是图二为选中非选中两张图片,图三的选中非选中是一张图片只是做了颜色变化. 二. 需求 我们希望做可以做成这样的,可以在xml布局中引入控件并绑定数据,在代码中设置监听回调,并且配置使用要非常简单! 三.需求分析 根据我们多年做不明确需求项目的经验,以上需求还算明确.那么我们可以采用在LinearLayout添加子View控件,这个子Vie

Android 底部导航控件实例代码

一.先给大家展示下最终效果 通过以上可以看到,图一是简单的使用,图二.图三中为结合ViewPager共同使用,而且都可以随ViewPager的滑动渐变色,不同点是图二为选中非选中两张图片,图三的选中非选中是一张图片只是做了颜色变化. 二. 需求 我们希望做可以做成这样的,可以在xml布局中引入控件并绑定数据,在代码中设置监听回调,并且配置使用要非常简单! 三.需求分析 根据我们多年做不明确需求项目的经验,以上需求还算明确.那么我们可以采用在LinearLayout添加子View控件,这个子Vie

jquery动态增加删除控件实例代码

可以添加在增减过程中需要的自定义参数和变量,如: $("table").dynamicaddremover({param1:"param1", param2:"param2"}); 使用时,如:options.param1等等. .根容器必须有唯一id且指定时必须唯一.如果有多个模块(多个根容器)需要使用可以这样:$("#table1").dynamicaddremover(),$("#table2").d

Android开发中DatePicker日期与时间控件实例代码

一.简介 二.方法 最日常的使用方法了 日期控件DatePicker 时间控件TimePicker 月份从0开始 三.代码实例 效果图: 代码: fry.Activity01 package fry; import com.example.DatePicherDemo1.R; import android.app.Activity; import android.os.Bundle; import android.widget.DatePicker; import android.widget.

Android实现滑动选择控件实例代码

前言 最近做了个滑动选择的小控件,拿出来给大家分享一下,先上图 运行效果 实现步骤 这里分解为3个动作:Down.Move.Up来进行分析,博主文采不好,大家直接看流程图吧!! 代码分析 前置知识 1.这个地方使用的是RecyclerView的代码,使用RecyclerView只能使用LinearLayoutManager,ListView的运行效果稍微要比RecyclerView差一些 //这里使用dispatchTouchEvent,因为onTouchEvent容易被OnTouchListe

extjs4中Ext.ProgressBar进度条控件实例

1.加载进度条  代码如下 复制代码 [html]     <div class="content">         <button id="button1">执行</button>         <div id="p1" style="width: 300px;"></div>     </div><br /> [Js]     //加载

Android 自定义弹性ListView控件实例代码(三种方法)

关于在Android中实现ListView的弹性效果,有很多不同的方法,网上一搜,也有很多,下面贴出在项目中经常用到的两种实现ListView弹性效果的方法(基本上拿来就可以用),供大家参考: 弹性ListView 第一种方法: import android.content.Context; import android.content.res.Configuration; import android.util.AttributeSet; import android.util.Display

简约JS日历控件 实例代码_javascript技巧

运行结果如下: 复制代码 代码如下: <script type="text/javascript" language="javascript">function choose_date_czw(date_id,objtd){if(date_id=="choose_date_czw_close"){    document.getElementByIdx_x_x("choose_date_czw_id").style

js 模拟select控件实例代码

请选择游戏名称 搜索 地下城与勇士 魔兽世界(国服) 魔兽世界(台服) 热血江湖 神鬼传奇 大话西游II QQ幻想世界