Евгений Легоцкой2 марта 2018 г. 1:53

Android. Java vs Qt QML - Урок 004. Создание меню в Action Bar с подменю

Итак, продолжаем реализовывать одинаковый функционал в приложениях под Android из двух принципиально различных миров. А именно на традиционной Java и менее распространённом Qt QML C++.

На этот раз реализуем меню в ActionBar активити. Отмечу, что ActionBar для варианта с QML придётся писать самостоятельно, поскольку такого элемента в Qt QML нет, но он реализуется через компонент ToolBar. Поскольку этот момент был описан в уроке про Hello World , то в данном уроке тщательно останавливаться на нём не будем, только вынесем ActionBar в отдельный QML файл, сделав его отдельным типом QML и добавим в него иконку меню, по нажатию на которую будем вызывать меню.

Меню будет следующую структуру:

  • Information
  • First
  • Second
  • About

В центре окна приложения должен быть текст, который будет заменяться другим текстом при нажатии следующие пункты меню

  • First
  • Second
  • About

Внешний вид меню на Java

Первый уровень

Второй уровень

Внешний вид меню на Qt QML

Первый уровень

Второй уровень

Реализация на JAVA

menu.xml

Для вёрстки меню необходимо создать XML файл, который будет располагаться в ресурсном каталоге menu. Так и назовём его menu.xml

Здесь всё достаточно просто, есть небольшая вёрстка с названиями пунктов меню, вложенными элементами и id, по которым можно будет обратиться к данным пунктам из Java кода.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/informationItem"
        android:title="Information">
        <menu>
            <item
                android:id="@+id/firstInfoItem"
                android:title="First" />
            <item
                android:id="@+id/secondInfoItem"
                android:title="Second" />
        </menu>
    </item>
    <item
        android:id="@+id/aboutItem"
        android:title="About" />
</menu>

activity_main.xml

Далее идёт вёрстка самой активити, которая в данном случае создана по умолчанию.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.evileg.javamenu.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

MainActivity.java

А теперь нужно инициализировать все компоненты меню и навешать на них обработчик события клика.

package com.evileg.javamenu;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;

public class MainActivity extends Activity {

    // Объявим объекты всех пунктов меню
    MenuItem aboutItem;
    MenuItem firstInfoItem;
    MenuItem secondInfoItem;

    // А также текстового поля, в которое будем устанавливать текст
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = findViewById(R.id.textView); // найдём данное текстовое поле в ресурсах
    }

    // Создадим обработчики пунктов меню
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);

        // Найдём все элементы пунктов меню
        aboutItem = menu.findItem(R.id.aboutItem);
        firstInfoItem = menu.findItem(R.id.firstInfoItem);
        secondInfoItem = menu.findItem(R.id.secondInfoItem);

        // Создадим обработчик кликов по пунктам меню
        MenuItem.OnMenuItemClickListener onMenuClickListener = new MenuItem.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.aboutItem:
                        textView.setText("About Menu Item is pressed");
                        break;
                    case R.id.firstInfoItem:
                        textView.setText("First Info Item is pressed");
                        break;
                    case R.id.secondInfoItem:
                        textView.setText("Second Info Item is pressed");
                        break;
                }
                return true;
            }
        };

        // Установим этот обработчик на пункты меню
        aboutItem.setOnMenuItemClickListener(onMenuClickListener);
        firstInfoItem.setOnMenuItemClickListener(onMenuClickListener);
        secondInfoItem.setOnMenuItemClickListener(onMenuClickListener);

        return true;
    }
}

Реализация на Qt QML

ActionBar.qml

Я создал специальный тип ActionBar в отдельном файле QML, чтобы выделить его из основного файл main.qml. Это позволит отделить этот код от остальной полезной части кода, которая должна показать различие реализаций меню на Java и на Qt QML. А также этот ActionBar будет использоваться в следующих статьях.

Обратите внимание на сигнал menuClicked , этот сигнал будет вызываться в ActionBar, когда пользователь нажмёт пальцем на MouseArea, которая отвечает за клик по нашей кастомной кнопке меню. По этомму сигналу будет открыто меню, которое расположено в файле main.qml

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.1

