Question

在我的应用程序中，我有一个标题栏，其中包含一个文本视图，其中fill_parent为width，具有特定的背景颜色和一些居中的文本。现在我想在标题栏的左侧添加一个drawable，所以我设置了drawableLeft，确定显示了文本和图像。然而，这里的问题是文本不再正确居中，例如，当添加drawable时，文本向右移动一点，如此处的屏幕截图所示：

without drawable
with drawable

无论如何，我可以正确地将文本居中，并且在不使用其他布局项目（例如LinearLayout）的情况下将drawable定位在上面吗？

Answer 1

虽然很脆弱，但您可以通过在drawable上设置否定填充来避免使用包装器布局：

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:drawableLeft="@drawable/icon"
    android:drawablePadding="-20sp"
    android:text="blah blah blah" />

你必须将填充调整到drawable的宽度，但是你只剩下一个TextView而不是额外的LinearLayout等。

Answer 2

我遇到过类似的问题。通过使用带有TextView和layout_width="wrap_content"参数的单layout_gravity="center"来解决此问题：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/some_drawable"
    android:text="some text"
    android:layout_gravity="center"
    android:gravity="center"
    />

Answer 3

请尝试以下操作：

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:padding="10dp"
    android:textAlignment="center" />

Answer 4

我遇到了同样的问题，我在Textview中进行了一些小改动，

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:drawableLeft="@drawable/search_red"
    android:text="your text goes here"
    />

Answer 5

您可以将TextView的父级设置为RelativeLayout，其宽度为match_parent。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<TextView
        android:id="@+id/edit_location_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/add_location_text_view"
        android:gravity="start|center_vertical"
        android:layout_centerHorizontal="true"
        android:drawableStart="@android:drawable/ic_menu_edit"
        android:text="Edit Location" />

</RelativeLayout>

Answer 6

使用这种方式

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/White"
     >

  <RelativeLayout
       android:id="@+id/rlheader"
       android:layout_width="fill_parent"
       android:layout_height="50dp"
       android:layout_alignParentTop="true"
       android:background="@color/HeaderColor"

        >

        <TextView

           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_centerHorizontal="true"
           android:layout_centerVertical="true"
           android:text="Header_Title"
            />

        <ImageView
           android:id="@+id/ivSetting"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentLeft="true"
           android:layout_centerVertical="true"
           android:layout_marginLeft="10dp"
           android:src="@drawable/setting" />


    </RelativeLayout>

</RelativeLayout>

它看起来像我的演示项目的快照

Header Image

Answer 7

这对我有用。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/trusted"
        android:gravity="center"
        android:text="@string/trusted"/>

</LinearLayout>

Answer 8

您可以使用android:gravity="center_vertical"将文字与图像垂直居中。或者它可以使用android:gravity="center"在textView中居中。

＆＃13;

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:drawableLeft="@drawable/icon"
    android:text="Your text here" />

＆＃13;

Answer 9

> This line is important ->> android:gravity="start|center_vertical


 <LinearLayout
            android:layout_width="match_parent"
            android:layout_margin="@dimen/marginplus2"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="@string/like"
                android:gravity="start|center_vertical"
                android:drawablePadding="@dimen/marginplus1"
                android:drawableLeft="@drawable/ic_like"
                android:layout_height="wrap_content" />

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1.5"
                android:text="@string/comments"
                android:drawablePadding="@dimen/marginplus1"
                android:gravity="start|center_vertical"
                android:drawableLeft="@drawable/ic_comment"
                android:layout_height="wrap_content" />
            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="@string/share"
                android:drawablePadding="@dimen/marginplus1"
                android:gravity="start|center_vertical"
                android:drawableLeft="@drawable/ic_share"
                android:layout_height="wrap_content" />

        </LinearLayout>

Answer 10

将您的 TextView 包裹在一个 LinearLayout 中。然后将 android:gravity="center_horizontal" 设置为您的 LinearLayout..

<LinearLayout
        android:layout_width="0dp"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableStart="@drawable/your_drawable"
            android:drawablePadding="5dp"
            android:ellipsize="end"
            android:maxLines="1"
            android:textAlignment="center"
            android:textColor="@color/ic_text_color"
            android:textSize="15sp"
            tools:text="Your Text.." />

    </LinearLayout>

Answer 11

你可以像这样设置标题

<RelativeLayout
             android:id="@+id/linearLayout1"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/head" >

             <ImageView
                 android:id="@+id/cat"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"

                 android:layout_marginLeft="5dp"
                 android:onClick="onClick"
                 android:layout_marginTop="10dp"
                 android:src="@drawable/btn_back_" />


         <RelativeLayout
             android:id="@+id/linearLayout1"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:gravity="center" >

           <TextView
 android:id="@+id/TvTitle"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text=""
 android:layout_marginLeft="10dp"
 android:layout_marginRight="10dp"
 android:textColor="#000000" 

 android:textSize="20sp"/>
             </RelativeLayout>

         </RelativeLayout>

根据需要给出Textview的高度，图像源

Answer 12

无需过多测试，换一种方式

    class CenterDrawableToggleButton @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
    ) : AppCompatToggleButton(context, attrs, defStyleAttr) {

        private val centerMatrix = Matrix()

        override fun onDraw(canvas: Canvas?) {
            canvas?.save()?:return
            centerMatrix.reset()
            centerMatrix.postTranslate(width / 2F - (getDrawWidth() / 2), 0F)
            canvas.concat(centerMatrix)
            super.onDraw(canvas)
            canvas.restore()
        }

        private fun getDrawWidth(): Float {
            return paint.measureText(text.toString()) + compoundPaddingRight + compoundPaddingLeft
        }
    }

