Welcome!
This is the community forum for my apps Pythonista and Editorial.
For individual support questions, you can also send an email. If you have a very short question or just want to say hello — I'm @olemoritz on Twitter.
Pythonista View (question)
-
SCREEN = ui.get_screen_size() if min(SCREEN) >= 768: # iPad WIDTH = '' for i in SCREEN: if not WIDTH: WIDTH = i else: HEIGHT = i else: # iPhone WIDTH = '' for i in SCREEN: if not WIDTH: WIDTH = i else: HEIGHT =
Could be written simply as
WIDTH, HEIGHT = ui.get_screen_size()
. Python let's you split up tuples easily that wayThere are some methods using
flex
to create one size view that will resize automatically, but it can be hard to get right, plus you still have to manually set font sizes, etc.@mikael has some code for writing better constraints, which can make it easier to write views that adapt to screen sizes. His grid view class also makes it easy to build very simple ui's..
-
i will have a look at this
ty
-
@DavinE, the more recent and better version of UI constraints is here.
But even without going there, as @JonB said, you can get quite a lot done with just a GridView, which is now bundled with uiutils (pip install pythonista-uiutils).
The following short example demostrates 3 things that may be of interest if you are trying to create flexible UIs targeting both iPads and iPhones, and want your UI to survive someone rotating the device:
- Define an area to fill a percentage of the screen (plain ui flex).
- Avoid the controls at the edges of phone displays by using the SafeAreaView.
- Use GridView to layout views (buttons) automatically.
import ui from uiutils.safearea import SafeAreaView from uiutils.gridview import GridView def create_button_slot(title): slot = ui.View( background_color='darkgrey', ) btn = ui.Button( title=title, background_color='white', tint_color='black', flex='TWB' ) btn.size_to_fit() btn.height = btn.height + 16 btn.width = slot.width btn.corner_radius = btn.height/2 btn.center = slot.bounds.center() slot.add_subview(btn) return slot root = SafeAreaView( background_color='lightgrey' ) button_area_percentage = 23 button_area = GridView( pack=GridView.FILL, background_color='grey', frame=(0, 100-button_area_percentage, 100, button_area_percentage), flex='TWH', ) root.add_subview(button_area) for i in range(6): button_area.add_subview(create_button_slot(f'Button {i+1}')) root.present("fullscreen", animated=False)
-
@mikael thanks for the example
next week i will try this to get it :D
-
@mikael said:
@DavinE, the more recent and better version of UI constraints is here.
But even without going there, as @JonB said, you can get quite a lot done with just a GridView, which is now bundled with uiutils (pip install pythonista-uiutils).
The following short example demostrates 3 things that may be of interest if you are trying to create flexible UIs targeting both iPads and iPhones, and want your UI to survive someone rotating the device:
- Define an area to fill a percentage of the screen (plain ui flex).
- Avoid the controls at the edges of phone displays by using the SafeAreaView.
- Use GridView to layout views (buttons) automatically.
import ui from uiutils.safearea import SafeAreaView from uiutils.gridview import GridView def create_button_slot(title): slot = ui.View( background_color='darkgrey', ) btn = ui.Button( title=title, background_color='white', tint_color='black', flex='TWB' ) btn.size_to_fit() btn.height = btn.height + 16 btn.width = slot.width btn.corner_radius = btn.height/2 btn.center = slot.bounds.center() slot.add_subview(btn) return slot root = SafeAreaView( background_color='lightgrey' ) button_area_percentage = 23 button_area = GridView( pack=GridView.FILL, background_color='grey', frame=(0, 100-button_area_percentage, 100, button_area_percentage), flex='TWH', ) root.add_subview(button_area) for i in range(6): button_area.add_subview(create_button_slot(f'Button {i+1}')) root.present("fullscreen", animated=False)
i have a Problem with the UI constraints..
i Installed anchors but i get the message that the Module named 'anchor' is not found...EDIT: i found the solution:
observer.py
this code is wrong:import anchor.objc_plus as objc_plus
this is right:
import anchors.objc_plus as objc_plus```
-
@DavinE, thanks! I pushed an update to PyPI.
-
This post is deleted! -
@mikael no Problem ;)
i Have an Question about the UI constraints..
When i use Buttons with corner radius = 50 my text is cutted.....
i tried to fix this with the Width... but it didn't worked..... -
you could probably change horizontal alignment to center. i think the right way to do it would be to adjust the
contentEdgeInsets
objc attribute of the underlying uibutton, to allow at least the edge radius amount of inset in left and right sides (or maybe edge radius divided by sqrt(2) on all 4 sides).
-
@JonB thanks for the fast reply but i understand nothing.. :(
do you have an example for me where i can see what your mean ?
an other Thing what i don't understand is when i use for example the dock element top_center at 2 Buttons its overlapping
how can i fix this.....
thanks for your help!
-
@DavinE, can you share a small example of your problem case?
-
i think this shows the problem, and a potential solution:
import ui from objc_util import * v=ui.View(bg_color='white') b=ui.Button(title='press to resize with insets') b.border_width=1 b.corner_radius=50 @on_main_thread def a(sender): sender.objc_instance.button().contentEdgeInsets=(0, 50,0, 50) #t,l,b,r sender.size_to_fit() b.action=a v.add_subview(b) v.present()
The height changes when using this method, so i assume that those edgeinsets are overriding some other sort of anchor or layout constraint that i don't get.
-
@JonB, sorry to be thick, but I still do not understand what the problem is or what the insets are for. In the example above I used corner radius to create buttons with rounded ends, but this must be about something else.
-
@DavinE, if you use dock top_center on two buttons, their top centers will be placed in the same place and they will overlap.
If you want them one above the other, you can still dock both top_center, and then adjust the second view as follows:
at(second).top = at(first).bottom
-
i'll Show you tomorrow or on the Weekend my Examples for my two Problems
-
@mikael said:
@DavinE, if you use dock top_center on two buttons, their centers will be placed in the same place and they will overlap.
If you want them one above the other, you can dock both top_center, and then adjust the second view as follows:
at(second).top = at(first).bottom
Yes Thats My issue...
They will overlap....I will have a Look at this in the Weekend.
Short and stupid Question:
First second are my two Buttons ??Thanks a looooot for the great help here!!
-
-
@JonB said:
i think this shows the problem, and a potential solution:
import ui from objc_util import * v=ui.View(bg_color='white') b=ui.Button(title='press to resize with insets') b.border_width=1 b.corner_radius=50 @on_main_thread def a(sender): sender.objc_instance.button().contentEdgeInsets=(0, 50,0, 50) #t,l,b,r sender.size_to_fit() b.action=a v.add_subview(b) v.present()
The height changes when using this method, so i assume that those edgeinsets are overriding some other sort of anchor or layout constraint that i don't get.
thats a good example...
but is it Possible to set the size at begin ?
not over an action....is this example okay to do this so ?:
import ui from objc_util import * v=ui.View(bg_color='white') b=ui.Button(title='press to resize with insets') b.border_width=5 b.corner_radius=50 b.objc_instance.button().contentEdgeInsets=(5, 50,5, 50) b.size_to_fit() v.add_subview(b) v.present()
-
-
@mikael said:
@JonB, sorry to be thick, but I still do not understand what the problem is or what the insets are for. In the example above I used corner radius to create buttons with rounded ends, but this must be about something else.
My Problem is when i use border_width and border_radius my text is cutted by the Button...
@JonB understand my Problem correctly