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"