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

---- 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-1 定义显示进度指示的图形

drawable目录下progress_v_01.xml

关于shape使用详情可 查阅 点击打开链接

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle">
  4. <!--默认图形大小-->
  5. <size
  6. android:width="500dp"
  7. android:height="50dp" />
  8. <!--填充颜色 -->
  9. <solid android:color="#6633CC" />
  10. <!--边框角度›-->
  11. <corners android:radius="20dp" />
  12. </shape>
<?xml version="1.0" encoding="utf-8"?>

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

    android:shape="rectangle">

    <!--默认图形大小-->

    <size

        android:width="500dp"

        android:height="50dp" />

    <!--填充颜色 -->

    <solid android:color="#6633CC" />

    <!--边框角度›-->

    <corners android:radius="20dp" />

</shape>

效果图 1-1-1

1-2. 在drawable目录下新建一个clip标签的文件

  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>

clipOrientation设置方向为水平方向

gravity设置过程中对齐方式为左

drawable 中引用要显示设置的图形

1-3.在页面布局文件中使用

在src属性下引入我们1-2中创建的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.4 在java代码中动态设置进度

  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. 水平向左的进度条

2-1 定义显示进度的图片，这里使用的是1-1中定义的图形

2-2 创建clip标签文件

  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="right"
  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_v_01"

    android:gravity="right"

    >

</clip>

clipOrientation设置方向为水平方向

gravity设置过程中对齐方式为右（从而达到进度从右向左的实现效果）

drawable 中引用要显示设置的图形

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

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

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

3-1 定义显示进度的图片，这里使用的是1-1中定义的图形

3-2 创建clip标签文件

  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="center_horizontal"
  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_v_01"

    android:gravity="center_horizontal"

    >

</clip>

clipOrientation设置方向为水平方向

gravity设置过程中对齐方式 为垂直中心对齐（从而达到进度从中间向两边扩展的实现效果）

drawable 中引用要显示设置的图形

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

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

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

4-1 定义使用到的显示进度的图形 drawbale目录下progress_oval_01.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval">
  4. <!--设置黑夜显示大小-->
  5. <size
  6. android:width="100dp"
  7. android:height="100dp" />
  8. <!--设置图形颜色-->
  9. <gradient
  10. android:centerColor="#CC9933"
  11. android:centerX="0.5"
  12. android:centerY="0.5"
  13. android:endColor="#33FF33"
  14. android:gradientRadius="45"
  15. android:startColor="#FFFF33"
  16. android:type="radial" />
  17. <!--设置图形边框-->
  18. <stroke
  19. android:width="2dp"
  20. android:color="#0000CC" />
  21. </shape>
<?xml version="1.0" encoding="utf-8"?>

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

    android:shape="oval">

    <!--设置黑夜显示大小-->

    <size

        android:width="100dp"

        android:height="100dp" />

    <!--设置图形颜色-->

    <gradient

        android:centerColor="#CC9933"

        android:centerX="0.5"

        android:centerY="0.5"

        android:endColor="#33FF33"

        android:gradientRadius="45"

        android:startColor="#FFFF33"

        android:type="radial" />

    <!--设置图形边框-->

    <stroke

        android:width="2dp"

        android:color="#0000CC" />

</shape>

4-2 创建使用到的clip文件

  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>

clipOrientation设置方向为水平方向

gravity设置过程中对齐方式 为左边对齐（从而达到进度从左边向右的扩展的实现效果）

drawable 中引用要显示设置的图形

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

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

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

5-1 创建显示进度的图形 这里引用的是4-1中创建的图形

5-2 创建对应显示的clip标签文件

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

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

    android:clipOrientation="horizontal|vertical"

    android:drawable="@drawable/progress_oval_01"

    android:gravity="center"

    >

</clip>

clipOrientation设置方向为水平方向

gravity设置过程中对齐方式 为中心对齐（从而达到进度从中间向两边的扩展的实现效果）

drawable 中引用要显示设置的图形

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

创建ImageView标签，在src属性下进行引用

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

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

6-1 创建显示进度的图形

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="rectangle"
  4. >
  5. <size android:width="5dp"
  6. android:height="100dp"/>
  7. <gradient
  8. android:angle="45"
  9. android:startColor="#FF9900"
  10. android:centerColor="#FFFF00"
  11. android:endColor="#66FF00"
  12. />
  13. <corners android:radius="5dp"/>
  14. </shape>
<?xml version="1.0" encoding="utf-8"?>

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

    android:shape="rectangle"

    >

    <size android:width="5dp"

        android:height="100dp"/>

    <gradient

        android:angle="45"

        android:startColor="#FF9900"

        android:centerColor="#FFFF00"

        android:endColor="#66FF00"

        />

    <corners android:radius="5dp"/>

</shape>

效果图： 6-1-1

6-2 创建对应的clip标签文件

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

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

    android:clipOrientation="vertical"

    android:drawable="@drawable/progress_oval_01"

    android:gravity="bottom"

    >

</clip>

clipOrientation设置方向为竖直方向

gravity设置过程中对齐方式 底部（从而达到进度从底部向上增加的实现效果）

如果设置为top，那么进度将成为从上到下

drawable 中引用要显示设置的图形

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

创建ImageView标签，在src属性下进行引用

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

 
 

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

8 Clip方式实现综述

ClipDrawable代表从其它位图上截取一个“图片片段”。在XML文件中使用<clip.../>元素定义ClipDrawable对象，
可指定如下三个属性：
 
android:drawable：指定截取的源Drawable对象,也可以指定drawable类的子标签
 
android:clipOrientation：指定截取的方向，可设置为 horizontal  vertical 
 
android:gravity：指定截取时的对齐方式,可设置为top bottom right center_vertical fill_vertical center_horizontal center  fill  clip_vertaical  start end 等等
 
 
使用ClipDrawable对象时可以调用setLevel(int level)方法来设置截取的区域大小，当level为0时，截取的图片片段为空；当level为10000时，截取整张图片。
 
 
可以使用ClipDrawable的这种性质控制截取图片的区域大小，让程序不断调用setLevel方法并改变level的值，达到让图片慢慢展开的效果

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

效果图 8-1

看这样的进度条确实有点风骚，不过效果还行

9-1 定义一个类，继承ProgressBar

  1. public class HorizontalProgressBarWithNumber extends ProgressBar {
  2. public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs) {
  3. super(context, attrs);
  4. }
  5. public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs,
  6. int defStyle) {
  7. super(context, attrs, defStyle);
  8. }
  9. @Over
public class HorizontalProgressBarWithNumber extends ProgressBar {

    public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs) {

        super(context, attrs);

    }

    public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs,

                                           int defStyle) {

        super(context, attrs, defStyle);

    }

    @Over

官方推荐的使用方式为

  1. public class HorizontalProgressBarWithNumber extends ProgressBar {
  2. public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs) {
  3. this(context, attrs, 0);
  4. }
  5. public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs,
  6. int defStyle) {
  7. super(context, attrs, defStyle);
  8. mPaint.setTextSize(mTextSize);
  9. mPaint.setColor(mTextColor);
  10. }
  11. @Over
public class HorizontalProgressBarWithNumber extends ProgressBar {

    public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs,

                                           int defStyle) {

        super(context, attrs, defStyle);

        mPaint.setTextSize(mTextSize);

        mPaint.setColor(mTextColor);

    }

    @Over

也就是说g..官方推荐的使用两个构造参数去调用三个构造参数的写法，我个人不建议这样写，两个构造去调用三个构造的方法，那么有时我们在构造中进行初时化操作的时候只需要在三个构造参数的方法进行一次初始化操作就好，但是当我们开发的应用遇到低版本的手机时，会遇到崩溃的问题（无法加载初始化xml布局文件），因为三个构造的方法是在高版本中才有的，所以我这里将初始化的操作全部封装到另一个方法中去，分别在两个构造中和三个构造方法中调用。

