android 自定义进度条块,Android自定义双向进度条

最新推荐文章于 2024-07-02 13:36:35 发布
最新推荐文章于 2024-07-02 13:36:35 发布
阅读量268 收藏
点赞数
文章标签： android 自定义进度条块

想整个双向的进度条，就是可以选取播放范围的。

像这样：

0211b4c70959

20170905165905.png

然而官方控件里只有单向的。不要慌，我们自己画一个。

绘制一个进度条主要是三方面。1.样式，2.尺寸，3.操作监听。

完整代码来一遍:

注释基本上就把原理说明了一下。

package util;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.drawable.Drawable;

import android.support.v4.content.ContextCompat;

import android.util.AttributeSet;

import android.util.Log;

import android.view.MotionEvent;

import android.view.View;

import com.example.qzd.utildemo.R;

import java.math.BigDecimal;

/**

* 双向滑块的进度条(区域选择)

*/

public class SeekRangeBar extends View {

private Context _context;

private static final int CLICK_ON_LOW = 1; //手指在前滑块上滑动

private static final int CLICK_ON_HIGH = 2; //手指在后滑块上滑动

private static final int CLICK_IN_LOW_AREA = 3; //手指点击离前滑块近

private static final int CLICK_IN_HIGH_AREA = 4; //手指点击离后滑块近

private static final int CLICK_OUT_AREA = 5; //手指点击在view外

private static final int CLICK_INVAILD = 0;

private static final int[] STATE_NORMAL = {};

private static final int[] STATE_PRESSED =

{android.R.attr.state_pressed,android.R.attr.state_window_focused,};

private static int mThumbMarginTop = 0; //滑动块顶部离view顶部的距离

private static int mTextViewMarginTop = 0; //当前滑块文字距离view顶部距离

private Drawable hasScrollBarBg; //滑动条滑动后背景图

private Drawable notScrollBarBg; //滑动条未滑动背景图

private Drawable mThumbLow; //前滑块

private Drawable mThumbHigh; //后滑块

private int mScollBarWidth; //控件宽度 = 滑动条宽度 + 滑动块宽度

private int mScollBarHeight; //控件高度

private int mThumbWidth; //滑动块直径

private double mOffsetLow = 0; //前滑块中心坐标

private double mOffsetHigh = 0; //后滑块中心坐标

private int mDistance=0; //总刻度是固定距离 两边各去掉半个滑块距离

private int mFlag = CLICK_INVAILD; //手指按下的类型

private double defaultScreenLow = 0; //默认前滑块位置百分比

private double defaultScreenHigh = 100; //默认后滑块位置百分比

private OnSeekBarChangeListener mBarChangeListener;

private boolean editable=false;//是否处于可编辑状态

private int miniGap=5;//AB的最小间隔

private double progressLow;//起点(百分比)

private double progressHigh;//终点

public SeekRangeBar(Context context) {

this(context, null);

}

public SeekRangeBar(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public SeekRangeBar(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

_context=context;

//这里设置背景图及滑块图，自定义过进度条的同学应该很熟悉了

notScrollBarBg = ContextCompat.getDrawable(_context,R.mipmap.hp_wbf);

hasScrollBarBg = ContextCompat.getDrawable(_context, R.mipmap.hp_ybf);

mThumbLow = ContextCompat.getDrawable(_context,R.mipmap.hp_a);

mThumbHigh = ContextCompat.getDrawable(_context,R.mipmap.hp_b);

mThumbLow.setState(STATE_NORMAL);

mThumbHigh.setState(STATE_NORMAL);

//设置滑动条高度

mScollBarHeight = notScrollBarBg.getIntrinsicHeight();

//设置滑动块直径

mThumbWidth = mThumbLow.getIntrinsicWidth();

}

/**

* 测量view尺寸(在onDraw()之前)

* @param widthMeasureSpec

* @param heightMeasureSpec

*/

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int width = MeasureSpec.getSize(widthMeasureSpec);

mScollBarWidth = width;

if(mDistance==0) {//这里滑块中心坐标初始化的时候测量一下(根据mDistance是否赋值判断)，并不需要不停地去测量。后面会根据进度计算滑块位置。

mOffsetLow = mThumbWidth / 2;

mOffsetHigh = width - mThumbWidth / 2;

}

mDistance = width - mThumbWidth;

if(defaultScreenLow != 0) {

mOffsetLow = formatInt(defaultScreenLow / 100 * (mDistance)) + mThumbWidth / 2;

}

if(defaultScreenHigh != 100) {

mOffsetHigh = formatInt(defaultScreenHigh / 100 * (mDistance)) + mThumbWidth / 2;

}

setMeasuredDimension(width, mThumbWidth + mThumbMarginTop + 2);

}

protected void onLayout(boolean changed, int l, int t, int r, int b) {

super.onLayout(changed, l, t, r, b);

}

/**

* 绘制进度条

*/

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//设置绘制样式

Paint text_Paint = new Paint();

text_Paint.setTextAlign(Paint.Align.CENTER);

text_Paint.setColor(Color.RED);

text_Paint.setTextSize(20);

int top = mThumbMarginTop + mThumbWidth / 2 - mScollBarHeight / 2;

int bottom = top + mScollBarHeight;

//绘制是否可操作状态的下的不同样式，仅可编辑状态下显示进度条

if(editable) {

//白色滑动条，两个滑块各两边部分

notScrollBarBg.setBounds(mThumbWidth / 2, top, mScollBarWidth - mThumbWidth / 2, bottom);

notScrollBarBg.draw(canvas);

//红色滑动条，两个滑块中间部分

hasScrollBarBg.setBounds((int) mOffsetLow, top, (int) mOffsetHigh, bottom);

hasScrollBarBg.draw(canvas);

}

//前滑块

mThumbLow.setBounds((int) (mOffsetLow - mThumbWidth / 2), mThumbMarginTop, (int) (mOffsetLow + mThumbWidth / 2), mThumbWidth + mThumbMarginTop);

mThumbLow.draw(canvas);

//后滑块

mThumbHigh.setBounds((int) (mOffsetHigh - mThumbWidth / 2), mThumbMarginTop, (int) (mOffsetHigh + mThumbWidth / 2), mThumbWidth + mThumbMarginTop);

mThumbHigh.draw(canvas);

//当前滑块刻度

progressLow = formatInt((mOffsetLow - mThumbWidth / 2) * 100 / mDistance);

progressHigh = formatInt((mOffsetHigh - mThumbWidth / 2) * 100 / mDistance);

canvas.drawText((int) progressLow + "", (int) mOffsetLow - 2 - 2, mTextViewMarginTop, text_Paint);

canvas.drawText((int) progressHigh + "", (int) mOffsetHigh - 2, mTextViewMarginTop, text_Paint);

if (mBarChangeListener != null) {

mBarChangeListener.onProgressChanged(this, progressLow, progressHigh);

}

}

