What is align? I have a project; how can I design UI zones in my C++ app? How to design a C++ app compatible with multi-platform layouts? How can I design for landscape and portrait apps with one form design?
Align is one of the great features of C++ Builder for application UI design. C++ Builder is very flexible and allows you to design and produce any kind of application. These tips below are not mandatory but are worth considering if you are beginner and if you are not sure how to design your application, so it looks great across all platforms and devices.
Table of Contents
Tip 1: Always use Align in UI areas
Use Align in design time. Faster and simple, you don’t need to write extra code to align each of your components. In FMX applications, these ‘Area’s can be Panels (TPanel), Layout (TLayout), Rectangle (TRectangle) to define zones in your application. In VCL applications, use TPanel, TRectangle, TGroupBox … etc.
Avoid coding to Align! Try to NOT use size checks, if() clauses as much as possible.
Tip 2: Focus on your users’ needs
What is primary for your users? What they need? What they use mostly? What are the main actions, operations in your application? Which design parts can be disabled?
Tip 3: Simple UI design is the best design
The main part should be Client which is scalable in all size formats. Generally simple designed application UI’s has one UI area. You can use semi-transparent side panels on this area. You can make visible some buttons and parts in some conditions. This is generally good for console like output apps, photo view apps, 2D or 3D graphic apps, …etc.
Generally when you design an application there are 5 main areas to consider. Top area generally holds buttons, menu or some other main components of your application.
If we generalize UI design in more common design there are 13 areas that you should consider when you design an application. Some main parts and sub parts can be neglectable but you should consider all these areas well. Professional high DPI applications like Photoshop, Word, Excel, PowerPoint, SolidWorks, AutoCAD, 3D Studio Max, … etc. uses every section of this areas. Mobile applications may not able to display all of these areas, so you should consider to disable or use menu to switch other areas.
Yes this example above is for more complex and more professional apps. Here are some more useful examples for your apps,
Tip 4: Use form events to check for changes in size and screen resolution
OnResize() and OnPaint() events are good to check size of the form. You can enable and disable some parts. You can also use components like flow layouts to help automate the process of resizing and aligning controls.
Tip 5: Disable unnecessary areas in lower resolutions and when the target device doesn’t support a feature
Not all devices are the same. In past times we would write programs for computers which were almost exclusively desktop devices, and they all pretty much looked the same and had the same, very limited, sets of features. In the modern times we’re not so lucky. Your C++ app might run on hardware which looks very different to the one on which it was written. This is especially true for cross-platform apps working on mobile devices. Use techniques like TPlatform components to check the actual functionality available and disable, or even better completely hide, functionality which is linked to parts of the app which rely on hardware or devices which are not present.