9-2 复写父控件的onDraw方法，来进行重新绘制

  1. @Override
  2. protected synchronized void onDraw(Canvas canvas) {
  3. canvas.save();
  4. /**
  5. * 定义画笔的初始位置
  6. */
  7. canvas.translate(getPaddingLeft(), getHeight() / 2);
  8. /**
  9. * 计算加载进度的比例
  10. */
  11. float radio = getProgress() * 1.0f / getMax();
  12. /**
  13. * 计算已加载的进度
  14. */
  15. float progressPosX = (int) (mRealWidth * radio);
  16. /**
  17. * 定义进度上显示的文字信息
  18. */
  19. String text = getProgress() + "%";
  20. /**
  21. * 获取绘制文字的宽与高
  22. */
  23. float textWidth = mPaint.measureText(text);
  24. float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;
  25. /**
  26. * 判断绘制
  27. */
  28. if (progressPosX + textWidth > mRealWidth) {
  29. progressPosX = mRealWidth - textWidth;
  30. }
  31. /**
  32. * 绘制已加载的进度
  33. */
  34. mPaint.setColor(mBarColor);
  35. mPaint.setStrokeWidth(mProgressBarHeight);
  36. canvas.drawLine(0, 0, progressPosX, 0, mPaint);
  37. /**
  38. * 绘制加载显示的文字
  39. */
  40. mPaint.setColor(mTextColor);
  41. canvas.drawText(text, progressPosX, -textHeight, mPaint);
  42. /**
  43. * 绘制未加载的进度
  44. */
  45. float start = progressPosX + textWidth;
  46. mPaint.setColor(mUnBarColor);
  47. mPaint.setStrokeWidth(mProgressBarHeight);
  48. canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
  49. canvas.restore();
  50. }
 @Override

    protected synchronized void onDraw(Canvas canvas) {

        canvas.save();

        /**

         * 定义画笔的初始位置

         */

        canvas.translate(getPaddingLeft(), getHeight() / 2);

        /**

         * 计算加载进度的比例

         */

        float radio = getProgress() * 1.0f / getMax();

        /**

         * 计算已加载的进度

         */

        float progressPosX = (int) (mRealWidth * radio);

        /**

         * 定义进度上显示的文字信息

         */

        String text = getProgress() + "%";

        /**

         * 获取绘制文字的宽与高

         */

        float textWidth = mPaint.measureText(text);

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

        /**

         * 判断绘制

         */

        if (progressPosX + textWidth > mRealWidth) {

            progressPosX = mRealWidth - textWidth;

        }

        /**

         * 绘制已加载的进度

         */

        mPaint.setColor(mBarColor);

        mPaint.setStrokeWidth(mProgressBarHeight);

        canvas.drawLine(0, 0, progressPosX, 0, mPaint);

        /**

         * 绘制加载显示的文字

         */

        mPaint.setColor(mTextColor);

        canvas.drawText(text, progressPosX, -textHeight, mPaint);

        /**

         * 绘制未加载的进度

         */

        float start = progressPosX + textWidth;

        mPaint.setColor(mUnBarColor);

        mPaint.setStrokeWidth(mProgressBarHeight);

        canvas.drawLine(start, 0, mRealWidth, 0, mPaint);

        canvas.restore();

    }

这里进行绘制的过程是 先绘制已加载的进度，然后再绘制显示进度的文字，最后再绘制滑加载的进度，

9-3 设置并初始化相关的变量

其中使用到一些变量，比如绘制文字的颜色，绘制进度的颜色，高度等等。

这里使用的方法是在成员变量中进行了设置默认的值

  1. /**
  2. * 定义一个画笔
  3. */
  4. protected Paint mPaint = new Paint();
  5. /**
  6. * 设置默认的显示进度文字的颜色
  7. */
  8. protected int mTextColor = 0xff253688;
  9. /**
  10. * 设置显示默认的显示进度的文字的大小
  11. */
  12. protected int mTextSize = sp2px(10);
  13. /**
  14. * 设置默认的绘制进度条的高度
  15. */
  16. protected int mProgressBarHeight = dp2px(10);
  17. /**
  18. * 设置默认的绘制进度条颜色
  19. */
  20. protected int mBarColor = 0xffffcc00;
  21. /**
  22. * 未加载进度条的颜色
  23. */
  24. protected int mUnBarColor = 0xffe6e6e6;
  25. /**
  26. * 绘制进度条的实际宽度
  27. */
  28. protected int mRealWidth;
    /**

     * 定义一个画笔

     */

    protected Paint mPaint = new Paint();

    /**

     * 设置默认的显示进度文字的颜色

     */

    protected int mTextColor = 0xff253688;

    /**

     * 设置显示默认的显示进度的文字的大小

     */

    protected int mTextSize = sp2px(10);

    /**

     * 设置默认的绘制进度条的高度

     */

    protected int mProgressBarHeight = dp2px(10);

    /**

     * 设置默认的绘制进度条颜色

     */

    protected int mBarColor = 0xffffcc00;

    /**

     * 未加载进度条的颜色

     */

    protected int mUnBarColor = 0xffe6e6e6;

    /**

     * 绘制进度条的实际宽度

     */

    protected int mRealWidth;

第一个变量是我们绘制过程中使用到的画笔，我们这里在类加载的时候进行了初时化操作，同时也给这个画笔设置一些对应的属性值

  1. private  void  initFunction(){
  2. mPaint.setTextSize(mTextSize);
  3. mPaint.setColor(mTextColor);
  4. }

    private  void  initFunction(){

        mPaint.setTextSize(mTextSize);

        mPaint.setColor(mTextColor);

    }

我们这里设置的是显示文字的大小与颜色（如果用到测量的话，在测量的时候可能会用到要测量绘制文字的大小，而我们这里是通过画笔的属性进行测量的）

变量mRealWidth是我们实际中需要绘制的进度条的实际宽度，可以在onMeaure方法中进行初始化（请查看下面的代码块）

也可以在方法中进行初始化

  1. @Override
  2. protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  3. super.onSizeChanged(w, h, oldw, oldh);
  4. mRealWidth = w-getPaddingLeft()-getPaddingRight();
  5. }
    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);

        mRealWidth = w-getPaddingLeft()-getPaddingRight();

    }

其他的相应变量就是一些颜色与大小 ，其中有一个个将dp值转为px值的方法和sp转为px的方法(这是一些工具类)

  1. /**
  2. * dp 2 px
  3. *
  4. * @param dpVal
  5. */
  6. protected int dp2px(int dpVal) {
  7. return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
  8. dpVal, getResources().getDisplayMetrics());
  9. }
  10. /**
  11. * sp 2 px
  12. *
  13. * @param spVal
  14. * @return
  15. */
  16. protected int sp2px(int spVal) {
  17. return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
  18. spVal, getResources().getDisplayMetrics());
  19. }
    /**

     * dp 2 px

     *

     * @param dpVal

     */

    protected int dp2px(int dpVal) {

        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,

                dpVal, getResources().getDisplayMetrics());

    }

    /**

     * sp 2 px

     *

     * @param spVal

     * @return

     */

    protected int sp2px(int spVal) {

        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,

                spVal, getResources().getDisplayMetrics());

    }

走到这里，我们的自定义进度条就可以使用了

