Forum Archive

Rounded corners on labels

mikael

The code below shows a rounded border, but label background stays rectangular, both in Pythonista 2 and 3. Is this a bug or a feature? Any workarounds?

from ui import *

v = View()
v.background_color = 'white'

label = Label()
label.text = 'This is a label'
label.background_color = 'black'
label.text_color = 'white'
label.corner_radius = 5
label.border_color = 'white'
label.border_width = 1
label.size_to_fit()
label.center = (v.width * 0.5, v.height * 0.5)
label.flex = 'LRTB'

v.add_subview(label)
v.present('sheet')
cvp

Already seen, use Button instead:

label = Button()
label.title = 'this is button'
mikael

Thanks for the idea, but ui.Button is not a drop-in replacement. For example, button does not support automatic multiline text.

ccc

https://forum.omz-software.com/topic/3082/ui-label-corner_radius-not-working

donnieh

If you make the label border black and the label background white, it does what you ask...

mikael

@ccc, thanks. I did do a search first, honest.

cvp

Eurêka

from ui import *

v = View()
v.background_color = 'white'  

label = Label()
label.text = 'this is label'
label.background_color = (1,1,1,0) # transparent background
label.text_color = 'white'
label.corner_radius = 10
label.border_color = 'white'
label.border_width = 1
label.size_to_fit()
label.center = (v.width * 0.5, v.height * 0.5)
label.flex = 'LRTB' 
v.add_subview(label)

label_button = Button()
label_button.frame = label.frame
label_button.background_color = 'black'
label_button.text_color = 'white'
label_button.corner_radius = 10
label_button.border_color = 'white'
label_button.border_width = 1
v.add_subview(label_button)
label_button.send_to_back()

v.present('sheet')

mikael

@cvp, thanks for the effort. Is there a reason to use a button instead of a plain custom View?

mikael

@donnieh said:

If you make the label border black and the label background white, it does what you ask...

Do you mean that if the label is white and the background is white, you do not see the non-rounded corner?

cvp

@mikael no, just a quick try..by copying the label code and to have a rounded rectangle easily

mikael

Based on the thread linked by @ccc above, this function applies rounded corners on the ui.Label given as an argument, without subviews:

@objc_util.on_main_thread
def set_rounded(label, radius):
  label.corner_radius = radius
  objc_util.ObjCInstance(label).clipsToBounds = True
cvp

That's a better solution, for sure!

donnieh

@mikael Yeah, because the label background matches the view background. Not always useful when the background color and and label background are different colors.