Is there a Template for IOS App with Header, Footer and Content areas (views)

jgrincho

First I am a newbie to Python and Pythonista. Second I have been looking at some code and I am trying to learn by using and doing.

The below code is mainly from a post somewhere with some modifications to try and adapt it to what I want:

# Learning Alignment Options In UI
# Pythonista
# Flex LRTBWH

import ui

def make_label(name, texto, frame):
    return ui.Label(
        alignment=1,
        bg_color='lightgray',
        border_color='gray',
        border_width=1,
        frame=frame,
        flex=name,
        name=name,
        text=texto)

def make_footer(name, texto, frame):
    return ui.Label(
        alignment=1,
        bg_color='white',
        border_color='lightgray',
        border_width=1,
        frame=frame,
        flex=name,
        name=name,
        text=texto)

def passit():
    pass

w, h = ui.get_screen_size()
# h -= 64 # maybe to take away top of the screen which is not counted
bh = bw = 60  # label height and button width
mg = 10  # margin
fw = w - (mg + mg) # footer width
fh = 60 # footer height

# header and screen wrapper - apparently combined
view = ui.View(name='Demo X', bg_color='white', frame=(0, 0, w, h))
mbtn_1 = ui.ButtonItem(title='➕ ', action=passit(), tint_color='red')
mbtn_2 = ui.ButtonItem(title=' 👫 ', action=passit())
mbtn_3 = ui.ButtonItem(title=' 👤', action=passit())
view.right_button_items = (mbtn_3, mbtn_2, mbtn_1)

# some elements in the content area - shouldn't I have a dedicated view for it?
view.add_subview(make_label(name='RB', texto='TL', frame=(mg, mg, bw, bh)))
view.add_subview(make_label(name='LB', texto='TR', frame=(w - (bw + mg), mg, bw, bh)))
view.add_subview(make_label(name='RT', texto='BL', frame=(mg, h - (fh + bh + mg), bw, bh)))
view.add_subview(make_label(name='LT', texto='BR', frame=(w - (bw + mg), h - (fh + bh + mg), bw, bh))) # fh space for footer
view.add_subview(make_label(name='LRTB', texto='CNTR', frame=((w - bw) * .5, (h - (bh + fh)) * .5, bw, bh)))

# footer - what is this LRTB?
view.add_subview(make_footer(name='LRTB', texto=' 🏠 ️', frame=((w - (fw)) * .5, (h - (fh)), fw, fh))) # fh space for footer

view.present()

Despite displaying close to what I want this is not the way to do it. I am also getting puzzled by the flex LRTBWH and the correct way to use it.

In my view one should set a view for the whole screen (h, w), one for the header which appears to be part of the screen, one for the content and one for the footer.

Could anyone help or provide some hints or eventually point to a template?

jgrincho

@jgrincho said in Is there a Template for IOS App with Header, Footer and Content areas (views):

Flex LRTBWH

The first source of inspiration:

https://github.com/tdamdouni/Pythonista/blob/master/_2017/ui-tutorial-beginner.py

... there is an update to it somewhere

JonB

@jgrincho flex is really only used when resizing a view, such as when rotating the screen.

If you are trying to use it to place components, you might want to look at @mikael 's https://github.com/mikaelho/pythonista-anchor repo.

Flex stuff in pythonista is tricky because it doesn't have all the features of the iOS layout frameworks. To do anything complex requires multiple layers of views.

In short though, when you set x,y,w and h, you define those in absolute pixels. But if you set flex, you are saying that you wanted the relative relationship between the view and it's parent.

Flex containing W or H allows the width or height to flex, staying proportional to the parent. If Flex has L, it means the left is flexible, and it stays anchored to the right side. R is opposite. LR would make both left and right flexible, so if a view is centered it will stay centered. Like lwise with T and B. So LRTB would be a fixed size that stays centered if you centered it.

JonB

probably what you want is a view with three subviews: header, content and footer. Maybe fixed height, but flex width. So header would be LRWB (so it is fixed height, and top doesn't flex), content is LRWHTB. Footer would be LRWT

Then the buttons etc inside those views can be flex or fixed however you like, but it sometimes makes things easier to have

jgrincho

@JonB Many thanks for your help. I will only use content and footer - the upper space on the iPhone will do for the "header" by placing some buttons there.

I will now try and look at the provided link to see if I can get something presentable.

Flex is indeed tricky for a novice!

jgrincho

@JonB And the anchors-demo is a must... it provides of doing what I want and more... many thanks. Many thanks also to @mikael 's https://github.com/mikaelho/pythonista-anchor