自定义控件滑动进度条表示选择大小

最新推荐文章于 2022-11-18 10:05:03 发布
最新推荐文章于 2022-11-18 10:05:03 发布
阅读量833 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Android进阶等级一 文章标签： 进度条 选值大小
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013205623/article/details/52886726
本文介绍了一种自定义控件，通过滑动进度条来表示选择的大小。滑块在进度条上的位置对应不同的值，可用于各种需要调整大小的应用场景。文章包含实现效果展示、自定义控件的详细说明以及控件在布局xml中的使用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、实现效果

           滑块在进度条上滑动，不同进度值表示所选择的值，以当前表示的值应用到自己所需应用的方面。


二、自定义控件

public class CustomProgressBarWidthNew extends LinearLayout {
    private CustomProgressBarPickerListener mListener;
    private Context mContext;

    private View mMainView;
    //	private TextView mTextStart;
//	private TextView mTextEnd;
    private ImageView mImgBar;
    private TextView mTextBarBtn;

    private int mProgressBarNowSelected;

    private float mItemWidth;
    private int mBtnW;
    private int mBtnH;
    private float mStartMargin;
    private int mLineWidth;

    private int mMaxProgress;
    private int mMinProgress;

    public void setOnProgressChangedListener(CustomProgressBarPickerListener listener) {
        this.mListener = listener;
    }

    public CustomProgressBarWidthNew(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.mContext = context;
        init();
    }

    public CustomProgressBarWidthNew(Context context) {
        super(context);
        this.mContext = context;
        init();
    }