Answer 13

接受的答案对我不起作用，如果TextView宽度与我使用FrameLayout所做的匹配，则失败。

 <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:background="#000">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:drawableStart="@drawable/ic_circle_check_white"
            android:drawablePadding="10dp"
            android:text="Header"
            android:textColor="#fff"
            android:textSize="14sp"/>

    </FrameLayout>

Answer 14

最好的方法是使用ConstraintLayout，使textview位于布局的中心，其宽度为warp_content（现在不要使用0dp）以便可绘制对象跟随文本。

<TextView
    android:id="@+id/tv_test"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="test"
    android:drawableLeft="@drawable/you_drawable"
    android:drawablePadding="5dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    />

Answer 15

是否上述解决方案都不适合您？然后尝试下面的答案

该设计的示例屏幕截图。

对于上图，请找到下面的代码。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:id="@+id/my_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/bb"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="@color/gray"
            android:orientation="horizontal"
            android:weightSum="2">

            <TextView
                android:id="@+id/filter_tv"
                style="?android:attr/buttonBarButtonStyle"
                android:layout_width="wrap_content"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="center_horizontal"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_baseline_filter_list"
                android:gravity="center|fill_horizontal"
                android:paddingLeft="60dp"
                android:text="Filter"
                android:textAllCaps="false"
                android:textStyle="normal" />

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:layout_below="@+id/bb"
                android:background="@color/gray" />

            <TextView
                android:id="@+id/sort_tv"
                style="?android:attr/buttonBarButtonStyle"
                android:layout_width="wrap_content"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="center|center_horizontal"
                android:layout_weight="1"
                android:drawableLeft="@drawable/ic_baseline_sort"
                android:drawablePadding="20dp"
                android:gravity="center|fill_horizontal"
                android:paddingLeft="40dp"
                android:text="Sort"
                android:textAllCaps="false" />

        </LinearLayout>
    </android.support.v7.widget.CardView>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.9dp"
        android:layout_below="@+id/my_card"
        android:background="@color/gray" />
</RelativeLayout>

Answer 16

删除DrawableLeft并使用容器FrameLayout。

<FrameLayout
     android:id="@+id/container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content" >

     <ImageView
         android:id="@+id/image"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginLeft="5dp"
         android:layout_gravity="center_vertical"
         android:src="@drawable/image" />

     <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Text"
        android:layout_gravity="center" />
</FrameLayout>

Answer 17

一个简单的解决方案是在textview的另一侧使用相同大小的透明图像。在我的例子中，我复制了我的实际vector_image并将颜色更改为透明。

<TextView
        android:id="@+id/name"
        style="@style/TextStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableEnd="@drawable/ic_vector_caret_down_green"
        android:drawableStart="@drawable/ic_vector_space_18"
        android:gravity="center"
        android:padding="12dp"
        android:textColor="@color/green"/>

Answer 18

127.0.0.11:53

Answer 19

drawable是TextView的一部分，因此如果文本的高度小于drawable的高度，textview的高度将是drawable的高度。

您可以将TextView的重力属性设置为center_vertical，因此文本将位于中心。

Answer 20

这很简单..试试吧..

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center|left"
                android:drawableLeft="@drawable/icon"
                android:text="something something" />

Answer 21

尝试流动：

public class DrawableCenterTextView extends AppCompatTextView {

    public DrawableCenterTextView(Context context, AttributeSet attrs,
                                  int defStyle) {
        super(context, attrs, defStyle);
    }

    public DrawableCenterTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DrawableCenterTextView(Context context) {
        super(context);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // We want the icon and/or text grouped together and centered as a group.
        // We need to accommodate any existing padding
        final float buttonContentWidth = getWidth() - getPaddingLeft() - getPaddingRight();

        float textWidth = 0f;
        final Layout layout = getLayout();
        if (layout != null) {
            for (int i = 0; i < layout.getLineCount(); i++) {
                textWidth = Math.max(textWidth, layout.getLineRight(i));
            }
        }

        // Compute left drawable width, if any
        Drawable[] drawables = getCompoundDrawables();
        Drawable drawableLeft = drawables[0];

        int drawableWidth = (drawableLeft != null) ? drawableLeft.getIntrinsicWidth() : 0;

        // We only count the drawable padding if there is both an icon and text
        int drawablePadding = ((textWidth > 0) && (drawableLeft != null)) ? getCompoundDrawablePadding() : 0;

        // Adjust contents to center
        float bodyWidth = textWidth + drawableWidth + drawablePadding;
        int translate = (int) ((buttonContentWidth - bodyWidth));
        if (translate != 0)
            setPadding(translate, 0, translate, 0);
        super.onDraw(canvas);
    }
}

Answer 22

获得它的最简单方法是：

<RelativeLayout
         android:id="@+id/linearLayout1"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="@drawable/head" >

         <ImageView
             android:id="@+id/cat"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginLeft="5dp"
             android:onClick="onClick"
             android:layout_marginTop="10dp"
             android:layout_alignParentLeft="true"
             android:src="@drawable/btn_back_d" />

       <TextView
            android:id="@+id/TvTitle"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text=""
            android:layout_centerHorizontal="true" 
            android:textColor="#000000" 
            android:textSize="20sp"/>

哪里

ImageView的alignParentLeft设置为true和
TextView的centerHorizontal设置为true

在drawViewLeft居中的TextView中保留文本

22 个答案: