帶文字分類線

》導讀:

在項目中有時會用到一些分類線,這裏給大家定義了一個。
這裏寫圖片描述

》控件

/**
 * Created by Kvin on 2017/2/5.
 */
public class ClassifyTextView extends View {
    private final int DEFAULT_LINE_WIDTH = -1;
    private Paint linePaint;
    private Paint txtPaint;

    //attr
    private float txtSize;
    private int txtColor;
    private String txt;
    private int lineColor;
    private int lineWidth;
    private int verSpace;

    public ClassifyTextView(Context context) {
        super(context);
    }

    public ClassifyTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttr(context, attrs);
    }

    /**
     * init attr
     *
     * @param context
     * @param attrs
     */
    private void initAttr(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ClassifyTextView);
        txt = typedArray.getString(R.styleable.ClassifyTextView_ctvTxt);
        if (StringUtils.isEmpty(txt))txt="  ";
        txtSize = typedArray.getDimension(R.styleable.ClassifyTextView_ctvTxtSize, 5);
        verSpace = typedArray.getDimensionPixelSize(R.styleable.ClassifyTextView_ctvVerSpace, 5);
        lineWidth = typedArray.getDimensionPixelSize(R.styleable.ClassifyTextView_ctvLineWidth, DEFAULT_LINE_WIDTH);
        txtColor = typedArray.getColor(R.styleable.ClassifyTextView_ctvTxtColor, Color.BLACK);
        lineColor = typedArray.getColor(R.styleable.ClassifyTextView_ctvLineColor, Color.GRAY);
        typedArray.recycle();

        txtPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        txtPaint.setColor(txtColor);
        txtPaint.setTextSize(txtSize);

        linePaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        linePaint.setColor(lineColor);
        linePaint.setTextSize(1.0f);

    }

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public ClassifyTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //draw text
        float w = StringUtils.getTextWidth(txt, txtPaint);
        float h = StringUtils.getTextHeight(txtPaint);
        float lEnd = (canvas.getWidth() - w) / 2 - verSpace;
        float rStart = (canvas.getWidth() + w) / 2 + verSpace;

        canvas.drawText(txt, (canvas.getWidth() - w) / 2, h, txtPaint);
        //draw line
        if (lineWidth != DEFAULT_LINE_WIDTH) {
            canvas.drawLine(lEnd - lineWidth, h / 2, lEnd, h / 2, linePaint);
            canvas.drawLine(rStart, h / 2, rStart + lineWidth, h / 2, linePaint);
        } else {
            canvas.drawLine(0, h / 2, lEnd, h / 2, linePaint);
            canvas.drawLine(rStart, h / 2, canvas.getWidth(), h / 2, linePaint);
        }
    }

    /**
     * set text
     */
    public void setText(String msg) {
        txt = msg;
        postInvalidate();
    }
}

》屬性:

  <!--Classify TextView -->
    <declare-styleable name="ClassifyTextView">
        <attr name="ctvTxt" format="string" />
        <attr name="ctvTxtColor" format="reference" />
        <attr name="ctvTxtSize" format="dimension" />
        <attr name="ctvLineWidth" format="dimension" />
        <attr name="ctvLineColor" format="reference" />
        <attr name="ctvVerSpace" format="dimension" />
    </declare-styleable>

》使用示例:

<com.kvin.toolkit.widget.ClassifyTextView
        android:id="@+id/history_tv"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:layout_marginTop="22dp"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_below="@+id/action_bar"
        app:ctvVerSpace="5dp"
        app:ctvTxtSize="13sp"
        app:ctvTxtColor="@color/gray_text"
        app:ctvTxt="歷史搜索" />

》討論:

目前發現將高度設置成wrap_content後的效果與match_parent一樣。後期會處理這兩個屬性,然後在控件裏給默認值。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章