Android. Java vs Qt QML - Урок 000. Включение Material Design

material design, Android

При разработке как на Java, так и на Qt QML требуется включение Material Design.

Material Design на Java

В случае с Java достаточно включить оформление темы в файле styles.xml и задать необходимую цветовую гамму для приложения.

styles.xml

<resources>

    <style name="AppTheme" parent="android:Theme.Material">
        <!-- Main theme colors -->
        <!--   your app branding color for the app bar -->
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <!--   darker variant for the status bar and contextual app bars -->
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--   theme UI controls like checkboxes and text fields -->
        <item name="android:colorAccent">@color/colorAccent</item>
    </style>

</resources>

colors.xml

Цвета задаются в данном файле.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

Material Design на Qt QML

Для того, чтобы использовать Material Design на Qt QML, необходимо включить использование Qt Quick Controls 2 в профайле проекта.

QT += quick quickcontrols2

Далее подключаем класс QQuickStyle в файле main.cpp, чтобы с помощью статического метода данного класса включить стиль оформления Material Design для всего приложения.

#include <QGuiApplication>
#include <QQuickStyle> // Класс для включения стилизации
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQuickStyle::setStyle("Material"); // Включение Material Design

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

Изменение цветового оформления

Для изменения цветового оформления стиля используется конфигурационный файл qtquickcontrols2.conf, который должен быть размещён в корне проекта рядом с профайлом проекта. Можете добавить этот файл в ресурсы, чтобы проще было работать с данным файлом из IDE.

[Material]
Primary=#3F51B5
Accent=#FF4081
Theme=#303F9F
Foreground=#ffff00
Background=#00ffff

Параметры настройки цветовой схемы

В Java присутствуют следующие параметры настройки цветовой схемы

• colorPrimary - основной цвет, например цвет Action Bar
• colorPrimaryDark - цвет строки состояния
• textColorPrimary - цвет текста для надписей поверх элементов с фоном colorPrimary
• windowBackground - цвет фона приложения
• navigationBarColor - цвет цвет навигационного меню телефона
• colorAccent - цвет элементов, таких как чекбоксы и т.д.

В Qt QML имеется лишь пять цветовых настроек

• Primary - основной цвет, элементы похожие на Action Bar
• Accent - цвет элементов, таких как чекбоксы
• Theme - цвет темы, применяется как для главного окна приложения в качестве фона, так и для всплывающих меню или иных других элементов. Может быть переопределена также свойствами Foreground и Background
• Foreground - отдельная цветовая настройка темы, может применяться для текста, переолределяет установки Theme.
• Background - применяется для определения фона таких элементов как меню, Navigation Drawer и т.д. переолределяет установки Theme.

Для Theme можно в качестве значения использовать System, что будет означать использование системных цветовых палитр. Но при этом можно провести корректировку цвета с помощью Foreground и Background.