Android多种样式的进度条

原创 2016年04月26日 16:46:35

• 标签：
• android /
• clip /
• 进度条 /

• 8473
• 编辑

---- The mark of the immature man is that he wants to die nobly for a causer while the mark of the mature man is that he wants to live humbly for one

1. 水平向右的进度条

1. <?xml version="1.0" encoding="utf-8"?>
2. <clip xmlns:android="http://schemas.android.com/apk/res/android"
3. android:clipOrientation="horizontal"
4. android:drawable="@drawable/progress_v_01"
5. android:gravity="left">
6. </clip>

<?xml version="1.0" encoding="utf-8"?>

<clip xmlns:android="http://schemas.android.com/apk/res/android"

    android:clipOrientation="horizontal"

    android:drawable="@drawable/progress_v_01"

    android:gravity="left">

</clip>

1. <ImageView
2. android:layout_margin="10dp"
3. android:background="#e6e6e6"
4. android:id="@+id/iv_image_clip_left"
5. android:layout_width="match_parent"
6. android:layout_height="wrap_content"
7. android:src="@drawable/clip_left_01"/>

<ImageView

        android:layout_margin="10dp"

        android:background="#e6e6e6"

        android:id="@+id/iv_image_clip_left"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:src="@drawable/clip_left_01"/>
   

1. private ImageView mClipLeftImageView;
2. @Override
3. protected void onCreate(Bundle savedInstanceState) {
4. super.onCreate(savedInstanceState);
5. setContentView(R.layout.activity_main);
6. mClipLeftImageView = (ImageView) findViewById(R.id.iv_image_clip_left);
7. mClipLeftImageView.setImageLevel(10000);
8. handler.postDelayed(runnable,2000);
9. }
10. private int mUnmber = 0;
11. private Handler handler = new Handler();
12. Runnable runnable = new Runnable() {
13. @Override
14. public void run() {
15. if (mUnmber<=10000){
16. mClipLeftImageView.getDrawable().setLevel(mUnmber);
17. handler.postDelayed(runnable,20);
18. mUnmber+=100;
19. }
20. }
21. };

 private ImageView mClipLeftImageView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mClipLeftImageView = (ImageView) findViewById(R.id.iv_image_clip_left);

        mClipLeftImageView.setImageLevel(10000);

        handler.postDelayed(runnable,2000);

    }

    private int mUnmber = 0;

    private Handler handler = new Handler();

    Runnable runnable = new Runnable() {

        @Override

        public void run() {

            if (mUnmber<=10000){

                mClipLeftImageView.getDrawable().setLevel(mUnmber);

                handler.postDelayed(runnable,20);

                mUnmber+=100;

            }

        }

    };

2. 水平向左的进度条

3.水平向左向右的进度条

3-3 在布局文件中的使用 同 1-3；

3-4 在java代码中的设置同 1-4；

4.水平向右的圆形进度条

1. <?xml version="1.0" encoding="utf-8"?>
2. <clip xmlns:android="http://schemas.android.com/apk/res/android"
3. android:clipOrientation="horizontal"
4. android:drawable="@drawable/progress_oval_01"
5. android:gravity="left"
6. >
7. </clip>

<?xml version="1.0" encoding="utf-8"?>

<clip xmlns:android="http://schemas.android.com/apk/res/android"

    android:clipOrientation="horizontal"

    android:drawable="@drawable/progress_oval_01"

    android:gravity="left"

    >

</clip>

5. 中心向外扩展的圆形进度条

5-3 在布局文件中的使用 同 1-3；

6.垂直向上的直线进度条

6-3 在布局文件中的使用 同 1-3；

7.垂直向上的圆形进度条

8 Clip方式实现综述

 

 

使用ClipDrawable对象时可以调用setLevel(int level)方法来设置截取的区域大小，当level为0时，截取的图片片段为空；当level为10000时，截取整张图片。

 

 

可以使用ClipDrawable的这种性质控制截取图片的区域大小，让程序不断调用setLevel方法并改变level的值，达到让图片慢慢展开的效果

9 通过自定义View的方式来实现进度条 -水平进度条

效果图 8-1

9-5 onMeasure方法中的测量

10 通过自定义View的方式来实现进度条 -圆形进度条

效果图 10-1

写作过程同 9 ，主要是在onDraw方法中进行的绘制

