Android. Java проти 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>

Матеріальний дизайн на 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.