当然我们可以设置初始化这些变量的值

  1. /**
  2. * 设置已绘制的进度条的颜色
  3. *
  4. * @param mBarColor
  5. */
  6. public void setmBarColor(int mBarColor) {
  7. this.mBarColor = mBarColor;
  8. }
  9. /**
  10. * 设置过度条的高度
  11. *
  12. * @param mProgressBarHeight
  13. */
  14. public void setmProgressBarHeight(int mProgressBarHeight) {
  15. this.mProgressBarHeight = mProgressBarHeight;
  16. }
  17. /**
  18. * 设置指示进度条的显示文字的颜色
  19. *
  20. * @param mTextColor
  21. */
  22. public void setmTextColor(int mTextColor) {
  23. this.mTextColor = mTextColor;
  24. }
  25. /**
  26. * 设置指示进度条进度的显示文字的颜色
  27. *
  28. * @param mTextSize
  29. */
  30. public void setmTextSize(int mTextSize) {
  31. this.mTextSize = mTextSize;
  32. }
  33. /**
  34. * 设置未加载进度条处的进度颜色
  35. *
  36. * @param mUnBarColor
  37. */
  38. public void setmUnBarColor(int mUnBarColor) {
  39. this.mUnBarColor = mUnBarColor;
  40. }
 /**

     * 设置已绘制的进度条的颜色

     *

     * @param mBarColor

     */

    public void setmBarColor(int mBarColor) {

        this.mBarColor = mBarColor;

    }

    /**

     * 设置过度条的高度

     *

     * @param mProgressBarHeight

     */

    public void setmProgressBarHeight(int mProgressBarHeight) {

        this.mProgressBarHeight = mProgressBarHeight;

    }

    /**

     * 设置指示进度条的显示文字的颜色

     *

     * @param mTextColor

     */

    public void setmTextColor(int mTextColor) {

        this.mTextColor = mTextColor;

    }

    /**

     * 设置指示进度条进度的显示文字的颜色

     *

     * @param mTextSize

     */

    public void setmTextSize(int mTextSize) {

        this.mTextSize = mTextSize;

    }

    /**

     * 设置未加载进度条处的进度颜色

     *

     * @param mUnBarColor

     */

    public void setmUnBarColor(int mUnBarColor) {

        this.mUnBarColor = mUnBarColor;

    }

9-4 自定义属性方式设置初始化变量值

也可以通过自定义属性的方式来进行操作

values文件夹下attrs.xml文件中

定义自定义属性 ：绘制文本的颜色

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <declare-styleable name="HorizonProgressBarWidthNumber">
  4. <attr name="textProColor" format="color" />
  5. </declare-styleable>
  6. </resources>
<?xml version="1.0" encoding="utf-8"?>

<resources>

    <declare-styleable name="HorizonProgressBarWidthNumber">

        <attr name="textProColor" format="color" />

    </declare-styleable>

</resources>

在构造方法中获取到自定义属性的值，并进行相应的赋值操作

  1. /**
  2. * 获取自定义属性操作
  3. * @param context
  4. * @param attrs
  5. * @param defStyle
  6. */
  7. private void initFunction(Context context, AttributeSet attrs, int defStyle) {
  8. final TypedArray attributes = getContext().obtainStyledAttributes(
  9. attrs, R.styleable.HorizonProgressBarWidthNumber);
  10. mTextColor = attributes.getColor(R.styleable.HorizonProgressBarWidthNumber_textProColor, 0xff000000);
  11. }
    /**

     * 获取自定义属性操作

     * @param context

     * @param attrs

     * @param defStyle

     */

    private void initFunction(Context context, AttributeSet attrs, int defStyle) {

        final TypedArray attributes = getContext().obtainStyledAttributes(

                attrs, R.styleable.HorizonProgressBarWidthNumber);

        mTextColor = attributes.getColor(R.styleable.HorizonProgressBarWidthNumber_textProColor, 0xff000000);

    }

9-5 onMeasure方法中的测量

在onMeasure方法进行一些测量

  1. @Override
  2. protected synchronized void onMeasure(int widthMeasureSpec,
  3. int heightMeasureSpec) {
  4. /**
  5. * 1.static int getMode(int measureSpec):根据提供的测量值(格式)提取模式(上述三个模式之一)
  6. * 2.static int getSize(int measureSpec):根据提供的测量值(格式)提取大小值(这个大小也就是我们通常所说的大小)
  7. * 3.static int makeMeasureSpec(int size,int mode):根据提供的大小值和模式创建一个测量值(格式)
  8. */
  9. /**
  10. * 三种测量模式
  11. * UNSPECIFIED：父布局没有给子布局任何限制，子布局可以任意大小。
  12. * EXACTLY：父布局决定子布局的确切大小。不论子布局多大，它都必须限制在这个界限里。
  13. * AT_MOST：子布局可以根据自己的大小选择任意大小。
  14. */
  15. /**
  16. * 获取测量宽度大小
  17. */
  18. int width = MeasureSpec.getSize(widthMeasureSpec);
  19. /**
  20. * 对高度进度测量
  21. */
  22. int height = 0;
  23. /**
  24. * 获取高度的测量模式
  25. */
  26. int specMode = MeasureSpec.getMode(heightMeasureSpec);
  27. /**
  28. * 获取测量高度的大小
  29. */
  30. int specSize = MeasureSpec.getSize(heightMeasureSpec);
  31. /**
  32. * 判断如果是非精准度的，那么就进行测量大小的重新设定
  33. */
  34. if (specMode == MeasureSpec.EXACTLY) {
  35. height = specSize;
  36. } else {
  37. /**
  38. * 获取显示加载进度的显示文本的宽度与高度
  39. */
  40. float textHeight = (mPaint.descent() - mPaint.ascent());
  41. /**
  42. * 计算测量的高度
  43. */
  44. height = (int) (getPaddingTop() + getPaddingBottom() + Math.max(
  45. mProgressBarHeight, Math.abs(textHeight)));
  46. if (specMode == MeasureSpec.AT_MOST) {
  47. height = Math.min(height, specSize);
  48. }
  49. }
  50. /**
  51. * 设置测量
  52. */
  53. setMeasuredDimension(width, height);
  54. /**
  55. * 获取实际需要绘制进度条的宽度
  56. */
  57. mRealWidth = getMeasuredWidth() - getPaddingRight() - getPaddingLeft();
  58. }
    @Override

    protected synchronized void onMeasure(int widthMeasureSpec,

                                          int heightMeasureSpec) {

        /**

         * 1.static int getMode(int measureSpec):根据提供的测量值(格式)提取模式(上述三个模式之一)

         * 2.static int getSize(int measureSpec):根据提供的测量值(格式)提取大小值(这个大小也就是我们通常所说的大小)

         * 3.static int makeMeasureSpec(int size,int mode):根据提供的大小值和模式创建一个测量值(格式)

         */

        /**

         * 三种测量模式

         * UNSPECIFIED：父布局没有给子布局任何限制，子布局可以任意大小。

         * EXACTLY：父布局决定子布局的确切大小。不论子布局多大，它都必须限制在这个界限里。

         * AT_MOST：子布局可以根据自己的大小选择任意大小。

         */

        /**

         * 获取测量宽度大小

         */

        int width = MeasureSpec.getSize(widthMeasureSpec);

        /**

         * 对高度进度测量

         */

        int height = 0;

        /**

         * 获取高度的测量模式

         */

        int specMode = MeasureSpec.getMode(heightMeasureSpec);

        /**

         * 获取测量高度的大小

         */

        int specSize = MeasureSpec.getSize(heightMeasureSpec);

        /**

         * 判断如果是非精准度的，那么就进行测量大小的重新设定

         */

        if (specMode == MeasureSpec.EXACTLY) {

            height = specSize;

        } else {

            /**

             * 获取显示加载进度的显示文本的宽度与高度

             */

            float textHeight = (mPaint.descent() - mPaint.ascent());

            /**

             * 计算测量的高度

             */

            height = (int) (getPaddingTop() + getPaddingBottom() + Math.max(

                    mProgressBarHeight, Math.abs(textHeight)));

            if (specMode == MeasureSpec.AT_MOST) {

                height = Math.min(height, specSize);

            }

        }

        /**

         * 设置测量

         */

        setMeasuredDimension(width, height);

        /**

         * 获取实际需要绘制进度条的宽度

         */

        mRealWidth = getMeasuredWidth() - getPaddingRight() - getPaddingLeft();

    }

