Sue_King
(Sue King)
May 14, 2019, 3:18am
1
Hello,
I am trying to set the header of a table view at run time to show a time stamp, using HTML as described in the HTML mini guide, like
<p align="left" float="left">Gin</p><p align="right">13 May 2019 11:41 AM</p>
However the timestamp is overwriting the text. It is left justified, not right justified.
I tried changing align="right" to float="right". No change.
Is there something else I should be setting ?
TIA
Sue
Pieter
(Pieter)
May 14, 2019, 3:27pm
2
Hi,
We have tested this here and the text "Gin" is aligned left and the time is aligned right. Can you send us a sample that demonstrates this?
Sue_King
(Sue King)
May 15, 2019, 4:04am
3
Here is the code for the .pas and .fmx files.
Perhaps there is some setting that I have missed.
Sue
.pas
unit tav_test; interface uses System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants, FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.TMSFNCCustomControl, FMX.TMSFNCTableView; type TForm2 = class(TForm) TMSFNCTableView1: TTMSFNCTableView; private { Private declarations } public { Public declarations } end; var Form2: TForm2; implementation {$R *.fmx} end.
.fmx
object Form2: TForm2 Left = 0 Top = 0 Caption = 'Form2' ClientHeight = 480 ClientWidth = 640 FormFactor.Width = 320 FormFactor.Height = 480 FormFactor.Devices = [Desktop] DesignerMasterStyle = 0 object TMSFNCTableView1: TTMSFNCTableView Position.X = 196.000000000000000000 Position.Y = 66.000000000000000000 Size.Width = 250.000000000000000000 Size.Height = 350.000000000000000000 Size.PlatformDefault = False TabOrder = 0 Stroke.Color = xFFC8C7CC ItemAppearance.Font.Name = 'Segoe UI' ItemAppearance.Fill.Color = claNull ItemAppearance.Stroke.Color = xFFC8C7CC ItemAppearance.SelectedFill.Color = xFFD9D9D9 ItemAppearance.SelectedStroke.Color = xFFD9D9D9 ItemAppearance.DisabledFill.Kind = gfkNone ItemAppearance.DisabledFill.Color = claDarkgray ItemAppearance.DisabledStroke.Kind = gskNone ItemAppearance.DisabledStroke.Color = claDarkgray ItemAppearance.FixedHeight = 25.000000000000000000 ItemAppearance.AccessoryDetailBitmaps = <> ItemAppearance.AccessoryFont.Color = claDarkred ItemAppearance.AccessoryFont.Name = 'Segoe UI' ItemAppearance.AccessoryFont.StyleExt = {00070000000000000004000000} ItemAppearance.AccessoryStroke.Color = claBlack ItemAppearance.AccessoryFill.Color = claYellowgreen DefaultItem.VerticalTextAlign = gtaCenter DefaultItem.SelectedTextColor = claBlack Items = < item Text = 'Mercedes' VerticalTextAlign = gtaCenter SelectedTextColor = claBlack end item Text = 'Audi' VerticalTextAlign = gtaCenter SelectedTextColor = claBlack end item Text = 'BMW' VerticalTextAlign = gtaCenter SelectedTextColor = claBlack end item Text = 'Land Rover' VerticalTextAlign = gtaCenter SelectedTextColor = claBlack end item Text = 'Bugatti' VerticalTextAlign = gtaCenter SelectedTextColor = claBlack end> Header.Text = '<p align="left" float="left">Status</p> <p align="right">Fred</p' + '>' Header.Fill.Color = xFFF9F9F9 Header.Font.Name = 'Segoe UI' Header.Stroke.Color = xFFB2B2B2 Header.Height = 30.000000000000000000 Footer.Fill.Color = xFFF9F9F9 Footer.Font.Name = 'Segoe UI' Footer.Stroke.Color = xFFB2B2B2 Footer.Height = 30.000000000000000000 LookupBar.Font.Name = 'Segoe UI' LookupBar.InActiveFont.Color = claSilver LookupBar.InActiveFont.Name = 'Segoe UI' LookupBar.Stroke.Color = claWhite LookupBar.DownFill.Color = xFFF9F9F9 LookupBar.DownStroke.Color = xFFF9F9F9 Reload.Stroke.Color = claDarkgray Reload.Stroke.Width = 2.000000000000000000 Categories = <> MoreOptions = <> MoreOptionAppearance.Font.Color = claWhite MoreOptionAppearance.Font.Name = 'Segoe UI' MoreOptionAppearance.Fill.Color = claSteelblue MoreOptionAppearance.Stroke.Color = claSteelblue CategoryAppearance.Font.Name = 'Segoe UI' CategoryAppearance.Fill.Color = xFFF4F4F4 CategoryAppearance.Stroke.Color = claDarkgray end end
Pieter
(Pieter)
May 15, 2019, 8:56am
4
Hi,
There are some additional settings needed to get it working. Please apply this at designtime:
Header.Height := 40;
VerticalTextAlign := gtaLeading;
HorizontalTextAlign := gtaLeading;
WordWrapping := True;
Sue_King
(Sue King)
May 16, 2019, 1:53am
5
Hi,
Thanks for the tips. I had tried changing the horizontal text align value, but not WordWrapping.
Testing these settings, it seems that only WordWrapping is required, as the TextAlign settings are ignored when this is on.
Is there a way of centering the wordwrapped text vertically in the space ?
The vertical text is obviously set to gtaLeading and it looks out of balance. I can make it look a bit better by changing the font size and header height, but would prefer it was automatically centered. To make the header look right with the same size font as the items, it has to have a smaller height, which doesn't look right to my eye.
Sue
Pieter
(Pieter)
May 16, 2019, 8:46am
6
Hi,
Alternatively you could override the text drawing, and draw the left and right text in parts. Below is a complete sample.
unit Unit54;
interface
uses
System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
FMX.TMSFNCTypes, FMX.TMSFNCUtils, FMX.TMSFNCGraphics, FMX.TMSFNCGraphicsTypes,
FMX.TMSFNCCustomControl, FMX.TMSFNCTableView, FMX.TMSFNCTreeViewData;
type
TForm54 = class(TForm)
TMSFNCTableView1: TTMSFNCTableView;
procedure FormCreate(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
procedure DoBeforeDrawColumnText(Sender: TObject; AGraphics: TTMSFNCGraphics; ARect: TRectF; AColumn: Integer; AKind: TTMSFNCTreeViewCacheItemKind; AText: string; var AAllow: Boolean);
end;
var
Form54: TForm54;
implementation
{$R *.fmx}
procedure TForm54.DoBeforeDrawColumnText(Sender: TObject;
AGraphics: TTMSFNCGraphics; ARect: TRectF; AColumn: Integer;
AKind: TTMSFNCTreeViewCacheItemKind; AText: string; var AAllow: Boolean);
begin
case AKind of
ikColumnTop:
begin
AAllow := False;
AGraphics.DrawText(ARect, 'Left', False, gtaLeading);
AGraphics.DrawText(ARect, 'Right', False, gtaTrailing);
end;
end;
end;
procedure TForm54.FormCreate(Sender: TObject);
begin
TMSFNCTableView1.TreeView.OnBeforeDrawColumnText := DoBeforeDrawColumnText;
end;
end.
Sue_King
(Sue King)
May 17, 2019, 12:25am
7
Excellent! Very powerful component.
Thanks for your help.