Android--雕虫小技 自定义竖直ProgressBar

原创 2018年04月15日 15:05:02

如要转载请标明MartinDung和原文的链接,谢谢。

先看效果

progressbar.gif

  • 遇到的需求:
    • 竖直的显示进度/或者当前的比例
    • 可以动态的展示进度
    • 颜色有可能随时更改

已经知道了具体的需求,让我们一步步开始实现吧


1.自定义 VerticalProgressBar

  • 就是简单的自定义控件,继承ProgressBar就行。

    代码:
    public class VerticalProgressBar extends ProgressBar {
    public VerticalProgressBar(Context context) {
        super(context);
    }
    
    public VerticalProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    public VerticalProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public VerticalProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    
       @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(h, w, oldh, oldw);
        }
    
        @Override
        protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    
        /*
         * 重点在这里
         */
        @Override
        protected synchronized void onDraw(Canvas canvas) {
            canvas.rotate(-90);
            canvas.translate(-getHeight(), 0);
            super.onDraw(canvas);
        }
    

    }

  • 就是这么直接干脆的写完了,接下来将 VerticalProgressBar 放到 布局xml 中,就ok了。

2. 布局 & 初始化动画

  • xml

    <RelativeLayout 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:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.starpavilion.battery.batteryprotection.view.VerticalProgressBar
            android:id="@+id/iv_progressBar"
            android:layout_width="20dp"
            android:layout_height="227dp"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_marginTop="30dp"
            android:progressDrawable="@drawable/layer_list_progress_drawable"
            android:layout_centerInParent="true"
            android:max="100"
            />
    
    </RelativeLayout>
    
  • 在代码中 初始化动画

上个完整的 初始化代码

public class ProgressBarActivity extends BaseActivity {

    @BindView(R.id.iv_progressBar)
    VerticalProgressBar ivProgressBar;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress_bar);
        ButterKnife.bind(this);
        initProgressBar();
    }

    //设置值动画 progressbar动起来
    private void initProgressBar() {
        ValueAnimator valueAnimator = ValueAnimator.ofInt(10, 100);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                ivProgressBar.setProgress((Integer) valueAnimator.getAnimatedValue());
            }
        });

        valueAnimator.setDuration(1000);
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator.setRepeatCount(1);
        valueAnimator.start();

        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                ivProgressBar.setProgress(50);
            }
        });
    }

}
  • 奏是这么简单。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30321715/article/details/79949445

android布局里竖线的问题

困扰了很久的布局里的竖线终于解决啦!这个问题也许有人一秒钟就搞定了,然后我用了好多天,其实是进入了一个误区。一条竖线,用View实现,宽度好弄,1dp或者0.5dp都行;可是高度呢,误区就在这了。先说...
  • gufengpiaoyi
  • gufengpiaoyi
  • 2015-12-01 14:53:52
  • 1783

(Android实战)ProgressBar+AsyncTask实现界面数据异步加载(含效果图)

1 效果图 加载数据时 加载数据完成时 加载数据异常时 2 实现说明   加载前:界面显示异步加载控件,隐藏数据显示控件,加载异常控件   加载成功:根...
  • wangwei_cq
  • wangwei_cq
  • 2013-08-02 16:51:55
  • 5519

自定义竖直ProgressBar

今天做电池电量遇到个问题那就是利用少的资源来显示电池不同的状态。最初的想法是改写progressbar,使其变成竖直,这样便于控制。写一个View继承ProgressBar,但是怎样改成竖直的呢,在网...
  • songzeyang99
  • songzeyang99
  • 2012-08-31 17:53:33
  • 4157

竖直ProgressBar(VerticalProgressBar),不用那么麻烦

ProgressBar(设置了progressBarStyleHoriziontal) 竖直ProgressBar 发现一个bug,就是竖直方向的时候,如果设置宽度大于高度,显示出来的竖直Progre...
  • mengliluohua_151
  • mengliluohua_151
  • 2016-07-04 16:20:46
  • 3223

Android 一个另类的 '进度条' 效果

转载请注明出处:http://blog.csdn.net/lv_fq/article/details/77837482 – [发强博客]之前一个朋友问我一个类似于广播电台频率的进度条,可能很多人看到...
  • lv_fq
  • lv_fq
  • 2017-09-05 15:21:42
  • 1206

ImageView的padding异常问题

1、ImageView.scaleType取centerCrop后,再用padding时显示异常?ImageView.setCropToPadding(true)即可。 2、在Layout中指定好b...
  • gufengpiaoyi
  • gufengpiaoyi
  • 2016-01-19 17:18:55
  • 543

android 垂直progressbar 实现

1.系统提供了水平progressbar 组件。可以方便的实现进度条和加载框。二者的区别在于定义的style。以系统提供的源码来分析:源码提供的 style样式下面是使用不同style的效果图(除了第...
  • o279642707
  • o279642707
  • 2016-05-16 16:40:50
  • 1981

android 竖向的progress bar

http://android-dev-examples.blogspot.jp/2014/09/android-custom-vertical-progressbar.html Andr...
  • wjyyxzzjnws
  • wjyyxzzjnws
  • 2016-11-16 15:39:31
  • 631

Android 自定义 斜线进度框 ,雨点式背景

import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; impor...
  • jjwwmlp456
  • jjwwmlp456
  • 2015-10-22 15:29:22
  • 2474

Android中添加水平线和垂直线

1.添加水平线 2.添加垂直线
  • pcaxb
  • pcaxb
  • 2015-07-21 22:29:47
  • 1813
收藏助手
不良信息举报
您举报文章:Android--雕虫小技 自定义竖直ProgressBar
举报原因:
原因补充:

(最多只允许输入30个字)