Android自定义带文字标题和方框的控件

1.使LinearLayout布局带有方框线；
2.使LinearLayout布局Top方框线加入一个文字标题。

要想实现LinearLayout布局带有方框线，这个很简单，直接加一个方框线的布局即可。
但是要实现Top方框线加入一个文字标题，则需要自定义View来实现。

效果如下：

TitleBorderLayout.java

package com.hsae.audiodemos.view;

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.text.Layout;
import android.text.TextPaint;
import android.util.AttributeSet;
import android.widget.LinearLayout;

import com.hsae.audiodemos.R;

public class TitleBorderLayout extends LinearLayout {
	private static float DEFAULT_TITLE_POSITION_SCALE = 0.48f;
	public static int DEFAULT_BORDER_SIZE = 1;
	public static int DEFAULT_BORDER_COLOR = Color.BLACK;
	public static int DEAFULT_TITLE_COLOR = Color.BLACK;

	private int mBorderPaneHeight ;
	
	private Paint mBorderPaint;
	private float mBorderSize;
	
	private TextPaint mTextPaint;
	private CharSequence mTitle;
	private int mTitlePosition;
	
	public TitleBorderLayout(Context context) {
		this(context, null);
	}
	
	/**
	 * Construct a new TitleBorderLayout with default style, overriding specific style
     * attributes as requested.
	 * @param context
	 * @param attrs
	 */
	public TitleBorderLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		setWillNotDraw(false);
		
		mBorderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 
		mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
		Resources res = getResources();
		mTextPaint.density = res.getDisplayMetrics().density;
		
		TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TitleBorderLayout);
		
		mTitle = a.getText(R.styleable.TitleBorderLayout_title);
		int titleColor = a.getColor(R.styleable.TitleBorderLayout_titleTextColor, DEAFULT_TITLE_COLOR);
		mTextPaint.setColor(titleColor);
		
		float titleTextSize = a.getDimension(R.styleable.TitleBorderLayout_titleTextSize, 0);
		if (titleTextSize > 0) {
			mTextPaint.setTextSize(titleTextSize);
		}
		
		mTitlePosition = a.getDimensionPixelSize(R.styleable.TitleBorderLayout_titlePosition, -1);
 
		mBorderSize = a.getDimensionPixelSize(R.styleable.TitleBorderLayout_borderSize, DEFAULT_BORDER_SIZE);
		
		int borderColor = a.getColor(R.styleable.TitleBorderLayout_borderColor, DEFAULT_BORDER_COLOR);
		mBorderPaint.setColor(borderColor);
		
		a.recycle();
	}
	
	/**
	 * Get the color of border.
	 * @return
	 */
	public int getBorderColor() {
		return mBorderPaint.getColor();
	}
 
	/**
	 * Set the color of border.
	 * @param borderColor
	 */
	public void setBorderColor(int borderColor) {
		mBorderPaint.setColor(borderColor);
		requestLayout();
	}
 
	/**
	 * Get the size of border.
	 * @return
	 */
	public float getBorderSize() {
		return mBorderSize;
	}
 
	/**
	 * Set the size of border.
	 * @param borderSize
	 */
	public void setBorderSize(float borderSize) {
		mBorderSize = borderSize;
		requestLayout();
	}
 
	/**
	 * Get the color of title.
	 * @return
	 */
	public int getTitleColor() {
		return mTextPaint.getColor();
	}
 
	/**
	 * Set the color of title.
	 * @param titleColor
	 */
	public void setTitleColor(int titleColor) {
		mTextPaint.setColor(titleColor);
		requestLayout();
	}
 
	/**
	 * Get the size of title.
	 * @return
	 */
	public float getTitleTextSize() {
		return mTextPaint.getTextSize();
	}
 
	/**
	 * Set the size of title.
	 * @param titleTextSize
	 */
	public void setTitleTextSize(float titleTextSize) {
		mTextPaint.setTextSize(titleTextSize);
		requestLayout();
	}
	
	/**
	 * Get the title.
	 * @return
	 */
	public CharSequence getTitle() {
		return mTitle;
	}
 
	/**
	 * Set the title which will be shown on the top of border pane. 
	 * @param title
	 */
	public void setTitle(CharSequence title) {
		mTitle = title;
		requestLayout();
	}
	
	/**
	 * Get the position of title.
	 * @return
	 */
	public int getTitlePosition() {
		return mTitlePosition;
	}
 
	/**
	 * Set the position of title where the paint will start to draw.
	 * @param titlePosition
	 */
	public void setTitlePosition(int titlePosition) {
		mTitlePosition = titlePosition;
		requestLayout();
	}
 
	/**
	 * Get the height of border pane, it's different from the layout height!
	 * @return
	 */
	public int getBorderPaneHeight() {
		return mBorderPaneHeight;
	}
 
	/**
	 * Draw the title border
	 * @param canvas 
	 */
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		
		Paint.FontMetrics fm = mTextPaint.getFontMetrics();
		final float titleHeight =  fm.descent - fm.ascent;
 
		final CharSequence titleText = (mTitle == null) ? "" : mTitle;
		final float titleWidth = Layout.getDesiredWidth(titleText, mTextPaint);
		
		final int width = getWidth();
		final int height = getHeight();
		
		if (mTitlePosition <= 0 || mTitlePosition + titleWidth > width) {
			mTitlePosition = (int) (DEFAULT_TITLE_POSITION_SCALE * width); 
		}
		
		final float topBorderStartY = titleHeight / 3f - mBorderSize / 2;
		
		mBorderPaneHeight = (int) Math.ceil(height - topBorderStartY);

	    /* draw border*/
		// top
		canvas.drawRect(0, topBorderStartY, mTitlePosition, topBorderStartY + mBorderSize, mBorderPaint);
		canvas.drawText(titleText.toString(), mTitlePosition, titleHeight / 3 * 2f, mTextPaint); //title
		canvas.drawRect(mTitlePosition + titleWidth, topBorderStartY, width, topBorderStartY + mBorderSize, mBorderPaint);
        // left
        canvas.drawRect(0, topBorderStartY, mBorderSize, height, mBorderPaint);
        // right
        canvas.drawRect(width - mBorderSize, topBorderStartY, width, height, mBorderPaint);
        // down
        canvas.drawRect(0, height - mBorderSize, width, height, mBorderPaint);
	}
}

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TitleBorderLayout">
        <!-- The title of BorderTitleLayout. -->
        <attr name="title" format="string" />
        <!-- The size of title. -->
        <attr name="titleTextSize" format="dimension" />
        <!-- The title start postion. -->
        <attr name="titlePosition" format="dimension" />
        <!-- The color of title. -->
        <attr name="titleTextColor" format="reference|color" />
        <!-- The size of border. -->
        <attr name="borderSize" format="dimension" />
        <!-- The color of border. -->
        <attr name="borderColor" format="reference|color" />
    </declare-styleable>
</resources>

属性使用方法：

app:title="布局1"
app:titleTextSize="16dp"