9-6 风骚进度条设置使用

使用：

在xml中引入控件

在java代码中

  1. public class CustomProgressActivity extends Activity {
  2. private HorizontalProgressBarWithNumber mProgressBarView;
  3. private int mNumber = 0;
  4. @Override
  5. protected void onCreate(Bundle savedInstanceState) {
  6. super.onCreate(savedInstanceState);
  7. setContentView(R.layout.activity_custom_progress);
  8. mProgressBarView = (HorizontalProgressBarWithNumber) findViewById(R.id.custom_progress_view);
  9. mProgressBarView.setMax(100);
  10. handler.sendEmptyMessage(1001);
  11. }
  12. private Handler handler = new Handler() {
  13. @Override
  14. public void handleMessage(Message msg) {
  15. super.handleMessage(msg);
  16. if (msg.what == 1001) {
  17. mProgressBarView.setmBarColor(randomColor());
  18. mProgressBarView.setProgress(mNumber);
  19. if (mNumber > 100) {
  20. handler.removeMessages(1001);
  21. }
  22. if (mNumber < 100) {
  23. handler.sendEmptyMessageDelayed(1001, 300);
  24. }
  25. mNumber++;
  26. }
  27. }
  28. };
  29. public  int randomColor(){
  30. Random random = new Random();
  31. //如果值太大，会偏白，太小则会偏黑，所以需要对颜色的值进行范围限定
  32. int red = random.nextInt(150)+50;//50-199
  33. int green = random.nextInt(150)+50;//50-199
  34. int blue = random.nextInt(150)+50;//50-199
  35. return Color.rgb(red, green, blue);//根据rgb混合生成一种新的颜色
  36. }
  37. }
public class CustomProgressActivity extends Activity {

    private HorizontalProgressBarWithNumber mProgressBarView;

    private int mNumber = 0;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_custom_progress);

        mProgressBarView = (HorizontalProgressBarWithNumber) findViewById(R.id.custom_progress_view);

        mProgressBarView.setMax(100);

        handler.sendEmptyMessage(1001);

    }

    private Handler handler = new Handler() {

        @Override

        public void handleMessage(Message msg) {

            super.handleMessage(msg);

            if (msg.what == 1001) {

                mProgressBarView.setmBarColor(randomColor());

                mProgressBarView.setProgress(mNumber);

                if (mNumber > 100) {

                    handler.removeMessages(1001);

                }

                if (mNumber < 100) {

                    handler.sendEmptyMessageDelayed(1001, 300);

                }

                mNumber++;

            }

        }

    };

    public  int randomColor(){

        Random random = new Random();

        //如果值太大，会偏白，太小则会偏黑，所以需要对颜色的值进行范围限定

        int red = random.nextInt(150)+50;//50-199

        int green = random.nextInt(150)+50;//50-199

        int blue = random.nextInt(150)+50;//50-199

        return Color.rgb(red, green, blue);//根据rgb混合生成一种新的颜色

    }

}

到这里就可以设置比较风骚的水平进度条了，我这里只是动态改变了绘制已加载进度条的颜色

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实现图片的缩放

 
效果图：
 
在这里是使用的Clipdrawable 类的api来实现的
 
  1. private int number =0;
  2. @Override
  3. protected void onCreate(Bundle savedInstanceState) {
  4. super.onCreate(savedInstanceState);
  5. setContentView(R.layout.activity_main);
  6. imageView = (ImageView) findViewById(R.id.imageView);
  7. ClipDrawable clipDrawable = new ClipDrawable(getResources().getDrawable(R.mipmap.dff), Gravity.CENTER_HORIZONTAL,ClipDrawable.HORIZONTAL);
  8. clipDrawable.setLevel(1000);
  9. imageView.setImageDrawable(clipDrawable);
  10. final Timer timer = new Timer();
  11. timer.schedule(new TimerTask() {
  12. @Override
  13. public void run() {
  14. if(number<10000){
  15. MainActivity.this.runOnUiThread(new Runnable() {
  16. @Override
  17. public void run() {
  18. imageView.getDrawable().setLevel(number);
  19. number+=40;
  20. }
  21. });
  22. }else{
  23. timer.cancel();
  24. }
  25. }
  26. },0,30);
  27. }
    private int number =0;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        imageView = (ImageView) findViewById(R.id.imageView);

        ClipDrawable clipDrawable = new ClipDrawable(getResources().getDrawable(R.mipmap.dff), Gravity.CENTER_HORIZONTAL,ClipDrawable.HORIZONTAL);

        clipDrawable.setLevel(1000);

        imageView.setImageDrawable(clipDrawable);

        final Timer timer = new Timer();

        timer.schedule(new TimerTask() {

            @Override

            public void run() {

                if(number<10000){

                    MainActivity.this.runOnUiThread(new Runnable() {

                        @Override

                        public void run() {

                            imageView.getDrawable().setLevel(number);

                            number+=40;

                        }

                    });

                }else{

                    timer.cancel();

                }

            }

        },0,30);

    }

14 绘画使用相关基础 ：

绘制使用到的统一的宽度与高度

  1. private int mWidth = 200;
  2. private int mHeight = 200;
    private int mWidth = 200;

    private int mHeight = 200;

14-1 绘制一个矩形

14-1-1 绘制单色的矩形

