Как я могу очистить эти сложные кнопки? - PullRequest
Новая
       11

Как я могу очистить эти сложные кнопки?

0 голосов
/ 13 января 2019

У нас есть приложение для Android, у которого есть вид с рядом кнопок вверху. Каждая из трех кнопок в строке состоит из значка внутри круга с текстом, который описывает его под кружком (что-то вроде этого каркаса, хотя я выбрал значки наугад, так как мне не разрешено делиться действительными ):

Our icon bar

Изначально эти кнопки были спроектированы так, чтобы значок, фон круга и граница круга представляли собой растровое изображение (с несколькими плотностями, если требуется) и следующий код (повторяется три раза, по одному для каждой кнопки): 

<LinearLayout
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/button1Image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:clickable="false"
        android:contentDescription="@string/button1Text"
        android:src="@drawable/button1Image" />

    <TextView
        android:id="@+id/txtButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="3dp"
        android:text="@string/button1Text"
        android:textColor="@android:color/white"
        android:textSize="14sp" />
</LinearLayout>

Передо мной была поставлена ​​задача модернизировать этот код, потому что все иконки, которые мы используем, на самом деле все изначально векторные иконки (из Библиотеки дизайна материалов), и мы должны иметь возможность просто использовать векторы, и нам не нужно беспокоиться о растеризации и плотность пикселей.

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

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

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

РАЗЪЯСНЕНИЕ : Что я хотел бы сделать здесь, так это убрать круги с значков и сделать фоновый цвет круга кнопки. Я знаю, что могу сделать это с двумя кнопками, одна для текста без фона и одна для изображения с фоном, но я хочу знать, есть ли способ сделать это с помощью одного тега XML, так как у меня есть целое куча их.

Ответы [ 2 ]

0 голосов
/ 13 января 2019

использовать Материал кнопки ; например: 

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        android:text="@string/text_button_delete"
        android:layout_width="wrap_content"
        android:layout_height="148dp"
        android:elevation="4dp"
        android:textSize="18sp"
        app:cornerRadius="80dp"
        app:icon="@drawable/ic_delete_black_36dp"
        app:iconPadding="6dp"/>

</layout>
0 голосов
/ 13 января 2019

Вы можете использовать кнопку и установить значок кнопки, используя android:drawableTop="@drawable/icon".

Вот полный код: 

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/ic_launcher_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

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

  1. Создать attrs.xml файл в res/values folder и topIcon как имя атрибута: 

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="topIcon" format="reference" />

    <declare-styleable name="CustomButton">
        <attr name="topIcon" />
    </declare-styleable>
</resources>

  2. Создайте CustomButton класс и добавьте нарисованный круг в качестве фонового слоя, используя LayerDrawable : 

    public class CustomButton extends Button {
    public CustomButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        if (attrs != null) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomButton);
            Drawable topIcon = typedArray.getDrawable(R.styleable.CustomButton_topIcon);

            LayerDrawable layerDrawable = new LayerDrawable(
                    new Drawable[]{getResources().getDrawable(R.drawable.circle), topIcon}
            );

            setCompoundDrawablesWithIntrinsicBounds(null, layerDrawable, null, null);
            typedArray.recycle();
        }
    }
}

  3. Использовать созданный компонент из файла макета и установить атрибут topIcon. Также, поскольку мы расширяем класс Button, вы можете использовать любые другие его атрибуты. Убедитесь, что имя пакета указано правильно: 

       <com.natigbabayev.experimental.CustomButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:topIcon="@android:drawable/ic_input_add"/>
...