Android多种样式的进度条

来源：互联网发布：商务通弹窗js代码编辑：程序博客网时间：2024/06/05 19:28

---- 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使用详情可查阅点击打开链接

<?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标签的文件

<?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标签的文件

<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代码中动态设置进度

 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标签文件
<?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标签文件
<?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

<?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文件

<?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标签文件
<?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 创建显示进度的图形

<?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标签文件

<?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
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
官方推荐的使用方式为
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方法，来进行重新绘制
 @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 设置并初始化相关的变量
其中使用到一些变量，比如绘制文字的颜色，绘制进度的颜色，高度等等。
这里使用的方法是在成员变量中进行了设置默认的值
    /**     * 定义一个画笔     */    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;
第一个变量是我们绘制过程中使用到的画笔，我们这里在类加载的时候进行了初时化操作，同时也给这个画笔设置一些对应的属性值
            private  void  initFunction(){                mPaint.setTextSize(mTextSize);        mPaint.setColor(mTextColor);    }    
我们这里设置的是显示文字的大小与颜色（如果用到测量的话，在测量的时候可能会用到要测量绘制文字的大小，而我们这里是通过画笔的属性进行测量的）

变量mRealWidth是我们实际中需要绘制的进度条的实际宽度，可以在onMeaure方法中进行初始化（请查看下面的代码块）
也可以在方法中进行初始化
    @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的方法(这是一些工具类)
    /**     * 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());    }
走到这里，我们的自定义进度条就可以使用了
当然我们可以设置初始化这些变量的值
 /**     * 设置已绘制的进度条的颜色     *     * @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文件中
定义自定义属性：绘制文本的颜色
<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="HorizonProgressBarWidthNumber">        <attr name="textProColor" format="color" />    </declare-styleable></resources>
在构造方法中获取到自定义属性的值，并进行相应的赋值操作

    /**     * 获取自定义属性操作     * @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方法进行一些测量

    @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代码中

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方法中进行的绘制

@Overrideprotected 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();}

使用ClipDrawble实现图片的缩放

效果图：

在这里是使用的Clipdrawable 类的api来实现的

    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 绘画使用相关基础：

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

    private int mWidth = 200;    private int mHeight = 200;

14-1 绘制一个矩形

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

效果图：14-1 -1

                   /**         * 创建图片         */        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：

        /**         * 创建图片         */        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

 /**         * 创建图片         */        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

                 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

        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 绘制表盘

   /**     * 绘制表盘     */    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：绘制指针

 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 创建动态的时钟

        @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);    }

0 0