效果图：14-1 -1
 
  1. /**
  2. * 创建图片
  3. */
  4. Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
  5. /**
  6. * 创建画布
  7. */
  8. Canvas canvas = new Canvas(bitmap);
  9. /**
  10. * 创建画笔
  11. */
  12. Paint paint = new Paint();
  13. /**
  14. * 设置画笔的颜色
  15. */
  16. paint.setColor(Color.parseColor("#ff6600"));
  17. /**
  18. * 绘制矩形背景
  19. * Draw the specified Rect using the specified paint. The rectangle will
  20. * be filled or framed based on the Style in the paint.
  21. *
  22. * @param left   The left side of the rectangle to be drawn
  23. * @param top    The top side of the rectangle to be drawn
  24. * @param right  The right side of the rectangle to be drawn
  25. * @param bottom The bottom side of the rectangle to be drawn
  26. * @param paint  The paint used to draw the rect
  27. * public void drawRect ( float left, float top, float right, float bottom,
  28. * @NonNull Paint paint){
  29. * native_drawRect(mNativeCanvasWrapper, left, top, right, bottom, paint.getNativeInstance());
  30. *  }
  31. */
  32. canvas.drawRect(0, 0, mWidth, mHeight, paint);
  33. canvas.drawRect(0, 0, mWidth, mHeight, paint);
  34. /**
  35. * 绘制显示的文字
  36. */
  37. Paint textPaint = new Paint();
  38. textPaint.setColor(Color.BLUE);
  39. /**
  40. * 设置搞锯齿
  41. */
  42. textPaint.setAntiAlias(true);
  43. textPaint.setTextSize(15);
  44. /**
  45. * 设置绘制的字体样式
  46. * The default NORMAL typeface object
  47. public static final Typeface DEFAULT;
  48. * The default BOLD typeface object. Note: this may be not actually be bold, depending on what fonts are installed. Call getStyle() to knowfor sure.
  49. public static final Typeface DEFAULT_BOLD;
  50. * The NORMAL style of the default sans serif typeface.
  51. public static final Typeface SANS_SERIF;
  52. *  The NORMAL style of the default serif typeface.
  53. public static final Typeface SERIF;
  54. * The NORMAL style of the default monospace typeface.
  55. public static final Typeface MONOSPACE;
  56. */
  57. textPaint.setTypeface(Typeface.DEFAULT);
  58. /**
  59. * 设置文字的对齐方式
  60. */
  61. textPaint.setTextAlign(Paint.Align.CENTER);
  62. /**
  63. * Draw the text, with origin at (x,y), using the specified paint. The
  64. * origin is interpreted based on the Align setting in the paint.
  65. *
  66. * @第一个参数 text  The text to be drawn
  67. * @第二个参数 x     The x-coordinate of the origin of the text being drawn
  68. * @第三个参数 y     The y-coordinate of the baseline of the text being drawn
  69. * @第四个参数 paint The paint used for the text (e.g. color, size, style)
  70. */
  71. canvas.drawText("hollow", mWidth / 2, 20, textPaint);
  72. /**
  73. * 分别绘制不同样式的文字
  74. */
  75. textPaint.setTypeface(Typeface.DEFAULT_BOLD);
  76. canvas.drawText("DEFAULT_BOLD", mWidth / 2, 45, textPaint);
  77. textPaint.setTypeface(Typeface.SANS_SERIF);
  78. canvas.drawText("SANS_SERIF", mWidth / 2, 66, textPaint);
  79. textPaint.setTypeface(Typeface.SERIF);
  80. canvas.drawText("SERIF", mWidth / 2, 96, textPaint);
  81. textPaint.setTypeface(Typeface.MONOSPACE);
  82. canvas.drawText("MONOSPACE", mWidth / 2, 116, textPaint);
  83. /**
  84. * 将绘制的图片设置显示
  85. */
  86. imageView.setImageBitmap(bitmap);

        /**

         * 创建图片

         */

        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);

        /**

         * 创建画布

         */

        Canvas canvas = new Canvas(bitmap);

        /**

         * 创建画笔

         */

        Paint paint = new Paint();

        /**

         * 设置画笔的颜色

         */

        paint.setColor(Color.parseColor("#ff6600"));

        /**

         * 绘制矩形背景

         * Draw the specified Rect using the specified paint. The rectangle will

         * be filled or framed based on the Style in the paint.

         *

         * @param left   The left side of the rectangle to be drawn

         * @param top    The top side of the rectangle to be drawn

         * @param right  The right side of the rectangle to be drawn

         * @param bottom The bottom side of the rectangle to be drawn

         * @param paint  The paint used to draw the rect

         * public void drawRect ( float left, float top, float right, float bottom,

         * @NonNull Paint paint){

         * native_drawRect(mNativeCanvasWrapper, left, top, right, bottom, paint.getNativeInstance());

         *  }

         */

        canvas.drawRect(0, 0, mWidth, mHeight, paint);

        canvas.drawRect(0, 0, mWidth, mHeight, paint);

        /**

         * 绘制显示的文字

         */

        Paint textPaint = new Paint();

        textPaint.setColor(Color.BLUE);

        /**

         * 设置搞锯齿

         */

        textPaint.setAntiAlias(true);

        textPaint.setTextSize(15);

        /**

         * 设置绘制的字体样式

         * The default NORMAL typeface object

                public static final Typeface DEFAULT;

         * The default BOLD typeface object. Note: this may be not actually be bold, depending on what fonts are installed. Call getStyle() to knowfor sure.

                public static final Typeface DEFAULT_BOLD;

         * The NORMAL style of the default sans serif typeface.

                public static final Typeface SANS_SERIF;

         *  The NORMAL style of the default serif typeface.

                public static final Typeface SERIF;

         * The NORMAL style of the default monospace typeface.

            public static final Typeface MONOSPACE;

        */

        textPaint.setTypeface(Typeface.DEFAULT);

        /**

         * 设置文字的对齐方式

         */

        textPaint.setTextAlign(Paint.Align.CENTER);

        /**

         * Draw the text, with origin at (x,y), using the specified paint. The

         * origin is interpreted based on the Align setting in the paint.

         *

         * @第一个参数 text  The text to be drawn

         * @第二个参数 x     The x-coordinate of the origin of the text being drawn

         * @第三个参数 y     The y-coordinate of the baseline of the text being drawn

         * @第四个参数 paint The paint used for the text (e.g. color, size, style)

         */

        canvas.drawText("hollow", mWidth / 2, 20, textPaint);

        /**

         * 分别绘制不同样式的文字

         */

        textPaint.setTypeface(Typeface.DEFAULT_BOLD);

        canvas.drawText("DEFAULT_BOLD", mWidth / 2, 45, textPaint);

        textPaint.setTypeface(Typeface.SANS_SERIF);

        canvas.drawText("SANS_SERIF", mWidth / 2, 66, textPaint);

        textPaint.setTypeface(Typeface.SERIF);

        canvas.drawText("SERIF", mWidth / 2, 96, textPaint);

        textPaint.setTypeface(Typeface.MONOSPACE);

        canvas.drawText("MONOSPACE", mWidth / 2, 116, textPaint);

        /**

         * 将绘制的图片设置显示

         */

        imageView.setImageBitmap(bitmap);
 

在这里设置绘制出来的矩形颜色为 #00ff66 
当然我们也可以绘制出来相应的具有渐变效果的矩形，我们只需要将上面的paint.setColor()这个方法进行相应的替换

14-1-2 绘制渐变效果的矩形

效果图 14-1-2：
 
  1. /**
  2. * 创建图片
  3. */
  4. Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
  5. /**
  6. * 创建画布
  7. */
  8. Canvas canvas = new Canvas(bitmap);
  9. /**
  10. * 创建画笔
  11. */
  12. Paint paint = new Paint();
  13. /**
  14. * 创建背景使用到的渐变颜色
  15. */
  16. int[] colors = new int[]{Color.YELLOW, Color.GREEN, Color.BLUE};
  17. /**
  18. * 定义渐变开始的位置信息
  19. */
  20. float[] postions = new float[]{0f, 0.5f, 1.0f};
  21. /**
  22. * 创建渐变背景
  23. */
  24. //水平方向线性渐变
  25. LinearGradient linearGradient = new LinearGradient(0, 0, mWidth, mHeight, colors, postions, Shader.TileMode.REPEAT);
  26. SweepGradient sweepGradient = new SweepGradient(mWidth / 2, mHeight / 2, colors, postions);
  27. /**
  28. * 将渐变的背景设置旋转45度，设置为水平方向的渐变
  29. */
  30. Matrix matrix = new Matrix();
  31. matrix.setRotate(45, mWidth / 2, mHeight / 2);
  32. linearGradient.setLocalMatrix(matrix);
  33. paint.setShader(linearGradient);
  34. canvas.drawRect(0, 0, mWidth, mHeight, paint);
  35. /**
  36. * 将绘制的图片设置显示
  37. */
  38. imageView.setImageBitmap(bitmap);
  39. }
        /**

         * 创建图片

         */

        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);

        /**

         * 创建画布

         */

        Canvas canvas = new Canvas(bitmap);

        /**

         * 创建画笔

         */

        Paint paint = new Paint();

        /**

         * 创建背景使用到的渐变颜色

         */

        int[] colors = new int[]{Color.YELLOW, Color.GREEN, Color.BLUE};

        /**

         * 定义渐变开始的位置信息

         */

        float[] postions = new float[]{0f, 0.5f, 1.0f};

        /**

         * 创建渐变背景

         */

        //水平方向线性渐变

        LinearGradient linearGradient = new LinearGradient(0, 0, mWidth, mHeight, colors, postions, Shader.TileMode.REPEAT);

        SweepGradient sweepGradient = new SweepGradient(mWidth / 2, mHeight / 2, colors, postions);

        /**

         * 将渐变的背景设置旋转45度，设置为水平方向的渐变

         */

        Matrix matrix = new Matrix();

        matrix.setRotate(45, mWidth / 2, mHeight / 2);

        linearGradient.setLocalMatrix(matrix);

        paint.setShader(linearGradient);

        canvas.drawRect(0, 0, mWidth, mHeight, paint);

        /**

         * 将绘制的图片设置显示

         */

        imageView.setImageBitmap(bitmap);

    }

