高级UI-画笔Paint

在UI这一块，谈到自定义，就离不开画笔和画布的使用话题，在自定义控件的时候，为了做出炫酷的效果，我们往往会使用画笔和画布，那么这里我们就先来看看画笔的使用吧

简单使用例子

自定义一个View

public class PaintView extends View {private Paint mPaint;public PaintView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);mPaint = new Paint();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//重置mPaint.reset();//画笔设置mPaint.setColor(Color.RED);mPaint.setAlpha(255);//样式设置
//        mPaint.setStyle(Paint.Style.FILL);//填充mPaint.setStyle(Paint.Style.STROKE);//描边
//        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//填充及描边//画笔宽度设置mPaint.setStrokeWidth(20);//线帽设置mPaint.setStrokeCap(Paint.Cap.BUTT);//无
//        mPaint.setStrokeCap(Paint.Cap.ROUND);//圆形
//        mPaint.setStrokeCap(Paint.Cap.SQUARE);//方形//线条交叉处
//        mPaint.setStrokeJoin(Paint.Join.BEVEL);//直角
//        mPaint.setStrokeJoin(Paint.Join.ROUND);//圆角
//        mPaint.setStrokeJoin(Paint.Join.MITER);//锐角Path path = new Path();path.moveTo(100,100);path.lineTo(300,100);path.lineTo(500,300);mPaint.setStrokeJoin(Paint.Join.BEVEL);canvas.drawPath(path,mPaint);path.moveTo(100,400);path.lineTo(300,400);path.lineTo(500,700);mPaint.setStrokeJoin(Paint.Join.MITER);canvas.drawPath(path,mPaint);path.moveTo(100,800);path.lineTo(300,800);path.lineTo(500,1100);mPaint.setStrokeJoin(Paint.Join.ROUND);canvas.drawPath(path,mPaint);}
}

画了三条线

Paint的使用说明

Paint在是使用的时候，一般会有两个类参与，一个负责图形绘制，一个负责文字绘制
在使用前一般重置Paint，调用reset()
设置方法一般都对应着获取方法

图形绘制相关方法

• 设置颜色

mPaint.setColor(Color.RED);

• 设置透明度0~255

mPaint.setAlpha(255);

• 设置画笔的样式

mPaint.setStyle(Paint.Style.FILL);//填充
//mPaint.setStyle(Paint.Style.STROKE);//描边
//mPaint.setStyle(Paint.Style.FILL_AND_STROKE);//填充及描边

• 设置画笔的宽度

mPaint.setStrokeWidth(50);

• 设置线帽

mPaint.setStrokeCap(Paint.Cap.BUTT);//无
//mPaint.setStrokeCap(Paint.Cap.ROUND);//圆形
//mPaint.setStrokeCap(Paint.Cap.SQUARE);//方形

• 设置线条交叉处样式

mPaint.setStrokeJoin(Paint.Join.BEVEL);//直角
//mPaint.setStrokeJoin(Paint.Join.ROUND);//圆角
//mPaint.setStrokeJoin(Paint.Join.MITER);//锐角

• 设置防锯齿

mPaint.setAntiAlias(true);

• 设置图像抖动处理

mPaint.setDither(true);

文字绘制相关方法

• 设置字符行间距

mPaint.setFontSpacing(5);

• 设置字符之间的间距

mPaint.getLetterSpacing(5);

• 设置文本删除线

mPaint.setStrikeThruText(true);

• 设置下划线

mPaint.setUnderlineText(true);

• 设置文本大小

mPaint.setTextSize(textSize);

• 设置字体类型

mPaint.setTypeface(Typeface.BOLD);

• 加载自定义字体

Typeface.create(familyName, style);

• 设置文字倾斜,默认0，官方推荐的-0.25f是斜体

mPaint.setTextSkewX(-0.25f);

• 设置文本对齐方式

mPaint.setTextAlign(Align.LEFT);
mPaint.setTextAlign(Align.CENTER);
mPaint.setTextAlign(Align.RIGHT);

• 计算制定长度的字符串（字符长度、字符个数、显示的时候真实的长度）

int breadText = mPaint.breakText(text, measureForwards, maxWidth, measuredWidth);

• 获取文本的矩形区域（宽高）Rect bounds

mPaint.getTextBounds(text, index, count, bounds)
mPaint.getTextBounds(text, start, end, bounds)

• 获取文本的宽度，比较粗略

float measureText = mPaint.measureText(str);

• 获取文本的宽度，比较精准

int textWidths = mPaint.getTextWidths(str, measuredWidth);

文本的基线问题

在绘制文本的时候，事宜基准线为准的，但有时我们在绘制的时候又不以基准线稳准，那么就需要通过计算去获得位置了

canvas.drawText(x,y)这个y并不是text的左上角，而是以baseline为基准的
通过获得相对于基准线的位置，从而计算出需要的位置，负值表示在基准线上方，正值表示在基准线下方

FontMetrics fontMetrics = mPaint.getFontMetrics();
fontMetrics.top;
fontMetrics.ascent;
fontMetrics.descent;
fontMetrics.bottom;

自定义ProgressBar实现

定义自定义属性

