Issue with segmented control and radius fill

[samaklis]

I have a segmented control that when the view it is a member of has say a black background color and I sent the background color of the segment control to be white, you can see the square ends of the border which are also filled with the background (white) color, so the whole control is squared rather than “rounded”

Is there a way to also set the space between the rounded edges then the rectangle to be the same as the background color of the view? (not sure how to put in a picture, but I hope it is easy enough to visualize)

Thanks

[cvp]

@samaklis

The white area is the rounded rectangle of a selected segment.
Do you want to have a selected segment covering the entire rectangle of the segment?

import ui
v =ui.View()
v.background_color = 'black'
v.frame = (0,0,400,200)
s = ui.SegmentedControl()
s.background_color = 'yellow'
s.segments = ['aaa','bbb']
s.frame = (10,50,380,100)
v.add_subview(s)
v.present('sheet')

[cvp]

@samaklis Perhaps could you use your own buttons instead of ui.SegmentedControl

[cvp]

@samaklis almost that with

from objc_util import *
import ui
items = ['aaa','bbb']
v =ui.View()
v.background_color = 'black'
v.frame = (0,0,400,200)
s = ui.SegmentedControl()
s.corner_radius = 0
s.background_color = 'yellow'
s.segments = items
s.frame = (10,20,380,50)
v.add_subview(s)
t = ui.SegmentedControl()
t.corner_radius = 0
t.background_color = 'yellow'
t.segments = items
t.frame = (10,130,380,50)
def t_action(sender):
	w = sender.width/len(items)
	h = sender.height
	idx = sender.selected_index
	o = ObjCInstance(sender).segmentedControl()
	#print(dir(o))
	idx = o.selectedSegmentIndex()
	for i in range(len(items)):
		if i == idx:
			with ui.ImageContext(w,h) as ctx:
				path = ui.Path.rounded_rect(0,0,w,h,0)
				ui.set_color('white')
				path.fill()
				s = 12
				ui.draw_string(items[idx], rect=(0,(h-s)/2,w,s), font=('Menlo', s), color='black', alignment=ui.ALIGN_CENTER)
				ui_image = ctx.get_image().with_rendering_mode(ui.RENDERING_MODE_ORIGINAL)
			o.setImage_forSegment_(ui_image.objc_instance,idx)
		else:
			o.setTitle_forSegmentAtIndex_(items[i],i)
t.action = t_action
v.add_subview(t)
v.present('sheet')

[samaklis]

Thanks for the replies. What I was trying to achieve is to blend the background so the segmented control does not look squared. So in your example with the yellow color background those yellow cornered should be black and the segment looks rounded which is what is somehow done when you use the default white background on a view as per code below.

I was under the impression that there was some way by altering the corner radius and that there was a post originally on the forums but unfortunately I could not find it.

import ui
v =ui.View()
v.background_color = 'white'
v.frame = (0,0,400,200)
s = ui.SegmentedControl()
s.segments = ['aaa','bbb']
s.frame = (10,50,380,100)
v.add_subview(s)
v.present('sheet') ```

[samaklis]

Actually changing the corner_radius of the segment control somewhat does the trick.

The below example does what I originally intended. It’s amazing what a cup of coffee and the next day does to the brain! :-)

import ui
v =ui.View()
v.background_color = 'black'
v.frame = (0,0,400,200)
s = ui.SegmentedControl()
s.segments = ['aaa','bbb']
s.background_color = 'white'
s.corner_radius = 5
s.frame = (10,50,380,100)
v.add_subview(s)
v.present('sheet') ```

[cvp]

@samaklis ok, I did not understand correctly your question...