圆圈进度条

效果图:


下面是一个自己写的圆圈进度条的代码:

java:

package com.huiting.fragment;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.huiting.R;
import com.huiting.tools.LogUtils;
import com.huiting.view.LoadingPage;
import com.huiting.view.RoundProgressBarView;

import java.util.Timer;
import java.util.TimerTask;

/**
 * 录音界面上部三张推荐录音绘本
 * Created by zst on 16/1/19.
 */
public class RecordRecordFragment extends BaseFragment {
    private LinearLayout llHeader;//RecordRecomFragmnet中的LinearLayout llHeader
    private LinearLayout llStart;
    private LinearLayout llBottom;
    private handleRecordRecomFragmentInterface hrfi;//对外接口
    private boolean isRecord = false;
    private ImageView ivRecord;

    //圆形进度条
    private RoundProgressBarView mRoundProgressBar5;
    private int progress = 0;

    //计时器
    private MyTimerTask timerTask;
    private int recordTime = 0;
    private Timer timer;

    /* 秒表计时器-Task */
    class MyTimerTask extends TimerTask {
        @Override
        public void run() {
            Message msg = new Message();
            if(recordTime == 60){
                msg.what = 2;
            }else{
                msg.what = 1;
            }
            myHandler.sendMessage(msg);
        }

    };

    // 本类Handler-刷新ui(刷新进度条)
    Handler myHandler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            switch(msg.what){
                case 1:
                    recordTime++;
                    mRoundProgressBar5.setProgress(recordTime);//每次进度条增加一秒
                    LogUtils.d("录音秒数:", recordTime+"s");
                    break;
                case 2:
                    pauseRecord();
                    ivRecord.setImageResource(R.mipmap.btn_record_begin);
            }
        }
    };

    //暂停录音|暂停动画
    private void pauseRecord() {
        //暂停计时
        if(timerTask != null){
            timerTask.cancel();
            //timer.cancel();
        }
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        show();
    }

    @Override
    public View createSuccessView() {
        View view = View.inflate(getActivity(), R.layout.fragment_record, null);

        llStart = (LinearLayout) view.findViewById(R.id.ll_start);
        llBottom = (LinearLayout) view.findViewById(R.id.ll_bottom);
        mRoundProgressBar5 = (RoundProgressBarView) view.findViewById(R.id.roundProgressBar5);
        ivRecord = (ImageView) view.findViewById(R.id.iv_record);


        //点击
        llStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //调用接口-操作别的Fragment
                hrfi.hideHeader();//隐藏别的Fragment的头部-如果有实现handleRecordRecomFragmentInterface接口的
                llBottom.setVisibility(View.VISIBLE);

                if(!isRecord) {
                    isRecord = true;

                    ivRecord.setImageResource(R.mipmap.btn_record_pause);

                    //开始计时
                    timer = new Timer(true);
                    timerTask = new MyTimerTask();
                    timer.scheduleAtFixedRate(timerTask, 0, 1000);
                }else {
                    isRecord = false;

                    ivRecord.setImageResource(R.mipmap.btn_record_begin);

                    //关闭计时
                    if(timerTask != null) {
                        timerTask.cancel();
                    }
                }
            }
        });

        return view;
    }

    /* 预加载 */
    public LoadingPage.LoadResult load() {
        return LoadingPage.LoadResult.success;
    }

    /* 绑定接口和Activity - 必须有这个方法,否则调用会报hideHeader空指针异常 */
    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);

        try {
            hrfi = (handleRecordRecomFragmentInterface) activity;
        } catch (Exception e) {
            throw new ClassCastException(activity.toString() + "must implement OnArticleSelectedListener");
        }
    }

    /**
     * 接口:隐藏RecordRecomFragment中的header
     */
    public interface handleRecordRecomFragmentInterface {
        public void hideHeader();
    }

    /**
     * 隐藏底部栏
     */
    public void hideBottomBar() {
        llBottom.setVisibility(View.GONE);
    }
}

