android使组件居中,Android图文居中显示控件使用方法详解

最新推荐文章于 2024-05-18 10:01:03 发布
最新推荐文章于 2024-05-18 10:01:03 发布
阅读量421 收藏
点赞数
文章标签： android使组件居中
本文介绍了一种自定义DrawableCenterTextView的方法，解决了在Android中实现文字图标按钮居中显示的问题，避免了精确计算和增加布局层级的麻烦。该控件通过封装TextView，动态计算并绘制文字和图标的相对位置，确保两者都能居中显示。
摘要由CSDN通过智能技术生成

最近项目中用到了文字图标的按钮，需要居中显示，如果用TextView实现的方式，必须同时设置padding和drawablePadding。如下：

android:layout_width="200dp"

android:layout_height="wrap_content"

android:drawableLeft="@drawable/ic_xxx"

android:drawablePadding="-60dp"

android:minHeight="48dp"

android:gravity="center"

android:padding="80dp" />

这种方式需要自己做精确计算。比较麻烦。另外还有一种方式就是用线性布局包裹ImageView和TextView，但这样会增加布局层级。于是自己封装了一个控件DrawableCenterTextView。

attrs.xml文件中定义属性：

对应的Java代码如下：

public class DrawableCenterTextView extends View {

static final int LEFT = 0;

static final int TOP = 1;

static final int RIGHT = 2;

static final int BOTTOM = 3;

private CharSequence mText;

private ColorStateList mTextColor;

private float mTextSize;

private int mTextStyle;

private int mDrawablePadding;

private Drawable[] mCompoundDrawables;

private Rect mTextBounds;

private Rect mDrawableLeftBounds;

private Rect mDrawableTopBounds;

private Rect mDrawableRightBounds;

private Rect mDrawableBottomBounds;

private TextPaint mTextPaint;

public DrawableCenterTextView(Context context) {

this(context, null);

}

public DrawableCenterTextView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public DrawableCenterTextView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

Drawable drawableLeft = null, drawableTop = null, drawableRight = null, drawableBottom = null;

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.DrawableCenterTextView, defStyleAttr, 0);

mText = ta.getText(R.styleable.DrawableCenterTextView_android_text);

mTextColor = ta.getColorStateList(R.styleable.DrawableCenterTextView_android_textColor);

mTextSize = ta.getDimensionPixelSize(R.styleable.DrawableCenterTextView_android_textSize, 15);

mTextStyle = ta.getInt(R.styleable.DrawableCenterTextView_android_textStyle, 0);

drawableLeft = ta.getDrawable(R.styleable.DrawableCenterTextView_android_drawableLeft);

drawableTop = ta.getDrawable(R.styleable.DrawableCenterTextView_android_drawableTop);

drawableRight = ta.getDrawable(R.styleable.DrawableCenterTextView_android_drawableRight);

drawableBottom = ta.getDrawable(R.styleable.DrawableCenterTextView_android_drawableBottom);

mDrawablePadding = ta.getDimensionPixelSize(R.styleable.DrawableCenterTextView_android_drawablePadding, 0);

ta.recycle();

if (mTextColor == null) {

mTextColor = ColorStateList.valueOf(0xFF000000);

}

mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);

mTextPaint.density = getResources().getDisplayMetrics().density;

mTextPaint.setTextSize(mTextSize);

setTypeface(Typeface.create(Typeface.DEFAULT, mTextStyle));

setCompoundDrawablesWithIntrinsicBounds(drawableLeft, drawableTop, drawableRight, drawableBottom);

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

int widthSize = MeasureSpec.getSize(widthMeasureSpec);

int heightSize = MeasureSpec.getSize(heightMeasureSpec);

int width;

int height;

//计算文本范围

calcTextBounds();

if (widthMode == MeasureSpec.EXACTLY) {

width = widthSize;

} else {

width = mTextBounds.width();

if (mCompoundDrawables != null) {

if (mCompoundDrawables[TOP] != null) {

width = Math.max(width, mDrawableTopBounds.width());

}

if (mCompoundDrawables[BOTTOM] != null) {

width = Math.max(width, mDrawableBottomBounds.width());

}

//加上左右内边距及drawable宽度和drawable间距

width += getCompoundPaddingLeft() + getCompoundPaddingRight();

width = Math.max(width, getSuggestedMinimumWidth());

if (widthMode == MeasureSpec.AT_MOST) {

width = Math.min(widthSize, width);

}

}

}

