Google Material Design and FireMonkey?
Google Material Design
A few weeks ago Google has officially released the specifications of the Material Design , the new guidelines for the GUI of Android applications.
It is a very extensive documentation that covers many aspects of mobile application GUI and definitely will take some time before all these proposals are absorbed by developers around the world.
It is a very extensive documentation that covers many aspects of mobile application GUI and definitely will take some time before all these proposals are absorbed by developers around the world.
Some applications very popular but have already released updates including elements of the Material Design and of course there is no better source of inspiration of the same Google applications (Chrome, Google+, Play Store, Play Music, ...).
A few days ago I was trying to mimic the behavior of the app Android Google+ regarding animations entry / exit of the upper bars and the button of the shares at the bottom of the screen.
Besides giving the user a feeling of responsiveness of the application (there is a lot of emphasis on the animated transitions in Material Design), this approach also allows you to devote the maximum available space to the list of content that we want to present and at the same time take advantage a title bar of decent size and can accommodate even the most complex controls (ComboBox, Slider, trackbar etc ..).
An attempt
With a little 'careful not to complicate things too much, I tried to replicate the same effect with Delphi XE7.
I chose to use a TListView as main container (and populate it with a TPrototypeBindSource) and I placed on the form (Align = Client).
To be able to add on top of it the other affected controls (title bars and any other animated panels) without interfering with the ListView itself, I added an internal TLayout with Align = Contents (a value introduced in the latest versions of Delphi that allows the layout to cover the entire area of the listview), so you can have a kind of second layer on which to build other components constituting the top rails and bottom of the panel.
To be able to add on top of it the other affected controls (title bars and any other animated panels) without interfering with the ListView itself, I added an internal TLayout with Align = Contents (a value introduced in the latest versions of Delphi that allows the layout to cover the entire area of the listview), so you can have a kind of second layer on which to build other components constituting the top rails and bottom of the panel.
Exploiting the properties of ScrollViewPos TListView (to understand how the user is moving the list), the OnPaint event of the same (to have a strong refresh rate, making sure to add some changes to avoid worsening the performance too) and adding some effect (TShadowEffect) here and there, the result seems quite satisfactory and it comes across a few dozen lines of code.
Here are a couple of screenshots (which does not make very much the idea, being mostly animations) of the final result:
This is obviously a minimal approach and to be able to have a deviation of the initial listview such as not to end the first item under the panels header, I had to sacrifice the chance to exploit the ItemHeader, forcing one of a height equal to the panels of header same (a little 'a trick, say).
I invite you to download the source and try directly (on Win32 but better on a mobile device) or directly install the APK to find the link below.
Update: I added a video demonstration (thanks to the free app Mirror )!
I invite you to download the source and try directly (on Win32 but better on a mobile device) or directly install the APK to find the link below.
Update: I added a video demonstration (thanks to the free app Mirror )!
No comments:
Post a Comment