Russian Qt Forum

Qt => Пользовательский интерфейс (GUI) => Тема начата: zeonET от Июль 17, 2012, 16:03



Название: Как создать такое меню (аля MacOS)
Отправлено: zeonET от Июль 17, 2012, 16:03
Подскажите пожалуйста с помощью каких компонентов Qt и как их использовать для создания вот такого меню в приложении:

http://www.youtube.com/watch?v=bI16-GwKGKc&feature=youtu.be (http://www.youtube.com/watch?v=bI16-GwKGKc&feature=youtu.be)

Или на картинках:

(http://img846.imageshack.us/img846/1896/qttemphp6952.png)

Т.е. когда наводится курсор иконка увеличивается и появляется подпись.

Заранее спасибо за ответы.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: andrew.k от Июль 17, 2012, 21:30
Берешь QMacDocWidget, кладешь на него сколько нужно QMacIconWidget, добавляешь их в лейаут (горизонтальный), задаешь пару свойств в дизайнере и все.
Тут делов на полчаса. Даже программировать ничего не надо.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: zeonET от Июль 17, 2012, 21:39
Берешь QMacDocWidget, кладешь на него сколько нужно QMacIconWidget, добавляешь их в лейаут (горизонтальный), задаешь пару свойств в дизайнере и все.
Тут делов на полчаса. Даже программировать ничего не надо.
Я сначала купился, думаю "ндас... отстал я со своим 4.4.3, интересно в какой версии такую фичу придумали", но после первого запроса в гугл понял прикол ))
Ну а серьезно?


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: andrew.k от Июль 17, 2012, 22:10
Берешь QMacDocWidget, кладешь на него сколько нужно QMacIconWidget, добавляешь их в лейаут (горизонтальный), задаешь пару свойств в дизайнере и все.
Тут делов на полчаса. Даже программировать ничего не надо.
Я сначала купился, думаю "ндас... отстал я со своим 4.4.3, интересно в какой версии такую фичу придумали", но после первого запроса в гугл понял прикол ))
Ты сначала начни делать, сразу появится куча вопросов, а когда будут конкретные вопросы получишь конкретные ответы.

Ну а серьезно?
А если серьезно, обратись к Вересу (это такой дяденька на нашем форуме) у него есть ответы на любые вопросы. Думаю он тебе обязательно что-нибудь посоветует  ;D


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: Bepec от Июль 17, 2012, 22:43
Угу. Обязательно посоветую - я ведь помогаю в отличие от издевательств ваших ;)

zeonET открой examples и посмотри там, впрочем...

Посмотри этот пример. Исходники там есть, мб это то, что тебе надо? http://qt-project.org/doc/qt-4.8/animation-appchooser.html


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: zeonET от Июль 17, 2012, 22:46
Угу. Обязательно посоветую - я ведь помогаю в отличие от издевательств ваших ;)

zeonET открой examples и посмотри там, впрочем...

Посмотри этот пример. Исходники там есть, мб это то, что тебе надо? http://qt-project.org/doc/qt-4.8/animation-appchooser.html

Спасибо! Так и думал смотреть на екзамплы, еще тот самый демо с теми крутящимися штучками вроде как гармонично выглядит. Ок, буду пробовать.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: andrew.k от Июль 17, 2012, 23:16
Оказывается надо было посмотреть примеры. И все счастливы.
Добавь к теме [Решено]. Так принято.  ;D
И Верес пригодился.


Название: Re: Как создать такое меню (аля MacOS) [почти решено]
Отправлено: zeonET от Июль 17, 2012, 23:21
Оказывается надо было посмотреть примеры. И все счастливы.
Добавь к теме [Решено]. Так принято.  ;D
И Верес пригодился.
Чесно говоря у меня того примера нету )) Старая кутешка, буду обновляться.

Думал на основе этих шучек делать что на картинке, но там уж очень замутно они сделали ))

(http://img337.imageshack.us/img337/7978/qttempp11284.png)


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: andrew.k от Июль 17, 2012, 23:28
Есть две директории demos и examples.
На твоем скрине первая. Пример по ссылке из examples.
Либо у тебя их нет, либо не там ищешь.

UPD. А вообще анимация свойств появилась где-то в 4.6-4.7. Если у тебя 4.4 то видимо действительно нет.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: Bepec от Июль 18, 2012, 00:03
Эта вот штучка, это stateMachine, насколько я помню. Говорят гибко и просто, но у меня пока не было интереса разбираться в этом.

А так же можно очень просто поступить - обычные Label с картинками, при наведении мыши пересчитываешь картинку (она должна быть большого размера) и увеличиваешь размер Label.

Какая версия кутешки у тебя?
В 4.7.2 уже имеется анимация параметров :)


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: zeonET от Июль 18, 2012, 00:12
... отстал я со своим 4.4.3 ...
:)


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: andrew.k от Июль 18, 2012, 01:03
... отстал я со своим 4.4.3 ...
:)
Не под МСВС ли случайно пишешь? )


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: DmitryM от Июль 18, 2012, 09:33
Вообще то это не менюшка а Doc панель (http://myubuntu.ru/programmy/cairo-dock-panel-v-stile-mac-os-x).
Можешь наследоваться от QWidget, QGraphicsItem и изменять размер, при наведение мыши на объект.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: DmitryM от Июль 18, 2012, 09:35
Не под МСВС ли случайно пишешь? )
Когда писал софт под MCBC в котором не было Qt4, то использовал собственную сборку Qt4.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: OKTA от Июль 18, 2012, 09:58
бери QML И будет тебе счастье!)


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: Bepec от Июль 18, 2012, 10:13
Хм. Возможно возможно, но я этого монстра ещё не трогал :D


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: Igors от Июль 18, 2012, 12:20
Ну а серьезно?
А серьезно - если такого компонента нет, то и связываться не стоит. "Как легко делать UI" - популярное мнение, но только до тех пор пока "пасемся на готовом". А как только оно кончается - мало не покажется. Один тут какой-то "titan ribbon" уже третий год пилит. Лучше смириться с тупенькой но удобной ролью пользователя готового.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: OKTA от Июль 18, 2012, 12:30
А на qml легко =)


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: DmitryM от Июль 18, 2012, 14:59
А на qml легко =)
Это и на обычных виджетах не сложно.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: Igors от Июль 18, 2012, 15:04
А на qml легко =)
Это и на обычных виджетах не сложно.
Ну так если легко - предъявляем что-то вразумительное. Или дальше слов дело не идет?  :)


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: andrew.k от Июль 18, 2012, 16:08
А на qml легко =)
Это и на обычных виджетах не сложно.
Ну так если легко - предъявляем что-то вразумительное. Или дальше слов дело не идет?  :)
Ну так а что же в этом сложного?
Думаю, можно придумать много способов.
В любом случае, смысла отвечать на поставленный таким образом вопрос нет.
Это все равно что спросить "а как делается тема Риббон на qt?".
Это надо садиться и делать и уже в процессе задавать вопросы, когда что-то не получается.

Можно задать вопрос по-другому не "как?", а "с чего начать?". Но такого вопроса не было.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: OKTA от Июль 18, 2012, 18:39
Ну очень быстро! и кликается и все такое! И главное понятно, что можно много наширудить))

Код:
import Qt 4.7

Item {
    width: 400; height: 400

    ListView {
        id: list_view1
        x: 95
        y: 169
        width: 210
        height: 62
        orientation: ListView.Horizontal
        spacing: 50
        delegate: Item {
            id: item
            height: 40

            Text {
                id: textName
                text: name
                z: 2
                anchors.bottom: picture.top
                font.bold: true
            }

            Rectangle {
                id: picture
                width: 40
                height: 40
                color: colorCode

            }

            MouseArea {
                anchors.fill: picture
                hoverEnabled: true
                onEntered: SequentialAnimation {

                    NumberAnimation {
                        target: picture;
                        property: "scale";
                        to: 2;
                        duration: 100;
                        easing.type: Easing.InOutQuad
                    }

                }
                onExited: SequentialAnimation {

                    NumberAnimation {
                        target: picture;
                        property: "scale";
                        to: 1;
                        duration: 100;
                        easing.type: Easing.InOutQuad
                    }

                }
                onClicked: SequentialAnimation {

                    NumberAnimation {
                        target: picture;
                        property: "rotation";
                        from: 0
                        to: 180;
                        duration: 400;
                        easing.type: Easing.InOutQuad

                    }


                    NumberAnimation {
                        target: textName;
                        property: "rotation";
                        from: 0
                        to: 360;
                        duration: 400;
                        easing.type: Easing.InOutQuad

                    }

                }
            }



        }

        model: ListModel {
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
    }


}


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: ecspertiza от Июль 19, 2012, 11:03
Влезу в тему  :) В этой задаче, одна из самых сложных проблем будет не увеличение иконок, а то что виджет на котором это все лежит должен быть с плюхами типа прозрачности там где нужно (что бы задать его геометрию), плюс он должен ловить отражение ни только от иконок, но и от окон в системе, вот что будет сложно реализовать. Опять же как правильно сделать "обрезание виджета" ? Если задавать маску, то не факт что иконки сверху будут торчать, даже скорее всего не будут, а если переопределить paintEvent и рисовать transparent где нужно, то опять же не факт что виджет будет прозрачный. Вобщем как мне думается тут не все так просто, всякие клики свистоперделки это даже не пол дела тут.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: OKTA от Июль 19, 2012, 11:42
А зачем отражение системных окон? Все фишки и прозрачность, и обрезка, и отражение в нужных местах - совсем не проблема для qml.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: DmitryM от Июль 19, 2012, 12:14
Влезу в тему  :) В этой задаче, одна из самых сложных проблем будет не увеличение иконок, а то что виджет на котором это все лежит должен быть с плюхами типа прозрачности там где нужно (что бы задать его геометрию), плюс он должен ловить отражение ни только от иконок, но и от окон в системе, вот что будет сложно реализовать. Опять же как правильно сделать "обрезание виджета" ? Если задавать маску, то не факт что иконки сверху будут торчать, даже скорее всего не будут, а если переопределить paintEvent и рисовать transparent где нужно, то опять же не факт что виджет будет прозрачный. Вобщем как мне думается тут не все так просто, всякие клики свистоперделки это даже не пол дела тут.
Прозрачность (http://doc.qt.nokia.com/qq/qq16-background.html). Для отражение иконок можно взять QPixmap из иконки, перевернуть, обрезать, сделать прозрачным и т.д.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: OKTA от Июль 19, 2012, 12:18
давайте объявим конкурс, кто быстрее напишет dock на том, что ему нравится =DDD


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: ecspertiza от Июль 19, 2012, 12:32
А зачем отражение системных окон? Все фишки и прозрачность, и обрезка, и отражение в нужных местах - совсем не проблема для qml.

Ну вот я сейчас смотрю на  Mac OS 10.7.4 и вижу отражение системных окон в доке  :) Еще мне очень интересно посмотреть как можно на qml сделать обрезание виджета :) С отражением иконки согласен, сделать несложно, но как можно на qml сделать прозрачность виджета я не представляю, какой нибудь Rectangle да, не вопрос, но виджет ! То же с обрезанием виджета.

Прозрачность (http://doc.qt.nokia.com/qq/qq16-background.html). Для отражение иконок можно взять QPixmap из иконки, перевернуть, обрезать, сделать прозрачным и т.д.

По своим задачам часто натыкался на эту статью, ни разу не вышло сделать так что бы виджет был прозрачным и сквозь него было видно систему, если есть парент виджет и на нем лежит дочерний, то у дочернего сделать не вопрос, но у родителя ни разу не получалось, только заданием маски. Можно пример кода глянуть где это реализовано без маски ? Так как такая задача периодически всплывает ,а решение ни как найти не могу. Знаю что можно еще использовать setWindowOpaticy() ,но тогда и все предки будут прозрачные.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: pastor от Июль 19, 2012, 12:46
По своим задачам часто натыкался на эту статью, ни разу не вышло сделать так что бы виджет был прозрачным и сквозь него было видно систему, если есть парент виджет и на нем лежит дочерний, то у дочернего сделать не вопрос, но у родителя ни разу не получалось, только заданием маски. Можно пример кода глянуть где это реализовано без маски ? Так как такая задача периодически всплывает ,а решение ни как найти не могу. Знаю что можно еще использовать setWindowOpaticy() ,но тогда и все предки будут прозрачные.

Взгляни на Qt::WA_TranslucentBackground.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: ecspertiza от Июль 19, 2012, 12:57
Взгляни на Qt::WA_TranslucentBackground.

Работает, спасибо  :) Остальное вроде тогда становится понятным, подложку под иконками рисуем, там же рисуем отражение от иконки. Обрезать в таком случае ничего не нужно получается, остальное математика. Ну единственное будет проблематично отражение системных окон сделать, хотя это больше фича. Вот собственно ТС и задали направление для работы  :)


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: OKTA от Июль 19, 2012, 13:00
Так, а что подразумевается под обрезанием?))


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: ecspertiza от Июль 19, 2012, 13:03
Так, а что подразумевается под обрезанием?))

Теперь уже ничего :) Просто без этого свойства, я собственно и думал как можно сделать нечто похожее и прикидывал ,что придется с масками морочиться.


Название: Re: Как создать такое меню (аля MacOS)
Отправлено: zeonET от Август 21, 2012, 16:46
Да, уже разобрался... Сделал класс наследник от QPushButton, ну а в нем уже красиво рисую иконки и делаю анимацию, которая делается посредством QStateMachine для состояний enterEvent и leaveEvent.
Про QPropertyAnimation раньше не знал, поэтому для меня здесь сделали открытие и подтолкнули к использованию последней версии.
Всем спасибо за советы!
P.S. Очень понравился кутешный пример Animated Tiles Example ))