ToolBar {
    id: root
    height: 48

    signal menuClicked() // Сигнал, который сообщит о клике по кнопке меню

    Rectangle {
        anchors.fill: parent
        color: "#080808"

        Image {
            id: ico
            height: 36
            width: 36
            anchors {
                left: parent.left
                leftMargin: 10
                top: parent.top
                topMargin: 6
            }
            source: "qrc:/icons/ic_launcher.png"
        }


        Text {
            anchors {
                verticalCenter: parent.verticalCenter
                left: ico.right
                leftMargin: 4
            }

            text: qsTr("QMLMenu")
            font.pixelSize: 18
            color: "white"
        }

        // Начало реализации кнопки меню
        Rectangle {
            width: height
            color: menuArea.pressed ? "#55ffffff" : "transparent"
            anchors {
                top: parent.top
                right: parent.right
                bottom: parent.bottom
            }

            Image {
                id: menuIcon
                height: 36
                width: 36
                anchors {
                    centerIn: parent
                }

                source: "qrc:/icons/menu.png"
            }

            MouseArea {
                id: menuArea
                anchors.fill: parent
                onClicked: root.menuClicked()
            }
        }
        // конец реализации кнопки меню
    }
}

main.qml

А здесь будет помещён код того, ради чего и писался данный урок. Показать, как реализовать само меню.

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.1

ApplicationWindow {
    id: root
    visible: true
    width: 360
    height: 520
    title: qsTr("QML Menu")

    // Добавляем ActionBar в окно приложения
    header: ActionBar {
        onMenuClicked: actionBarMenu.open() // Открываем меню

        // Добавляем меню
        Menu {
            id: actionBarMenu
            // С указанием расположения, чтобы Menu выскакивало в том же месте,
            // что и в варианте с Java
            x: root.width
            y: 48
            Menu {
                title: qsTr("Information")
                Action {
                    text: qsTr("First")
                    // Обработка клика по меню
                    onTriggered: label.text = qsTr("First Info Item is pressed")
                }
                Action {
                    text: qsTr("Second")
                    onTriggered: label.text = qsTr("Second Info Item is pressed")
                }
            }
            Action {
                text: qsTr("About")
                onTriggered: label.text = qsTr("About Menu Item is pressed")
            }
        }
    }

    Label {
        id: label
        anchors.centerIn: parent
        text: qsTr("Hello World!")
        font.pixelSize: 14
    }
}

Заключение

Конечно, имеется некоторая разница в реализации меню по умолчанию для Java и для Qt QML, например наличие заголовка подменю. Теоретически в QML это можно реализовать с помощью пустого Action, который будет иметь title, будет немного кастомизирован и не будет ничего делать при клике, но нужно ли это?

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.
Поддержать автора Donate

Добрый день.
Как в такое меню добавить картинку и просто лэйблы с текстом?
И скажите пожалуйста как связаны ActionBar.qml и main.qml?

Превый файл скопировал, в другой qml вставил этот код, но меню не появляется

         ActionBar {
            onMenuClicked: actionBarMenu.open() // Открываем меню

            // Добавляем меню
            Menu {
                id: actionBarMenu
                // С указанием расположения, чтобы Menu выскакивало в том же месте,
                // что и в варианте с Java
                x: root.width
                y: 48
                Menu {
                    title: qsTr("Information")
                    Action {
                        text: qsTr("First")
                        // Обработка клика по меню
                        //onTriggered: label.text = qsTr("First Info Item is pressed")
                    }
                    Action {
                        text: qsTr("Second")
                        //onTriggered: label.text = qsTr("Second Info Item is pressed")
                    }
                }
                Action {
                    text: qsTr("About")
                    //onTriggered: label.text = qsTr("About Menu Item is pressed")
                }
            }
        }

