1. 程式人生 > >移動開發----BigSmallTextView方便設定大小字型顏色的View

移動開發----BigSmallTextView方便設定大小字型顏色的View

Tag:

專案介紹:

BigSmallTextView

設定大小字型的View

有時候在專案中可能會做下面的效果,為了簡便,所以搞了這個View。

效果圖:

使用說明:

方法 說明 示例
app:bigText 設定左邊的 text app:bigText="你"
setBigText("你");
app:bigTextColor 設定左邊 text 的顏色 app:bigTextColor="@color/colorAccent"
setBigTextColor(ContextCompat.getColor(this,R.color.colorAccent));
app:bigTextMarginBottom 如果左右兩邊字型相差較大,會出現字型下面不對齊的情況,這時候用這個來進行調整(針對左邊) app:bigTextMarginBottom="10dp"
setBigTextMarginBottom(10);
app:bigTextSize 設定左邊較 text 的大小 app:bigTextSize="20sp"
setBigTextSize(25);
app:smallText 設定右邊的 text app:smallText="好"
setSmallText("好");
app:smallTextColor 設定右邊 text 的字型顏色 app:smallTextColor="@color/colorPrimary"
setSmallTextColor(ContextCompat.getColor(this, R.color.colorPrimary));
app:smallTextMarginBottom 如果左右兩邊字型相差較大,會出現字型下面不對齊的情況,這時候用這個來進行調整(針對右邊) app:smallTextMarginBottom="10dp"
setSmallTextMarginBottom(10);
app:smallTextSize 右邊 text 字型的大小 app:smallTextSize="16sp"
setSmallTextMarginBottom(10);
app:textOffset 設定左邊和右邊 text 之間的距離 app:textOffset="10dp"
setTextOffset(10);
也可以在程式碼中使用 setXXX() 方法來設定。 例子:

mBigSmallTextView

            .setBigTextSize(25)
            .setSmallTextSize(16)
            .setBigText("你")
            .setSmallText("好");

程式碼中設定字型大小單位預設為 sp ,設定距離單位預設為 dp 。

原則上控制元件的樣式是左邊的 text 大,右邊的 text 小,但如果你願意,也可以設定成左邊的 text 小,右邊的 text 大。

下面是程式碼類:

package com.example.bigsmalltext;

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.View;

/**
 * Created by lzx on 2017/7/13.
 */

public class BigSmallTextView extends View {
    private float bigTextSize;
    private float smallTextSize;
    private String bigText = "";
    private String smallText = "";
    private int bigTextColor;
    private int smallTextColor;

    private Paint mBigPaint, mSmallPain;
    private Rect mBigRect, mSmallRect;

    private float bigText_marginBottom;
    private float smallText_marginBottom;
    private float textOffset = 0;  //兩個文字之間的距離
    private DisplayMetrics metrics;

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

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

    public BigSmallTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        Context c = getContext();
        Resources r;
        if (c == null)
            r = Resources.getSystem();
        else
            r = c.getResources();