14-2 绘制多个点

效果图：14-2
 
 
  1. /**
  2. * 创建图片
  3. */
  4. Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
  5. /**
  6. * 创建画布
  7. */
  8. Canvas canvas = new Canvas(bitmap);
  9. /**
  10. * 创建画笔
  11. */
  12. Paint paint = new Paint();
  13. paint.setAntiAlias(true);
  14. paint.setColor(Color.parseColor("#ff6600"));
  15. /**
  16. * 画矩形背景
  17. */
  18. canvas.drawRect(0, 0, mWidth, mHeight, paint);
  19. /**
  20. * 画点操作
  21. */
  22. //定义点的位置
  23. float[] pts = new float[]{
  24. 10, 10,
  25. 20, 20,
  26. 30, 30,
  27. 50, 50
  28. };
  29. //设置画出的点的颜色为白色
  30. paint.setColor(Color.parseColor("#ffffff"));
  31. //设置画笔的宽度
  32. paint.setStrokeWidth(2);
  33. //画点操作
  34. canvas.drawPoints(pts, 0, pts.length, paint);
  35. //将画出的图形设置显示到ImageView上
  36. imageView.setImageBitmap(bitmap);
 /**

         * 创建图片

         */

        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);

        /**

         * 创建画布

         */

        Canvas canvas = new Canvas(bitmap);

        /**

         * 创建画笔

         */

        Paint paint = new Paint();

        paint.setAntiAlias(true);

        paint.setColor(Color.parseColor("#ff6600"));

        /**

         * 画矩形背景

         */

        canvas.drawRect(0, 0, mWidth, mHeight, paint);

        /**

         * 画点操作

         */

        //定义点的位置

        float[] pts = new float[]{

                10, 10,

                20, 20,

                30, 30,

                50, 50

        };

        //设置画出的点的颜色为白色

        paint.setColor(Color.parseColor("#ffffff"));

        //设置画笔的宽度

        paint.setStrokeWidth(2);

        //画点操作

        canvas.drawPoints(pts, 0, pts.length, paint);

        //将画出的图形设置显示到ImageView上

        imageView.setImageBitmap(bitmap);
 
 
 

14-3 绘制多条直线

 
效果图：14-3
 
 
  1. Bitmap bimap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
  2. Canvas canvas = new Canvas(bimap);
  3. Paint paint = new Paint();
  4. paint.setColor(Color.parseColor("#ff6600"));
  5. /**
  6. * 画矩形背景
  7. */
  8. canvas.drawRect(0, 0, mWidth, mHeight, paint);
  9. /**
  10. * 画直线
  11. * 每一条直线都是由两个点构成，而每个点则是由两个坐标构成
  12. */
  13. float[] floats = new float[]{
  14. 50, 50, 180, 50,
  15. 50, 80, 180, 80,
  16. 50, 100, 190, 100
  17. };
  18. paint.setStrokeWidth(5);
  19. paint.setColor(Color.WHITE);
  20. /**
  21. * 画多条直线
  22. */
  23. canvas.drawLines(floats, 0, floats.length, paint);
  24. imageView.setImageBitmap(bimap);

        Bitmap bimap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bimap);

        Paint paint = new Paint();

        paint.setColor(Color.parseColor("#ff6600"));

        /**

         * 画矩形背景

         */

        canvas.drawRect(0, 0, mWidth, mHeight, paint);

        /**

         * 画直线

         * 每一条直线都是由两个点构成，而每个点则是由两个坐标构成

         */

        float[] floats = new float[]{

                50, 50, 180, 50,

                50, 80, 180, 80,

                50, 100, 190, 100

        };

        paint.setStrokeWidth(5);

        paint.setColor(Color.WHITE);

        /**

         * 画多条直线

         */

        canvas.drawLines(floats, 0, floats.length, paint);

        imageView.setImageBitmap(bimap);
 

14-4 绘制椭圆或者圆

效果图:14-4 
 
 
  1. Bitmap bimap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
  2. Canvas canvas = new Canvas(bimap);
  3. Paint paint = new Paint();
  4. paint.setAntiAlias(true);
  5. paint.setColor(Color.parseColor("#ff6600"));
  6. /**
  7. * 画矩形背景
  8. */
  9. canvas.drawRect(0, 0, mWidth, mHeight, paint);
  10. paint.setColor(Color.WHITE);
  11. /**
  12. * 定义矩形的大小
  13. */
  14. RectF rect = new RectF();
  15. rect.left = 10;
  16. rect.top = 10;
  17. rect.right = 100;
  18. rect.bottom = 100;
  19. /**
  20. * 当对应的值设置成为一定的极限后，就会出现相应的圆形 或者 是椭圆
  21. */
  22. /**
  23. * 设置四个角在x轴方向与y轴方向的角度
  24. */
  25. float roatx = 10;
  26. float roaty = 10;
  27. /**
  28. * 绘制椭圆 或者 是圆形
  29. */
  30. canvas.drawRoundRect(rect, roatx, roaty, paint);
  31. RectF rect1 = new RectF();
  32. rect1.left = 100;
  33. rect1.top = 10;
  34. rect1.right = 200;
  35. rect1.bottom = 110;
  36. /**
  37. * 设置的角度正好的宽与高的一半
  38. * 将画出圆形
  39. */
  40. float roatx1 = 50;
  41. float roaty2 = 50;
  42. canvas.drawRoundRect(rect1, roatx1, roaty2, paint);
        Bitmap bimap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bimap);

        Paint paint = new Paint();

        paint.setAntiAlias(true);

        paint.setColor(Color.parseColor("#ff6600"));

        /**

         * 画矩形背景

         */

        canvas.drawRect(0, 0, mWidth, mHeight, paint);

        paint.setColor(Color.WHITE);

        /**

         * 定义矩形的大小

         */

        RectF rect = new RectF();

        rect.left = 10;

        rect.top = 10;

        rect.right = 100;

        rect.bottom = 100;

        /**

         * 当对应的值设置成为一定的极限后，就会出现相应的圆形 或者 是椭圆

         */

        /**

         * 设置四个角在x轴方向与y轴方向的角度

         */

        float roatx = 10;

        float roaty = 10;

        /**

         * 绘制椭圆 或者 是圆形

         */

        canvas.drawRoundRect(rect, roatx, roaty, paint);

        RectF rect1 = new RectF();

        rect1.left = 100;

        rect1.top = 10;

        rect1.right = 200;

        rect1.bottom = 110;

        /**

         * 设置的角度正好的宽与高的一半

         * 将画出圆形

         */

        float roatx1 = 50;

        float roaty2 = 50;

        canvas.drawRoundRect(rect1, roatx1, roaty2, paint);
 

