自定义万能的progressView

最新推荐文章于 2024-08-20 09:58:28 发布
最新推荐文章于 2024-08-20 09:58:28 发布
阅读量2.5k 收藏 5
点赞数 3
分类专栏： android UI 文章标签： 自定义view 图片 控件 progress
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leisurelife1990/article/details/50353314
版权

效果预览

这里写图片描述

控件由来

这两天有个哥们给我商量他们公司语音播放进度条的做法。如图这里写图片描述
看到这个图片我首先想到的是自定义view，怎么自定义view呢？

第一个想法

数一下一共有多少根竖条，然后找到每一根竖条直接高度的比例，通过自定义view宽高的比例算数每个竖条和中间横条的位置。这个办法肯定是可以的，但是感觉有点麻烦而且不通用，万一哪天设计的妹子把这个进度图换了我还得重新找规律重新通过复杂的计算来做。

第二种想法

其实这种进度的显示就是两个图层。第一个图层显示灰色全部画下来，第二个要根据进度画出不发蓝色图层就可以了。而且这种方法放之四海都可以用（只要让设计MM给你切两个大小一致颜色不同的图片就ok了）

编码

通过上边的比较我们决定用第二种方法来实现
我们先来分析下我们需要哪些属性：
  • 我们要两个大小相等颜色不同的图片
  • 当前进度和总进度

分析了下好像就学这四个属性就够了于是我们先定attr

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyProgress">
        <attr name="bg_drawable" format="reference"></attr>
        <attr name="progress_drawable" format="reference"></attr>
        <attr name="progress" format="integer"></attr>
        <attr name="max_progress" format="integer"></attr>
        <attr name="orientation" format="enum">
            <enum name="left" value="0"></enum>
            <enum name="top" value="1"></enum>
            <enum name="right" value="2"></enum>
            <enum name="bottom" value="3"></enum>
        </attr>
    </declare-styleable>
</resources>

好像多了一个属性orientation，既然是是自定义要放之四海皆准我们就要考虑到他进度方向有可能是从左向右，有可能是从下往上，所以这里我定义了4个方向

再看看我的自定义view的java代码
  • 定义上边需要的5个属性变量并在构造函数里获取到赋值
public MyProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.MyProgress,defStyleAttr,0);
        //背景图片
        res_bg= typedArray.getResourceId(R.styleable.MyProgress_bg_drawable,0);
        //进度图片
        res_progress=typedArray.getResourceId(R.styleable.MyProgress_progress_drawable,0);
        /方向
        orientation=typedArray.getInteger(R.styleable.MyProgress_orientation, 0);
        //最大进度
        max=typedArray.getInteger(R.styleable.MyProgress_max_progress,100);
        //进度值并转化为百分比
        progressP=typedArray.getInteger(R.styleable.MyProgress_progress,100)*1.0f/max;
        typedArray.recycle();
        init();
    }
  • 既然自定义view就要重写onMeasure确定它的宽高，这个宽高我们自然是用图片自己打宽高了，所以我们在init()里获取图片的bitmap和宽高，再onMeasure里设置成图片的宽高
private void init(){
        //进度图的bitmap
        if(res_progress!=0){
            mBlueBitmap= BitmapFactory.decodeResource(getResources(),res_progress);
        }else{
            mBlueBitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.blue);
        }
        //背景图的bitmap
        if(res_bg!=0){
            mWhiteBitmap= BitmapFactory.decodeResource(getResources(),res_bg);
        }else {
            mWhiteBitmap= BitmapFactory.decodeResource(getResources(),R.mipmap.white);
        }
        //图片宽
        width=mBlueBitmap.getWidth();
        //图片高
        height=mBlueBitmap.getHeight();
    }
@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(width, height);
    }
  • 接下下来就是在onDraw()里画图了。其实就两步：1、画背景图 2、按进度比例截取进度图的部分图像，并画在画不上
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawBitmap(mWhiteBitmap, 0, 0, null);
         ImageCrop(canvas, mBlueBitmap, progressP);
    }
  • 那我们重点来看看这个截取图片的代码ImageCrop(),代码也很简单就是通过progress的进度值再结合定义的方向算出来对应的x，y坐标和对应截取图片的大小区域
 public  void ImageCrop(Canvas canvas,Bitmap bitmap,float progress) {
        int w = bitmap.getWidth(); // 得到图片的宽，高
        int h = bitmap.getHeight();
        int x=0;
        int y=0;
        if(orientation==0){
            w=(int) (w*progress);
        }
        if(orientation==1){
            h=(int)(h*progress);
        }
        if(orientation==2){
            x=w-(int)(w*progress);
            w=(int)(w*progress);
        }
        if(orientation==3){
            y=h-(int)(h*progress);
            h=(int)(h*progress);
        }
        //下面这句是关键
        Bitmap tempBitmap=Bitmap.createBitmap(bitmap, x, y, w, h, null, false);
        canvas.drawBitmap(tempBitmap,x,y,null);
    }
  • 到这里这个自定义view已经可以用了，但是我们通常的进度是通过代码控制的 所以我们加个方法来控制进度值progress
