qt:icons
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
qt:icons [2011/05/12 08:31] – [The X11 policy] mithat | qt:icons [2011/05/13 16:52] – [QStyle's standardIcon() function] mithat | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Icons and Actions ====== | ====== Icons and Actions ====== | ||
- | This page discusses different ways of binding icons to actions in Qt desktop applications and explores (as-yet incompletely tested) | + | This report |
- | + | ||
- | ===== Options ===== | + | |
In Qt, there are (at least) five different approaches to binding icons((http:// | In Qt, there are (at least) five different approaches to binding icons((http:// | ||
- | ==== Using Qt Resources in Qt Designer ==== | + | ===== Using Qt Resources in Qt Designer |
- | The path-of-least-resistance for binding icons to actions when developing Qt applications with Qt Designer((Throughout, | + | The path-of-least-resistance for binding icons to actions when developing Qt applications with Qt Designer((Throughout, |
- | While this approach has the above stated benefits, it's not optimal for a couple reasons. First, it lacks the ability to specify multiple icon sizes. In a typical application, | + | While this approach has the above stated benefits, it's not optimal for a couple reasons. First, it lacks the ability to specify multiple icon sizes. In a typical application, |
- | Developers using this approach typically provide an icon in a resource that is as large as the application is likely to require, and then let Qt resize it as needed. Thus, for example, you might bind a 48x48 icon to an action and let Qt shrink it to 24x24 for the toolbar and 16x16 for the menu item. While this works, the shrunk icons often appear fuzzy or otherwise suboptimal((As near as I can tell, it's not possible to specify multi-sized icons in Qt Designer. You can supply Windows-style multi-size '' | + | Developers using this approach typically provide an icon in a resource that is as large as the application is likely to require, and then let Qt resize it as needed. Thus, for example, you might bind a 48x48 icon to an action and let Qt shrink it to 24x24 for the toolbar and 16x16 for the menu item. While this works, the shrunk icons often appear fuzzy and/or otherwise suboptimal((As near as I can tell, it's not possible to specify multi-sized icons in Qt Designer. You can supply Windows-style multi-size '' |
FIXME (an image here would help a lot) | FIXME (an image here would help a lot) | ||
Line 19: | Line 17: | ||
The second issue with the way Qt Designer deals with binding icons to actions is that it doesn' | The second issue with the way Qt Designer deals with binding icons to actions is that it doesn' | ||
- | === Code implementation === | + | ==== Code implementation |
There is no specific code implementation required to use the above icon bindings apart from what Qt Designer and '' | There is no specific code implementation required to use the above icon bindings apart from what Qt Designer and '' | ||
<code cpp-qt> | <code cpp-qt> | ||
Line 30: | Line 28: | ||
}</ | }</ | ||
- | === Pros === | + | ==== Pros ==== |
* Available on all platforms | * Available on all platforms | ||
* Incredibly easy; no coding required | * Incredibly easy; no coding required | ||
- | === Cons === | + | ==== Cons ==== |
* Poor resizing | * Poor resizing | ||
* Not consistent with system icon theme | * Not consistent with system icon theme | ||
- | ==== Explicitly build and bind icons at runtime ==== | + | ===== Explicitly build and bind icons at runtime |
It's possible to build '' | It's possible to build '' | ||
- | === Code implementation === | + | ==== Code implementation |
In the code below, we are assuming we have a resource in our project root called '' | In the code below, we are assuming we have a resource in our project root called '' | ||
Line 74: | Line 72: | ||
": | ": | ||
documentOpenIcon.addFile( | documentOpenIcon.addFile( | ||
- | ": | + | ": |
ui-> | ui-> | ||
Line 83: | Line 81: | ||
": | ": | ||
saveAsIcon.addFile( | saveAsIcon.addFile( | ||
- | ": | + | ": |
ui-> | ui-> | ||
Line 92: | Line 90: | ||
": | ": | ||
exitIcon.addFile( | exitIcon.addFile( | ||
- | ": | + | ": |
ui-> | ui-> | ||
Line 98: | Line 96: | ||
}</ | }</ | ||
- | If you have more than a handful of such icons, you will probably want to write a helper function | + | If you have more than a handful of such icons, you will probably want to write a [[MainWindow-buildIcon|support method]] |
- | === Pros === | + | ==== Pros ==== |
* Available to all platforms | * Available to all platforms | ||
* Excellent resizing (if you provide all required sizes) | * Excellent resizing (if you provide all required sizes) | ||
* Covers all needed icons (if you provide all required icons) | * Covers all needed icons (if you provide all required icons) | ||
- | === Cons === | + | ==== Cons ==== |
* Not consistent with system icon theme | * Not consistent with system icon theme | ||
* Requires lots of coding | * Requires lots of coding | ||
- | ==== QStyle' | + | ===== QStyle' |
- | An alternative to using icon resources is provided by the '' | + | An alternative to using icon resources is provided by the '' |
- | The enumerated icons should be available on all platforms, so testing for their existence isn't required. | + | The main issue with using '' |
Implementation requires only a bit of straight-forward hand-coding. | Implementation requires only a bit of straight-forward hand-coding. | ||
- | === Code implementation === | + | ==== Code implementation |
In our example, acceptable '' | In our example, acceptable '' | ||
Line 132: | Line 130: | ||
}</ | }</ | ||
- | === Pros === | + | ==== Pros ==== |
* Consistent with system icon theme | * Consistent with system icon theme | ||
* Available on all platforms | * Available on all platforms | ||
* Fairly easy to implement | * Fairly easy to implement | ||
- | === Cons === | + | ==== Cons ==== |
* Poor resizing | * Poor resizing | ||
* Limited range of icons | * Limited range of icons | ||
- | ==== System theme using QIcon:: | + | ===== System theme using QIcon:: |
- | On X11 systems, Qt lets you access all the icons that are part of the system icon theme using the static function '' | + | On X11 systems, Qt lets you access all the icons that are part of the system icon theme using the static function '' |
- | As was the case with QStyle' | + | As was the case with QStyle' |
- | === Code implementation === | + | ==== Code implementation |
In our example, using '' | In our example, using '' | ||
Line 191: | Line 189: | ||
- | === Pros === | + | ==== Pros ==== |
* Consistent with system icon theme | * Consistent with system icon theme | ||
* Excellent resizing (depending on icon theme) | * Excellent resizing (depending on icon theme) | ||
* Fairly easy to implement | * Fairly easy to implement | ||
- | === Cons === | + | ==== Cons ==== |
* Available only on X11 systems | * Available only on X11 systems | ||
* Wide range of icons, but won't cover all requirements | * Wide range of icons, but won't cover all requirements | ||
- | === Caveat === | + | ==== Caveat |
- | QIcon' | + | QIcon' |
<code cpp-qt> | <code cpp-qt> | ||
QString iconTheme = My:: | QString iconTheme = My:: | ||
QIcon:: | QIcon:: | ||
- | ==== Custom theme using QIcon:: | + | Until such '' |
+ | ===== Custom theme using QIcon:: | ||
The static function '' | The static function '' | ||
Line 212: | Line 211: | ||
To describe the process, I will use an example of a custom theme that provides icons in a variety of sizes for our example application. The icons themselves are taken from the raucously popular, public domain Tango Project((http:// | To describe the process, I will use an example of a custom theme that provides icons in a variety of sizes for our example application. The icons themselves are taken from the raucously popular, public domain Tango Project((http:// | ||
- | === Creating a custom icon theme === | + | ==== Creating a custom icon theme ==== |
There are several ways to create icon themes((http:// | There are several ways to create icon themes((http:// | ||
Line 247: | Line 246: | ||
The actual icon theme consists of the directory TangoMFK and its contents. | The actual icon theme consists of the directory TangoMFK and its contents. | ||
- | === Creating a Qt Resource for the theme === | + | ==== Creating a Qt Resource for the theme ==== |
While you can create the needed '' | While you can create the needed '' | ||
Line 274: | Line 273: | ||
Note that in the set of icons I drew from, there were no 48x48 icons. To maintain best compatibility with Windows OSes, you ideally should include 48x48 icons as well((See http:// | Note that in the set of icons I drew from, there were no 48x48 icons. To maintain best compatibility with Windows OSes, you ideally should include 48x48 icons as well((See http:// | ||
- | The pros and cons associated with this approach are essentially identical to [[# | + | The pros and cons associated with this approach are essentially identical to [[# |
- | === Code implementation === | + | ==== Code implementation |
Once you have created your custom icon theme and added it to your project as a resource, using it is essentially identical to using the system icon theme except that you must now specify the theme name((http:// | Once you have created your custom icon theme and added it to your project as a resource, using it is essentially identical to using the system icon theme except that you must now specify the theme name((http:// | ||
<code cpp-qt> | <code cpp-qt> | ||
Line 294: | Line 293: | ||
You can (and typically should) use the forms shown above for testing icon existence and/or setting fallback icons. | You can (and typically should) use the forms shown above for testing icon existence and/or setting fallback icons. | ||
- | === Pros === | + | ==== Pros ==== |
* Available to all platforms | * Available to all platforms | ||
* Excellent resizing (if you provide all required sizes) | * Excellent resizing (if you provide all required sizes) | ||
* Covers all needed icons (if you provide all required icons) | * Covers all needed icons (if you provide all required icons) | ||
- | === Cons === | + | ==== Cons ==== |
* Not consistent with system icon theme | * Not consistent with system icon theme | ||
* PITA to implement | * PITA to implement | ||
- | ===== Toward robust icon support | + | ===== Discussion |
- | Clearly, there is no single solution that is optimal anywhere and no simple combination that is optimal everywhere. | + | While Qt offers many approaches to binding icons to actions, there is no single solution that is optimal anywhere and no simple combination that is optimal everywhere. |
- | <code cpp-qt> | + | |
- | QString systemTheme = QIcon:: | + | |
- | QString customTheme = " | + | |
- | if (QIcon:: | ||
- | theAction-> | ||
- | else | ||
- | { | ||
- | QIcon:: | ||
- | if (QIcon:: | ||
- | theAction-> | ||
- | QIcon:: | ||
- | } | ||
- | </ | ||
- | |||
- | because theme setting is dynamic. What will be rendered on screen in the above case are the system theme' | ||
- | |||
- | Given these circumstances, | ||
- | |||
- | ==== The " | ||
- | We begin with this policy because it's conceptually the easiest to implement consistently. This policy uses: | ||
- | |||
- | * Fallback icons from a resource file (via Qt Designer) | ||
- | * Custom theme icons for all icons | ||
- | |||
- | Implementation is essentially as described in [[#Creating a custom icon theme]] above with the addition that fallback icons using the same icons present in your custom icon theme are set in Qt Designer. | ||
- | |||
- | The chief advantage of this approach is that it uses multi-sized icons for all actions in the application. The chief disadvantage (apart from the need to create a complete custom icon theme) is that the icons will not be integrated with the system' | ||
- | |||
- | ==== The Windows/OS X policy ==== | ||
- | We call the second policy the " | ||
- | |||
- | * Fallback icons from a resource file (via Qt Designer) | ||
- | * '' | ||
- | * Custom theme icons for the remainder | ||
- | |||
- | The main advantage of this policy is that it allows some icons to be integrated with the system' | ||
- | |||
- | ==== The X11 policy ==== | ||
- | In the "X11 policy" | ||
- | |||
- | * Fallback icons from a resource file (via Qt Designer) | ||
- | * Icons from the system icon theme when available | ||
- | * Explicitly configured multi-sized icons elsewhere | ||
- | |||
- | The main advantage of this policy is that it provides GTK+ users //optimally rendered// familiar icons over a large set of icons and optimally rendered custom icons elsewhere. The main disadvantage is that implementing the icons that are not covered by system icons will requires a good amount of work and code. | ||
- | |||
- | |||
- | ===== Discussion ===== | ||
- | A truly robust icon policy in Qt requires an ability to set multi-sized icons from system icons and at least one additional source -- an ability not currently available. This leaves the developer with the choice of optimizing icon rendering quality at the cost of system integration or using system icons at the cost of icon rendering quality. User testing is indicated across platforms to determine the significance of this limitation and the optimal trade-offs until the required support is available. |
qt/icons.txt · Last modified: 2011/05/13 17:01 by mithat