Scrolling Toolbar with Flickable
This article demonstrates how to use Flickable element to create scrolling toolbar items.
Article Metadata
Code Example
Source file: Media:ScrollToolbarN950.zip
Tested with
SDK: Qt SDK 1.1.3
Devices(s): N950/N9
Compatibility
Platform(s): MeeGo/Qt 4.7
Article
Keywords: Flickable/Scrolling Toolbar
Created: somnathbanik
(20 Sep 2013)
Last edited: hamishwillee
(11 Oct 2012)
Contents |
Introduction
There are many ways to create scrolling toolbar , but here we will discuss how we can create scrolling toolbar with images. On clicking on the menu items we will change the display image as shown in the figure.
Basic Idea
We will take few images and will add those images in the resource file of the project. A rectangle is taken with definite height and width. We set the images inside the rectangle. Using Flickable element property on top of the images we get the left-right scrolling effect of the images. We use MouseArea event to capture the mouse event of the item, and on each mouse click we change the display image on the body.
main.qml
import QtQuick 1.0
import com.meego 1.0
import Qt 4.7
Window {
id: appWindow
width: 480
height: 854
function changeImage(imageName)
{
thumbnails.source = "images/thumbnails/"+imageName;
}
PageStack{
Rectangle{
height: 113
width: 150
x:350
//y:50
Image {
id: thumbnails
source: "images/thumbnails/1.jpeg"
}
}
Rectangle{
id: toolbarRect
width: parent.width
height: 102
color: "white"
x:0
y:200
Flickable {
id: flickable
anchors.fill: parent
contentWidth: flickable.width *1.7; contentHeight: flickable.height
Image {
id: image1
source: "qrc:images/menuicons/higloss-accessibility.jpg"
x:0
smooth: true
opacity: !accessibility.pressed ? 1 : 0.5
MouseArea {
id:accessibility
// anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("2.jpeg");
}
}
Image {
id: image2
x:130
smooth: true
source: "qrc:images/menuicons/higloss-agenda.jpg"
opacity: !agenda.pressed ? 1 : 0.5
MouseArea {
id:agenda
// anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("3.jpeg");
}
}
Image {
id: image3
x:260
smooth: true
source: "qrc:images/menuicons/higloss-announcement.jpg"
opacity: !announcement.pressed ? 1 : 0.5
MouseArea {
id:announcement
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("4.jpeg");
}
}
Image {
id: image4
x:390
smooth: true
source: "qrc:images/menuicons/higloss-award.jpg"
opacity: !award.pressed ? 1 : 0.5
MouseArea {
id:award
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("2.jpeg");
}
}
Image {
id: image5
x:520
smooth: true
source: "qrc:images/menuicons/higloss-button-repeat.jpg"
opacity: !repeat.pressed ? 1 : 0.5
MouseArea {
id:repeat
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("1.jpeg");
}
}
Image {
id: image6
x:650
smooth: true
source: "qrc:images/menuicons/higloss-calendar.jpg"
opacity: !calendar.pressed ? 1 : 0.5
MouseArea {
id:calendar
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("2.jpeg");
}
}
Image {
id: image7
x:780
smooth: true
source: "qrc:images/menuicons/higloss-calendar-check.jpg"
opacity: !calendarcheck.pressed ? 1 : 0.5
MouseArea {
id:calendarcheck
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("3.jpeg");
}
}
Image {
id:image8
x:910
smooth: true
source: "qrc:images/menuicons/higloss-add.jpg"
opacity: !add.pressed ? 1 : 0.5
MouseArea {
id:add
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("4.jpeg");
}
}
Image {
id: image9
x:1040
smooth: true
source: "qrc:images/menuicons/higloss-alert.jpg"
opacity: !alert.pressed ? 1 : 0.5
MouseArea {
id:alert
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("1.jpeg");
}
}
Image {
id: image10
x:1170
smooth: true
source: "qrc:images/menuicons/higloss-attention.jpg"
opacity: !attention.pressed ? 1 : 0.5
MouseArea {
id:attention
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("2.jpeg");
}
}
Image {
id: image11
x:1300
smooth: true
source: "qrc:images/menuicons/higloss-button-record.jpg"
opacity: !record.pressed ? 1 : 0.5
MouseArea {
id:record
//anchors.fill: parent
anchors.centerIn: parent
width: parent.width+20
height: parent.height+20
onClicked: changeImage("3.jpeg");
}
}
}
}
}
}
Source Code
The full source code of the example is available here: File:ScrollToolbarN950.zip