if (heightMode == MeasureSpec.EXACTLY) {

height = heightSize;

} else {

height = mTextBounds.height();

if (mCompoundDrawables != null) {

if (mCompoundDrawables[LEFT] != null) {

height = Math.max(height, mDrawableLeftBounds.height());

}

if (mCompoundDrawables[RIGHT] != null) {

height = Math.max(height, mDrawableRightBounds.height());

}

//加上上下内边距及drawable高度和drawable间距

height += getCompoundPaddingTop() + getCompoundPaddingBottom();

height = Math.max(height, getSuggestedMinimumHeight());

if (heightMode == MeasureSpec.AT_MOST) {

height = Math.min(heightSize, height);

}

}

}

setMeasuredDimension(width, height);

}

public int getCompoundPaddingTop() {

if (mCompoundDrawables == null || mCompoundDrawables[TOP] == null) {

return getPaddingTop();

} else {

Rect rect = new Rect();

mCompoundDrawables[TOP].copyBounds(rect);

return getPaddingTop() + mDrawablePadding + rect.height();

}

}

public int getCompoundPaddingBottom() {

if (mCompoundDrawables == null || mCompoundDrawables[BOTTOM] == null) {

return getPaddingBottom();

} else {

Rect rect = new Rect();

mCompoundDrawables[BOTTOM].copyBounds(rect);

return getPaddingBottom() + mDrawablePadding + rect.height();

}

}

public int getCompoundPaddingLeft() {

if (mCompoundDrawables == null || mCompoundDrawables[LEFT] == null) {

return getPaddingLeft();

} else {

Rect rect = new Rect();

mCompoundDrawables[LEFT].copyBounds(rect);

return getPaddingLeft() + mDrawablePadding + rect.width();

}

}

public int getCompoundPaddingRight() {

if (mCompoundDrawables == null || mCompoundDrawables[RIGHT] == null) {

return getPaddingRight();

} else {

Rect rect = new Rect();

mCompoundDrawables[RIGHT].copyBounds(rect);

return getPaddingRight() + mDrawablePadding + rect.width();

}

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

int vspace = getBottom() - getTop() - getCompoundPaddingBottom() - getCompoundPaddingTop(); //剩余垂直可绘制文本空间大小

int hspace = getRight() - getLeft() - getCompoundPaddingRight() - getCompoundPaddingLeft(); //剩余水平可绘制文本空间大小

if (mCompoundDrawables != null) {

if (mCompoundDrawables[LEFT] != null) {

canvas.save();

canvas.translate((hspace - mTextBounds.width()) / 2.0f + getPaddingLeft(),

getCompoundPaddingTop() + (vspace - mDrawableLeftBounds.height()) / 2.0f);

mCompoundDrawables[LEFT].draw(canvas);

canvas.restore();

}

if (mCompoundDrawables[RIGHT] != null) {

canvas.save();

canvas.translate(getRight() - getLeft() - getPaddingRight() - (hspace - mTextBounds.width()) / 2.0f - mDrawableRightBounds.width(),

getCompoundPaddingTop() + (vspace - mDrawableRightBounds.height()) / 2.0f);

mCompoundDrawables[RIGHT].draw(canvas);

canvas.restore();

}

if (mCompoundDrawables[TOP] != null) {

canvas.save();

canvas.translate(getCompoundPaddingLeft()

+ (hspace - mDrawableTopBounds.width()) / 2.0f, (vspace - mTextBounds.height()) / 2.0f + getPaddingTop());

mCompoundDrawables[TOP].draw(canvas);

canvas.restore();

}

if (mCompoundDrawables[BOTTOM] != null) {

canvas.save();

canvas.translate(getCompoundPaddingLeft()

+ (hspace - mDrawableBottomBounds.width()) / 2.0f,

getBottom() - getTop() - getPaddingBottom() - (vspace - mTextBounds.height()) / 2.0f - mDrawableBottomBounds.height());

mCompoundDrawables[BOTTOM].draw(canvas);

canvas.restore();

}

}

if (!TextUtils.isEmpty(mText)) {

float startX = (hspace - mTextBounds.width()) / 2.0f + getCompoundPaddingLeft();

//因为drawText以baseline为基准，因此需要向下移ascent

float startY = (vspace - mTextBounds.height()) / 2.0f + getCompoundPaddingTop() - mTextPaint.getFontMetrics().ascent;

mTextPaint.setColor(mTextColor.getColorForState(getDrawableState(), 0));

canvas.drawText(mText, 0, mText.length(), startX, startY, mTextPaint);

}

}

