Defeat ui.View.flex in Pythonista3

I couldn't fully understand the behavior of pythonista3, so I tried various flex attributes of ui.View to deepen my understanding.

Try the movement first

Dragging the four corners of the screen changes the size, so you can visually check the changes in each movement.

ui_flex01.py


import ui

class ResizableView(ui.View):
	
	STA_IDLE = 1  #Wait
	STA_MOVE_LT = 2  #Move to the upper left
	STA_MOVE_LB = 3  #Move to the lower left
	STA_MOVE_RT = 4  #Move to the upper right
	STA_MOVE_RB = 5
	STA_MOVE = 6
	
	
	def __init__(self):
		self.m_state = self.STA_IDLE
		
	def touch_began(self, touch):
		l = self.width * 0.1
		r = self.width * 0.9
		t = self.height * 0.1
		b = self.height * 0.9
		
		self.m_state = self.STA_IDLE
		
		if touch.location.x < l:
			if touch.location.y < t:
				self.m_state = self.STA_MOVE_LT
			if touch.location.y >= b:
				self.m_state = self.STA_MOVE_LB
		if touch.location.x >= r:
			if touch.location.y < t:
				self.m_state = self.STA_MOVE_RT
			if touch.location.y >= b:
				self.m_state = self.STA_MOVE_RB
		
		if self.m_state == self.STA_IDLE:
			self.m_state = self.STA_MOVE
		
		
	def touch_moved(self, touch):
		s = self.m_state
		vx = touch.location.x - touch.prev_location.x
		vy = touch.location.y - touch.prev_location.y
		
		if s == self.STA_IDLE:
			pass
		elif s == self.STA_MOVE_LT:
			self.x += vx
			self.y += vy
			self.width -= vx
			self.height -= vy
		elif s == self.STA_MOVE_RT:
			self.width += vx
			self.y += vy
			self.height -= vy
		elif s == self.STA_MOVE_LB:
			self.x += vx
			self.width -= vx
			self.height += vy
		elif s == self.STA_MOVE_RB:
			self.width += vx
			self.height += vy
		elif s == self.STA_MOVE:
			self.x += vx
			self.y += vy
		
	def touch_ended(self, touch):
		self.m_state = self.STA_IDLE

datas = (
	('RB',0,0,30,30),
	('LB',270,0,30,30),
	('RT',0,370,30,30),
	('LT',270,370,30,30),
	('W',50,40,200,50),
	('H',50,100,50,250),
	('R',100,100,100,50),
	('L',100,100,100,50),
	('LR',100,100,100,50),
	('RW',100,160,100,50),
	('LW',100,220,100,50),
	('RTW',110,300,50,50),
	('LTH',200,300,50,50),
	('',150,220,100,50),
	('RW',100,280,30,50),
	('RW',150,280,30,50),
	('RW',200,280,30,50),
	('RLW',100,340,30,50),
	('RLW',150,340,30,50),
	('RLW',200,340,30,50),

)

p = ui.View()
v = ResizableView()
v.width = 300
v.height = 400
v.background_color = '#808080'
p.add_subview(v)

for d in datas:
	l = ui.Label()
	l.border_width = 2
	l.alignment = ui.ALIGN_CENTER
	l.text = l.flex = d[0]
	l.frame = (d[1],d[2],d[3],d[4])
	v.add_subview(l)


p.present('fullscreen')
v.width = p.width
v.height = p.height
8874C09C-4259-42BE-8D37-BF99880219CE.png

Flex features

You can set flex to automatically change your position (x, y) and width (width, height) as the parent View resizes.

The characters R, B, L, T, W, and H can be specified, and multiple combinations can be specified.

Default ‘’, ‘R’, ‘RB’

If you specify an empty string for flex, x, y, width, and height are not affected by resizing the parent View. This is the same behavior as when ‘R’ or ‘RB’ is specified.

Adsorbed to the right end ‘L’

Specifying ‘L’ for flex gives a flexible left margine. Translated literally, the left margin changes flexibly. If you translate it freely, it will stick to the right edge of the parent View.

This means that this View will remain to the right when the size of the parent View changes.

Adsorbed to each end ‘R’, ‘B’, ‘T’

Like ‘L’

‘R’ is attached to the left edge of the parent View ‘B’ is attached to the top of the parent View. (Default behavior) ‘T’ sticks to the bottom edge of the parent View

It will be.

Personally, the meaning of LRBT is the exact opposite, but am I the only one who thinks so?

Follow the size ‘W’, ‘H’

If you specify ‘W’, the width will change according to the size change of the parent. If you specify ‘H’, the height will change according to the size change of the parent.

Maintain relative position on parent view ‘RL’, ‘BT’

I want to arrange multiple buttons at equal intervals even if the size of the parent changes. I will use it at that time. In most cases, it is necessary to change the size as well, so I think that ‘RLW’ and ‘BTH’ are often used in addition to WH.

Recommended Posts

Defeat ui.View.flex in Pythonista3
Redo Python in Pythonista3 (1) --appex
3D drawing with SceneKit in Pythonista
Randomly display playing cards in Pythonista + scene
How to implement Scroll View in pythonista 1