Как центрировать значок и текст в кнопке Android с шириной, установленной на «заполнить родительский элемент»

Question

Я хочу иметь кнопку Android с иконкой + текст в центре.Я использую атрибут drawableLeft для установки изображения, это хорошо работает, если кнопка имеет ширину "wrap_content", но мне нужно растянуть ее до максимальной ширины, поэтому я использую ширину "fill_parent".Это перемещает мой значок прямо слева от кнопки, и я хочу, чтобы значок и текст центрировались внутри кнопки.

Я попытался настроить заполнение, но это только позволяет дать фиксированное значение, так что это не то, что мне нужно.Мне нужно, чтобы значок + текст был выровнен по центру.

<Button 
    android:id="@+id/startTelemoteButton" 
    android:text="@string/start_telemote"
    android:drawableLeft="@drawable/start"
    android:paddingLeft="20dip"
    android:paddingRight="20dip"            
    android:width="fill_parent"
    android:heigh="wrap_content" />

Какие-нибудь предложения о том, как мне этого добиться?

Answer 1

Как предположил Роджа, до 4.0 не было прямого способа центрировать текст с помощью рисования. И действительно, установка значения padding_left действительно отодвигает отрисовку от границы. Поэтому я предлагаю, чтобы во время выполнения вы точно вычислили, сколько пикселей от левой границы должно быть у вашего рисованного объекта, а затем передали его, используя setPadding Ваш расчет может быть что-то вроде

int paddingLeft = (button.getWidth() - drawableWidth - textWidth) / 2;

Фиксированная ширина рисованного элемента, и вы можете посмотреть его, а также рассчитать или угадать ширину текста.

Наконец, вам нужно будет умножить значение отступа на плотность экрана, что вы можете сделать, используя DisplayMetrics

Answer 2

Это может быть старая / закрытая тема, но я везде искал что-то полезное, пока не решил создать собственное решение. Если кто-то здесь пытается найти ответ, попробуйте этот, это может сэкономить вам минуту на размышления

          <LinearLayout
            android:id="@+id/llContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/selector"
            android:clickable="true"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="10dp"
            android:textStyle="bold">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="This is a text" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/icon_image />


        </LinearLayout>

Поскольку линейный макет действует как контейнер и тот, у кого есть селектор, при щелчке по всему линейному макету все будет выглядеть именно так, как должно быть. если вы хотите, чтобы он был по центру, используйте относительный insteaf. Если вы хотите, чтобы он был отцентрирован по горизонтали, измените ориентацию на горизонтальную.

Обратите внимание НЕ забудьте добавить android: clickable = "true" в ваш основной контейнер (относительный или линейный) для выполнения действия.

Опять же, это может быть старая тема, но все же может помочь кому-то там.

-шоки надеются, что это поможет- happycodings.

Answer 3

Я не проверял это, но кажется, что вы можете использовать CenteredContentButton library

Answer 4

Другая возможность сохранить тему кнопки.

<Button
            android:id="@+id/pf_bt_edit"
            android:layout_height="@dimen/standard_height"
            android:layout_width="match_parent"
            />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_alignBottom="@id/pf_bt_edit"
            android:layout_alignLeft="@id/pf_bt_edit"
            android:layout_alignRight="@id/pf_bt_edit"
            android:layout_alignTop="@id/pf_bt_edit"
            android:layout_margin="@dimen/margin_10"
            android:clickable="false"
            android:elevation="20dp"
            android:gravity="center"
            android:orientation="horizontal"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:clickable="false"
                android:src="@drawable/ic_edit_white_48dp"/>

            <TextView
                android:id="@+id/pf_tv_edit"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="@dimen/margin_5"
                android:clickable="false"
                android:gravity="center"
                android:text="@string/pf_bt_edit"/>

        </LinearLayout>

С этим решением, если ваш добавить @ Цвет / your_color @ Цвет / your_highlight_color в вашей теме деятельности у вас может быть тема Matherial на Lollipop с тенями и ряби, а для предыдущей версии - плоская кнопка с вашим цветом и выделением цвета при нажатии.

Более того, с помощью этого решения авторазмер изображения

Результат: Сначала на устройстве Lollipop Второе: на предварительном леденце 3-е: Устройство предварительного леденца нажмите кнопку

Answer 5

открытый класс DrawableCenterTextView расширяет TextView {

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) {
    Drawable[] drawables = getCompoundDrawables();
    if (drawables != null) {
        Drawable drawableLeft = drawables[0];
        Drawable drawableRight = drawables[2];
        if (drawableLeft != null || drawableRight != null) {
            float textWidth = getPaint().measureText(getText().toString());
            int drawablePadding = getCompoundDrawablePadding();
            int drawableWidth = 0;
            if (drawableLeft != null)
                drawableWidth = drawableLeft.getIntrinsicWidth();
            else if (drawableRight != null) {
                drawableWidth = drawableRight.getIntrinsicWidth();
            }
            float bodyWidth = textWidth + drawableWidth + drawablePadding;
            canvas.translate((getWidth() - bodyWidth) / 2, 0);
        }
    }
    super.onDraw(canvas);
}

}

Answer 6

Грязное исправление.

android:paddingTop="10dp"
android:drawableTop="@drawable/ic_src"

Определение правильной подкладки решает задачу.Однако для различного экрана используйте разные отступы и поместите их в ресурс Dimensions в соответствующую папку значений.

Answer 7

Использование RelativeLayout (контейнер) и android: layout_centerHorizont = "true" , мой образец:

                <RelativeLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" >

                    <CheckBox
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_centerHorizontal="true"
                        android:layout_gravity="center"
                        android:layout_marginBottom="5dp"
                        android:layout_marginLeft="10dp"
                        android:layout_marginTop="5dp"
                        android:button="@drawable/bg_fav_detail"
                        android:drawablePadding="5dp"
                        android:text=" Favorite" />
                </RelativeLayout>