        metrics = r.getDisplayMetrics();

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BigSmallTextView);
        bigTextSize = typedArray.getDimension(R.styleable.BigSmallTextView_bigTextSize, 16);
        smallTextSize = typedArray.getDimension(R.styleable.BigSmallTextView_smallTextSize, 14);
        bigText = typedArray.getString(R.styleable.BigSmallTextView_bigText);
        smallText = typedArray.getString(R.styleable.BigSmallTextView_smallText);
        bigTextColor = typedArray.getColor(R.styleable.BigSmallTextView_bigTextColor, Color.BLACK);
        smallTextColor = typedArray.getColor(R.styleable.BigSmallTextView_smallTextColor, Color.BLACK);
        bigText_marginBottom = typedArray.getDimension(R.styleable.BigSmallTextView_bigTextMarginBottom, 0);
        smallText_marginBottom = typedArray.getDimension(R.styleable.BigSmallTextView_smallTextMarginBottom, 0);
        textOffset = typedArray.getDimension(R.styleable.BigSmallTextView_textOffset, 0);
        typedArray.recycle();

        mBigPaint = new TextPaint();
        mBigPaint.setAntiAlias(true);

        mSmallPain = new TextPaint();
        mSmallPain.setAntiAlias(true);

        mBigRect = new Rect();
        mSmallRect = new Rect();
    }

    public BigSmallTextView setSmallText(String smallText) {
        this.smallText = smallText;
        return this;
    }

    public BigSmallTextView setBigText(String bigText) {
        this.bigText = bigText;
        return this;
    }

    public BigSmallTextView setTextOffset(int textOffset) {
        this.textOffset = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, textOffset, metrics);
        return this;
    }

    public BigSmallTextView setSmallTextMarginBottom(float smallText_marginBottom) {
        this.smallText_marginBottom = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, smallText_marginBottom, metrics);
        return this;
    }

    public BigSmallTextView setBigTextMarginBottom(float bigText_marginBottom) {
        this.bigText_marginBottom = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, bigText_marginBottom, metrics);
        return this;
    }

    public BigSmallTextView setBigTextColor(int bigTextColor) {
        this.bigTextColor = bigTextColor;
        return this;
    }

    public BigSmallTextView setSmallTextColor(int smallTextColor) {
        this.smallTextColor = smallTextColor;
        return this;
    }

    public BigSmallTextView setSmallTextSize(float smallTextSize) {
        this.smallTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, smallTextSize, metrics);
        return this;
    }

    public BigSmallTextView setBigTextSize(float bigTextSize) {
        this.bigTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, bigTextSize, metrics);
        return this;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        mBigPaint.setColor(bigTextColor);
        mBigPaint.setTextSize(bigTextSize);

        mSmallPain.setColor(smallTextColor);
        mSmallPain.setTextSize(smallTextSize);

        mBigPaint.getTextBounds(bigText, 0, bigText.length(), mBigRect);
        mSmallPain.getTextBounds(smallText, 0, smallText.length(), mSmallRect);

        int bigTextWidth = (int) mBigPaint.measureText(bigText);
        int smallTextWidth = (int) mSmallPain.measureText(smallText);

        //控制元件的實際寬高
        int realWidth = (int) (bigTextWidth + smallTextWidth + textOffset);
        int realHeight;
        if (mBigRect.height() > mSmallRect.height()) {
            realHeight = (int) (mBigRect.height() + mBigPaint.descent() + bigText_marginBottom + smallText_marginBottom);
        } else {
            realHeight = (int) (mSmallRect.height() + mSmallPain.descent() + bigText_marginBottom + smallText_marginBottom);
        }

        int width = 0;
        int height = 0;

        if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
            width = realWidth;
            height = realHeight;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            width = realWidth;
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            width = widthSize;
            height = realHeight;
        }
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int height = getHeight() - paddingTop - paddingBottom;

        //畫文字
        float bigTextX = 0;
        float bigTextY = height - mBigPaint.descent() - bigText_marginBottom;
        canvas.drawText(bigText, bigTextX, bigTextY, mBigPaint);

        float smallTextX = mBigPaint.measureText(bigText) + textOffset;
        float smallTextY = height - mSmallPain.descent() - smallText_marginBottom;
        canvas.drawText(smallText, smallTextX, smallTextY, mSmallPain);
    }
}
接下來是values下的檔案attrs:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="BigSmallTextView">
        <attr name="bigTextSize" format="dimension"/>
        <attr name="smallTextSize" format="dimension"/>
        <attr name="bigText" format="string"/>
        <attr name="smallText" format="string"/>
        <attr name="bigTextColor" format="color"/>
        <attr name="smallTextColor" format="color"/>
        <attr name="bigTextMarginBottom" format="dimension"/>
        <attr name="smallTextMarginBottom" format="dimension"/>
        <attr name="textOffset" format="dimension"/>
    </declare-styleable>
</resources>
佈局檔案:
    <com.example.bigsmalltext.BigSmallTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        app:bigText="520"
        app:bigTextColor="@color/colorPrimary"
        app:bigTextSize="40sp"
        app:smallText="哈嘍,2017/7/14"
        app:smallTextColor="@color/colorAccent"
        app:smallTextSize="20sp"/>