15-5 绘制一个时钟

效果图：15-5 
 
 

15-5-1 绘制表盘

  1. /**
  2. * 绘制表盘
  3. */
  4. private Bitmap drawDail() {
  5. Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);
  6. Canvas canvas = new Canvas(bitmap);
  7. Paint paint = new Paint();
  8. paint.setColor(Color.BLUE);
  9. paint.setStrokeWidth(5);
  10. paint.setAntiAlias(true);
  11. paint.setStyle(Paint.Style.STROKE);
  12. canvas.save();
  13. /**
  14. * 绘制外周表盘
  15. */
  16. canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2 - 10, paint);
  17. /**
  18. * 绘制中心点圆
  19. */
  20. paint.setStyle(Paint.Style.FILL);
  21. canvas.drawCircle(mWidth / 2, mHeight / 2, 5, paint);
  22. /**
  23. * 绘制刻度
  24. */
  25. paint.setColor(Color.BLACK);
  26. /**
  27. * 这里采用的绘制方式是只绘制竖直方向上的一条直线，每绘制一次就将整个画布旋转30度
  28. */
  29. for (int i = 0; i < 12; i++) {
  30. if (i % 3 == 0) {
  31. paint.setStrokeWidth(5);
  32. canvas.drawLine(mWidth / 2, 13, mWidth / 2, 23, paint);
  33. } else {
  34. paint.setStrokeWidth(3);
  35. canvas.drawLine(mWidth / 2, 13, mWidth / 2, 20, paint);
  36. }
  37. canvas.rotate(30, mWidth / 2, mHeight / 2);
  38. }
  39. /**
  40. * 到这里我们基本的一个表盘就已经绘制出来了
  41. */
  42. canvas.restore();
  43. return bitmap;
  44. }
   /**

     * 绘制表盘

     */

    private Bitmap drawDail() {

        Bitmap bitmap = Bitmap.createBitmap(mWidth, mHeight, Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(bitmap);

        Paint paint = new Paint();

        paint.setColor(Color.BLUE);

        paint.setStrokeWidth(5);

        paint.setAntiAlias(true);

        paint.setStyle(Paint.Style.STROKE);

        canvas.save();

        /**

         * 绘制外周表盘

         */

        canvas.drawCircle(mWidth / 2, mHeight / 2, mWidth / 2 - 10, paint);

        /**

         * 绘制中心点圆

         */

        paint.setStyle(Paint.Style.FILL);

        canvas.drawCircle(mWidth / 2, mHeight / 2, 5, paint);

        /**

         * 绘制刻度

         */

        paint.setColor(Color.BLACK);

        /**

         * 这里采用的绘制方式是只绘制竖直方向上的一条直线，每绘制一次就将整个画布旋转30度

         */

        for (int i = 0; i < 12; i++) {

            if (i % 3 == 0) {

                paint.setStrokeWidth(5);

                canvas.drawLine(mWidth / 2, 13, mWidth / 2, 23, paint);

            } else {

                paint.setStrokeWidth(3);

                canvas.drawLine(mWidth / 2, 13, mWidth / 2, 20, paint);

            }

            canvas.rotate(30, mWidth / 2, mHeight / 2);

        }

        /**

         * 到这里我们基本的一个表盘就已经绘制出来了

         */

        canvas.restore();

        return bitmap;

    }

15-5-2：绘制指针

  1. private Bitmap drawModelSign(Bitmap bitmap) {
  2. Bitmap bitmap1 = Bitmap.createBitmap(bitmap);
  3. Canvas canvas = new Canvas(bitmap1);
  4. paint.setAntiAlias(true);
  5. paint.setColor(Color.YELLOW);
  6. paint.setStrokeWidth(5);
  7. /**
  8. * 获取时间数据
  9. */
  10. Calendar calendar = Calendar.getInstance();
  11. int hours = calendar.get(Calendar.HOUR);
  12. int second = calendar.get(Calendar.SECOND);
  13. int minute = calendar.get(Calendar.MINUTE);
  14. /**
  15. * 指针的长度
  16. */
  17. float length = mHeight / 2;
  18. /**
  19. * 旋转角度
  20. */
  21. float degrees = 0;
  22. /**
  23. * 时针
  24. */
  25. canvas.save();
  26. degrees = 30 * hours + minute / 60 * 30;
  27. canvas.rotate(degrees, mWidth / 2, mHeight / 2);
  28. canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, length * 8 / 10, paint);
  29. canvas.restore();
  30. /**
  31. * 分针
  32. */
  33. canvas.save();
  34. paint.setStrokeWidth(3);
  35. degrees = 6 * minute + second / 60 * 6;
  36. canvas.rotate(degrees, mWidth / 2, mHeight / 2);
  37. canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, length * 6 / 10, paint);
  38. canvas.restore();
  39. /**
  40. * 秒针
  41. */
  42. canvas.save();
  43. paint.setStrokeWidth(2);
  44. degrees = 6 * second;
  45. canvas.rotate(degrees, mWidth / 2, mHeight / 2);
  46. canvas.drawLine(mWidth / 2, mHeight / 2 + 20, mWidth / 2, length * 3 / 10, paint);
  47. canvas.restore();
  48. /**
  49. * 绘制显示24小时格式的时间 文字
  50. */
  51. canvas.save();
  52. paint.setStrokeWidth(2);
  53. paint.setColor(Color.RED);
  54. String text = calendar.get(Calendar.HOUR_OF_DAY) + ":" + minute + ":" + second;
  55. /**
  56. * Draw the text, with origin at (x,y), using the specified paint. The
  57. * origin is interpreted based on the Align setting in the paint.
  58. *
  59. * @param text  The text to be drawn
  60. * @param x     The x-coordinate of the origin of the text being drawn
  61. * @param y     The y-coordinate of the baseline of the text being drawn
  62. * @param paint The paint used for the text (e.g. color, size, style)
  63. */
  64. canvas.drawText(text, mWidth / 2 - 25, mHeight / 2 - 45, paint);
  65. canvas.restore();
  66. return bitmap1;
  67. }
 private Bitmap drawModelSign(Bitmap bitmap) {

        Bitmap bitmap1 = Bitmap.createBitmap(bitmap);

        Canvas canvas = new Canvas(bitmap1);

        paint.setAntiAlias(true);

        paint.setColor(Color.YELLOW);

        paint.setStrokeWidth(5);

        /**

         * 获取时间数据

         */

        Calendar calendar = Calendar.getInstance();

        int hours = calendar.get(Calendar.HOUR);

        int second = calendar.get(Calendar.SECOND);

        int minute = calendar.get(Calendar.MINUTE);

        /**

         * 指针的长度

         */

        float length = mHeight / 2;

        /**

         * 旋转角度

         */

        float degrees = 0;

        /**

         * 时针

         */

        canvas.save();

        degrees = 30 * hours + minute / 60 * 30;

        canvas.rotate(degrees, mWidth / 2, mHeight / 2);

        canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, length * 8 / 10, paint);

        canvas.restore();

        /**

         * 分针

         */

        canvas.save();

        paint.setStrokeWidth(3);

        degrees = 6 * minute + second / 60 * 6;

        canvas.rotate(degrees, mWidth / 2, mHeight / 2);

        canvas.drawLine(mWidth / 2, mHeight / 2, mWidth / 2, length * 6 / 10, paint);

        canvas.restore();

        /**

         * 秒针

         */

        canvas.save();

        paint.setStrokeWidth(2);

        degrees = 6 * second;

        canvas.rotate(degrees, mWidth / 2, mHeight / 2);

        canvas.drawLine(mWidth / 2, mHeight / 2 + 20, mWidth / 2, length * 3 / 10, paint);

        canvas.restore();

        /**

         * 绘制显示24小时格式的时间 文字

         */

        canvas.save();

        paint.setStrokeWidth(2);

        paint.setColor(Color.RED);

        String text = calendar.get(Calendar.HOUR_OF_DAY) + ":" + minute + ":" + second;

        /**

         * Draw the text, with origin at (x,y), using the specified paint. The

         * origin is interpreted based on the Align setting in the paint.

         *

         * @param text  The text to be drawn

         * @param x     The x-coordinate of the origin of the text being drawn

         * @param y     The y-coordinate of the baseline of the text being drawn

         * @param paint The paint used for the text (e.g. color, size, style)

         */

        canvas.drawText(text, mWidth / 2 - 25, mHeight / 2 - 45, paint);

        canvas.restore();

        return bitmap1;

    }