//手势监听

@Override

public boolean onTouchEvent(MotionEvent e) {

if(!editable) {

return false;

}

if (e.getAction() == MotionEvent.ACTION_DOWN) {

mFlag = getAreaFlag(e);

if (mFlag == CLICK_ON_LOW) {

mThumbLow.setState(STATE_PRESSED);

} else if (mFlag == CLICK_ON_HIGH) {

mThumbHigh.setState(STATE_PRESSED);

} else if (mFlag == CLICK_IN_LOW_AREA) {

mThumbLow.setState(STATE_PRESSED);

mThumbHigh.setState(STATE_NORMAL);

//如果点击0-mThumbWidth/2坐标

if (e.getX() < 0 || e.getX() <= mThumbWidth / 2) {

mOffsetLow = mThumbWidth / 2;

} else if (e.getX() > mScollBarWidth - mThumbWidth / 2) {

mOffsetLow = mThumbWidth / 2 + mDistance;

} else {

mOffsetLow = formatInt(e.getX());

}

} else if (mFlag == CLICK_IN_HIGH_AREA) {

mThumbHigh.setState(STATE_PRESSED);

mThumbLow.setState(STATE_NORMAL);

if (e.getX() >= mScollBarWidth - mThumbWidth / 2) {

mOffsetHigh = mDistance + mThumbWidth / 2;

} else {

mOffsetHigh = formatInt(e.getX());

}

}

//更新滑块

invalidate();

} else if (e.getAction() == MotionEvent.ACTION_MOVE) {

if (mFlag == CLICK_ON_LOW) {

if (e.getX() < 0 || e.getX() <= mThumbWidth / 2) {

mOffsetLow = mThumbWidth / 2;

} else if (e.getX() >= mScollBarWidth - mThumbWidth / 2) {

mOffsetLow = mThumbWidth / 2 + mDistance;

mOffsetHigh = mOffsetLow;

} else {

mOffsetLow = formatInt(e.getX());

if (mOffsetHigh - mOffsetLow <= 0) {

mOffsetHigh = (mOffsetLow <= mDistance + mThumbWidth / 2) ? (mOffsetLow) : (mDistance + mThumbWidth / 2);

}

}

} else if (mFlag == CLICK_ON_HIGH) {

if (e.getX() < mThumbWidth / 2) {

mOffsetHigh = mThumbWidth / 2;

mOffsetLow = mThumbWidth / 2;

} else if (e.getX() > mScollBarWidth - mThumbWidth / 2) {

mOffsetHigh = mThumbWidth / 2 + mDistance;

} else {

mOffsetHigh = formatInt(e.getX());

if (mOffsetHigh - mOffsetLow <= 0) {

mOffsetLow = (mOffsetHigh >= mThumbWidth / 2) ? (mOffsetHigh) : mThumbWidth / 2;

}

}

}

//更新滑块，每次滑块有动作都要执行此函数触发onDraw方法绘制新图片

invalidate();

} else if (e.getAction() == MotionEvent.ACTION_UP) {

Log.d("LOGCAT","ACTION UP:"+progressHigh+"-"+progressLow);

mThumbLow.setState(STATE_NORMAL);

mThumbHigh.setState(STATE_NORMAL);

if(miniGap>0 && progressHigh

progressHigh=progressLow+miniGap;

this.defaultScreenHigh = progressHigh;

mOffsetHigh = formatInt(progressHigh / 100 * (mDistance)) + mThumbWidth / 2;

invalidate();

}

}

return true;

}

