Android. Java vs Qt QML - Сабақ 000. Материалдық дизайнды қосу

material design, Android

Java және Qt QML әзірлеуі үшін де 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>

түстер.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 бойынша материалдық дизайн

Qt QML жүйесінде Материалдық дизайнды пайдалану үшін жоба профилінде Qt Quick Controls 2 пайдалануды қосу керек.

QT += quick quickcontrols2

Содан кейін біз QQuickStyle сыныбын main.cpp файлына қосамыз, бұл сыныптың статикалық әдісін бүкіл қолданба үшін Материалдық дизайн стилін қосу үшін пайдалану.

#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 - Негізгі түс, мысалы, Әрекеттер тақтасының түсі
• colorPrimaryDark - күй жолағы түсі
• textColorPrimary - өң түсі бар элементтердің үстіндегі белгілерге арналған мәтін түсі
• windowBackground - қолданба фонының түсі
• navigationBarColor - телефонның шарлау мәзірінің түс түсі
• colorAccent - құсбелгілер сияқты элементтердің түсі, т.б.

Qt QML ішінде тек бес түс параметрі бар

• Негізгі - негізгі түс, әрекеттер тақтасына ұқсас элементтер
• Екпін - құсбелгілер сияқты элементтердің түсі
• Тақырып - тақырып түсі, фон ретінде қолданбаның негізгі терезесі үшін де, қалқымалы мәзірлер немесе басқа элементтер үшін де қолданылады. Сондай-ақ, Алдыңғы және Фон сипаттары арқылы қайта анықтауға болады
• Алдыңғы план - бөлек тақырып түсінің параметрі, мәтінге қолдануға болады, Тақырып параметрлерін қайта анықтайды.
• Фон - мәзірлер, навигация тартпасы және т.б. сияқты элементтердің фонын анықтау үшін қолданылады. Тақырып параметрлерін қайта анықтайды.

Тақырып үшін Жүйені мән ретінде пайдалануға болады, бұл жүйе түстер палитраларын пайдалануды білдіреді. Бірақ сонымен бірге сіз «Алдыңғы план» және «фон» көмегімен түс реттеулерін жасай аласыз.