Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Scrolling Toolbar with Flickable

From Wiki
Jump to: navigation, search

This article demonstrates how to use Flickable element to create scrolling toolbar items.

Article Metadata
Code ExampleTested with
Devices(s): N950/N9
Compatibility
Platform(s): MeeGo/Qt 4.7
Article
Keywords: Flickable/Scrolling Toolbar
Created: somnathbanik (20 Sep 2014)
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.

Scrolling Toolbar

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

This page was last modified on 11 October 2012, at 01:20.
50 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×