Android - макет панели инструментов с фоном списка состояний, который можно нарисовать только для иконки

Question

Я пытаюсь создать макет панели управления. Он отличается от панели инструментов Google I / O в том смысле, что фон значка изображения и текст под значком различаются.

Другими словами, значок (только изображение) имеет StateListDrawable для своего фона, в то время как текст имеет прозрачный фон. Один из способов сделать это - поместить эту комбинацию изображения и текста в LinearLayout и использовать ее в макете панели мониторинга для каждого элемента, который кажется не таким простым. Это единственный способ, которым я мог это сделать? или есть лучшее и простое решение?

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

• Файл макета dashboard2.xml использует класс Google DashboardLayout. В основном задании я просто устанавливаю содержимое представления на dashboard2

• В этом проекте вы найдете список состояний, который можно нарисовать в папке drawable с именем dashboard_icon_bg_selector.xml. Я хочу, чтобы фон всех значков на панели инструментов отображался в этом списке состояний.

Любое предложение приветствуется.

Answer 1

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

Код для кнопки (в файле макета):

<Button android:id="@+id/home_btn_schedule"
    style="@style/DPDashBoardButton"
    android:text="button 1"
    android:drawableTop="@drawable/dashboard_icon_bg_selector" />

Две LayerDrawables, одна для состояния «нажатие / фокусировка / выделение» и одна для каждого другого состояния (покой):

dashboard_icon_layer_background_selected.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/dashboard_icon_background_selected" />
    <item android:bottom="14dip">
        <bitmap android:src="@drawable/btn_star_big_on_pressed"
            android:gravity="center" />
    </item>
</layer-list>

dashboard_icon_layer_background_rest.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/dashboard_icon_background_rest" />
    <item android:bottom="14dip">
        <bitmap android:src="@drawable/btn_star_big_on_rest"
            android:gravity="center" />
    </item>
</layer-list>

Некоторые особенности этого конкретного примера:

• Причина, по которой звездные изображения упоминаются как растровые изображения, заключается в том, что Android не может масштабировать их до полной ширины и высоты контейнера. Нижнее расстояние добавляется, чтобы фактически центрировать звезду относительно фонового изображения (textSize = 12, плюс 2 для отступа), что, честно говоря, довольно уродливо для такого жесткого кода. Без этого смещения центрированная гравитация поместит изображение звезды в центр всего контейнера, включая пространство, которое добавляет текст.
• Таким образом, замена элемента растровым изображением на <item android:drawable="@drawable/btn_star_big_on_rest" /> приведет к увеличению масштаба изображения звезды. Просто попробуйте один раз, чтобы понять эффект.
• Это явление весьма прискорбно, поскольку мы можем сослаться на другой XML-файл, который можно нарисовать выше, используя все его уже определенные состояния! Вот почему мне фактически пришлось скопировать два звездных изображения из репозитория Android: вы не можете ссылаться на XML, который можно рисовать как источник растрового изображения, и на реальные изображения также нельзя ссылаться публично. Попробуйте заменить определение растрового изображения на <item android:drawable="@android:drawable/btn_star" />, чтобы увеличить масштаб изображения, но сохраните предварительно определенные состояния без изменений.
• Вы могли бы потенциально обойти проблему масштабирования, создав 9 патчей из звездных изображений, сделав StateListDrawable для различных состояний и ссылаясь на получаемый XML-объект, который можно нарисовать в элементе слоя. Хотя Android по-прежнему растягивает все изображение до полного размера контейнера, 9 патчей могут обеспечить масштабирование только прозрачных пикселей.
• // Редактировать: я понял, что есть еще одно ограничение в этом подходе, так как нажатие на текст не изменит состояние значка. Это может быть то, что вам нужно, но лично я бы сказал, что с точки зрения пользователя было бы целесообразно, чтобы все это реагировало на сенсорные события ...

Надеюсь, это имеет смысл! Просто чтобы показать вам результат: левый - все в состоянии покоя, правый - при нажатии на верхнюю кнопку.

Застегнутый проект здесь.

Answer 2

Похоже, что это будет легко решено с использованием изображений 9-патчей в качестве ресурсов для ваших различных состояний, а также списка состояний в качестве фона для рисования или TextView с drawableTop, установленным на значок ... если вы не хотите значок изменить, а также фон?

Answer 3

Разве вы не можете использовать TextView и установить в качестве фона StateListDrawable? Если вам нужно немного места для «иконки» выше, вы можете установить Gravity of TextView на Bottom и установить для него фиксированную высоту.

Edit: А еще лучше, вы можете использовать свойство drawableTop:

 <TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="bottom|center"
    android:text="Example"
    android:drawableTop="@drawable/statelist"
    android:drawablePadding="5dp"/>

Редактировать 2: Следуя примеру Google, вы можете установить стиль для Button / TextView. Он изменил цвет фона, потому что это поведение системы по умолчанию. Попробуйте следующее:

main_layout.xml

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

    <TextView
        style="@style/DashboardTextView"
        android:drawableTop="@drawable/state_list_drawable"
        android:text="Item1" />

    <TextView
        style="@style/DashboardTextView"
        android:drawableTop="@drawable/state_list_drawable"
        android:text="Item2" />

    <TextView
        style="@style/DashboardTextView"
        android:drawableTop="@drawable/state_list_drawable"
        android:text="Item3" />

    <TextView
        style="@style/DashboardTextView"
        android:drawableTop="@drawable/state_list_drawable"
        android:text="Item4" />

    <TextView
        style="@style/DashboardTextView"
        android:drawableTop="@drawable/state_list_drawable"
        android:text="Item5" />

    <TextView
        style="@style/DashboardTextView"
        android:drawableTop="@drawable/state_list_drawable"
        android:text="Item6" />

</org.demo.DashboardLayout>

И добавьте это к своему values/styles.xml:

<style name="DashboardTextView">
    <item name="android:layout_gravity">center_vertical</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:gravity">center_horizontal</item>
    <item name="android:drawablePadding">2dp</item>
    <item name="android:background">@null</item>
    <item name="android:clickable">true</item>
    <item name="android:textColor">#ffffff</item> <!-- White, you can change your text color here -->
</style>