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

刺骨的言语ヽ痛彻心扉 2023-06-15 15:30 1阅读 0赞

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

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

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnhpYW9saW4yMDE2_size_16_color_FFFFFF_t_70]  
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">
            
            <attr name="title" format="string" />
            
            <attr name="titleTextSize" format="dimension" />
            
            <attr name="titlePosition" format="dimension" />
            
            <attr name="titleTextColor" format="reference|color" />
            
            <attr name="borderSize" format="dimension" />
            
            <attr name="borderColor" format="reference|color" />
        </declare-styleable>
    </resources>

属性使用方法：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnhpYW9saW4yMDE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191123114539393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bnhpYW9saW4yMDE2,size_16,color_FFFFFF,t_70