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
While writing this I was playing with the code at the same time and seem to have it working.
I modified the DrawTab
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
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
B4X:
Private mTabBorderWidth As Int = 3dip
Private mTabBorderRadius As Int = 15dipWhile writing this I was playing with the code at the same time and seem to have it working.
I modified the DrawTab
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
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