    /**
     * 初始化布局
     *
     */
    private void init() {

        mMainView = LayoutInflater.from(mContext).inflate(R.layout.view_custom_progressbar_width_new, null);
//		mTextStart = (TextView) mMainView.findViewById(R.id.text_customprogressbar_start);
//		mTextEnd = (TextView) mMainView.findViewById(R.id.text_customprogressbar_end);
        mTextBarBtn = (TextView) mMainView.findViewById(R.id.text_customprogressbar_bar);
        mImgBar = (ImageView) mMainView.findViewById(R.id.view_customprogressbar_bar);

        mImgBar.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent ev) {
                switch (ev.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        updateBar(ev.getX(), ev.getY());
                        break;
                    case MotionEvent.ACTION_MOVE:
                        updateBar(ev.getX(), ev.getY());
                        break;

                    case MotionEvent.ACTION_UP:
                    case MotionEvent.ACTION_CANCEL:

                        if (mListener != null) {
                            mListener.onCustomProgressBarPicker(mProgressBarNowSelected);
                        }

                        break;

                    default:
                        break;
                }

                return true;
            }
        });

        addView(mMainView);
    }

    private void updateBar(float x, float y) {
        float marginl = x - mBtnW;
        if (marginl > 0) {
            if (marginl - mLineWidth + mBtnW > 0) {
                marginl = mLineWidth - mBtnW;
            }
            android.widget.RelativeLayout.LayoutParams lpbtn = new android.widget.RelativeLayout.LayoutParams(mBtnW, mBtnH);
            lpbtn.setMargins((int) (marginl + mStartMargin), 0, 0, 0);
            lpbtn.addRule(android.widget.RelativeLayout.CENTER_VERTICAL);
            mTextBarBtn.setLayoutParams(lpbtn);
            mProgressBarNowSelected = (int) (marginl / mItemWidth) + mMinProgress;
        } else {
            android.widget.RelativeLayout.LayoutParams lpbtn = new android.widget.RelativeLayout.LayoutParams(mBtnW, mBtnH);
            lpbtn.setMargins((int) mStartMargin, 0, 0, 0);
            lpbtn.addRule(android.widget.RelativeLayout.CENTER_VERTICAL);
            mTextBarBtn.setLayoutParams(lpbtn);
            mProgressBarNowSelected = mMinProgress;

        }
        mTextBarBtn.setText(mProgressBarNowSelected + "");
    }

    public void show(int maxheight, int width, int minProgress, int maxProgress) {

        this.mMaxProgress = maxProgress;
        this.mMinProgress = minProgress;
//		mTextStart.setText(minProgress + "");
//		int textW = (int) getResources().getDimension(R.dimen.width_30);
//		int margin = (int) getResources().getDimension(R.dimen.width_10);
        int barh = (int) getResources().getDimension(R.dimen.width_30);

        barh = barh > maxheight ? maxheight : barh;

        int barw = (int) getResources().getDimension(R.dimen.width_30);
        int paddingtb = (int) getResources().getDimension(R.dimen.width_5);
//		int linew = width - textW * 2 - margin * 2;
        int linew = width;
        mBtnH = barh;
        mBtnW = barw;
//		mStartMargin = textW + margin;
        mLineWidth = linew;

        mItemWidth = (float) (linew - mBtnW) / (float) (maxProgress - minProgress);

        // int height = maxheight*60/100;
        // int textWH = (int)getResources().getDimension(R.dimen.width_20);
        // int textLineH = height/2-textWH;
        //
        //
        // android.widget.RelativeLayout.LayoutParams lpXi = new android.widget.RelativeLayout.LayoutParams(android.widget.RelativeLayout.LayoutParams.WRAP_CONTENT, height);
        // mLayoutXi.setLayoutParams(lpXi);
        //
        //
        // android.widget.LinearLayout.LayoutParams lpText = new android.widget.LinearLayout.LayoutParams(textWH, textWH);
        // mMainView.findViewById(R.id.text_customprogressbarwidth_xi).setLayoutParams(lpText);
        //
        // android.widget.LinearLayout.LayoutParams lpTextLine = new android.widget.LinearLayout.LayoutParams(android.widget.RelativeLayout.LayoutParams.WRAP_CONTENT, textLineH);
        // mMainView.findViewById(R.id.text_customprogressbarwidth_xi).setLayoutParams(lpText);

//		android.view.ViewGroup.LayoutParams lptextstart = mTextStart.getLayoutParams();
//		lptextstart.width = textW + margin;
//		lptextstart.height = textW;
//		mTextStart.setLayoutParams(lptextstart);
//		mTextStart.setPadding(0, 0, margin, 0);
//
//		android.view.ViewGroup.LayoutParams lptextend = mTextEnd.getLayoutParams();
//		lptextend.width = textW + margin;
//		lptextend.height = textW;
//		mTextEnd.setLayoutParams(lptextend);
//		mTextEnd.setPadding(margin, 0, 0, 0);
//		mTextEnd.setText(maxProgress + "");

        android.view.ViewGroup.LayoutParams lpmain = mMainView.getLayoutParams();
        lpmain.height = maxheight;
        lpmain.width = width;
        mMainView.setLayoutParams(lpmain);

        android.view.ViewGroup.LayoutParams lpBar = mImgBar.getLayoutParams();
        lpBar.width = linew;
        lpBar.height = barh;
        mImgBar.setLayoutParams(lpBar);
        mImgBar.setPadding(0, paddingtb, 0, paddingtb);

        android.widget.RelativeLayout.LayoutParams lpbtn = new android.widget.RelativeLayout.LayoutParams(mBtnW, mBtnH);
        lpbtn.addRule(android.widget.RelativeLayout.CENTER_VERTICAL);
        lpbtn.setMargins((int) mStartMargin, 0, 0, 0);
        mTextBarBtn.setLayoutParams(lpbtn);
        mTextBarBtn.setText(0 + "");
    }

    public void setProgress(int progressbar) {
        if (progressbar < mMinProgress) {
            progressbar = mMinProgress;
        } else if (progressbar > mMaxProgress) {
            progressbar = mMaxProgress;
        }

        if (progressbar == mMinProgress) {
            android.widget.RelativeLayout.LayoutParams lpbtn = new android.widget.RelativeLayout.LayoutParams(mBtnW, mBtnH);
            lpbtn.addRule(android.widget.RelativeLayout.CENTER_VERTICAL);
            lpbtn.setMargins((int) mStartMargin, 0, 0, 0);
            mTextBarBtn.setLayoutParams(lpbtn);
        } else if (progressbar == mMaxProgress) {
            android.widget.RelativeLayout.LayoutParams lpbtn = new android.widget.RelativeLayout.LayoutParams(mBtnW, mBtnH);
            lpbtn.addRule(android.widget.RelativeLayout.CENTER_VERTICAL);
            lpbtn.setMargins((int) (mStartMargin + mLineWidth - mBtnW), 0, 0, 0);
            mTextBarBtn.setLayoutParams(lpbtn);
        } else {

            float marginl = mItemWidth * (progressbar - mMinProgress) + mStartMargin;

            android.widget.RelativeLayout.LayoutParams lpbtn = new android.widget.RelativeLayout.LayoutParams(mBtnW, mBtnH);
            lpbtn.addRule(android.widget.RelativeLayout.CENTER_VERTICAL);
            lpbtn.setMargins((int) marginl, 0, 0, 0);
            mTextBarBtn.setLayoutParams(lpbtn);
        }
        mTextBarBtn.setText(progressbar + "");
    }

    public interface CustomProgressBarPickerListener {
        public void onCustomProgressBarPicker(int progress);
    }
}

