效果图：

layout-2016-09-01-182947.png

使用方式

在 app的build.gradle 添加依赖

compile 'com.github.cchao:moneyview:1.0.1'

在 XML布局文件 中引用

<com.github.cchao.MoneyView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  money:money_text="789456.123"/>

显示效果就是效果图的第一个。

balabala

故事是这样的：
不懂设计从哪里搞得效果图，要求实现金额文本里元的字体较大，分的字体较小，而且前面的前缀样式还不定。各个页面的样式还不一致，为了满足妹子特别的需求。
就哒哒哒码了个MoneyView。

思路

根据妹子已给出的图，我猜，没错，我是猜的。鬼懂她什么时候想想又乱改了。so，从以下几个方面去规定这个MoneyView应该具备怎么样的样式:

• 元和分能自定义大小
• 前缀能自定义文本、颜色和大小
• 前缀与文本能自定义padding
• 小数点能自定义左右间隔
• 金额能自定义颜色
• 允许设置千分符

attrs

其实还可能有更多的，不过她如果这么过分的话，我就继承ViewGroup的子类了，哼。
好了，根据上述规定，程序员写出了下列attr：

<!--金额 样式  元大 角分小 $25.33-->
<declare-styleable name="MoneyView">
    <!--金额-->
    <attr name="money_text" format="string"/>
    <!--金额颜色-->
    <attr name="money_color" format="color"/>
    <!--元大小-->
    <attr name="yuan_size" format="dimension"/>
    <!--分大小-->
    <attr name="cent_size" format="dimension"/>
    <!--前缀文本-->
    <attr name="prefix_text" format="string"/>
    <!--前缀大小-->
    <attr name="prefix_size" format="dimension"/>
    <!--前缀颜色-->
    <attr name="prefix_color" format="color"/>
    <!--前缀右边距-->
    <attr name="prefix_padding" format="dimension"/>
    <!--小数点左边距-->
    <attr name="point_padding_left" format="dimension"/>
    <!--小数点右边距-->
    <attr name="point_padding_right" format="dimension"/>
    <!--是否使用千分符-->
    <attr name="grouping" format="boolean"/>
</declare-styleable>

constructor

没错，各位看官也可以有这样的思路去自定义View，先想好可能的拓展，再列出attr，最后才开始写代码。
好，既然我们写完了attr，就开始去学代码了。先new 一个Class 名字叫做MoneyView，然后复写其三个构造方法：

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

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

public MoneyView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context, attrs, defStyle);
}

private void init(Context context, AttributeSet attrs, int defStyle) {
    TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MoneyView, defStyle, 0);

    mMoneyText = typedArray.getString(R.styleable.MoneyView_money_text);
    mMoneyColor = typedArray.getColor(R.styleable.MoneyView_money_color, mMoneyColor);
    mYuanSize = typedArray.getDimensionPixelSize(R.styleable.MoneyView_yuan_size, mYuanSize);
    mCentSize = typedArray.getDimensionPixelSize(R.styleable.MoneyView_cent_size, mCentSize);

    mPrefix = typedArray.getString(R.styleable.MoneyView_prefix_text);
    mPrefixSize = typedArray.getDimensionPixelSize(R.styleable.MoneyView_prefix_size, mPrefixSize);
    mPrefixColor = typedArray.getColor(R.styleable.MoneyView_prefix_color, mPrefixColor);
    mPrefixPadding = typedArray.getDimensionPixelSize(R.styleable.MoneyView_prefix_padding, mPrefixPadding);

    mPointPaddingLeft = typedArray.getDimensionPixelSize(R.styleable.MoneyView_point_padding_left, mPointPaddingLeft);
    mPointPaddingRight = typedArray.getDimensionPixelSize(R.styleable.MoneyView_point_padding_right, mPointPaddingRight);
    mIsGroupingUsed = typedArray.getBoolean(R.styleable.MoneyView_grouping, false);
    typedArray.recycle();

    // 获得绘制文本的宽和高
    mPaint = new Paint();
    mPaint.setAntiAlias(true); // 消除锯齿
    mPaint.setFlags(Paint.ANTI_ALIAS_FLAG); // 消除锯齿
    mYuanBound = new Rect();
    mCentBound = new Rect();
    mPointBound = new Rect();
    mPrefixBound = new Rect();

    if (TextUtils.isEmpty(mPrefix)) {
        mPrefix = "¥";
    }
}