<resources><declare-styleable name="CustomProgressBar"><attr name="roundProgressColor" format="color" /><attr name="roundColor" format="color" /><attr name="roundWidth" format="dimension" /><attr name="textSize" format="dimension" /><attr name="textColor" format="color" /><attr name="max" format="integer" /><attr name="min" format="integer" /><attr name="textShow" format="boolean" /><attr name="style"><enum name="STROKE" value="0" /><enum name="FILL" value="1" />attr>declare-styleable>
resources>

自定义ProgressBar

public class CustomProgressBar extends View {public static final int STROKE = 0;public static final int FILL = 1;private int min;private int roundColor;private int roundProgressColor;private float roundWidth;private int style;private int textColor;private boolean textShow;private float textSize;private Paint paint;private int max;private int progress;public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {super(context, attrs);//定义画笔paint = new Paint();//获得自定义属性TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);max = typedArray.getInteger(R.styleable.CustomProgressBar_max, 100);min = typedArray.getInteger(R.styleable.CustomProgressBar_min, 80);roundColor = typedArray.getColor(R.styleable.CustomProgressBar_roundColor, Color.RED);roundProgressColor = typedArray.getColor(R.styleable.CustomProgressBar_roundProgressColor, Color.GRAY);roundWidth = typedArray.getDimension(R.styleable.CustomProgressBar_roundWidth, 10);style = typedArray.getInt(R.styleable.CustomProgressBar_style, 0);textColor = typedArray.getColor(R.styleable.CustomProgressBar_textColor, Color.GREEN);textShow = typedArray.getBoolean(R.styleable.CustomProgressBar_textShow, true);textSize = typedArray.getDimension(R.styleable.CustomProgressBar_textSize, 15);typedArray.recycle();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//画默认的外层圆环int center = getWidth() / 2;float radius = center - roundWidth / 2;paint.setColor(roundColor);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(roundWidth);paint.setAntiAlias(true);canvas.drawCircle(center, center, radius, paint);//画进度百分比paint.setColor(textColor);paint.setStrokeWidth(0);paint.setTextSize(textSize);paint.setTypeface(Typeface.DEFAULT_BOLD);int precent = (int) (progress / (float) max * 100);if (textShow && style == STROKE) {canvas.drawText(precent + "%", (getWidth() - paint.measureText(precent + "%s")) / 2F,(getHeight() - (paint.descent() + paint.ascent())) / 2F, paint);}//画圆弧paint.setColor(roundProgressColor);paint.setStrokeWidth(roundWidth);RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);switch (style) {case STROKE:paint.setStyle(Paint.Style.STROKE);canvas.drawArc(oval, 0, 360 * precent / 100, false, paint);break;case FILL:paint.setStyle(Paint.Style.FILL_AND_STROKE);canvas.drawArc(oval, 0, 360 * precent / 100, true, paint);break;}}public int getMin() {return min;}public void setMin(int min) {this.min = min;}public synchronized int getMax() {return max;}public synchronized void setMax(int max) {if (max < 0) {throw new IllegalArgumentException("max不能小于0");}this.max = max;}public synchronized int getProgress() {return progress;}public synchronized void setProgress(int progress) {if (progress < 0) {throw new IllegalArgumentException("progress不能小于0");}if (progress > max) {progress = max;}if (progress <= max) {this.progress = progress;//更新postInvalidate();}}public int getRoundColor() {return roundColor;}public void setRoundColor(int roundColor) {this.roundColor = roundColor;}public int getRoundProgressColor() {return roundProgressColor;}public void setRoundProgressColor(int roundProgressColor) {this.roundProgressColor = roundProgressColor;}public float getRoundWidth() {return roundWidth;}public void setRoundWidth(float roundWidth) {this.roundWidth = roundWidth;}public int getStyle() {return style;}public void setStyle(int style) {this.style = style;}public int getTextColor() {return textColor;}public void setTextColor(int textColor) {this.textColor = textColor;}public boolean isTextShow() {return textShow;}public void setTextShow(boolean textShow) {this.textShow = textShow;}public float getTextSize() {return textSize;}public void setTextSize(float textSize) {this.textSize = textSize;}
}

编写布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:myApp="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><com.cj5785.painttest.CustomProgressBarandroid:id="@+id/custom_progress_bar"android:layout_centerInParent="true"android:layout_width="100dp"android:layout_height="100dp"myApp:roundProgressColor="@android:color/holo_green_light"myApp:roundColor="@android:color/holo_blue_light"myApp:roundWidth="10dp"myApp:textColor="@android:color/holo_orange_light"myApp:textSize="18sp" /><Buttonandroid:layout_alignParentBottom="true"android:layout_width="match_parent"android:layout_height="wrap_content"android:onClick="start"/>RelativeLayout>

测试

public class ProgressBarActivity extends AppCompatActivity {private CustomProgressBar progressBar;private int progess;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_progress_bar);progressBar = findViewById(R.id.custom_progress_bar);}public void start(View view) {progess += 5;progressBar.setProgress(progess);}
}

效果如下

附录 API

public class Paint extends Object
java.lang.Object
​ ↳android.graphics.Paint

The Paint class holds the style and color information about how to draw geometries, text and bitmaps.

转载于:https://www.cnblogs.com/cj5785/p/10664584.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！