@Override

protected void drawableStateChanged() {

super.drawableStateChanged();

if (mTextColor != null && mTextColor.isStateful()) {

mTextPaint.setColor(mTextColor.getColorForState(getDrawableState(), 0));

}

if (mCompoundDrawables != null) {

final int[] state = getDrawableState();

for (Drawable dr : mCompoundDrawables) {

if (dr != null && dr.isStateful() && dr.setState(state)) {

invalidateDrawable(dr);

}

}

}

}

public void setCompoundDrawablesWithIntrinsicBounds(@Nullable Drawable left,

@Nullable Drawable top, @Nullable Drawable right, @Nullable Drawable bottom) {

if (left != null) {

left.setBounds(0, 0, left.getIntrinsicWidth(), left.getIntrinsicHeight());

}

if (right != null) {

right.setBounds(0, 0, right.getIntrinsicWidth(), right.getIntrinsicHeight());

}

if (top != null) {

top.setBounds(0, 0, top.getIntrinsicWidth(), top.getIntrinsicHeight());

}

if (bottom != null) {

bottom.setBounds(0, 0, bottom.getIntrinsicWidth(), bottom.getIntrinsicHeight());

}

setCompoundDrawables(left, top, right, bottom);

}

public void setCompoundDrawables(@Nullable Drawable left, @Nullable Drawable top,

@Nullable Drawable right, @Nullable Drawable bottom) {

if (mCompoundDrawables == null) {

mCompoundDrawables = new Drawable[4];

} else {

if (mCompoundDrawables[LEFT] != null && mCompoundDrawables[LEFT] != left) {

mCompoundDrawables[LEFT].setCallback(null);

}

if (mCompoundDrawables[TOP] != null && mCompoundDrawables[TOP] != top) {

mCompoundDrawables[TOP].setCallback(null);

}

if (mCompoundDrawables[RIGHT] != null && mCompoundDrawables[RIGHT] != right) {

mCompoundDrawables[RIGHT].setCallback(null);

}

if (mCompoundDrawables[BOTTOM] != null && mCompoundDrawables[BOTTOM] != bottom) {

mCompoundDrawables[BOTTOM].setCallback(null);

}

}

if (left != null) {

mDrawableLeftBounds = new Rect();

left.copyBounds(mDrawableLeftBounds);

left.setCallback(this);

mCompoundDrawables[LEFT] = left;

} else {

mCompoundDrawables[LEFT] = null;

}

if (top != null) {

mDrawableTopBounds = new Rect();

top.copyBounds(mDrawableTopBounds);

top.setCallback(this);

mCompoundDrawables[TOP] = top;

} else {

mCompoundDrawables[TOP] = null;

}

if (right != null) {

mDrawableRightBounds = new Rect();

right.copyBounds(mDrawableRightBounds);

right.setCallback(this);

mCompoundDrawables[RIGHT] = right;

} else {

mCompoundDrawables[RIGHT] = null;

}

if (bottom != null) {

mDrawableBottomBounds = new Rect();

bottom.copyBounds(mDrawableBottomBounds);

bottom.setCallback(this);

mCompoundDrawables[BOTTOM] = bottom;

} else {

mCompoundDrawables[BOTTOM] = null;

}

invalidate();

requestLayout();

}

public void setText(CharSequence text) {

this.mText = text;

invalidate();

requestLayout();

}

public void setTextSize(float textSize) {

this.mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, textSize, getResources().getDisplayMetrics());

invalidate();

requestLayout();

}