/**

* 设置是否可编辑状态，非可编辑状态将不能对AB点进行操作

* @param _b

*/

public void setEditable(boolean _b){

editable=_b;

invalidate();

}

/**

* 获取当前手指位置

*/

public int getAreaFlag(MotionEvent e) {

int top = mThumbMarginTop;

int bottom = mThumbWidth + mThumbMarginTop;

if (e.getY() >= top && e.getY() <= bottom && e.getX() >= (mOffsetLow - mThumbWidth / 2) && e.getX() <= mOffsetLow + mThumbWidth / 2) {

return CLICK_ON_LOW;

} else if (e.getY() >= top && e.getY() <= bottom && e.getX() >= (mOffsetHigh - mThumbWidth / 2) && e.getX() <= (mOffsetHigh + mThumbWidth / 2)) {

return CLICK_ON_HIGH;

} else if (e.getY() >= top

&& e.getY() <= bottom

&& ((e.getX() >= 0 && e.getX() < (mOffsetLow - mThumbWidth / 2)) || ((e.getX() > (mOffsetLow + mThumbWidth / 2))

&& e.getX() <= ((double) mOffsetHigh + mOffsetLow) / 2))) {

return CLICK_IN_LOW_AREA;

} else if (e.getY() >= top && e.getY() <= bottom && (((e.getX() > ((double) mOffsetHigh + mOffsetLow) / 2) && e.getX() < (mOffsetHigh - mThumbWidth / 2)) || (e.getX() > (mOffsetHigh + mThumbWidth / 2) && e.getX() <= mScollBarWidth))) {

return CLICK_IN_HIGH_AREA;

} else if (!(e.getX() >= 0 && e.getX() <= mScollBarWidth && e.getY() >= top && e.getY() <= bottom)) {

return CLICK_OUT_AREA;

} else {

return CLICK_INVAILD;

}

}

/**

* 设置前滑块位置

* @param progressLow

*/

public void setProgressLow(double progressLow) {

this.defaultScreenLow = progressLow;

mOffsetLow = formatInt(progressLow / 100 * (mDistance)) + mThumbWidth / 2;

invalidate();

}

/**

* 设置后滑块位置

* @param progressHigh

*/

public void setProgressHigh(double progressHigh) {

this.defaultScreenHigh = progressHigh;

mOffsetHigh = formatInt(progressHigh / 100 * (mDistance)) + mThumbWidth / 2;

invalidate();

}

/**

* 设置滑动监听

* @param mListener

*/

