自定义View之二-画笔(TextView)

1. 基线

1.1 FontMetrics属性

基线.png

ascent = ascent线的y坐标 - baseline线的y坐标；//负数
descent = descent线的y坐标 - baseline线的y坐标；//正数
top = top线的y坐标 - baseline线的y坐标；//负数
bottom = bottom线的y坐标 - baseline线的y坐标；//正数
leading = top线的y坐标 - ascent线的y坐标；//负数

---

1.2 获取文字的高度和宽度

//获取高度 方法1
float top = fontMetrics.top + baseLineY;
float bottom = fontMetrics.bottom + baseLineY;
float height= bottom - top; //注意top为负数
//获取高度 方法2
float height=Math.abs(top-bottom);
//获取高度 方法3
public float getFontHeight(Paint paint, String str) {
    Rect rect = new Rect();
    paint.getTextBounds(str, 0, str.length(), rect);
    return rect.height();
}

//获取宽度
String text="abcdefghijkl's";
 float width = mPaint.measureText(text);

1.3 已知中线确定基线

baseline = center + (FontMetrics.bottom - FontMetrics.top)/2 - FontMetrics.bottom;

1.4 通过arc绘制圆

recf.png

r(centX，centerY)
RectF oval = new RectF(centerX - r, centerY - r, centerX + r, centerY + r);
canvas.drawArc(oval, mStartAngle, mSweepAngle, false, paint);

2.Canvas常用方法

clipRect() :后续的draw操作只显示剪裁的部分
save() ... restore():保证resore之后的操作画布状态维持在save时的状态(不受save到resotre之间对cavas的改变的影响)

canvas.save();
canvas.clipRect(getWidth() / 2, 0, getWidth(), getHeight());clipRect只能影响之后的，不能影响已经绘制好的部分
canvas.drawText(getText().toString(), 0, y, mOriginalPaint);//clipRect影响这里的绘制
canvas.restore();

2.自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="myText">
        <attr name="text" format="string"/>
        <attr name="textSize" format="dimension"/>
        <attr name="textColor" format="color"/>
    </declare-styleable>
</resources>

3.继承View

public class TextView extends View {
    private static final String TAG = "TextView";
    //默认文字颜色
    private final int mDefaultTextColor = Color.BLACK;
    private  int mTextSize;
    //默认字体大小 sp
    private int mDefaultTextSize = 15;
    private String mText;
    private Paint mPaint;

    public TextView(Context context) {
        this(context, null);
    }

    public TextView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //1.获取自定义属性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.myText);
        mText = (String) array.getText(R.styleable.myText_text);
        mTextSize = array.getDimensionPixelSize(R.styleable.myText_textSize, sp2px(mDefaultTextSize));
        int color = array.getColor(R.styleable.myText_textColor, mDefaultTextColor);
        array.recycle();
        //新建画笔
        mPaint = new Paint();
        //抗锯齿
        mPaint.setAntiAlias(true);
        //设置画笔的颜色
        mPaint.setColor(color);
        //设置画笔的大小
        mPaint.setTextSize(mTextSize);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //2.测量控件的宽高
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        if (widthMode == MeasureSpec.AT_MOST) {
            //宽度包裹内容，需要根据画笔测量
            Rect bounds = new Rect();
            mPaint.getTextBounds(mText, 0, mText.length(), bounds);
            width = bounds.width() + getPaddingLeft() + getPaddingRight();
        }
        int height = MeasureSpec.getSize(heightMeasureSpec);
        if (heightMode == MeasureSpec.AT_MOST) {
            //高度包裹内容，需要使用画笔进行测量
            Rect bounds = new Rect();
            mPaint.getTextBounds(mText, 0, mText.length(), bounds);
            height = bounds.height();
        }
        setMeasuredDimension(width, height);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //3.绘制
        int x = 0;
        Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt();
        int baseLine = getHeight() / 2 + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; 
        //参数1：文本  参数2：基线x坐标 参数3：基线y坐标
        canvas.drawText(mText, x + getPaddingLeft(), baseLine, mPaint);
    }

    private int sp2px(int sp) {
        return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,sp,
                getResources().getDisplayMetrics());
    }

}

4.使用

  <com.example.admin.testapplication.views.TextView
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        app:text="dfdfdsf65465464654654654654654sssssssssssssssss"
        app:textSize="20sp"
        app:textColor="@color/colorAccent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />