美文网首页Android DemoAndroid开发Android知识
安卓自定义流程进度图控件

安卓自定义流程进度图控件

作者: _zxZhu | 来源:发表于2017-06-18 21:18 被阅读272次

    先上效果图：

    如图，可实现设置：总流程数、已完进度程数、已完成颜色、各个流程点击事件，各个标题
    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格式标题文本
      **4.对象.setClick( int position , Click click ) **
      设置各流程的点击事件，第一个参数是点击的流程（1~total），第二个参数为点击后的回调方法。

    源码

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

    • 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 {
    public interface Click {
        void click();//点击事件回调
    }
    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);
    }
}
     /**
     * 设置个流程的点击事件
     *
     * @param i
     * @param click 点击回调
     */
     public void setClick(int i, final Click click) {
        layouts.get(i - 1).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                click.click();
            }
        });
    }

    初学者，有bug，或者有更好的解决方案感谢指出！

    相关文章

      网友评论

      • SmartSean:你这个完全是现有控件组合的，哥们，等着，我这两天没事了，我试试能不能写成一个View
        _zxZhu: @SmartSean 确实 circle view 拼成的。。嗯嗯兄弟写完了我学习下
      • 程序亦非猿580230:要是有10个？你布局要写10个。。。。
        _zxZhu: @程序亦非猿580230 嗯嗯确实 这样xml太长了 感谢
        程序亦非猿580230:@Zhuzzzzzzx 建议优化下 把view动态添加 就完美了
        _zxZhu: @程序亦非猿580230我是直接粘贴了6次，实际超过6个就没法看了，动态添加应该可以吧
      • kuangjiajia:好喜欢你写的东西 简单易懂

      本文标题：安卓自定义流程进度图控件

      本文链接：https://www.haomeiwen.com/subject/jbkwqxtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      Android Demo

      Android开发

      Android知识

      Android开发

      Android技术知识

      UI

      自定义控件

      程序员

      关于我们|服务条款|联系我们|安卓自定义流程进度图控件|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！