TTMSFMXPageControl Dots in Tabs

FMX TMS FMX UI Pack
1

Hi,


I need to have an FMX pagecontrol to display (white) dots in the tabs instead of text.
Just like a tabcontrol on IOS or MacOS e.g..

If there is a more suitable component which does the same, please refer me to that.
The standard Delphi FMX TAbControl has a "dots option" but it displays squares instead of dots.
This is due to style 'tabdotstyle'.
But I havent found a way to change that (yet).

For now I override the DoAfterDrawTabBackground method in my PageControl descendant.
I used this method already to draw a line under the active tab in the Pagecontrol.
Instead of the line, I now want to display a dot (circle/ellipse).
And it works, sort of.

However I have 2 problems at this stage.
1. Only the first tab seems to get drawn !?!
2. The tabs (with specific with) are left-aligned, and would be nice to have them center aligned

procedure TMyPageControl.DrawDotIndicator(AGraphics: TTMSFMXGraphics; ATabIndex: Integer; ARect: TRectF; AState: TTMSFMXTabSetTabState);
var
  x: Single;
  y: Single;
  r : Single;
begin
  // -- If busy destroying, than do nothing
  if IsControlDestroying(Self) then
    Exit;

  // -- If AGraphics = nil, get out
  if not Assigned(AGraphics) then
    Exit;

  // -- Only paint certain states !?!
//  if not(AState in [ttsNormal, ttsActive]) then
//    Exit;

  // -- Clear tab
  AGraphics.Stroke.Color := TMyPageControlDefault.TabColor;
  AGraphics.Fill.Color   := TMyPageControlDefault.TabColor;
  AGraphics.DrawRectangle(ARect.Left, ARect.Top, ARect.Right, ARect.Bottom);

  // -- Set dot characteristics
  AGraphics.Stroke.Width := 1;
  AGraphics.Stroke.Kind  := TTMSFMXGraphicsStrokeKind.gskSolid;
  AGraphics.Stroke.Color := TArboisDefault.White;
  AGraphics.Fill.Color   := TArboisDefault.White;

  // -- Active -> Solid dot, else Open dot
  if AState = ttsActive then
    AGraphics.Fill.Kind := TTMSFMXGraphicsFillKind.gfkSolid;
  else
    AGraphics.Fill.Kind := TTMSFMXGraphicsFillKind.gfkNone;

  // -- Calculate center of tab
  x := (ARect.Right - ARect.Left) / 2;
  y := (ARect.Bottom - ARect.Top) / 2;

  // -- Set range
  r := 3;

  // -- Draw Dot
  AGraphics.DrawEllipse(x - r, y - r, x + r, y + r);
end;

2
Forgot to include this one.

procedure TMyPageControl.DoAfterDrawTabBackground(AGraphics: TTMSFMXGraphics; ATabIndex: Integer; ARect: TRectF; AState: TTMSFMXTabSetTabState);
begin
  if FIndicatorType = TMyPageControlIndicatorType.Line then
    DrawLineIndicator(AGraphics, ATabIndex, ARect, AState)
  else if FIndicatorType = TMyPageControlIndicatorType.Dot then
    DrawDotIndicator(AGraphics, ATabIndex, ARect, AState);

  inherited;
end;

3

Solved the first problem myself.


I drawed the circle on incorrect coordinates.
This is fixed by using :
AGraphics.DrawEllipse(ARect.Left + x - r, ARect.Top + y - r, ARect.Left + x + r, ARect.Top+ y + r);


So the only issue remaining is how to get the tabs centralized instead of at the left side.


4

Hi,


The tabs are always placed at the left side. There is currently no option to place them in the center of the page control. We have added this on our feature request list.
5

Ok, thx Peter