public void setOnSeekBarChangeListener(OnSeekBarChangeListener mListener) {

this.mBarChangeListener = mListener;

}

/**

* 滑动监听，改变输入框的值

*/

public interface OnSeekBarChangeListener {

//滑动时

public void onProgressChanged(SeekRangeBar seekBar, double progressLow, double progressHigh);

}

/**

* 设置滑动结果为整数

*/

private int formatInt(double value) {

BigDecimal bd = new BigDecimal(value);

BigDecimal bd1 = bd.setScale(0, BigDecimal.ROUND_HALF_UP);

return bd1.intValue();

}

}

然后就可以在程序中使用了。

布局中

android:id="@+id/doubleSeekbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"/>

调用

private SeekRangeBar doubleSeekbar;//双向进度条

doubleSeekbar = (SeekRangeBar) findViewById(R.id.doubleSeekbar);

//监听进度范围变化

doubleSeekbar.setOnSeekBarChangeListener(new SeekRangeBar.OnSeekBarChangeListener() {

@Override

public void onProgressChanged(SeekRangeBar seekBar, double progressLow, double progressHigh) {

Log.d("LOGCAT","低：" + progressLow + "高：" + progressHigh);

}

});

飞上九天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android的zygote SystemServer的启动，html5移动端开发
m0_66264134的博客
01-24 162
int AndroidRuntime::javaThreadShell(void* args) { void* start = ((void**)args)[0]; void* userData = ((void **)args)[1]; char* name = (char*) ((void **)args)[2]; // we own this storage JNIEnv* env; /* 跟 VM 绑定 */ if (javaAttachThread(name, &env)..
Android的zygote SystemServer的启动，android音视频开发pdf
m0_65511857的博客
12-28 225
startSystemServer ? “start-system-server” : “”); } else if (className) { // Remainder of args get passed to startup class main() runtime.mClassName = className; … runtime.start(“com.android.internal.os.RuntimeInit”, application ? “application” : “tool”); }
Android 常用文件系统命令
netwalk的专栏
07-02 445
当系统正在对某个文件系统的区域进行写入操作时（读的话没关系），突然断电，会造成文件系统对应区域的损坏（如写入脏数据）， 而e2fsck算法就是用来恢复受损的文件系统，目的是：系统能够重启后，一切正常。当然，有损坏，想原样修复，当然不能100%保证，所以，就遇到了某些系统文件丢失，或者文件属性发生变化的事情。文件损坏会报错structure needs cleaning（结构需要清理）。Android车机系统的重启，默认是从通过QNX直接给Android掉电，没有走Android的正常重启流程；
Android 自定义图片进度条
我的专栏
05-25 397
用系统的Progressbar，设置图片drawable作为进度条会出现图片长度不好控制，容易被截断，或者变形的问题。而我有个需求，使用图片背景，和图片进度，而且在进度条头部有个闪光点效果。最后只好自己写一个。本来我用自己代码写的用颜色值的进度条，产品非要用设计师的图片，这么个小功能却这么麻烦，为这么个进度条的功能加班到晚上11点，谁知道啊。找了两个小时，国内外，百度，github搜遍了，全网都没有找到一个现成的。使用时只需要调用setProgressBar就行。上图就是代码实现的效果。
图解Android - Zygote, System Server 启动分析
2401_84122965的博客
04-19 960
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021BAT 面试真题解析，我把大厂面试中常被问到的技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。还有 高级架构技术进阶脑图 帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。Android 基础知识点Java 基础知识点Android 源码相关分析常见的一些原理性问题。
基于Android的二维码识别系统的研究 与实现
科大云炬
01-08 1938
XXXX本科生毕业设计(论文)学院(系)： XX专 业： XX学 生： XX指导教师： XXXX完成日期 年 月XXX本科生毕业设计（论文）基于Android的二维码识别系统的研究与实现Research and Implementation of QRcode Recognition System Based on Android总 计：毕业设计(论文) 31页表 格： 5个图 片： 20个XXXXX 本 科 毕 业 设 计(论文)学 院(系)： XXX专 业： XXX学 生 姓 名： XXX学 号： XX
Android - Binder与Service总结
不忘初心
06-25 890
转载于：http://www.cnblogs.com/samchen2009/p/3294713.html Init 是所有Linux程序的起点，而Zygote于Android，正如它的英文意思，是所有java程序的'孵化池'（玩过星际虫族的兄弟都晓得的）。用ps 输出可以看到 &gt;adb shell ps | grep -E 'init|926' root ...
Android的zygote SystemServer的启动，flutter开发桌面应用
wa2231a的博客
01-11 278
而能够访问Java端的thread需要跟JVM进行绑定，下面是具体的实现函数 #AndroidRuntime.cpp int AndroidRuntime::javaCreateThreadEtc( android_thread_func_t entryFunction, void* userData, const char* threadName, int32_t threadPriority, size_t threadStackSize, android_thread_id_t* threadId)
Android的zygote SystemServer的启动，移动应用开发就业
m0_65146205的博客
12-22 1273
{ ALOGW(“Warning: tracked references remain post-initialization”); dvmDumpReferenceTable(&dvmThreadSelf()->internalLocalRefTable, “MAIN”); } if (!dvmDebuggerStartup()) { return “dvmDebuggerStartup failed”; } if (!dvmGcStartupClasses()) { return “dvm
android LinearLayout 网络间隔技巧
h183288132的专栏
01-19 1237
转至： 原文地址：http://cyrilmottier.com/2014/11/17/grid-spacing-on-android/​ 大多数用户接口-在移动和web上-都是基于网格的概念。在一堆对齐的空间中，网格主要的组成分隔了用户接口，这些空间能被合并起来创建块。当设计UI的时候使用网格原理帮助对其元素，也带来一致性，清理代码，确保用户能容易的解析UI的内容等等。简
Android自定义滑动验证条的示例代码
08-29
Android 自定义滑动验证条的示例代码 Android 自定义滑动验证条是 Android 开发中常用的一个组件，用于验证用户的身份或完成某些操作。今天，我们将介绍如何使用 SeekBar 实现自定义滑动验证条的示例代码。 ...
电子功用-条块状供电网络
09-15
在电子工程领域，条块状供电网络是一种高效且灵活的电源分配系统，广泛应用于数据中心、高性能计算集群以及复杂的电子设备中。这种供电架构的设计目的是为了优化电力的传输和管理，确保设备得到稳定、可靠的电源供应...
swing 进度面板
08-02
进度条可以通过设置最小值（min）和最大值（max）来定义其范围，并通过调用`setValue()`方法更新当前进度。例如，如果你有一个需要执行100步骤的任务，你可以将最小值设为0，最大值设为100，然后每完成一步，就将...
wordpress主题条块布局的CMS主题:Simplism
03-03
wordpress主题条块布局的CMS主题：Simplism本资源系百度网盘分享地址
电子政务条块分割解决措施论文.doc
09-21
电子政务条块分割解决措施论文.doc
基于贝叶斯网络BO-Transformer-BiLSTM实现负荷数据回归预测附matlab代码.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
易语言 - 易语言我的世界3D源码
最新发布
07-27
易语言我的世界3D源码
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
写一个模拟请求和请求进度条动画
05-30
好的，以下是一个简单的模拟请求和请求进度条动画的示例代码（使用Python）： ```python import time # 模拟请求 def make_request(): time.sleep(2) # 假装请求需要2秒钟才能完成 return "请求完成！" # 请求进度条动画 def show_progress_bar(): print("正在处理中：", end="") for i in range(20): print("█", end="") time.sleep(0.1) # 进度条每0.1秒更新一次 print(" 100%") # 主函数 def main(): print("开始请求...") show_progress_bar() # 显示进度条动画 result = make_request() # 执行请求 print(result) # 运行主函数 if __name__ == "__main__": main() ``` 在这个示例中，我们定义了三个函数： - `make_request()` 模拟了一个请求，需要2秒钟才能完成，返回一个字符串。 - `show_progress_bar()` 显示了一个进度条动画，包含20个进度条块，每个块之间间隔0.1秒，总共需要2秒钟。 - `main()` 是我们的主函数，它调用了 `show_progress_bar()` 显示进度条动画，然后调用 `make_request()` 执行请求，并输出请求结果。 运行这个程序，你会看到一个进度条动画，然后2秒钟后输出 "请求完成！"。进度条动画的输出类似于这样： ``` 开始请求... 正在处理中：████████████████████ 100% 请求完成！ ``` 希望这个示例能够帮助你理解如何模拟请求和显示进度条动画。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值