it-swarm.com.ru

Как мне оформить панель инструментов appcompat-v7 как Theme.AppCompat.Light.DarkActionBar?

Я пытаюсь воссоздать внешний вид Theme.AppCompat.Light.DarkActionBar с помощью новой панели инструментов библиотеки поддержки.

Если я выберу Theme.AppCompat.Light, моя панель инструментов будет светлой, а если я выберу Theme.AppCompat, она будет темной. (Технически вы должны использовать версию .NoActionBar, но, насколько я могу судить, единственная разница

<style name="Theme.AppCompat.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="Android:windowNoTitle">true</item>
</style>

Теперь нет Theme.AppCompat.Light.DarkActionBar, но наивно я думал, что это будет достаточно, чтобы просто сделать свой собственный

<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="Android:windowNoTitle">true</item>
</style>

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

Есть ли способ получить внешний вид AppCompat.Light.DarkActionBar с помощью Android.support.v7.widget.Toolbar import?

100
Liminal

Рекомендуемый способ стилизации панели инструментов для клона Light.DarkActionBar состоит в том, чтобы использовать Theme.AppCompat.Light.DarkActionbar в качестве темы родителя/приложения и добавить следующие атрибуты в стиль, чтобы скрыть панель действий по умолчанию:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

Затем используйте следующее в качестве панели инструментов:

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</Android.support.design.widget.AppBarLayout>

Для дальнейших изменений вы должны создать стили, расширяющие ThemeOverlay.AppCompat.Dark.ActionBar и ThemeOverlay.AppCompat.Light, заменив стили внутри AppBarLayout->Android:theme и Toolbar->app:popupTheme. Также обратите внимание, что это подберет ваш ?attr/colorPrimary, если вы установили его в своем основном стиле, чтобы вы могли получить другой цвет фона.

Хороший пример этого вы найдете в шаблоне текущего проекта с Empty Activity из Android Studio (1.4+).

206
oRRs

Правка: После обновления до appcompat-v7: 22.1.1 и использования AppCompatActivity вместо ActionBarActivity мой файл styles.xml выглядит следующим образом:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Примечание. Это означает, что я использую Toolbar, предоставленное платформой (НЕ включено в файл XML).

Это сработало для меня:
файл styles.xml:

<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Обновление: цитата из блог Габриэле Мариотти .

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

70
LordRaydenMK

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

Это сочетание факторов.

Во-первых, не пытайтесь заставить панели инструментов играть в Ниццу только через темы. Это кажется невозможным.

Так что применяйте темы явно к своим панелям инструментов как в oRRs answer

макет/toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_alignParentTop="true"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    app:theme="@style/Dark.Overlay"
    app:popupTheme="@style/Dark.Overlay.LightPopup" />

Однако это волшебный соус. Чтобы получить цвета фона, я надеялся, что вам придется переопределить атрибут background в темах панели инструментов.

значения/styles.xml:

<!-- 
    I expected Android:colorBackground to be what I was looking for but
    it seems you have to override Android:background
-->
<style name="Dark.Overlay" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:background">?attr/colorPrimary</item>
</style>

<style name="Dark.Overlay.LightPopup" parent="ThemeOverlay.AppCompat.Light">
    <item name="Android:background">@color/material_grey_200</item>
</style>

затем просто включите макет панели инструментов в другие макеты

<include Android:id="@+id/mytoolbar" layout="@layout/toolbar" />

и ты в порядке.

Надеюсь, это поможет кому-то еще, поэтому вам не придется тратить на это столько времени, сколько я.

(если кто-то может понять, как заставить это работать, используя только темы, то есть не нужно явно применять темы в файлах макета, я с радостью поддержу их ответ)

EDIT:

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

31
Liminal

Самый простой способ сделать это - создать дочерний элемент 'ThemeOverlay.AppCompat.Dark.ActionBar'. В этом примере я установил цвет фона панели инструментов на КРАСНЫЙ, а цвет текста на СИНИЙ.

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:background">#FF0000</item>
    <item name="Android:textColorPrimary">#0000FF</item>
</style>

Затем вы можете применить свою тему к панели инструментов:

<Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_height="wrap_content"
    Android:layout_width="match_parent"
    app:theme="@style/MyToolbar"
    Android:minHeight="?attr/actionBarSize"/>
16
Don

Чтобы настроить стиль панели инструментов, сначала создайте собственный стиль панели инструментов, унаследовав Widget.AppCompat.Toolbar, переопределите свойства, а затем добавьте его в пользовательскую тему приложения, как показано ниже, см. http://www.zoftino.com/Android- Панель инструментов-учебник для получения дополнительной информации панели инструментов и стилей.

   <style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/MyToolBarStyle</item>
    </style>
    <style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="Android:background">#80deea</item>
        <item name="titleTextAppearance">@style/MyTitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/MySubTitleTextAppearance</item>
    </style>
    <style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="Android:textSize">35dp</item>
        <item name="Android:textColor">#ff3d00</item>
    </style>
    <style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="Android:textSize">30dp</item>
        <item name="Android:textColor">#1976d2</item>
    </style>
9
Arnav Rao

Вы можете попробовать это ниже.

<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
    <!-- your code here -->
</style>

А подробные элементы вы можете найти в них https://developer.Android.com/reference/Android/support/v7/appcompat/R.styleable.html#Toolbar

Вот еще несколько: TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.

Надеюсь, это поможет вам.

6
Yong

Подобно Арнаву Рао, но с другим родителем:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="toolbarStyle">@style/MyToolbar</item>
</style>

<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:background">#ff0000</item>
</style>

При таком подходе внешний вид панели инструментов полностью определяется стилями приложения, поэтому вам не нужно размещать стили на каждой панели инструментов.

0
craigmj