1. @Override
2. protected synchronized void onDraw(Canvas canvas)
3. {
4. /**
5. * 获取显示进度的文字指示
6. */
7. String text = getProgress() + "%";
8. /**
9. * 获取显示进度的文字的宽与高
10. */
11. float textWidth = mPaint.measureText(text);
12. float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;
13. canvas.save();
14. /**
15. * 将画布移动到中心
16. */
17. canvas.translate(getPaddingLeft() + mProgressBarHeight / 2, getPaddingTop()
18. + mProgressBarHeight / 2);
19. mPaint.setStyle(Style.STROKE);
20. /**
21. * 绘制未加载的进度
22. */
23. mPaint.setColor(mUnReachedBarColor);
24. mPaint.setStrokeWidth(mProgressBarHeight);
25. canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);
26. /**
27. * 绘制已加载的圆环进度
28. */
29. mPaint.setColor(mReachedBarColor);
30. mPaint.setStrokeWidth(mProgressBarHeight);
31. float sweepAngle = getProgress() * 1.0f / getMax() * 360;
32. canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), 0,
33. sweepAngle, false, mPaint);
34. /**
35. * 绘制显示进行的颜色
36. */
37. mPaint.setStyle(Style.FILL);
38. canvas.drawText(text, mRadius - textWidth / 2, mRadius - textHeight,
39. mPaint);
40. canvas.restore();
41. }

	@Override

	protected synchronized void onDraw(Canvas canvas)

	{

		/**

		 * 获取显示进度的文字指示

		 */

		String text = getProgress() + "%";

		/**

		 * 获取显示进度的文字的宽与高

		 */

		float textWidth = mPaint.measureText(text);

		float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;

		canvas.save();

		/**

		 * 将画布移动到中心

		 */

		canvas.translate(getPaddingLeft() + mProgressBarHeight / 2, getPaddingTop()

				+ mProgressBarHeight / 2);

		mPaint.setStyle(Style.STROKE);

		/**

		 * 绘制未加载的进度

		 */

		mPaint.setColor(mUnReachedBarColor);

		mPaint.setStrokeWidth(mProgressBarHeight);

		canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

		/**

		 * 绘制已加载的圆环进度

		 */

		mPaint.setColor(mReachedBarColor);

		mPaint.setStrokeWidth(mProgressBarHeight);

		float sweepAngle = getProgress() * 1.0f / getMax() * 360;

		canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), 0,

				sweepAngle, false, mPaint);

		/**

		 * 绘制显示进行的颜色

		 */

		mPaint.setStyle(Style.FILL);

		canvas.drawText(text, mRadius - textWidth / 2, mRadius - textHeight,

				mPaint);

		canvas.restore();

	}

相关的变量说明

1. /**
2. * 定义设置进度圆的默认半径
3. */
4. private int mRadius = dp2px(30);
5. /**
6. * 圆环的默认宽度
7. */
8. private  int mProgressBarHeight = dp2px(5);
9. /**
10. * 声明初始化一个画笔
11. */
12. private Paint mPaint = new Paint();
13. /**
14. * 设置未加载进度的默认颜色
15. */
16. private int mUnReachedBarColor = 0xffe6e6e6;
17. /**
18. * 设置已加载进度的默认颜色
19. */
20. private int mReachedBarColor = 0xff89cc99;
21. /**
22. * 设置进度已加载进度条的颜色
23. * 这里只写了这个设置颜色
24. * 当然也可以写出代码动态设置改变 未加载进度条的颜色
25. * 还有显示文字的颜色
26. * 还有进度条的宽度等等
27. * @param color
28. */
29. public void setReachedBarColor(int color){
30. this.mReachedBarColor = color;
31. }

	/**

	 * 定义设置进度圆的默认半径

	 */

	private int mRadius = dp2px(30);

	/**

	 * 圆环的默认宽度

	 */

	private  int mProgressBarHeight = dp2px(5);

	/**

	 * 声明初始化一个画笔

	 */

	private Paint mPaint = new Paint();

	/**

	 * 设置未加载进度的默认颜色

	 */

	private int mUnReachedBarColor = 0xffe6e6e6;

	/**

	 * 设置已加载进度的默认颜色

	 */

	private int mReachedBarColor = 0xff89cc99;

	/**

	 * 设置进度已加载进度条的颜色

	 * 这里只写了这个设置颜色

	 * 当然也可以写出代码动态设置改变 未加载进度条的颜色

	 * 还有显示文字的颜色

	 * 还有进度条的宽度等等

	 * @param color

	 */

	public void setReachedBarColor(int color){

		this.mReachedBarColor = color;

	}
	