三、效果展示

        控件使用：布局xml

<?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"
    android:gravity="center"
    android:orientation="horizontal"
    tools:context="com.future.progressloadingdemo.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="笔触：" />

    <com.future.progressloadingdemo.view.CustomProgressBarWidthNew
        android:id="@+id/paint_progress_bar"
        android:layout_width="match_parent"
        android:layout_height="30dp" />

</LinearLayout>
          使用代码： 

public class MainActivity extends AppCompatActivity {
    private CustomProgressBarWidthNew progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        progressBar = (CustomProgressBarWidthNew) findViewById(R.id.paint_progress_bar);
        MainApplication context = MainApplication.getInstace();
        int widthTemp = context.getWidth();
        progressBar.show(90, MainApplication.getInstace().getWidth() * 2 / 3, 30, 100);
//        progressBar.show(110, 600, 30, 100);
        progressBar.setProgress(50);
        progressBar.setOnProgressChangedListener(new CustomProgressBarWidthNew.CustomProgressBarPickerListener() {
            @Override
            public void onCustomProgressBarPicker(int progress) {
                progressBar.setProgress(progress);
            }
        });

    }
}
        实现效果：



源码








有问题就是有机会：

①自己的问题，就是我们成长机会；

②公司问题，就是我们晋升机会；

③同事问题，就是我们建立人脉机会；

④客户问题，就是我们销售机会；

⑤老板问题，就是我们赢得信任机会；

⑥竞争对手问题，就是我们变强机会。

生活就是问题与机会的旅程。