布局xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/ll_start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="60dip"
            android:layout_height="60dip">

            <com.huiting.view.RoundProgressBarView
                android:id="@+id/roundProgressBar5"
                android:layout_width="55dip"
                android:layout_height="55dip"
                android:layout_centerInParent="true"/>

            <ImageView
                android:id="@+id/iv_record"
                android:layout_width="50dip"
                android:layout_height="50dip"
                android:layout_centerInParent="true"
                android:src="@mipmap/btn_record_begin"/>
        </RelativeLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="点击开始录音"
            android:textColor="@color/app_bg_black_color"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="57.6dp"
        android:layout_gravity="bottom"
        android:background="@color/app_bg_turquoise_color"
        android:orientation="horizontal"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:visibility="gone">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="删除"
                android:textColor="@color/app_text_white_color"/>
        </RelativeLayout>

        <include
            layout="@layout/include_line_vertical"/>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="确认"
                android:textColor="@color/app_text_white_color"/>
        </RelativeLayout>

    </LinearLayout>

</FrameLayout>
圆圈javaView:

package com.huiting.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;

import com.huiting.R;
import com.huiting.tools.LogUtils;


/**
 * 圆形进度条
 * Created by zst on 16/1/20.
 */
public class RoundProgressBarView extends View {
	/**
	 * 画笔对象的引用
	 */
	private Paint paint;

	/**
	 * 圆环的颜色
	 */
	private int roundColor;

	/**
	 * 圆环进度的颜色
	 */
	private int roundProgressColor;

	/**
	 * 中间进度百分比的字符串的颜色
	 */
	private int textColor;

	/**
	 * 中间进度百分比的字符串的字体
	 */
	private float textSize;

	/**
	 * 圆环的宽度
	 */
	private float roundWidth;

	/**
	 * 最大进度
	 */
	private int max;

	/**
	 * 当前进度
	 */
	private int progress;
	/**
	 * 是否显示中间的进度
	 */
	private boolean textIsDisplayable;

	/**
	 * 进度的风格,实心或者空心
	 */
	private int style;

	public static final int STROKE = 0;
	public static final int FILL = 1;

	public RoundProgressBarView(Context context) {
		this(context, null);
	}

	public RoundProgressBarView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public RoundProgressBarView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

		paint = new Paint();


		TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
				R.styleable.RoundProgressBar);

		//获取自定义属性和默认值
		roundColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundColor, Color.WHITE);
		roundProgressColor = mTypedArray.getColor(R.styleable.RoundProgressBar_roundProgressColor, getResources().getColor(R.color.app_bg_turquoise_color));
		textColor = mTypedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.GREEN);
		textSize = mTypedArray.getDimension(R.styleable.RoundProgressBar_textSize, 15);
		roundWidth = mTypedArray.getDimension(R.styleable.RoundProgressBar_roundWidth, 5);
		max = mTypedArray.getInteger(R.styleable.RoundProgressBar_max, 60);//圆圈最大值60s
		textIsDisplayable = mTypedArray.getBoolean(R.styleable.RoundProgressBar_textIsDisplayable, true);
		style = mTypedArray.getInt(R.styleable.RoundProgressBar_style, 0);

		mTypedArray.recycle();
	}


	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);

		/**
		 * 画最外层的大圆环
		 */
		int centre = getWidth()/2; //获取圆心的x坐标
		int radius = (int) (centre - roundWidth/2); //圆环的半径
		paint.setColor(roundColor); //设置圆环的颜色
		paint.setStyle(Paint.Style.STROKE); //设置空心
		paint.setStrokeWidth(roundWidth); //设置圆环的宽度
		paint.setAntiAlias(true);  //消除锯齿
		canvas.drawCircle(centre, centre, radius, paint); //画出圆环

		//LogUtils.d("log", centre + "");

		/**
		 * 画进度百分比
		 */
		paint.setStrokeWidth(0);
		paint.setColor(textColor);
		paint.setTextSize(textSize);
		paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体
		int percent = (int)(((float)progress / (float)max) * 100);  //中间的进度百分比,先转换成float在进行除法运算,不然都为0
		float textWidth = paint.measureText(percent + "%");   //测量字体宽度,我们需要根据字体的宽度设置在圆环中间

		if(textIsDisplayable && percent != 0 && style == STROKE){
			canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //画出进度百分比
		}


		/**
		 * 画圆弧 ,画圆环的进度
		 */

		//设置进度是实心还是空心
		paint.setStrokeWidth(roundWidth); //设置圆环的宽度
		paint.setColor(roundProgressColor);  //设置进度的颜色
		RectF oval = new RectF(centre - radius, centre - radius, centre
				+ radius, centre + radius);  //用于定义的圆弧的形状和大小的界限

		switch (style) {
			case STROKE:{
				paint.setStyle(Paint.Style.STROKE);
				canvas.drawArc(oval, 0, 360 * progress / max, false, paint);  //根据进度画圆弧
				break;
			}
			case FILL:{
				paint.setStyle(Paint.Style.FILL_AND_STROKE);
				if(progress !=0)
					canvas.drawArc(oval, 0, 360 * progress / max, true, paint);  //根据进度画圆弧
				break;
			}
		}

	}


	public synchronized int getMax() {
		return max;
	}

	/**
	 * 设置进度的最大值
	 * @param max
	 */
	public synchronized void setMax(int max) {
		if(max < 0){
			throw new IllegalArgumentException("max not less than 0");
		}
		this.max = max;
	}

	/**
	 * 获取进度.需要同步
	 * @return
	 */
	public synchronized int getProgress() {
		return progress;
	}

	/**
	 * 设置进度,此为线程安全控件,由于考虑多线的问题,需要同步
	 * 刷新界面调用postInvalidate()能在非UI线程刷新
	 * @param progress
	 */
	public synchronized void setProgress(int progress) {
		if(progress < 0){
			throw new IllegalArgumentException("progress not less than 0");
		}
		if(progress > max){
			progress = max;
		}
		if(progress <= max){
			this.progress = progress;
			postInvalidate();
		}

	}


	public int getCricleColor() {
		return roundColor;
	}

	public void setCricleColor(int cricleColor) {
		this.roundColor = cricleColor;
	}

	public int getCricleProgressColor() {
		return roundProgressColor;
	}

	public void setCricleProgressColor(int cricleProgressColor) {
		this.roundProgressColor = cricleProgressColor;
	}

	public int getTextColor() {
		return textColor;
	}

	public void setTextColor(int textColor) {
		this.textColor = textColor;
	}

	public float getTextSize() {
		return textSize;
	}

	public void setTextSize(float textSize) {
		this.textSize = textSize;
	}

	public float getRoundWidth() {
		return roundWidth;
	}

	public void setRoundWidth(float roundWidth) {
		this.roundWidth = roundWidth;
	}



}

