Android: объединение текста и изображения на кнопке или ImageButton

Я пытаюсь картинку (в качестве фона) на кнопку и динамически добавлять, в зависимости от того, что происходит во время выполнения, текст над изображением.



если я использую ImageButton У меня даже нет возможности добавить текст.
Если я использую Button Я могу добавить текст, но только определить изображение с android:drawableBottom и аналогичные атрибуты XML, как определено здесь.



однако эти атрибуты объединяют только текст и изображение в X-и y-измерениях, что означает, что я могу рисовать изображение вокруг моего текста, но не ниже/под моим текстом (с осью z, определенной как выходящая из дисплея).



какие-либо предложения о том, как это сделать? Одной из идей было бы либо расширить Button или ImageButton и переопределить draw()-метод. Но с моим текущим уровнем знаний я действительно не знаю, как это сделать (2D-рендеринг). Может быть, кто-то с большим опытом знает решение или хотя бы некоторые указатели для начала?

1817   14  

14 ответов:

можно назвать setBackground() на Button для установки фона кнопки.

любой текст будет отображаться над фоном.

Если вы ищете что-то подобное в xml есть: android:background атрибут, который работает таким же образом.

193  
2018-03-22 00:06:39

для пользователей, которые просто хотят поставить фон, значок-изображение и текст в одномButton из разных файлов: установить на Button фон, drawableTop / Bottom/Rigth / Left и обивка атрибуты.

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/home_btn_test"
        android:drawableTop="@drawable/home_icon_test"
        android:textColor="#FFFFFF"
        android:id="@+id/ButtonTest"
        android:paddingTop="32sp"
        android:drawablePadding="-15sp"
        android:text="this is text"></Button>

для более сложного расположения вы также можете использовать RelativeLayout и сделать его интерактивным.

руководство: отличный учебник, который охватывает оба случая: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx

565  
2016-12-30 14:07:15

есть гораздо лучшее решение этой проблемы.

просто нормальный Button и с помощью drawableLeft и gravity атрибуты.

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/my_btn_icon"
  android:gravity="left|center_vertical" />

таким образом, вы получите кнопку, которая отображает значок в левой части кнопки и текст в нужном месте значок посередине.

319  
2016-12-30 14:09:06

enter image description here

     <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:background="@drawable/home_button"
            android:drawableLeft="@android:drawable/ic_menu_edit"
            android:drawablePadding="6dp"
            android:gravity="left|center"
            android:height="60dp"
            android:padding="6dp"
            android:text="AndroidDhina"
            android:textColor="#000"
            android:textStyle="bold" />
59  
2015-12-31 17:47:18

просто используйте LinearLayout и притворитесь, что это Button установка background и clickable ключ:

<LinearLayout
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_default"
    android:clickable="true"
    android:orientation="horizontal" >

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

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>
48  
2016-12-30 14:09:27

просто заменить 

android:background="@drawable/icon"

С

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

Изз довольно хороший трюк.. ;)

41  
2012-08-29 09:53:12

Я взял другой подход от тех, которые указаны здесь, и он работает очень хорошо, поэтому я хотел бы поделиться им.

Я использую стиль для создания пользовательской кнопки с изображением слева и текстом в центре справа. Просто следуйте 4 "простых шага" ниже:

I. создайте свои 9 патчей, используя по крайней мере 3 разных файла PNG и инструмент, который у вас есть: /YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch. После этого вы должны быть:

button_normal.9.формат PNG, button_focused.9.png и button_pressed.9.png

затем загрузите или создайте значок 24x24 PNG.

ic_your_icon.png

сохранить все в папке drawable / на вашем проекте Android.

второй. Создать XML-файл, называемый button_selector.xml в вашем проекте в папке drawable/. Государства должны быть такими:

<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<item android:state_focused="true" android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />

раздел III. Перейти к значениям/ папку и открыть или создать стили.xml-файл и создайте следующий XML код:

<style name="ButtonNormalText" parent="@android:style/Widget.Button">
    <item name="android:textColor" >@color/black</item>
    <item name="android:textSize" >12dip</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:height" >44dip</item>
    <item name="android:background" >@drawable/button_selector</item>
    <item name="android:focusable" >true</item>
    <item name="android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon является "дочерним стилем", потому что он расширяет ButtonNormalText ("родительский стиль").

обратите внимание, что изменение drawableLeft в стиле ButtonNormalTextWithIcon, чтобы drawableRight, drawableTop или drawableBottom вы можете поместить значок в другое положение по отношению к тексту.

раздел IV. Перейдите к папке, в план/ где у вас есть свой XML для ИП и перейти на кнопку, где вы хотите применить стиль, и сделать его выглядит так:

<Button android:id="@+id/buttonSubmit" 
android:text="@string/button_submit" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

и... вуаля! У вас есть кнопка с изображением на левой стороне.

для меня это лучший способ сделать это! потому что, делая это таким образом, вы можете управлять размером текста кнопки отдельно от значка, который вы хотите отобразить, и использовать тот же фон, который можно нарисовать для нескольких кнопок с разными значками, соблюдая принципы пользовательского интерфейса Android с использованием стилей.

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

20  
2015-08-04 21:13:58 
 <Button android:id="@+id/imeageTextBtn" 
        android:layout_width="240dip"
        android:layout_height="wrap_content"
        android:text="Side Icon With Text Button"
        android:textSize="20sp"
        android:drawableLeft="@drawable/left_side_icon"         
        />
12  
2011-10-20 11:30:37

можно использовать drawableTop (кроме drawableLeft и т. д.) Для изображения и установите текст под изображением, добавив gravityleft|center_vertical

<Button
            android:id="@+id/btn_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableTop="@drawable/videos"
            android:gravity="left|center_vertical"
            android:onClick="onClickFragment"
            android:text="Videos"
            android:textColor="@color/white" />
10  
2016-12-30 14:07:47

наверное, мое решение подойдет для многих пользователей, я надеюсь.

то, что я предлагаю это делает TextView с вашим стилем. Он отлично работает для меня и имеет все функции, такие как кнопка.

прежде всего, позволяет сделать стиль кнопки, который вы можете использовать везде...Я создаю button_with_hover.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#8dbab3" />
            <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#284682" />
            <solid android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="@color/ControlColors" />
            <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

во-вторых, Позволяет создать кнопку textview. 

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dip"
    android:layout_gravity="right|bottom"
    android:gravity="center"
    android:padding="12dip"
    android:background="@drawable/button_with_hover"
    android:clickable="true"
    android:drawableLeft="@android:drawable/btn_star_big_off"
    android:textColor="#ffffffff"
    android:text="Golden Gate" />

и это результат. Затем стиль вашей пользовательской кнопки с любым цвета или любые другие свойства и поля. Удачи

enter image description here

6  
2017-02-22 15:42:55 
<Button
     android:id="@+id/groups_button_bg"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="Groups"
     android:drawableTop="@drawable/[image]" />


android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop

http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-android/

5  
2013-03-14 15:40:32

этот код работает для меня отлично 

<LinearLayout
    android:id="@+id/choosePhotosView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clickable="true"
    android:background="@drawable/transparent_button_bg_rev_selector">

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

     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="@string/choose_photos_tv"/>

</LinearLayout>
5  
2015-07-24 13:40:36

Вы можете использовать это:

  <Button
                    android:id="@+id/reset_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Reset all"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/undo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Undo"
                    android:textColor="#ffffff" />

в том, что я поставил изображение в качестве background, а также добавлен текст..!

0  
2016-12-30 14:08:09 
    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />
-2  
2018-01-01 10:27:11

Comments

    Ничего не найдено.
Click here to cancel reply.