15-5-3 创建动态的时钟

  1. @Override
  2. protected void onDestroy() {
  3. super.onDestroy();
  4. if (timer != null) {
  5. timer.cancel();
  6. }
  7. }
  8. private int mWidth = 200;
  9. private int mHeight = 200;
  10. private Timer timer;
  11. private Bitmap bitmap;
  12. @Override
  13. protected void onCreate(Bundle savedInstanceState) {
  14. super.onCreate(savedInstanceState);
  15. setContentView(R.layout.activity_main);
  16. imageView = (ImageView) findViewById(R.id.imageView);
  17. /**
  18. * 获取表盘
  19. */
  20. bitmap = drawDail();
  21. /**
  22. * 创建定时器
  23. */
  24. timer = new Timer();
  25. /**
  26. * 每间隔一秒时间来绘制一次
  27. */
  28. timer.schedule(new TimerTask() {
  29. @Override
  30. public void run() {
  31. MainActivity.this.runOnUiThread(new Runnable() {
  32. @Override
  33. public void run() {
  34. Bitmap bitmaps = drawModelSign(bitmap);
  35. imageView.setImageBitmap(bitmaps);
  36. }
  37. });
  38. }
  39. }, 0, 1000);
  40. }
    @Override

    protected void onDestroy() {

        super.onDestroy();

        if (timer != null) {

            timer.cancel();

        }

    }

    private int mWidth = 200;

    private int mHeight = 200;

    private Timer timer;

    private Bitmap bitmap;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        imageView = (ImageView) findViewById(R.id.imageView);

        /**

         * 获取表盘

         */

        bitmap = drawDail();

        /**

         * 创建定时器

         */

        timer = new Timer();

        /**

         * 每间隔一秒时间来绘制一次

         */

        timer.schedule(new TimerTask() {

            @Override

            public void run() {

                MainActivity.this.runOnUiThread(new Runnable() {

                    @Override

                    public void run() {

                        Bitmap bitmaps = drawModelSign(bitmap);

                        imageView.setImageBitmap(bitmaps);

                    }

                });

            }

        }, 0, 1000);

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

Android多种样式的进度条的更多相关文章

  1. Android 使用ProgressBar实现进度条

    ProgressBar简介ProgressBar是进度条组件,通常用于向用户展示某个耗时操作完成的进度,而不让用户感觉是程序失去了响应,从而更好地提升用户界面的友好型. 课程目标(1)制定Progre ...

  2. Android学习笔记- ProgressBar(进度条)

    本节引言: 本节给大家带来的是Android基本UI控件中的ProgressBar(进度条),ProgressBar的应用场景很多,比如 用户登录时,后台在发请求,以及等待服务器返回信息,这个时候会用 ...

  3. android 对话框中的进度条 (ProgressDialog)

    from:http://byandby.iteye.com/blog/817214 显然要定义对话框进度条就要用ProgressDialog,首先我们需要创建ProgressDialog对象,当然这里 ...

  4. Android学习笔记(24):进度条组件ProgressBar及其子类

    ProgressBar作为进度条组件使用,它还派生了SeekBar(拖动条)和RatingBar(星级评分条). ProgressBar支持的XML属性: Attribute Name Related ...

  5. android中SeekBar拖动进度条的使用及事件监听

    下面和大家分享一下android中SeekBar拖动进度条的使用,以及事件监听.拖动进度条的事件监听需要实现SeekBar.OnSeekBarChangeListener接口,调用SeekBar的se ...

  6. Android开发 PorgressBar（进度条）的使用

    圆环进度条(默认)和水平进度条: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  7. Android学习笔记：进度条ProgressBar的使用以及与AsyncTask的配合使用

    ProgressBar时android用于显示进度的组件.当执行一个比较耗时的操作(如io操作.网络操作等),为了避免界面没有变化让用户体验降低,提供一个进度条可以让用户知道程序还在运行. 一.Pro ...

  8. Android 打造形形色色的进度条 实现可以如此简单

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/43371299 ,本文出自:[张鸿洋的博客] 1.概述 最近需要用进度条,秉着不重 ...

  9. Android 自定义 View 圆形进度条总结

    Android 自定义圆形进度条总结 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 微信公众号:牙锅子 源码:CircleProgress 文中如有纰漏,欢迎大家留言指出. 最近 ...

随机推荐

  1. JavaScript生成斐波那契数列

    常规写法 https://cn.bing.com/search?q=js+fibonacci+sequence&pc=MOZI&form=MOZSBR //Fibonacci func ...

  2. 在window系统上安装redis服务-Invalid argument during startup: Failed to open the .conf

    当前redis版本: redis-cli -v redis-cli 3.0.503 网上给的命令(在redis所在文件夹下执行): redis-server –service-install redi ...

  3. apache-jmeter-3.3的简单压力测试使用方法

    注: 本文参考:http://www.cnblogs.com/TankXiao/p/4045439.html http://blog.csdn.net/lan_shu/article/details/ ...

  4. vivado中使用ROM IP核

    1.在project中选择IP Catalog 在IP Catalog中选择---->Block Memory Generator------>RAMs&ROMs&BRAM ...

  5. 搬运，B站up主『凉风有性胖次君』日日日日日日日日日日在校园

    这个视频超有毒,简直丧心病狂,我竟无言以对,凉风是有多大的耐性,搜集了这么多元素,哈哈哈~~~赶紧搬运,怕哪天B站都给封了 也就是说世界本来喜欢的是言叶,但是言叶爱上了一直在电车上暗恋她的诚哥,于是世 ...

  6. 【原创】大数据基础之Spark（4）RDD原理及代码解析

    一 简介 spark核心是RDD,官方文档地址:https://spark.apache.org/docs/latest/rdd-programming-guide.html#resilient-di ...

  7. 【原创】大叔经验分享（23）spark sql插入表时的文件个数研究

    spark sql执行insert overwrite table时,写到新表或者新分区的文件个数,有可能是200个,也有可能是任意个,为什么会有这种差别? 首先看一下spark sql执行inser ...

  8. 再见，Python！你好，Go语言

    Go 语言诞生于谷歌,由计算机领域的三位宗师级大牛 Rob Pike.Ken Thompson 和 Robert Griesemer 写成.由于出身名门,Go 在诞生之初就吸引了大批开发者的关注.诞生 ...

  9. JMeter Ultimate Thread Group阶梯式减压

    选择或者搜索Stantard Set标准集, 我们要用的Ultimate Thread Group最终线程组包含在里面: 下载完成之后,JMeter会自动重启. 添加最终线程组: 还是以打开博客园首页 ...

  10. SQL 概述

    SQL是用于在数据库中存储,操作和检索数据的标准语言. 本教程教你如何使用SQL:MySQL,SQL Server,MS Access,Oracle,Sybase,Informix,Postgres和 ...