通过TypedArray 获取我们刚才写的attr
public int getDimensionPixelSize(int index, int defValue) {
用户不输入我们就给予默认值。默认在声明成员属性处已经给出。

onMeasure

那，现在我们也获取到用户设置的属性了，现在就要调用onMeasure去计算这个自定义MoneyView占据的宽高了。（代码有删减）

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width;
    int height;

    int pointPosition = mMoneyText.indexOf(POINT);
    if (!mMoneyText.contains(POINT)) {
        pointPosition = mMoneyText.length();
    }
    //获取元的文本
    mYuan = mMoneyText.substring(0, pointPosition);
    //如果使用千分符
    if (mIsGroupingUsed) {
        mYuan = NumberFormat.getInstance().format(Long.valueOf(mYuan));
    }
    //获取分的文本
    mCent = mMoneyText.substring(pointPosition + 1, mMoneyText.length());
    //获取元小数点、的占据宽高
    mPaint.setTextSize(mYuanSize);
    mPaint.getTextBounds(mYuan, 0, mYuan.length(), mYuanBound);
    mPaint.getTextBounds(POINT, 0, POINT.length(), mPointBound);
    //获取分占据宽高
    mPaint.setTextSize(mCentSize);
    mPaint.getTextBounds(mCent, 0, mCent.length(), mCentBound);
    //获取前缀占据宽高
    mPaint.setTextSize(mPrefixSize);
    mPaint.getTextBounds(mPrefix, 0, mPrefix.length(), mPrefixBound);
    //文本占据的宽度
    mTextWidth = mYuanBound.width() + mCentBound.width() + mPrefixBound.width() + mPointBound.width()
        + mPointPaddingLeft + mPointPaddingRight + mPrefixPadding;
    // 设置宽度
    int specMode = MeasureSpec.getMode(widthMeasureSpec);
    int specSize = MeasureSpec.getSize(widthMeasureSpec);

    if (specMode == MeasureSpec.EXACTLY) {
        width = specSize + getPaddingLeft() + getPaddingRight();
    } else {
        width = mTextWidth + getPaddingLeft() + getPaddingRight();
    }
    // 设置高度
    // 获取最大字号
    int maxSize = Math.max(mYuanSize, mCentSize);
    maxSize = Math.max(maxSize, mPrefixSize);
    mPaint.setTextSize(maxSize);
    // 获取基线距离
    maxDescent = mPaint.getFontMetrics().descent;
    int maxHeight = Math.max(mYuanBound.height(), mCentBound.height());
    maxHeight = Math.max(maxHeight, mPrefixBound.height());
    // 文本占据的高度 (给顶线和底线留间距)
    mTextHeight = maxHeight + (int) (maxDescent * 2 + 0.5f);

    specMode = MeasureSpec.getMode(heightMeasureSpec);
    specSize = MeasureSpec.getSize(heightMeasureSpec);
    if (specMode == MeasureSpec.EXACTLY) {
        height = specSize;
    } else {
        height = mTextHeight;
    }
    setMeasuredDimension(width, height);
}

我们分别计算前缀，元，分占据的宽高，然后对比，取最高的一个作为MoneyView的高。
这里获取了最大文本的基线值maxDescent。这里需要注意一点，canvas.drawText是根据 baseLine（基线） 绘制的，这和我们小时候用四线纸去写字母一个意思，如下图：

e038aae657b1832ecc32c336c6075ffc.jpg

onDraw

所以我们在 onDraw()时要在Y轴上加上基线距离底部的值，才是我们需要绘制的， 绘制过程会将文本居中。

@Override
protected void onDraw(Canvas canvas) {
    //绘制X坐标
    int drawX = (getMeasuredWidth() - mTextWidth) / 2;
    float drawY = (getMeasuredHeight() + mTextHeight) / 2 - maxDescent;

    //绘制前缀
    mPaint.setColor(mPrefixColor);
    mPaint.setTextSize(mPrefixSize);
    canvas.drawText(mPrefix, drawX, drawY, mPaint);
    //绘制元
    drawX += mPrefixBound.width() + mPrefixPadding;
    mPaint.setColor(mMoneyColor);
    mPaint.setTextSize(mYuanSize);
    canvas.drawText(mYuan, drawX, drawY, mPaint);
    //绘制小数点
    drawX += mYuanBound.width() + mPointPaddingLeft;
    canvas.drawText(POINT, drawX, drawY, mPaint);
    //绘制分
    drawX += mPointPaddingRight;
    mPaint.setTextSize(mCentSize);
    canvas.drawText(mCent, drawX, drawY, mPaint);
}

OK，那这个MoneyView 就可以拿来用了，这是全部代码的地址：
github：https://github.com/cchao1024/MoneyView