public void setProgress(int progress){
        this.progressP=progress*1.0f/max;
        invalidate();
    }
  • 接下来就是使用了，在xml里定义我们的view，在activity里new个线程调用调用setProgress
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:background="#000000">

    <com.leisure.progressview.MyProgress
        android:layout_margin="10dp"
        android:id="@+id/left_progress"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        app:orientation="left"
        app:bg_drawable="@mipmap/btn_photo_select_normal"
        app:progress_drawable="@mipmap/btn_photo_select_push"
        app:progress="50"
        app:max_progress="100"/>
    <com.leisure.progressview.MyProgress
        android:layout_margin="10dp"
        android:id="@+id/top_progress"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        app:orientation="top"
        app:bg_drawable="@mipmap/btn_file_browser_up_level_normal"
        app:progress_drawable="@mipmap/btn_file_browser_up_level_pressed"
        app:progress="50"
        app:max_progress="100"/>
    <com.leisure.progressview.MyProgress
        android:layout_margin="10dp"
        android:id="@+id/right_progress"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        app:orientation="right"
        app:bg_drawable="@mipmap/enterprise_normal"
        app:progress_drawable="@mipmap/enterprise_press"
        app:progress="50"
        app:max_progress="100"/>
    <com.leisure.progressview.MyProgress
        android:layout_margin="10dp"
        android:id="@+id/bottom_progress"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        app:orientation="bottom"
        app:progress="50"
        app:max_progress="100"/>

</LinearLayout>

