ViewPager¶

from enamlnative.core.api import *
from enamlnative.widgets.api import *


enamldef Navigation(Toolbar): toolbar:
    #: An "iOS" like navigation where the text scrolls out when the pages change
    background_color = "#CCC"
    attr text_color = "#039be5"
    height = 140
    content_padding = (4,4,4,4)
    attr pager
    Flexbox:
        width = 'match_parent'
        justify_content = "space_between"
        align_items = "center"
        IconButton:
            enabled << pager.current_index>0
            background_color << toolbar.background_color
            text << "{md-arrow-back}" if self.enabled else ""
            text_size = 32
            text_color << toolbar.text_color
            flat = True
            clicked :: pager.current_index -= 1
        ViewPager:
            current_index := pager.current_index
            paging_enabled = False
            Looper:
                iterable = pager.pages
                PagerFragment:
                    Flexbox:
                        justify_content = "center"
                        align_items = "center"
                        TextView:
                            text = loop_item.title
                            #text_color << toolbar.text_color
                            text_size = 18
                            font_family = 'sans-serif-medium'
        IconButton:
            enabled << pager.current_index<len(pager.pages)-1
            text << "{md-arrow-forward}" if self.enabled else ""
            background_color << toolbar.background_color
            text_size = 32
            text_color << toolbar.text_color
            flat = True
            clicked :: pager.current_index += 1

enamldef BottomNav(Toolbar): view:
    attr pager
    background_color = "#ccc"
    height = 140
    attr active_color = "#039be5"
    Flexbox:
        width = 'match_parent'
        justify_content = "space_between"
        align_items = "center"
        Looper:
            iterable << pager.pages
            IconButton:
                text = loop_item.icon
                text_color << view.active_color if pager.current_index == loop_index else "#777"
                text_size = 32
                flat = True
                clicked :: pager.current_index = loop_index

enamldef ContentView(Flexbox): view:
    flex_direction = "column"
    Navigation:
        pager << screens
    ViewPager: screens:
        paging_enabled = True
        transition = "fg_to_bg"
        PagerFragment:
            title = "Home"
            icon = "{md-home}"
            Flexbox:
                background_color = "#cab"
                flex_direction = "column"
                Spinner:
                    items = list(ViewPager.transition.items)
                    selected << self.items.index(screens.transition)
                    selected :: screens.transition = self.items[self.selected]
                TextView:
                    text = "Python powered native apps!"
        PagerFragment:
            title = "Pictures"
            icon = "{md-photo}"
            Flexbox:
                background_color = "#abc"
                flex_direction = "column"
                TextView:
                    text = "Content goes here!"
        PagerFragment:
            title = "Settings"
            icon = "{md-settings}"
            Flexbox:
                background_color = "#bac"
                flex_direction = "column"
                TextView:
                    text = "A multi screen app in < 20 lines? Yep!"
    BottomNav:
        pager << screens