Вот так работает

    Button {

        x: 5
        y: 5
        id:  menuButton
        text:  "Menu"
        onClicked:  myMenu.open()

    }

    Menu {
        id:  myMenu
        x: 5
        y: menuButton.height

        MenuItem {
            text:  "Мои данные"
            onClicked: console.log("Мои данные")
        }
        MenuItem {
            text:  "Чат"
            onClicked: console.log("Чат")
        }
        MenuItem {
            text:  "Видео"
            onClicked: console.log("Видео")
        }
        MenuItem {
            text:  "Контакты"
            onClicked: console.log("Контакты")
        }

    }

У объектов MenuItem есть свойства iconName и iconSource. В iconSource можно добавить иконку из ресурсов в проекте. Можете воспользоваться этим свойством и тогда у вас будут в пунктах меню и иконки и текст.

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Timeweb

Позвольте мне порекомендовать вам отличный хостинг, на котором расположен EVILEG.

В течение многих лет Timeweb доказывает свою стабильность.

Для проектов на Django рекомендую VDS хостинг

Посмотреть Хостинг
Поделиться в социальных сетях
Donate

Проект EVILEG перешёл на некоммерческую основу и будет развиваться исключительно на энтузиазме создателя сайта, энтузиазме пользователей, пожертвованиях и реферальной системе хостинга

Спасибо за вашу поддержку

Доступные способы поддержки проекта

PayPal

PatreonYooMoneyПодробнее
AB

C++ - Тест 006. Перечисления

  • Результат:30баллов,
  • Очки рейтинга-10
МХ

C++ - Тест 003. Условия и циклы

  • Результат:42баллов,
  • Очки рейтинга-8
AB

C++ - Тест 005. Структуры и Классы

  • Результат:50баллов,
  • Очки рейтинга-4
Популярные публикации за последние 90 дней
Последние комментарии

EVILEG-CORE. Кэширование свойств объектов моделей с помощью model_cached_property

Здравствуйте. В общем меня интересует такой вопрос. Я пробовал это на Like , Dislike. Как я понимаю если не перевалидировать кеш то ничего не изменится на странице. Вернётся значение из кэша? От…
A

Qt/C++ - Урок 006. QSqlQueryModel - Таблицы в Qt с помощью SQL-запросов

Здравствуйте! Подскажите как сделать запрос к базе SQLite с двумя параметрами, в итоге нужно получить не список строк, а только факт наличия строк, соответсвующи именно двум условиям. В SQL…
A

Django - Урок 011. Добавление комментариев на сайт с Django

https://mir74.ru/27323-12-krasavic-sdelali-podarok-stalnomu-gigantu.-rabotnicy-mmk-snyalis-dlya-yubileynogo-fotokalendarya.html
a

Django - Урок 011. Добавление комментариев на сайт с Django

I read that Post and got it fine and informative.https://aflife.ru/

Django - Урок 023. Like Dislike система с помощью GenericForeignKey

Хорошо. Большое спасибо. Посмотрю что из этого получится.
Сейчас обсуждают на форуме
o

Запрос на изменение БД с помощью оператора UPDATE и странное поведение QTableView

или запрос к базе так https://www.w3schools.com/sql/sql_ref_order_by.asp или сортировка в модели через прокси модель https://doc.qt.io/qt-5/qsortfilterproxymodel.html
o

Как очичтисть очередь событий для конпки

нужно сделать связку qml и c++, тяжелые задачи отправляются на обработку в с++, в qml остаются только быстрые. и у кнопок есть свойство enabled: true\false при запуске\остановке з…
A

Развертывание QML приложения

Полностью согласен, что пример не удачный, но я так как раз попытался выразить то, что вы далее описали с примером со скадой, часть .dll и часть .qml с интерпритацией. И в Вашем ответе я ув…
АБ

Sorting the added QML elements in the ListModel

I am writing an alarm clock in QML, I am required to sort the alarms in ascending order (depending on the date or time (if there are several alarms on the same day). I've done the sorting …
EK

HTTP server на Qt

Давно было, уже не помню как, но разрулил. Спасибо :)
О нас
Услуги
© EVILEG 2015-2022
Рекомендует хостинг TIMEWEB