有问题就是有机会：
①自己的问题，就是我们成长机会；
②公司问题，就是我们晋升机会；
③同事问题，就是我们建立人脉机会；
④客户问题，就是我们销售机会；
⑤老板问题，就是我们赢得信任机会；
⑥竞争对手问题，就是我们变强机会。
生活就是问题与机会的旅程。
原生JS拖拽进度条改变元素大小
分享前端工程化、动效魔法与性能之舞！
08-09 850
今天要分享的是运用原生JS拖拽进度条改变元素大小，效果如下： 以下是代码实现，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>.........
Qt中的滑动控件：范围选择条
带你成为别人眼中的大佬！
06-07 933
在上面的代码中，我们首先创建了一个QWidget对象，然后创建了一个QRangeSlider对象，并设置了其最小值、最大值、起始值和结束值。QRangeSlider是我们自己定义的控件，它继承自QWidget，并包含了两个QSlider控件，分别用于表示范围的起始值和结束值。QSlider是Qt中常用的滑动控件，它可以用来选择一个整数或浮点数值。总之，在Qt中使用滑动控件来实现范围选择条非常简单，开发者只需要使用QSlider和自定义控件QRangeSlider就可以轻松实现。
【自定义view-滑动进度条】
da_caoyuan的博客
08-15 312
自定义进度条View
08滑动控件-01范围选择条-sliderselect
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
10-19 522
一、运行效果 二、功能特点 可设置范围值，支持负数值。 可设置当前范围值。 可设置范围值颜色、范围值外颜色、文字颜色。 自适应窗体拉伸，刻度尺和文字自动缩放。 三、公共接口 public Q_SLOTS: //设置范围值 void setRange(int minValue, int maxValue); //设置最大最小值 void setMinValue(int minValue); void setMaxValue(int maxValue);
原生滑动选择器 html,html 原生滚动条详解，看这一篇就够了！
weixin_42511255的博客
05-31 612
最近在做一个聊天室的小案例，遇到了一个关于滚动条的问题，需要对获取的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于 ajax 实现的，没有使用框架，消息容器是一个 div，查阅大量资料后写下这篇文章，以作记录！文章目录1. div 添加滚动条2. 滚动条绑定事件(1. 基本属性及方法(2. 绑定滚动事件(3. 判断向上 & 向下滚动(4. 判断滚动条移动至最底部3. 滚动条样式样式...
安卓进度条loadingprogress相关-自定义控件依据滑动大小确定选择大小.rar
07-29
"安卓进度条loadingprogress相关-自定义控件依据滑动大小确定选择大小.rar" 这个压缩包内容涉及到了一个自定义控件的实现，它可以根据用户的滑动操作来动态调整进度条的选择范围。下面将详细介绍这一知识点，以及...
c#进度条刻度_自定义滑动刻度进度条
weixin_33214011的博客
12-29 1070
这次来弄的是自定义view的滑动进度条，继承于AppCompatSeekBar的基础上进行二次开发。先看效果图test.gif做到以上的效果图，就可以知道，两个模式，1：就是常用的seekbar模式，然后只不过安装自己的要求改了下滑动块而已，不多说，2：就是带有刻度点的seekbar模式，并且带有粘性数值处理，实现滑到刻度周边滑块自动吸引过去的效果。重点说下第二种模式的，拆分下工作点：因为继承的是...
小程序视频或音频自定义可拖拽进度条的示例代码
10-17
小程序中实现视频或音频自定义可拖拽进度条功能是一项较为常见的需求，主要目的是为了提升用户在播放视频或音频时的操作体验。在小程序中视频或音频的原生组件并没有提供进度条，所以在一些情况下，我们需要自己实现...
Android自定义双向进度条的实现代码
08-29
Android自定义双向进度条的实现代码 Android自定义双向进度条的实现代码是Android开发中非常重要的一部分，本篇文章主要介绍了Android自定义双向进度条的实现代码，非常具有实用的价值。下面将详细讲解Android...
Android 自定义滑动进度条
狒小七的博客
01-15 1442
在日常的Android开发中，系统提供的控件经常无法满足项目功能的需求，在这样的情况下就需要自己根据需求来开发控件。虽然自己已经参加工作3年了，但是对于写这样的技术博客还真的非常少，今天就来写这优快云的第一篇。功能需求：一个使用圆点表示的手动滑动的进度条控件。效果图如下： 实现分析：这是一个比较简单的滑动进度条控件，只要继承常见的 LinearLayout 类，重写onDraw方法使用Canva
安卓水平滑动尺子选择条
08-04
之前网上找了各种类似 都不满意 自己做了个
滑动条（Slider），进度条（ProgressBar）运用
07-06
WPF开发过程中少不了有些界面加载等待，不能没有过度界面处理你不然显得软件如同卡死了一般，用户体验极度不好。这需要使用到各种样式的进度条过渡处理展示些细节提醒用户。有些参数的调整一味的使用文本框调整太生硬可以考虑使用滑动条，例如声音的调节等等。
可拖动进度条
03-24
可拖动进度条html组件，样式、javascript,内嵌到程序中，提高开发效率
jquery左右滑动范围选择器
02-18
jquery左右滑动范围选择器
显示控件——滑动选择
TDO_Andy的博客
11-18 355
该控件也是一种调节控件，通过在既定范围内的滑动来选择具体选项值以图达到对变量的调控效果，其UI操作效果类似于拨动密码锁的滚轮。滑动选择项时，滑动效果的灵敏度。参考值为1，范围是1.0~10.0。未选中选项文字与选中项大小显示的比，范围是0~100。选项内容的初始选项值（初始选项实际对应数值为1）。“W”“H”为控件区域宽度和高度，单位为像素点。选择项展示选项的数量个数，1/3/5。“X”“Y”为控件区域左上角坐标。选择项中未选中文字字体的颜色。选择项中选中文字字体的颜色。左对齐/右对齐/居中。
javascript:(滑动选项卡、进度条、广告收缩效果、滑动的下拉菜单)案例
php398893944的专栏
02-23 3249
实现滑动选项卡：   js选项卡    ul{    list-style-type:none;     margin-left:-40px;       width:450px;       position:relative;       }         ul li{        padding:5px;        float:left;
进度条点击选择时间段
weixin_44446223的博客
04-22 1030
hotmap.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
Android-SeekBar可滑动进度条
Vivinia的博客
04-24 6674
目标效果：     程序运行显示进度条在中间，手指滑动可更改进度条位置，并且显示在TextView上，当点击进度条按钮或者拖动时，按钮变为红色，抬起手指变为黑色。 1.activity_main.xml页面设置控件。 activity_main.xml页面： <RelativeLayout xmlns:android="http://schemas.android.com/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

壹叁零壹

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

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

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

打赏作者

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

抵扣说明：

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

余额充值