Я пытаюсь разместить изображение (как фон) на кнопке и динамически добавлять, в зависимости от того, что происходит во время выполнения, некоторый текст над/поверх изображения.
Если я использую ImageButton
, у меня даже нет возможности добавить текст.
Если я использую Button
, я могу добавить текст, но только определить изображение с android:drawableBottom
и подобными XML атрибутами, как определено здесь.
Однако эти атрибуты объединяют текст и изображение только в x- и y-размерах, то есть я могу нарисовать изображение вокруг текста, но не под текстом (при этом ось z определяется как выходящая из дисплея).
Есть предложения, как это сделать? Одной из идей было бы расширение Button
или ImageButton
и переопределение метода draw()
. Но с моим текущим уровнем знаний я не знаю, как это сделать (2D рендеринг). Может быть, кто-то с большим опытом знает решение или хотя бы какие-то ориентиры для начала?
Для пользователей, которые просто хотят поместить фон, иконку-изображение и текст в одну Button
из разных файлов: Установите на Button
фон, атрибуты drawableTop/Bottom/Rigth/Left и padding.
<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.
Есть гораздо лучшее решение для этой проблемы.
Просто возьмите обычную 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" />
Таким образом, вы получите кнопку, которая отображает значок в левой части кнопки и текст в правой части значка вертикально центрированный.
Вы можете вызвать setBackground()
на Button
, чтобы установить фон кнопки.
Любой текст будет отображаться поверх фона.
Если вы ищете что-то похожее в xml, то это:
android:background
атрибут, который работает аналогичным образом.
<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" />
Просто использовать макет и делать вид, что это'ы кнопкаНастройки
фон` и кликабельно ключ:
<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>
Я взял другой подход из тех, что упомянуты здесь, и это действительно работает хорошо, так что я хотел поделиться.
Я'м, используя стиль, чтобы создать пользовательскую кнопку с изображением слева и текст по центру-справа. Просто следуйте 4 на "легкие шаги" и ниже:
И. создайте свой 9 патчи, используя как минимум 3 различных PNG-файлов и инструмент, по адресу: /YOUR_OWN_PATH/андроид-версию SDK-mac_x86/инструменты/./draw9patch. После этого вы должны иметь:
button_normal.9.ПНГ, button_focused.9.PNG и button_pressed.9.ПНГ
Затем загрузите или создайте иконку 24х24 в формате PNG.
ic_your_icon.ПНГ
Сохранить все в папке холст/ о проекте Android.
Второй. Создать XML-файл button_selector.xml в проекте в папке холст/. Государства должна быть такой:
<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. Перейти к значениям/ папку и открыть или создать файл styles.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 вы можете разместить икону в другой позиции по отношению к тексту.
ИЖ. Перейдите к папке, в план/ где у вас есть свой 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 с помощью стилей.
Вы также можете создать тему для вашего приложения и добавить в "Родительский", чтобы так все кнопки выглядят одинаково, и обратиться в "детский стиль" с значок только там, где нужно.
<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"
/>
Вы можете использовать drawableTop
(также drawableLeft
и т. д.) Для изображения и установить текст под изображением, добавив "тяжести" левом|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" />
Важное Обновление ##
Дон'т использовать обычный андроид:drawableLeft` и т. д... с векторные рисунки, то это будет ошибка в ниже версии API. (Я сталкивался с ней в живой приложение)
Если вы используете векторные катры, то вы должны
1.1.0-alpha01
, поэтому совместимости приложений версия должна быть по крайней мере 1.1.0-alpha01. Текущая последняя версия
1.1.0-alpha02, используйте последние версии для лучшей надежности, см. Примечания к выпуску - Ссылка. реализации 'androidx.совместимости приложений:совместимости приложений:1.1.0-alpha02'`
AppCompatTextView
/AppCompatButton
/`` ,
: drawableTopCompat,
приложения:drawableRightCompat,
приложения:drawableBottomCompat,
приложения:приложение drawableStartCompatи
: drawableEndCompat`Если вы Don'т нужна векторные катры, то вы можете
,
для Android:drawableRight,
андроид:drawableBottom,
андроид:drawableTop` ,
кнопка&
полей EditTextили
совместимости приложений` классов.Вы можете достичь выход как ниже -
Наверное, мое решение подойдет для многих пользователей, я надеюсь.
Я предлагаю это сделать текстовое представление с вашим стилем. Это работает для меня отлично, и имеет все функции, как кнопка.
В первую очередь позволяет сделать стиль кнопки, который вы можете использовать везде...я создаю 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" />
И это является результатом. Затем стиль пользовательские кнопки с любого цвета или других свойств и полей. Удачи
<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/
Этот код работает для меня отлично
<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>
Вы можете использовать это:
<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" />
в том, что я поставил изображение в качестве "фоновых", а также добавил текст..!
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/temp"
/>