今天分享一个Layout布局中的一个小技巧,希望看过之后你也可以写出性能更好的布局,我个人的目的是用最少的view写出一样的效果布局
用TextView同时显示图片和文字:
先看一下效果图
以上这四块区域相信大家在项目中经常遇到吧!(一般的写法ImageView与TextView的组合)现在用一个自定义的TextView就完成能达到一样的效果,并且也可以设置背景选择器、图片的尺寸大小,不需要嵌套多层布局在设置相关的属性
第一块Xml中的代码
下面的分割线我建议用Space这个控件,它是一个非常轻量级的控件
第二块Xml中的代码
第三块Xml中的代码
第四块Xml中的代码(图片按钮)
下面贴出TextDrawable.java代码
/**
* Created by Dengxiao on 2016/11/8.
*/
public class TextDrawable extends TextView {
private Drawable drawableLeft;
private Drawable drawableRight;
private Drawable drawableTop;
private int leftWidth;
private int rightWidth;
private int topWidth;
private int leftHeight;
private int rightHeight;
private int topHeight;
private Context mContext;
public TextDrawable(Context context) {
this.mContext=context;
this(context, null, 0);
}
public TextDrawable(Context context, AttributeSet attrs) {
this.mContext=context;
this(context, attrs, 0);
}
public TextDrawable(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext=context;
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TextDrawable);
drawableLeft = typedArray.getDrawable(R.styleable.TextDrawable_leftDrawable);
drawableRight = typedArray.getDrawable(R.styleable.TextDrawable_rightDrawable);
drawableTop = typedArray.getDrawable(R.styleable.TextDrawable_topDrawable);
if (drawableLeft != null) {
leftWidth = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_leftDrawableWidth, dip2px(context, 20));
leftHeight = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_leftDrawableHeight, dip2px(context, 20));
}
if (drawableRight != null) {
rightWidth = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_rightDrawableWidth, dip2px(context, 20));
rightHeight = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_rightDrawableHeight, dip2px(context, 20));
}
if (drawableTop != null) {
topWidth = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_topDrawableWidth, dip2px(context, 20));
topHeight = typedArray.getDimensionPixelOffset(R.styleable.TextDrawable_topDrawableHeight, dip2px(context, 20));
}
}
public int dip2px(Context context, float dpValue)
{
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (drawableLeft != null) {
drawableLeft.setBounds(0, 0, leftWidth, leftHeight);
}
if (drawableRight != null) {
drawableRight.setBounds(0, 0, rightWidth, rightHeight);
}
if (drawableTop != null) {
drawableTop.setBounds(0, 0, topWidth, topHeight);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.setCompoundDrawables(drawableLeft, drawableTop, drawableRight, null);
}
/**
* 设置左侧图片并重绘
*/
public void setDrawableLeft(Drawable drawableLeft) {
this.drawableLeft = drawableLeft;
invalidate();
}
/**
* 设置左侧图片并重绘
*/
public void setDrawableLeft(int drawableLeftRes) {
this.drawableLeft = mContext.getResources().getDrawable(drawableLeftRes);
invalidate();
}
/**
* 设置右侧图片并重绘
*/
public void setDrawableRight(Drawable drawableRight) {
this.drawableRight = drawableLeft;
invalidate();
}
/**
* 设置右侧图片并重绘
*/
public void setDrawableRight(int drawableRightRes) {
this.drawableRight = mContext.getResources().getDrawable(drawableRightRes);
invalidate();
}
/**
* 设置上部图片并重绘
*/
public void setDrawable(Drawable drawableTop) {
this.drawableTop = drawableTop;
invalidate();
}
/**
* 设置右侧图片并重绘
*/
public void setDrawableTop(int drawableTopRes) {
this.drawableTop = mContext.getResources().getDrawable(drawableTopRes);
invalidate();
}
}
附上attrs: