iOS Question Drawing Rounded Top Tabs

[Robert Valentino]

I am trying to draw some tabs that actually look like tabs.

When I use a series of Panels (setting border) I can make a nice looking tab strip. Not being sure that was a proper way to do this I tried to draw a tab using a canvas and it doesn't draw the way I want.

The Tabs (events, entries, accounting, stats) are done with a series of overlaying panels.

The one below it (in Magenta & Blue) was drawn using DrawRectRounded and DrawLine.

I do not understand why I cannot get the rounded edges to look as nice as the ones drawn with using panels and SetBorder

Attaching the test program if someone want to try.

NOTE: Using same value for SetBorder and DrawRectRounded

    Private mTabBorderWidth                        As Int        = 3dip       
    Private mTabBorderRadius                    As Int        = 15dip

While writing this I was playing with the code at the same time and seem to have it working.

I modified the DrawTab

Spoiler

Public Sub MakewTab(WhereToDraw As Panel, Width As Float, Height As Float, Color As Int, Filled As Boolean) As Bitmap
Dim C As Canvas
Dim B As Bitmap
Dim R As Rect
Dim R2 As Rect
Dim P As Path

WhereToDraw.SetLayoutAnimated(0, 1, 0, 0, Width, Height)

C.Initialize(WhereToDraw)

Log($"W/H ${Width} / ${Height}"$)

R.Initialize(0, 1dip, Width, Height * 2)
R2.Initialize(0, (Height /2), Width, Height)

Log($"Rect : L/T ${R.Left} / ${R.Top} R/B ${R.Right} / ${R.Bottom}"$)
Log($"Rect2: L/T ${R2.Left} / ${R2.Top} R/B ${R2.Right} / ${R2.Bottom}"$)

C.DrawRectRounded(R, Colors.White, False, 1dip, mTabBorderRadius)

R.Initialize(2dip, 2dip, (Width - 2dip), Height * 2)

C.DrawRectRounded(R, Colors.Black, False, mTabBorderWidth, mTabBorderRadius)

Dim Top As Float = Height / 2

Width = Width - 2dip

P.Initialize(Width, Top)
P.LineTo(Width, Height-2dip)
P.LineTo(2dip, Height-2dip)
P.LineTo(2dip, Top)

C.DrawPath(P, Colors.Blue, False, mTabBorderWidth)

B = C.CreateBitmap

WhereToDraw.RemoveViewFromParent

Return B
End Sub

Seems DrawRectRounded is drawing the inside of the rectangle rounded and filling the outside (to me it seems it should be doing the reverse)

Right now this looks like something I can use.

If someone has a nicer way of doing this let me know.

BobVal

 

[Robert Valentino]

Finally got it to draw the way I wanted.

If you wonder what I am trying to accomplish, it is a different look and just playing around

The "click here to reinitialize tab bar" is only there to help when I make changes in the debugger and what to reset the tabstrip

TabBar / TabStrip not sure what to call it other then just Tabs