Play around with the pythonista3 ui module
I will write about what I tried to understand the behavior of the ui module that comes with Pythonista 3 on iOS.
At first
What is Pythonista3?
A Python runtime environment, editor, and interprinter that runs on iOS. It's an excellent way to reach the itch, such as the interpolation function and the Console where you can check the contents of variables.
What is a ui module?
This is a standard module included in Pythonista. It's not multifunctional, but it contains the bare essentials.
There is a GUI tool called UI Designer, but I would like to play around with it using only scripts.
The simplest ui drawing
Nothing appears on the screen, but it's a nice (?) UI program
ui01.py
import ui
v = ui.View()
v.present('panel')
When I run it, nothing appears on the screen.
Show Hello World
I'm lonely if nothing is done, so let's display hello World.
ui02.py
import ui
#Hello World
v = ui.View()
l = ui.Label()
l.text = 'Hello World'
v.add_subview(l)
v.present('panel')
How big is the child view?
Add a border to make it easier to understand.
ui03.py
import ui
#Hello World
v = ui.View()
l = ui.Label()
l.text = 'Hello World'
l.border_width = 2
v.add_subview(l)
v.present('panel')
I didn't think it was a square.
Try adding two kids
If it was left as it was, it would be displayed overlapping, so the second one specified the coordinates.
ui04.py
import ui
#Hello World
v = ui.View()
l = ui.Label()
l.text = 'Hello'
l.border_width = 2
v.add_subview(l)
l2 = ui.Label()
l2.text = 'World'
l2.border_width = 2
l2.x = 50
l2.y = 110
v.add_subview(l2)
v.present('panel')
Spread to the whole
Spread it over the entire panel.
Postscript Specifying'WH'for flex did not mean to spread it all over. .. .. More on that later
ui05.py
import ui
#Hello World
v = ui.View()
l = ui.Label()
l.text = 'Hello World'
l.border_width = 2
l.flex = 'WH'
v.add_subview(l)
v.present('panel')
The characters are shifted to the left because the Label alignment is not specified.
Show scrollbar
It feels like you can scroll when the content area (content_size) is larger than the View area. It seems that you are looking at the area of View to expand and contract automatically using flex, so you may need to be careful about how to specify contnt_size.
ui06.py
import ui
label_count = 10
label_height = 100
v = ui.ScrollView()
v.content_size = (100, label_count * label_height)
for i in range(label_count):
l = ui.Label()
l.text = 'TestLabel:' + str(i)
l.y = i * label_height
l.border_width = 2
l.flex = 'W'
v.add_subview(l)
v.present('panel')
Event investigation when creating a custom view
Make and check the timing of redrawing and the frequency of events. If present is panel, touch event may not be taken well, so check with fullscreen. (It seems to be the effect of switching the screen by swiping left and right)
ui07.py
import ui
class MyView(ui.View):
def __init__(self):
l = ui.Label(name='poslabel')
l.background_color = '#dddddd'
l.flex = 'W'
l.height = 50
self.add_subview(l)
l2 = ui.Label(name='loglabel')
l2.background_color = '#ddddff'
l2.flex = 'W'
l2.number_of_lines = 0
l2.y = l.height
l2.height = 600 - l.height
self.add_subview(l2)
self.m_logs = []
pass
def log_msg(self, msg):
self.m_logs.append(msg)
self['loglabel'].text = "\n".join(self.m_logs[-20:])
def log_touch(self, touch):
self['poslabel'].text = str(touch.location)
def did_load(self):
self.log_msg('did_load called.')
def will_close(self):
self.log_msg('will_close called.')
def draw(self):
self.log_msg('draw called.')
def layout(self):
self.log_msg('layout called.')
def touch_began(self, touch):
self.log_msg('touch_began called.' + str(touch.location))
self.log_touch(touch)
def touch_moved(self, touch):
self.log_msg('touch_moved called.' + str(touch.location))
self.log_touch(touch)
def touch_ended(self, touch):
self.log_msg('touch_ended called.' + str(touch.location))
self.log_touch(touch)
v = MyView()
v.present('fullscreen')
Even if ‘WH’ is specified for flex, it does not spread over the entire screen! ??
I completely misunderstood flex. Does flex automatically adjust its size when the parent's size changes? Even when ‘WH’ was specified, it did not match the size of the parent with the intention of changing its own size according to the change in the size of the parent.
In ui06.py, what seemed to spread over the entire screen was that I added a Label with a size of 100x100 to the child with a View with a default size of 100x100, so when the parent size becomes full screen with present, the child also It was only stretched and enlarged.
You can see it by doing the following. If you uncomment the part that substitutes width and height, you'll probably get the behavior most people would have expected.
ui08.py
import ui
v = ui.View()
v.border_color = '#ff0000'
v.border_width = 2
v.background_color = '#999999'
v.present('fullscreen')
l = ui.Label()
l.border_width = 2
l.flex = 'WH'
l.text = 'Label'
#l.width = v.width
#l.height = v.height
v.add_subview(l)
Recommended Posts