public void setTextColor(@ColorInt int textColor) {

this.mTextColor = ColorStateList.valueOf(textColor);

invalidate();

}

public void setTypeface(@Nullable Typeface tf) {

if (mTextPaint.getTypeface() != tf) {

mTextPaint.setTypeface(tf);

requestLayout();

invalidate();

}

}

private void calcTextBounds() {

mTextBounds = new Rect();

if (TextUtils.isEmpty(mText)) return;

if (Build.VERSION.SDK_INT > Build.VERSION_CODES.Q) {

mTextPaint.getTextBounds(mText, 0, mText.length(), mTextBounds);

} else {

int width = (int) Math.ceil(mTextPaint.measureText(mText.toString()));

Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();

int height = (int) Math.ceil(fontMetrics.descent - fontMetrics.ascent);

mTextBounds.set(0, 0, width, height);

}

}

}

感谢大家的支持，如有错误请指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Qianqian Liang
关注
Android中实现控件居中的方法
BitSlinger的博客
09-25 1403
一种常见的方法是使用布局容器来实现控件的居中显示。通过使用布局容器、布局参数或ConstraintLayout，可以轻松地实现控件的居中效果。根据具体需求和布局结构的复杂程度，选择合适的方法来实现控件的居中显示。另一种方法是使用布局参数来实现控件的居中显示。在Android应用程序开发中，经常需要将界面上的控件居中显示，以达到更好的用户体验。本文将介绍几种常见的方法来实现控件居中的效果，并提供相应的源代码示例。属性将TextView控件的四个边与父容器的四个边对齐，从而实现居中显示的效果。
android button组件居中显示
ETHAN IN IT
03-27 7496
<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:layout_gravity="cent
组件居中显示 安卓
weixin_30399055的博客
08-01 111
android:layout_centerVertical="true"android:layout_centerInParent="true" 转载于:https://www.cnblogs.com/YangBinChina/p/5726165.html
android使组件居中,Android中如何让控件居中
weixin_34703307的博客
05-25 745
测试部报告锁屏界面里，设置锁屏的那个控件位置不好，有点偏下。以至于设置的时候，图标都在界外了。打开packages/app/Settings里的res/layout-sw720dp/lockscreen_targets.xml对于横屏和竖屏两种情况，其实应该定义两个目录一种叫做land,另一种叫做port(都是缩写)，分别对应横屏和竖屏。这里就增加一个目录layout-sw720dp-land/作...
android使组件居中,Android布局居中的几种做法
weixin_39637979的博客
05-25 3446
Android的布局文件中，如果想让1个组件(布局或View)居中显示在另外一个布局(组件)中，可以由这么几种做法：android:layout_gravityandroid:gravityandroid:layout_centerInParentlayout_gravityandroid:layout_gravity，用来指定当前组件(布局或View)在父组件(布局)中的位置，父布局应当是Lin...
Android图文居中显示控件使用方法详解
09-07
在实际使用时，只需要在XML布局文件中像使用普通`TextView`一样引入这个自定义控件，并设置相应的属性，就可以轻松实现图文居中显示。这种方式简化了开发流程，提高了效率，是Android开发中一种实用的优化技巧。
Android Canvas 自定义控件：图文详解文字居中技巧
本文档详细介绍了在Android Canvas中使用`drawText`方法实现文字居中的技巧。在开发自定义Android控件时，经常需要处理文字的精确定位，尤其是在绘制时确保文本位于控件的正确位置。作者首先强调了理解坐标系的重要...
Android ImgView属性图文详解
08-27
Android ImgView 属性图文详解 在 Android 开发中，ImageView 是一个非常常用的控件，用于界面上显示图片。本文主要介绍了 ImageView 的一些重要属性，包括 src、background、scaleType 等，并通过实例代码和效果图...
android 实现表格横向混动_Android图文混排实现方式详解
weixin_32183107的博客
12-23 275
在使用TextView的时候，我们经常需要在TextView中进行图文混排，比如在QQ中聊天的消息中的表情，底部tab图标等。一、场景二、实现方式Android官方对TextView的图文混排提供了支持，我们可以从以下三种方式实现TextView的图文混排：1.在TextView中使用Compound Drawable属性；2.在TextView中使用Spannable多样式显示；3.在TextV...
android控件内容居中及控件布局居中
u012554768的专栏
11-15 1543
1. 让textView里面的内容水平居中 : android:gravity="center_horizontal" 2. 让textView控件在它的父布局里水平居中 android:layout_gravity="center_horizontal" 垂直居中同理。
android在代码中怎么使得控件居中,以及代码设置控件selector
梁锋的专栏
07-25 7166
最近在做一个项目，分别是登录前的状态，和登录后的状态，LinearLayout背景颜色和高度需要改变，LinearLayout布局中的TextView字体需要改变，ImageView控件要改变，原来是居中显示的，那么改变控件后，还想要居中，只需要在xml中设置android:layout_gravity="center"属性即可。
android 控件上下居中
最新发布
xie__jin__cheng的博客
05-18 404
android 控件上下居中
android 布局居中显示
热门推荐
xxs1984的专栏
11-16 1万+
添加android:gravity="center" android:layout_gravity="center"属性。 （android:gravity用于设置View组件的对齐方式，而android:layout_gravity用于设置Container组件的对齐方式） 比如把一组button放在一个Linearlayout里面，然后给该Linearlayout添加android:gra
android 代码设置剧中,Android 代码设置RelativeLayout元素居中
weixin_34204530的博客
05-26 486
用代码设置 RelativeLayout&period;LayoutParams1.注意 不能在RelativeLayout容器本身和他的子元素之间产生循环依赖,比如说,不能将RelativeLayout的高设置成为WRAP_CONTENT的时候将子元素的高设置成为 ALIGN_ ...android 代码设置、打开wifi热点及热点的连接用过快牙的朋友应该知道它们在两天设备之间传输文件的...
android 在代码中设置布局居中layout_gravity，layout_margin的方法
weixin_34337381的博客
06-04 1693
2019独角兽企业重金招聘Python工程师标准>>> ...
android状态栏图标居中,【技巧】让 Win 10 任务栏图标居中，像 macOS 和 Chrome OS 那样...
weixin_42395725的博客
05-30 474
Windows 10 的 “开始菜单” 和 “任务栏” 等核心功能默认是左对齐的，这已经持续了将近 20 年。而 macOS 和 Chrome OS 的做法是则居中展示，这样显得更加实用且对称。在本文中，我将向您展示如何使用一个非常简单的应用程序将任务栏图标居中。它不需要修改系统本身，无需担心对系统产生影响Windows 10 上的中心任务栏图标我们将使用由‪ChrisAndriessen‬开发的...
android 图片按钮 居中显示,实现Button按钮上放置icon或者其他的小图标！！怎么居中显示！！...
weixin_27015733的博客
05-26 2809
有时候我们做开发时候，需要Button上显示小图标例如： 但是呢 button 呢 本身已经设置了 Background了，如果你想设置一个图标，需要这么做了 用：android:drawableTop=“” 这个属性，但是你会发现一个问题就是这样的，android:drawableTop= 会让你的图标靠近的Button的上半部分，你想让它居中，很难调啊！！ 这么做： 一般我们的butt...
【Android】自定义控件让TextView的drawableLeft与文本一起居中显示
wk843620202的专栏
03-01 4602
自定义控件让TextView的drawableLeft与文本一起居中显示 在实际开发中，有时需要在TextView的左边或者右边显示一张图片，我们会是用drawableLeft(drawableRight)属性来设置图片 或者嵌套布局来实现，嵌套布局有一点不好就是增加了view的层级，影响性能，而设置drawableLeft属性也有个限制， 就是如果设置控件的大小为match_p
Android PopupWindow，居中显示，按屏幕比例调整大小，在某个控件的定点位置等
u013750244的博客
10-23 1755
先上图： 完整代码： PopupWindow pop; private void popwindow() { if (pop != null && pop.isShowing()) { pop.dismiss(); } pop = new PopupWindow(getContext()); ...
Android图文居中控件深度解析与自定义实现
"本文将深入探讨Android平台中图文居中显示控件的使用方法，重点介绍了一种更为简便的实现方式——自定义DrawableCenterTextView控件。传统的实现方式如使用AppCompatTextView，通常需要精确计算padding和drawable...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值