Custom views with bold text and rounded corners

peiriannydd

Two issues:

When I try to create a custom view with the pyui I am unable to created rounded corners, but if instead I create the custom view without the pyui I get rounded corners.
When I try to use <system-bold> font in a custom view the text is not bold.

How do I solve this? Thanks for any help!

Here is an example that illustrates both:

import ui

class customButton(ui.View):
  def __init__(self,frame=(0,0,300,100)):
    self.corner_radius = 8
    self.frame = frame
    self.text = 'why does only one of these have rounded corners and neither have bold text?'

  def draw(self):
    path = ui.Path.rounded_rect(0,0, self.width,self.height,self.corner_radius)
    ui.set_color('green')
    path.fill()
    ui.draw_string(self.text,(0,0,self.width,self.height),('<system-bold>',20),'black',ui.ALIGN_CENTER)


#the pyui file consists of a single custom view, with
# x=20
# y=200
# width=300
# height=100
# custom view class = customButton
v = ui.load_view()
cbn = customButton()
v.add_subview(cbn)
v.present('fullscreen')

cvp

@peiriannydd said

When I try to create a custom view with the pyui I am unable to created rounded corners, but if instead I create the custom view without the pyui I get rounded corners.

First, when you post a source code, please insert it between 2 lines of 3 back ticks.
When you edit your post, the </> key does it for you, try it.

That works

cvp

@peiriannydd said

When I try to use <system-bold> font in a custom view the text is not bold.

You're right, I don't know why but try this font, it works

		ui.draw_string(self.text,(0,0,self.width,self.height),('Arial Rounded MT Bold',20),'black',ui.ALIGN_CENTER)

Or, in place of draw, use a label, there bold works 😉

	def __init__(self, frame=(20,200,300,100)):

		self.corner_radius = 8
		self.frame = frame
		self.text = 'why does only one of these have rounded corners and neither have bold text?'
		l = ui.Label()
		l.frame = (0,0,self.width,self.height)
		l.background_color = 'green'
		l.text_color = 'black'
		l.number_of_lines = 0
		l.text = self.text
		l.font = ('<System-bold>',20)
		self.add_subview(l)

cvp

@peiriannydd Finally, you didn't say if this solved your two problems...

peiriannydd

Yes, thank you, this solved my problems, although using a label since <system-bold> doesn’t work with ui.draw_string seems like a bug workaround.

cvp

@peiriannydd Said

seems like a bug workaround.

Sure, but what else to do if the app is no more updated?

cvp

@peiriannydd other workaround

		f = '<System>'
		ui.draw_string(self.text,(0,0,self.width,self.height), (f,20), 'black',ui.ALIGN_CENTER)
		ui.draw_string(self.text,(1,1,self.width-1,self.height-1), (f,20), 'black',ui.ALIGN_CENTER)

JonB

So, a way that should work would be to use UIFont to find the system font name, and then create a bold version, then find the name of that... Just an idea, have not pursued it yet

cvp

@JonB I did try:

<UICTFont: 0x103990c70> font-family: ".SFUI-Semibold"; font-weight: bold; font-style: normal; font-size: 20.00pt

JonB

Try

".SFCompactText-Bold"

Or

".SFProText-Bold"

Also-- the "Text" part of the name can be replaced with Rounded, or Display. Apparently Text is supposed to used under 19pt, Display for 20pt+. I'm not sure what Rounded is for -- looks a little more informal.

I think apple tried to obfuscate system font names so people used their new API in iOS13, to prevent people hard coding fonts that might change later. Hence reason that .SFUI doesnt work

I assume draw_string is using UIFont.fontWithName_size_

JonB

I think compact is for watchOS, Pro for iOS.

Does UIFont have a .fontName() method?

cvp

@JonB neither ".SFProText-Bold" nor ".SFProDisplay-Bold" do work

I ask me if for SF standard system font, bold in name does work without a supplementary bold attribute

cvp

@JonB said

does UIFont have a .fontName() method?

Yes

cvp

@peiriannydd this works, in place of ui.draw_string

		UIFont = ObjCClass('UIFont').boldSystemFontOfSize_(20.0)		
		attrtext = ObjCClass('NSMutableAttributedString').alloc().initWithString_(ns(self.text))
		attrtext.addAttribute_value_range_(ns('NSFont'), UIFont, NSRange(0,len(self.text)))		
		attrtext.drawInRect_(CGRect(CGPoint(0, 0), CGSize(self.width, self.height)))

Nb: needs

from objc_util import *