Gidday this is Alister Christie from LearnDelphi.tv and in this video we are
going to take a look at a variable height at ListView items in FireMonkey
so there is a sample project, if we have a look in object pascal, multi-device
samples, user interface, ListView, and variable height items. So let's open that
project and just check that it's on windows so that's nice and quick to compile and
debug, and we'll run it may have a quick look at what it does. So if we go fill
lists we can add a number of items and it's basically some text with variable
height and in variable length I guess as well and we can see that that's using
different fonts and text to make the List ListItem height vary, and we've got the number
of pixels here shown with a little bitmap. Now this is done, if we go into the
listview and have a look at the events there's an OnUpdateObjects and in there it does a
little calculation of the height so we can see it's getting the TextMain [variable] which
is the drawable item with a variable text height and we're getting the
contents of that and then we're doing funny things with the font size and
what-have-you but this method here calculates the height and so if I just
control click on it we'll see it creates a layout and then fills it with the same
font and what-have-you and puts the text in and we then get the height
of the layout
and then we add, I think by the look of things, one additional line so what
we'll do is we'll create a new projects and we want a multi-device application
and blank and to that we obviously need a listview, I'll call it LVFish because
we're going to do Fish Facts and let's just land a client, we are of course are
going to want to have some data so we'll add a ClientDataSet and we'll call it cdsFish
and what I'm gonna do I'm just going to go back to the Welcome page and go open
sample project and copy this path because I'm gonna want to go into the data
folder, Load MyBase Table, paste that in. Let's have a look at data, and BioLife is our
Fish Facts [table] so that's our data loaded.
So I'm just going to write I can go into the fields editor and add all fields and let's save this project off
do we have a FishFacts already? Nope, excellent, so next we want to go into the
item appearance and change this to dynamic and toggle design time mode
here's the item text, let's align that leading and make it a bit smaller
not quite that small, okay it'll need a bit more space
okay let's assign that to 80, and we'll have the ..., let's throw on another text so let's
call this one..., to name that we need to go into Text1 and change the
appearance object name to txtCommonName, add a new
text item
and endeavor to resize it I find this editor to be very awkward and I never
really know if I'm doing something wrong or it's just me. Or the editor is buggy
let's align that to leading as well
oops, text align... leading
and we had one third TextObject and TextAlign is leading and leading and
we'll resize it down to below like so we'll call this..., I have to get back to
here SpeciesName and Text3
description and we'll finally add a image
I'm trying to make nice and small
which we'll throw in this tiny gap here
Okay, and we want to call that one imgFish okay let's go back to our main
view and save all that, except I don't want to save project1, but that's cool
our Fish Facts is saved. Lets's now see if we can get these our live bindings
correct so we'll bind visually. get a bit of separation between those two
let's sync those together we've got a bunch of things so our graphic
goes to imgFish with our fish common name - common name species name to
species name and notes - description
like so and we'll see that our notes aren't quite working, I don't think we need the
LiveBinding designer anymore, but we can run this and have a look and see what
it's doing
so basically our text looks like it's not wrapping so we need to sort that out
and we want to make the ListView item in the text to expand to fill the
available space or take up... anyway oops, don't want edit mode we want
toggle design mode. So let's turn word wrap on that and also let's make that one
bold and that one italic so we get a little bit of differentiation between
the various items. And hopefully that will look a little bit better
indeed okay
we basically now just want to steal some code from this project and it's the
GetTextHeight, so that's conveniently over there so I was going to copy that
and.... paste it in
Control+Shift+C
and you need a TextLayout which we find in... what do you know in FMX.TextLayout
I might actually put it at the top.
And that gets rid of all of our errors and of course we are going to need an event OnUpdateObjects from
which let's just take all this and copy it
and paste it so we don't care about our bitmap stuff so I'm just going to remove
all of that, and so the available width is basically all the available width, we get
our text from txtDescription
and we don't care about this randomizing the size at all, so we can delete all
that and so I am going to create another ariable called TextHeight, and am in
insert mode? I am to
so let's just get our text tight from here and the item height
is also going to be, well so we need to add to that our drawable
um... drawable TListItem, placement offset, I was looking for position Y, so take the the
the where it's located so let's run, will this run? somewhat, I have gotten
this right let's run it and find out
Integer and extend it yes over writing
that is a, is that a single? yes and that is an integer as well so let's call
round
okay and now it's changing the height of the text now you might think this is
actually getting this wrong and I to do quite a bit debugging on this to try and work
out what was going on but let's just throw trim around that
and then we have our variable variable height text is our fish image common
name, species name, and text and you probably want to
juggle things around a little bit make things a little bit tighter and
what-have-you but I think the serves as a pretty pretty good example of this
working and I can save it off, now there is an issue with this which I will show
you shortly
so let's close all that. No we didn't save changes the project group. And if we
open this project and run it and windows yep
what it does is not only important but it does to a it's a it's got a logging
window just turn debug mode on to add some test lines and since the the log
it's got a title in there and some text and we'll see it's got two lines there
but if I click Add Lines there's a new one it's actually four lines but when I
add a new record the it's this is the default size so it's initially the
default size and then we add some text whatever, I suspect it something to do with the live
bindings and if we get a stack overflow and here is my question, it's had 32 views
and no solution so basically for some reason with the live bindings in place
it's not getting the initial - get back to Delphi
it's getting the initial size and then when I add a new one it's then getting
the recalculating the size based on the the texture correctly and so that's
something I need to sort out it's not necessarily a particular major issue but
if you have a solution posted in the comments or answer the StackOverflow
question I'll give you a nice green tick that's all I have time for reminder my
free content and premium videos you get to make a mega pack it's good if it's
mostly VCL stuff and if you've got like a new developer coming on board your
team or something like that it's a great way of getting them up to speed on the
VCL and some generic collections and some other bits and pieces in there as
well but the mega pick is certainly the best value thanks for watching I'm
Alister Christie