============

下面是一个demo,demo能运行:圆圈demo地址

el-upload 是 ElementUI 中的一个上传组件,它默认提供了圆圈进度条来显示上传进度。但是有时候我们可能需要更加个性化的样式来满足自己的需求。那么如何修改 el-upload 默认圆圈进度条样式呢? 要修改 el-upload 默认的圆圈进度条样式,需要使用 scoped slots 来自定义进度条样式。具体操作如下: 1. 在 el-upload 组件中添加 scoped slots 属性,指定对应的插槽名称。 ``` <el-upload class="upload-demo" action="/upload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :before-upload="handleBeforeUpload" :disabled="isDisabled" :show-file-list="showFileList" :on-success="handleSuccess" :on-error="handleError" :http-request="uploadRequest" :data="extraData" :headers="headers" :auto-upload="autoUpload" :multiple="multiple" :drag="drag" :accept="accept" :list-type="listType" :limit="limit" :with-credentials="withCredentials" :before-remove="beforeRemove" :on-exceed="handleExceed" scopedSlots={ progress: 'custom-progress' } > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div> <div slot="trigger" class="el-upload__trigger"> <i class="el-icon-upload"></i> </div> </el-upload> ``` 2. 定义对应的插槽,使用 <template> 标签包裹自定义的进度条样式。 ``` <template slot="custom-progress"> <div class="el-progress el-progress--line_vertical"> <div class="el-progress-bar is-success is-vertical" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="el-progress-bar__outer" style="height: 100%;"> <div class="el-progress-bar__inner" style="height: 0%;"></div> </div> </div> </div> </template> ``` 3. 在自定义的进度条样式中添加样式,实现个性化的进度条效果。 需要注意的是,在自定义样式时需要考虑到进度条的动态变化,例如:进度条颜色、高度、宽度以及进度值等。可以使用 Vue 的响应式数据来改变样式,例如: ``` <template slot="custom-progress"> <div class="el-progress el-progress--line_vertical"> <div class="el-progress-bar is-success is-vertical" role="progressbar" :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100"> <div class="el-progress-bar__outer" :style="{height: height}"> <div class="el-progress-bar__inner" :style="{height: progress + '%', backgroundColor: color}"></div> </div> </div> </div> </template> <script> export default { data() { return { progress: 0, height: '100%', color: 'green' } } } </script> ``` 通过以上步骤,就可以自定义修改 el-upload 的默认圆圈进度条样式了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beluga_白鲸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值