Customize the title bar to whatever you look and feel you want.
CustomTitleBar.qml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
import bb.cascades 1.0 TitleBar { appearance: TitleBarAppearance.Plain kind: TitleBarKind.FreeForm property string titleText : "Snap2Chat"; property variant titleTextColor : Color.White property variant titleBarBackgroundColor : Color.White property variant titleTextFontSize : FontSize.Large property variant titleTextFontWeight : FontWeight.W100 property bool imageLogoVisibility : false; property bool textLogoVisibility : true; property bool cameraVisibility : false; property bool closeVisibility : false; property bool settingsVisibility : false; signal closeButtonClicked(); signal settingsButtonClicked(); signal cameraButtonClicked(); signal titleBarClicked(); kindProperties: FreeFormTitleBarKindProperties { content: Container { layout: DockLayout {} id: titleBackground background: titleBarBackgroundColor horizontalAlignment: HorizontalAlignment.Fill Container { layout: DockLayout {} horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill leftPadding: 20 rightPadding: leftPadding Container { id: leftButtons horizontalAlignment: HorizontalAlignment.Left verticalAlignment: VerticalAlignment.Center ImageButton { id: closeButton visible: closeVisibility preferredHeight: 70 preferredWidth: 70 defaultImageSource: "asset:///images/titlebar/close.png" onClicked: { closeButtonClicked(); } } ImageButton { id: cameraButton visible: cameraVisibility preferredHeight: 70 preferredWidth: 70 defaultImageSource: "asset:///images/titlebar/camera.png" onClicked: { cameraButtonClicked(); } } } Container { id: centerButtons verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Center ImageView { visible: imageLogoVisibility verticalAlignment: VerticalAlignment.Center imageSource: "asset:///images/titlebar/logo.png" preferredHeight: 70 scalingMethod: ScalingMethod.AspectFit } Label { visible: textLogoVisibility text: titleText textStyle.color: titleTextColor textStyle.fontSize: titleTextFontSize textStyle.fontWeight: titleTextFontWeight } gestureHandlers: TapHandler { onTapped: { titleBarClicked(); } } } Container { id: rightButtons horizontalAlignment: HorizontalAlignment.Right verticalAlignment: VerticalAlignment.Center ImageButton { visible: settingsVisibility preferredHeight: 70 preferredWidth: 70 defaultImageSource: "asset:///images/titlebar/settings.png" onClicked: { settingsButtonClicked(); } } } } } } } |
How to use the CustomTitleBar.qml in a Page
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import bb.cascades 1.0 import "nemory/components" // this is the path where the CustomTitleBar.qml is located Page { titleBar: CustomTitleBar { scrollBehavior: TitleBarScrollBehavior.Sticky titleText: "Snap2Chat" titleTextColor: Color.White titleBarBackgroundColor: Color.create("#2DA667") titleTextFontSize: FontSize.XLarge titleTextFontWeight: FontWeight.W100 textLogoVisibility: true onTitleBarClicked: { actionText.text = "onTitleBarClicked"; } settingsVisibility: true onSettingsButtonClicked: { actionText.text = "onSettingsButtonClicked"; } closeVisibility: true onCloseButtonClicked: { actionText.text = "onCloseButtonClicked"; } } Container { layout: DockLayout {} horizontalAlignment: HorizontalAlignment.Fill verticalAlignment: VerticalAlignment.Fill Label { id: actionText text: "The Snap2Chat Custom Title Bar" multiline: true horizontalAlignment: HorizontalAlignment.Center verticalAlignment: VerticalAlignment.Center textStyle.fontStyle: FontStyle.Italic textStyle.fontSize: FontSize.Large textStyle.fontWeight: FontWeight.W100 } } } |
The Simple Project Structure
Download Project Here: https://dl.dropboxusercontent.com/u/12267912/CascadesProjects/CustomTitleBar.zip
Leave a Reply