相关的构造方法以及构造方法中的初始化操作

1. public RoundProgressBar(Context context)
2. {
3. this(context, null);
4. }
5. public RoundProgressBar(Context context, AttributeSet attrs)
6. {
7. this(context, attrs,0);
8. }
9. public RoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
10. super(context, attrs, defStyleAttr);
11. mPaint.setStyle(Style.STROKE);
12. mPaint.setAntiAlias(true);
13. mPaint.setDither(true);
14. mPaint.setStrokeCap(Cap.ROUND);
15. }

	public RoundProgressBar(Context context)

	{

		this(context, null);

	}

	public RoundProgressBar(Context context, AttributeSet attrs)

	{

		this(context, attrs,0);

	}

	public RoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {

		super(context, attrs, defStyleAttr);

		mPaint.setStyle(Style.STROKE);

		mPaint.setAntiAlias(true);

		mPaint.setDither(true);

		mPaint.setStrokeCap(Cap.ROUND);

	}

代码中的使用

1. public class MainActivity extends Activity {
2. private  int number =0;
3. @Override
4. protected void onCreate(Bundle savedInstanceState) {
5. super.onCreate(savedInstanceState);
6. setContentView(R.layout.activity_main);
7. final RoundProgressBar progress1 = (RoundProgressBar)findViewById(R.id.progress1);
8. progress1.setMax(100);
9. final RoundProgressBar progress2 = (RoundProgressBar)findViewById(R.id.progress2);
10. progress2.setMax(100);
11. new Timer().schedule(new TimerTask() {
12. @Override
13. public void run() {
14. if (number>10){
15. progress2.setReachedBarColor(0xff00FF00);
16. }else if (number>10){
17. progress2.setReachedBarColor(0xff00FF00);
18. }else if (number>20){
19. progress2.setReachedBarColor(0xff228B22);
20. }else if (number>30){
21. progress2.setReachedBarColor(0xff008000);
22. }else if (number>40){
23. progress2.setReachedBarColor(0xff006400);
24. }else if (number>50){
25. progress2.setReachedBarColor(0xff483D8B);
26. }else if (number>60){
27. progress2.setReachedBarColor(0xff8A2BE2);
28. }else if (number>70){
29. progress2.setReachedBarColor(0xff4B0082);
30. }else if (number>90){
31. progress2.setReachedBarColor(0xff8B008B);
32. }
33. progress2.setProgress(number);
34. progress1.setProgress(number);
35. number+=1;
36. }
37. }, 0, 100);
38. }
39. }

public class MainActivity extends Activity {

    private  int number =0;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        final RoundProgressBar progress1 = (RoundProgressBar)findViewById(R.id.progress1);

        progress1.setMax(100);

        final RoundProgressBar progress2 = (RoundProgressBar)findViewById(R.id.progress2);

        progress2.setMax(100);

        new Timer().schedule(new TimerTask() {

            @Override

            public void run() {

                if (number>10){

                    progress2.setReachedBarColor(0xff00FF00);

                }else if (number>10){

                    progress2.setReachedBarColor(0xff00FF00);

                }else if (number>20){

                    progress2.setReachedBarColor(0xff228B22);

                }else if (number>30){

                    progress2.setReachedBarColor(0xff008000);

                }else if (number>40){

                    progress2.setReachedBarColor(0xff006400);

                }else if (number>50){

                    progress2.setReachedBarColor(0xff483D8B);

                }else if (number>60){

                    progress2.setReachedBarColor(0xff8A2BE2);

                }else if (number>70){

                    progress2.setReachedBarColor(0xff4B0082);

                }else if (number>90){

                    progress2.setReachedBarColor(0xff8B008B);

                }

                progress2.setProgress(number);

                progress1.setProgress(number);

                number+=1;

            }

        }, 0, 100);

    }

}

可以看到这里是随着进度不断的设置加载进度条的绘制颜色

关于计时器Timer与TimerTask使用 可以点击查看

使用ClipDrawble实现图片的缩放

 

14 绘画使用相关基础 ：

 

版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/zl18603543572/article/details/51250216