package com.leisure.progressview;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    MyProgress mProgressLeft,mProgressTop,mProgressRight,mProgressBottom;
    Handler mHandler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            mProgressLeft.setProgress(msg.what);
            mProgressTop.setProgress(msg.what);
            mProgressRight.setProgress(msg.what);
            mProgressBottom.setProgress(msg.what);
        }
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mProgressLeft= (MyProgress) findViewById(R.id.left_progress);
        mProgressTop= (MyProgress) findViewById(R.id.top_progress);
        mProgressRight= (MyProgress) findViewById(R.id.right_progress);
        mProgressBottom= (MyProgress) findViewById(R.id.bottom_progress);
        new Thread(){
            @Override
            public void run() {
                super.run();
                for(int i=1;i<=100;i++){
                    mHandler.sendEmptyMessage(i);
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();

    }
}

总结

自己总是特别懒，不愿意多动脑，但是比较乐于助人，如果是自己的事可能就不会写这个控件了，但是朋友给机会讨论 我就写个试试吧 感谢这个朋友给的机会 就刚学android的时候写过博客 ，好久没有写了希望有人能看懂

github地址：https://github.com/leisurelife/ProgressView

leisurelife1990
关注
专栏目录
android自定义ProgressView长条渐变色的进度条,实现渐变色的效果
01-07
android自定义ProgressView长条渐变色的进度条,实现渐变色的效果，不适用一张图片实现！ 具体思路：http://blog.csdn.net/springsky_/article/details/17954765
Android自定义View之ProgressBar出场记
weixin_30371469的博客
05-01 158
关于自定义View，我们前面已经有三篇文章在介绍了，如果筒子们还没阅读，建议先看一下，分别是android自定义View之钟表诞生记、android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索、android自定义View之NotePad出鞘记。这三篇文章中所述的自定义View都还是比较简单的，我们只使用了其中的绘图API，那么今天我们来看看自定义ProgressBar，在这个过程中...
推荐文章：ProgressView - 精致且灵活的Android进度视图组件
最新发布
gitblog_00662的博客
08-20 387
推荐文章：ProgressView - 精致且灵活的Android进度视图组件 ProgressView???? Styleable progress view项目地址:https://gitcode.com/gh_mirrors/pro/ProgressView 在当今快节奏的应用开发环境中，向用户展示进度状态变得尤为重要。无论是下载进度、加载过程还是任务完成度，直观的反馈能显著提升用户体验。因此，...
android 自定义progressDialog实现
Rising Sun
04-27 201
我们在项目中经常会遇到这样一个应用场景：执行某个耗时操作时,为了安抚用户等待的烦躁心情我们一般会使用进度条之类的空间,在android中让大家最容易想到的就是progressbar或者progressDialog，区别在于前者是一个控件，后者是对话框。由于一些需求在弹出进度条时不希望用户能够操作其他控件，所以只能使用progressDialog，这个时候有遇到了一个问题，我不想要progress...
iOS 自定义控件 progressView(环形进度条)
weixin_30216561的博客
08-05 89
转帖：http://blog.csdn.net/xiangzhang321/article/details/42688133 之前做项目的时候有用到环形进度条，先是在网上找了一下第三方控件，发现好用是好用，就是东西太多了，有点复杂，还不如自己写一个简单点适合自己用的。 先把自定义控件的效果图贴出来。 其实我写的这个控件很简单。索性就直接把源码贴出来吧。 .h文件的内容就是一...
【转】重写ProgressDialog，实现各种个性进度条需求，附上源码
05-11 158
转载请说明：这是作者的博客地址，在这里对他表示感谢！！ http://www.eoeandroid.com/thread-70136-1-1.html 1.简介系统ProgressDialog的主要特征 1.在ProgressDialog的源码里可以明显的看到，在STYLE_HORIZONTAL和STYLE_SPINNER分别显示的是不同的XML，这就意味着你的进度条要么是转圈，要么...
IOS 开发自定义条形ProgressView的实例
09-01
本文将详细介绍如何在iOS中开发自定义的条形ProgressView。ProgressView通常用于显示任务的完成进度，如下载、上传或加载数据。自定义ProgressView可以帮助开发者根据项目需求定制视觉效果，使其与应用的整体设计...
自定义ProgressView
11-12
本教程将深入探讨如何自定义ProgressView，以实现更个性化的进度条效果。我们将使用名为JEProgressView的库作为示例进行讲解。 首先，我们需要了解ProgressView的基本用法。在UIKit框架中，UIProgressView是系统...
android 自定义View简单的ProgressView圆形进度条
qq_37267423的博客
11-05 386
MainActivity public class MainActivity extends AppCompatActivity { private Button btnAdd; private ProgressView pv; private static final int FLAG = 0x123; private Handler handl
自定义UIProgressView
weixin_30552635的博客
11-15 143
自定义CustomporgressView #import <UIKit/UIKit.h> @interface CustomporgressView : UIView @property(nonatomic,assign)int step; //allCount一共几个节点 step当前节点 -(instancetype)initWithFrame:(CGRe...
具有三种模式的简单定制的ProgressView（LoadingView）。-Swift开发
05-27
XProgressRing一个简单的自定义ProgressView（LoadingView）。 它具有三种模式；如下面的屏幕快照所示：1-fullModeProgress：仅一个圆圈不断旋转。 2-halfModeProgress：两个圆圈。 3-quarterMo XProgressRing一个简单的自定义ProgressView（LoadingView）。 它具有三种模式；如下面的屏幕快照所示：1-fullModeProgress：仅一个圆圈不断旋转。 2-halfModeProgress：两个圆圈。 3-quarterModeProgress：四个圆圈。 屏幕快照示例要运行示例项目，请克隆存储库，然后首先从Example目录运行pod install。 安装CocoaPods XProgressRing可通过CocoaPods获得。 要安装它，只需添加以下li
Android自定义View值ProgressBar
05-01
Android自定义View值ProgressBar,详情请看http://blog.csdn.net/u012702547/article/details/51290266
Android代码-Android-ProgressView
08-06
Project ePars and Modules It's self project for testing project API and other idea Install To get a Git project into your build: Step 1. Add the JitPack repository to your build file gradle maven sbt leiningen Add it in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } }Copy Step 2. Add the dependency dependencies { implementation 'com.github.JastAir:Android-ProgressView:{version}' } Today have
自定义带有节点的progressView
09-13
自定义带节点的progressView，使用很简单，自定义的控件代码量少
android 自定义progressdialog
04-27
有时我们在项目执行某些耗时的操作是需要在界面上给出等待之类的信息，在android里面可以使用progressbar或者progressdialog，但是前者在等待时可以操作界面上其他空间，不是我想要的，后者界面太丑，我希望定义自己的风格，所以需要自定义一个progressdialog，这个小例子试下了简单的自定义progressdialog
＜android＞圆形进度条CircleProgressView（自定义view）
csdn_lg_one的博客
04-14 639
<android>圆形进度条CircleProgressView（自定义view） 最近写了一个圆形进度条，加了点效果，就是个简单的自定义view，如果有赶工期或者正好碰到类似效果需求的同伴们可以直接改改来用，我都封装好了。先上效果图： 然后直接上完整代码： /** * author by LiuGuo * on 2021/4/9 * 自定义组件：圆形进度条 */ public class CircleProgressView extends View { ...
如何自定义一个UIProgressView
gaozhenyusky的专栏
08-06 1108
ViewController.m里的文件
iOS自定义progressView的实现
iOS猿的博客
05-01 6410
最近越来越多的iOS APP 中使用到了进度条这一控件,虽然苹果的UIKIT框架给我们提供了UIProgressView这一控件，但是提供的相应的API内容不是很丰富，开发中只能实现一些简单的效果，但是对于诸如设置圆角之类的功能用UIProgressView却较难实现，于是我想到了用UIView来代替UIProgressView控件。
progressview
05-21
ProgressView是iOS中的一个UI控件，它用于显示操作进度的百分比，通常用于显示下载、上传等耗时操作的进度。ProgressView可以设置进度条的颜色、进度值、进度条样式等属性。此外，还可以通过代码设置进度条的值，或者使用动画效果来更新进度条的进度。如果您需要在iOS应用程序中实现操作进度的显示，可以使用ProgressView来实现。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值