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

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

如要转载请标明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);
            }
        });
    }

}
  • 奏是这么简单。
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页