In today world, media contents (like apps, websites, etc.) must have a responsive layout that can be adapted and adjusted quickly to fit in the orientation and the size of the platform’s screen on which they are runned.
It is very common to see this feature in websites, as their layout change on mobile, desktop and even on tablet screen. Native apps created with platform manufacturer’s IDE can have also these feature enabled.
But on cross platform dev tools like Delphi (both FMX and VCL), it may be kind tricky to implement this feature.
Basics
To implement this feature, you have to get access to the current screen orientation.
- Delphi FMX provides a platform service to detect screen orientation on the current platform, which will help you to create responsive apps from a single code base.
- On VCL (Windows-only apps), you can use Windows API to get the current screen orientation.
- But, for a framework-neutral use, you can access the current screen dimensions through the variable “Screen” (FMX.Forms.Screen and Vcl.Forms.Screen) and its properties “Height” and “Width”, then you compare them.
And to apply, you have to write a call to this routine inside an event handler like the Form’s OnResize or OnActivate events (or you can write the whole routine inside the event’s procedure).
- The FormResize event handler is executed when the form get resized (by the mouse, the user’s control or by the OS) even if it didn’t get focus. It is very suitable to our implentation : When the form get resized, it will detect the screen orientation and the form’s contents will be adjusted.
- Or, the FormActivate event handler is executed when the form recieve focus, so it is less suitable to our implentation. When the form recieve focus, it will detect the screen orientation and the form’s contents will be adjusted.
Implementation
Delphi FMX with PlatformService
First, add the FMX.Platform to the uses clause.
Now, you can use the screen orientation’s service to create a condition to hide/show and change dimensions of some controls and layouts when the screen orientation is portrait (and inverted portrait) or landscape (and inverted landscape).
procedure TMainForm.FormResize(Sender: TObject);
var
Screen : IFMXScreenService;
begin
if TPlatformServices.Current.SupportsPlatformService(IFMXScreenService, IInterface(Screen)) then
begin
if (Screen.GetScreenOrientation = TScreenOrientation.Portrait) or (Screen.GetScreenOrientation = TScreenOrientation.InvertedPortrait) then
begin
//Vertical
//Controls that the visibility and/or the dimensions will change if screen is vertical
end
else if (Screen.GetScreenOrientation = TScreenOrientation.Landscape) or (Screen.GetScreenOrientation = TScreenOrientation.InvertedLandscape) then
begin
//Horizontal
//Controls that the visibility and/or the dimensions will change if screen is Horizontal
end
end;
end;As you see, we can implement a routine to hide/show some layouts and change the dimensions of some controls according to the current platform screen’s orientation.
Framework independent code
For a basic Object Pascal implementation (same code working on Delphi FMX, VCL and also FPC/Lazarus), you can use the “Screen” variable which give access to the screen showing the active form.
In the event procedure, you will compare the “Screen” properties “Height” and “Width” to define the screen orientation. Then, according to the result, you create a condition to hide/show and change dimensions of some controls and layouts when the screen orientation is portrait (and inverted portrait) or landscape (and inverted landscape).
procedure TMainForm.FormResize(Sender: TObject);
begin
if (Screen.Height > Screen.Width) then
begin
//Vertical
//Controls that the visibility and/or the dimensions will change if screen is vertical
end
else if (Screen.Height < Screen.Width) then
begin
//Horizontal
//Controls that the visibility and/or the dimensions will change if screen is Horizontal
end;
end;In the same way here, we can implement a routine to hide/show some layouts and change the dimensions of some controls according to the current platform screen’s orientation.