Best widgets for traditional tab-bar mobile layout?
-
Hi all.
I'm new to Qt but I'm tasked with building a cross-platform phone app pronto. The UI organization of the app follows the well-known design of having a tab bar at the bottom that gets you into the major functional areas, and from each of those screens the user might proceed into detail screens that stack up and let the user back out of them (with a Back button at the top).
From my analysis I'm pretty sure that QML is not right for this application, so I'd rather not get into a debate about it. So...I've looked at the widgets in Qt Creator, and QToolBar can only be instantiated programmatically it seems. Is it the best candidate for building a tab bar as depicted?
And I've tried nesting layouts and gotten some unexpected results. In this instance of course I want the tab bar to stay glued to the bottom but expand horizontally on larger screens, and the entire area above it to meet the top of the tab bar but also expand horizontally when possible. I will probably not support rotation in v.1.
Seems like I'd use a QToolBar at the bottom, which would control a QStackedWidget holding the four main screens. Then each of those four main screens would also be a QStackedWidget to let the user proceed through detail screens. Does this sound like the most straightforward approach?
Thanks for any insight! Not trying to be lazy, but I've reached a decision point and don't want to go down the wrong path.
-
Hi all.
I'm new to Qt but I'm tasked with building a cross-platform phone app pronto. The UI organization of the app follows the well-known design of having a tab bar at the bottom that gets you into the major functional areas, and from each of those screens the user might proceed into detail screens that stack up and let the user back out of them (with a Back button at the top).
From my analysis I'm pretty sure that QML is not right for this application, so I'd rather not get into a debate about it. So...I've looked at the widgets in Qt Creator, and QToolBar can only be instantiated programmatically it seems. Is it the best candidate for building a tab bar as depicted?
And I've tried nesting layouts and gotten some unexpected results. In this instance of course I want the tab bar to stay glued to the bottom but expand horizontally on larger screens, and the entire area above it to meet the top of the tab bar but also expand horizontally when possible. I will probably not support rotation in v.1.
Seems like I'd use a QToolBar at the bottom, which would control a QStackedWidget holding the four main screens. Then each of those four main screens would also be a QStackedWidget to let the user proceed through detail screens. Does this sound like the most straightforward approach?
Thanks for any insight! Not trying to be lazy, but I've reached a decision point and don't want to go down the wrong path.
Hi @Stokestack,
I think Qml is actually the best choice mobile application. if you make a new Qt Quick 2 project from Qt Creator, and you select swipe project template, called "Qt Quick Application - Swipe". I thin you will get the layout you need.
-
Hi @Stokestack,
I think Qml is actually the best choice mobile application. if you make a new Qt Quick 2 project from Qt Creator, and you select swipe project template, called "Qt Quick Application - Swipe". I thin you will get the layout you need.
@Gojir4 Thanks. Does Qt Quick/QML offer things like listviews that automatically refresh from a data model and let you provide styled list entries, like QListView?
I also need to do very fast drawing of text to the screen at specific times (to show a running timer down to the 100th of a second).
-
@Gojir4 Thanks. Does Qt Quick/QML offer things like listviews that automatically refresh from a data model and let you provide styled list entries, like QListView?
I also need to do very fast drawing of text to the screen at specific times (to show a running timer down to the 100th of a second).
@Stokestack said in Best widgets for traditional tab-bar mobile layout?:
Does Qt Quick/QML offer things like listviews that automatically refresh from a data model and let you provide styled list entries, like QListView?
Yes, the component
ListViewwhich is compatible with data model and have delegate component which is used for rendering row of the list. So it's highly customizable.@Stokestack said in Best widgets for traditional tab-bar mobile layout?:
I also need to do very fast drawing of text to the screen at specific times (to show a running timer down to the 100th of a second).
Can you explain in details what you want to do exactly ?
-
@Stokestack said in Best widgets for traditional tab-bar mobile layout?:
Does Qt Quick/QML offer things like listviews that automatically refresh from a data model and let you provide styled list entries, like QListView?
Yes, the component
ListViewwhich is compatible with data model and have delegate component which is used for rendering row of the list. So it's highly customizable.@Stokestack said in Best widgets for traditional tab-bar mobile layout?:
I also need to do very fast drawing of text to the screen at specific times (to show a running timer down to the 100th of a second).
Can you explain in details what you want to do exactly ?
@Gojir4 Thanks for your reply.
I'm getting a Bluetooth feed of time data that I need to write to the screen in sync with video devices. iOS provides a very convenient notification to apps of when a screen redraw is going to occur; I realize I may not get this level of precision in Qt, but I'd like to display time with frame-accurate sync with an external device if possible.
My main problem is an extremely aggressive deadline. Although the app will follow the traditional tab/stacked-disclosure model I've described, we want its look (widget motif, listview cell format, and colors and whatnot) to be highly customized. If QML is the right choice, so be it; but I don't know Javascript or QML.
-
@Gojir4 Thanks for your reply.
I'm getting a Bluetooth feed of time data that I need to write to the screen in sync with video devices. iOS provides a very convenient notification to apps of when a screen redraw is going to occur; I realize I may not get this level of precision in Qt, but I'd like to display time with frame-accurate sync with an external device if possible.
My main problem is an extremely aggressive deadline. Although the app will follow the traditional tab/stacked-disclosure model I've described, we want its look (widget motif, listview cell format, and colors and whatnot) to be highly customized. If QML is the right choice, so be it; but I don't know Javascript or QML.
@Stokestack With QML, there is no need to make a "screen redraw", you just have to bind a control with a property, and it will update by itself according to property change.
Also I would say that Bluetooth communication will take much more time than processing and displaying data in your application. So at my opinion you need to put more focus on the optimization of your protocol of communication.
For high customization, QML is the right choice, especially for mobile platform. However as you have an aggressive deadline, it's up to you to see if you want to use QML as you don't know QML and Javascript and you will have to take some time to learn some basics before to really start your development.
You can find many example from QtCreator home page, this is a good start. There is also the QML Book which is a great resource about Qt Quick.
-
@Stokestack With QML, there is no need to make a "screen redraw", you just have to bind a control with a property, and it will update by itself according to property change.
Also I would say that Bluetooth communication will take much more time than processing and displaying data in your application. So at my opinion you need to put more focus on the optimization of your protocol of communication.
For high customization, QML is the right choice, especially for mobile platform. However as you have an aggressive deadline, it's up to you to see if you want to use QML as you don't know QML and Javascript and you will have to take some time to learn some basics before to really start your development.
You can find many example from QtCreator home page, this is a good start. There is also the QML Book which is a great resource about Qt Quick.
@Gojir4 Thanks. I already have a third-party library that provides the necessary Bluetooth communication and time measurement.
