UIPageControl (Paging scrollview with page indicators)

Samer

Hello!

For a project i’m currently working on I needed a UIPageControl view, I thought I would share this here in case anyone else needed it. I apologize for my terrible code style. I am very open to criticism on anything I should change.


import ui
from objc_util import ObjCClass, CGRect, create_objc_class, ObjCInstance, UIColor

UIPageControl = ObjCClass('UIPageControl')


def changePage(_self, _cmd):
    self = ObjCInstance(_self)
    self.page_control.set_page(self.page_control.pageControl.currentPage())


ChangePageClass = create_objc_class("ChangePageClass", methods=[changePage])


class PageControl(ui.View):
    def __init__(self, **kwargs):

        self.scrollView = ui.ScrollView(
            delegate=self,
            paging_enabled=True,
            shows_horizontal_scroll_indicator=False,
            bounces=False,
            frame=self.bounds, flex='WH',
        )

        self.pageControl = UIPageControl.alloc().init().autorelease()
        self._target = ChangePageClass.new().autorelease()
        self._target.page_control = self
        self.pageControl.addTarget_action_forControlEvents_(self._target, 'changePage', 1 << 12)  #1<<12 = 4096
        self.pageControl.numberOfPages = len(self.scrollView.subviews)
        self.pageControl.currentPage = 0
        self.pageControl.hidesForSinglePage = True
    
        self._prev_page = 0

        super().add_subview(self.scrollView)
        ObjCInstance(self).addSubview_(self.pageControl)

        super().__init__(**kwargs)      
    
    def present(self, *args, **kwargs):
        if 'hide_title_bar' in kwargs and kwargs['hide_title_bar']:
                #Temp work around for possible bug.
                background = ui.View(background_color=self.background_color)
                background.present(*args, **kwargs)
                self.frame = background.bounds
                background.add_subview(self)
        else:
            super().present(*args, **kwargs)
    
    def layout(self):
        self.scrollView.content_size = (self.scrollView.width * len(self.scrollView.subviews), 0)
        safe_bottom = self.bounds.max_y - self.objc_instance.safeAreaInsets().bottom
        size = self.pageControl.sizeForNumberOfPages_(self.pageControl.numberOfPages())
        self.pageControl.frame = CGRect(
            (self.bounds.center().x - self.bounds.width / 2, safe_bottom - size.height), 
            (self.bounds.width, size.height))

        for i, v in enumerate(self.scrollView.subviews):
            v.x = i * self.bounds.width

        self.set_page(self.pageControl.currentPage())

    def scrollview_did_scroll(self, scrollView):
        pageNumber = round(self.scrollView.content_offset[0] / (self.scrollView.content_size.width/len(self.scrollView.subviews)+1))
        self.pageControl.currentPage = pageNumber
        self._trigger_delegate()

    def add_subview(self, page):
        self.pageControl.numberOfPages = len(self.scrollView.subviews) + 1
        page.frame = self.scrollView.bounds
        page.flex = 'WH'
        self.scrollView.add_subview(page)
        self.layout()

    def _objc_color(self, color):
        return UIColor.colorWithRed_green_blue_alpha_(*ui.parse_color(color))

    def _py_color(self, objc_color):
        return tuple([c.floatValue() for c in objc_color.arrayFromRGBAComponents()]) if objc_color else None

    def _trigger_delegate(self):
        try:
            callback = self.delegate.page_changed
        except AttributeError: return
        if self.pageControl.currentPage() is not self._prev_page:
            callback(self, self.pageControl.currentPage())
            self._prev_page = self.pageControl.currentPage()

    def set_page(self, page_number):
        if page_number < self.pageControl.numberOfPages() and page_number > -1:
            x = page_number * self.scrollView.width
            self.scrollView.content_offset = (x, 0)
        else:
            raise ValueError("Invalid Page Number. page_number is zero indexing.")

    @property
    def page_count(self):
        return self.pageControl.numberOfPages()

    @property
    def current_page(self):
        return self.pageControl.currentPage()

    @property
    def hide_on_single_page(self):
        return self.pageControl.hidesForSinglePage()
    
    @hide_on_single_page.setter
    def hide_on_single_page(self, val):
        self.pageControl.hidesForSinglePage = val

    @property
    def indicator_tint_color(self):
        """Returns un-selected tint color, returns None as default due to .pageIndicatorTintColor() returning that"""
        return self._py_color(self.pageControl.pageIndicatorTintColor())

    @indicator_tint_color.setter
    def indicator_tint_color(self, val):
        self.pageControl.pageIndicatorTintColor = self._objc_color(val)

    @property
    def indicator_current_color(self):
        """Returns selected tint color, returns None as default due to .currentPageIndicatorTintColor() returning that"""
        return self._py_color(self.pageControl.currentPageIndicatorTintColor())

    @indicator_current_color.setter
    def indicator_current_color(self, val):
        self.pageControl.currentPageIndicatorTintColor = self._objc_color(val)


if __name__ == '__main__':
    
    class SampleDelegate():
        def __init__(self):
            pass
        
        def page_changed(self, sender, page_number):
            """Gets called every time the page changes."""
            print(f'Sender: {sender}, Delegate: {page_number}')


            
    pages = PageControl()

    sv = ui.View()
    sv.background_color = 'red'
    sv1B = ui.Button()
    sv1B.title = "Go To Page 3 (index 2)"
    sv1B.frame = (100,100,200,100)
    
    def btn_action(sender):
        pages.set_page(2)
    sv1B.action = btn_action
    
    sv.add_subview(sv1B)

    sv2 = ui.View()
    sv2.background_color = 'blue'

    sv3 = ui.View()
    sv3.background_color = 'yellow'

    pages.indicator_tint_color = 'brown'
    pages.indicator_current_color = 'black'

    pages.add_subview(sv)
    pages.add_subview(sv2)
    pages.add_subview(sv3)
    
    pages.delegate = SampleDelegate()

    print(pages.indicator_tint_color)
    print(pages.indicator_current_color)
    print(pages.page_count)
    print(pages.current_page)
    print(pages.hide_on_single_page)

    pages.present('fullscreen')

Gist: https://gist.github.com/samerbam/8062c6075283a2c190812ddc925c015a

Changelog:

v0.2:

m.scrollView.add_subview(view) -> m.add_subview(view)
m.tintColor to set un-selected dot colour
m.currentTintColor to set selected dot colour
No longer need to manually set x position on each page
— x and y pos acts as offset from edge of screen (like normal)
Moved some objc class creations out of __init__ (still working on this)
Mirrored to gist

v0.3:

Finished moving objc class creations out of __init__
m.TintColor -> m.tint_color
m.currentTintColor -> m.current_tint_color
m.current_page returns the current page your on
m.page_count returns total amount of pages
Switched from ui.get_screen_size() to using self.bounds
— Should allow for compatibility with more advanced UI’s

v0.4

Fixed bug where tapping on either side of dots to change page would only work on first launch.
m.tint_color -> m.indicator_tint_color
m.current_tint_color -> m.indicator_current_color
Added delegate callback page_changed set delegate to class that includes page_changed(self, page_number)
Added set_page method to change the page programmatically
Added hide_on_single_page attribute (defaults to true) hides dots with only one page.

v0.5

Changed example slightly to include a weirdly placed button.
Added explicit call to self.layout() in add_subview
Removed call to _trigger_delegate from set_page, as set_page triggers scrollview_did_scroll which calls _trigger_delegate

v0.6

Switched from hasattr to try: except AttributeError:
Implemented a work around for a bug involving the view jumping down ~20 pixels. (Really dislike this, however it seems like the best I could do at the moment)
Removed unnecessary attribute pNum
Switched from setting width and height of each subview manually to using flex
Renamed PageControl instance in example to pages from m

stephen

This post is deleted!

stephen

@mikael @Samer

For some reason self.scrollView.y is 20pt too high and it fails to flex H i set frame and flex and issue was corrected. setting y to 19 still drops butbit is hard to see.

self.scrollView = ui.ScrollView(
            delegate=self,
            paging_enabled=True,
            shows_horizontal_scroll_indicator=False,
            bounces=False,
            frame=(0, 20, w, h), flex='h',)

Samer

@mikael huh, thats very strange I get the same effect using your example on my IPad Pro 11” (2018). It seems like initially the view overlaps with the info bar at the top of the screen (time, wifi, battery, etc) and upon touching the screen the view shifts down to not overlap with it. It’s hard to tell in your example due to the black text on black background. However if you set hide_title_bar to true in the built in example a similar effect happens. I will look into a fix in the next day or two.

stephen

@mikael @Samer ill Give a more indepth respone 🤓

this is complete Script with comments and just commenting out changes instead if removing.


import ui
from objc_util import ObjCClass, CGRect, create_objc_class, ObjCInstance, UIColor


UIPageControl = ObjCClass('UIPageControl')


def changePage(_self, _cmd):
    self = ObjCInstance(_self)
    self.page_control.set_page(self.page_control.pageControl.currentPage())


ChangePageClass = create_objc_class("ChangePageClass", methods=[changePage])


class PageControl(ui.View):
    def __init__(self, **kwargs):
        
        

        self.scrollView = ui.ScrollView(
            delegate=self,
            paging_enabled=True,
            shows_horizontal_scroll_indicator=False,
            bounces=False,
            frame=self.bounds,
            flex='WH',
        )

        self.pageControl = UIPageControl.alloc().init().autorelease()
        self._target = ChangePageClass.new().autorelease()
        self._target.page_control = self
        self.pageControl.addTarget_action_forControlEvents_(self._target, 'changePage', 1 << 12)  #1<<12 = 4096
        self.pageControl.numberOfPages = len(self.scrollView.subviews)
        self.pageControl.currentPage = 0
        self.pageControl.hidesForSinglePage = True
    
        self._prev_page = 0

        super().add_subview(self.scrollView)
        ObjCInstance(self).addSubview_(self.pageControl)

        super().__init__(**kwargs)

    def layout(self):
        self.scrollView.content_size = (self.scrollView.width * len(self.scrollView.subviews), 0)
        safe_bottom = self.bounds.max_y - self.objc_instance.safeAreaInsets().bottom
        size = self.pageControl.sizeForNumberOfPages_(self.pageControl.numberOfPages())
        self.pageControl.frame = CGRect(
            (self.bounds.center().x - self.bounds.width / 2, safe_bottom - size.height), 
            (self.bounds.width, size.height))

        for v in self.scrollView.subviews:
            v.width = self.bounds.width
            v.height = self.bounds.height
            v.x = v.pNum * self.bounds.width

        self.set_page(self.pageControl.currentPage())

    def scrollview_did_scroll(self, scrollView):
        pageNumber = round(self.scrollView.content_offset[0] / (self.scrollView.content_size.width/len(self.scrollView.subviews)+1))
        self.pageControl.currentPage = pageNumber
        self._trigger_delegate()

    def add_subview(self, v):
        v.pNum = len(self.scrollView.subviews)
        self.pageControl.numberOfPages = len(self.scrollView.subviews) + 1
        self.scrollView.add_subview(v)
        self.layout()

    def _objc_color(self, color):
        return UIColor.colorWithRed_green_blue_alpha_(*ui.parse_color(color))

    def _py_color(self, objc_color):
        return tuple(
            [c.floatValue()
                for c in objc_color.arrayFromRGBAComponents()]) if objc_color else None

    def _trigger_delegate(self):
        if hasattr(self, 'delegate'):
            if hasattr(self.delegate, 'page_changed'):
                if self.pageControl.currentPage() is not self._prev_page:
                    self.delegate.page_changed(self.pageControl.currentPage())
                    self._prev_page = self.pageControl.currentPage()

    def set_page(self, page_number):
        if page_number < self.pageControl.numberOfPages() and page_number > -1:
            x = page_number * self.scrollView.width
            self.scrollView.content_offset = (x, 0)
        else:
            raise ValueError("Invalid Page Number. page_number is zero indexing.")

    @property
    def page_count(self):
        return self.pageControl.numberOfPages()

    @property
    def current_page(self):
        return self.pageControl.currentPage()

    @property
    def hide_on_single_page(self):
        return self.pageControl.hidesForSinglePage()
    
    @hide_on_single_page.setter
    def hide_on_single_page(self, val):
        self.pageControl.hidesForSinglePage = val

    @property
    def indicator_tint_color(self):
        """Returns un-selected tint color, returns None as default due to .pageIndicatorTintColor() returning that"""
        return self._py_color(self.pageControl.pageIndicatorTintColor())

    @indicator_tint_color.setter
    def indicator_tint_color(self, val):
        self.pageControl.pageIndicatorTintColor = self._objc_color(val)

    @property
    def indicator_current_color(self):
        """Returns selected tint color, returns None as default due to .currentPageIndicatorTintColor() returning that"""
        return self._py_color(self.pageControl.currentPageIndicatorTintColor())

    @indicator_current_color.setter
    def indicator_current_color(self, val):
        self.pageControl.currentPageIndicatorTintColor = self._objc_color(val)

    def update(self):
        print('!')
        
    def present(self, **kwargs): # evaluate input before presenting
        if kwargs['hide_title_bar']:
            self.scrollView.y=20 #if hide_title_bar then adjust scrollView
        super(PageControl, self).present(**kwargs) # Continue..
if __name__ == '__main__':
    
#   class SampleDelegate():
#       def __init__(self):
#           pass
        
#       def page_changed(self, page_number):
#           """Gets called every time the page changes."""
#           print(f'Delegate: {page_number}')


#   def btn_action(sender):
#       m.set_page(2)
            
#   m = PageControl()

#   sv = ui.View()
#   sv.background_color = 'red'
#   sv1B = ui.Button()
#   sv1B.title = "Go To Page 3 (index 2)"
#   sv1B.frame = (100,100,200,100)
#   sv1B.action = btn_action
#   sv.add_subview(sv1B)

#   sv2 = ui.View()
#   sv2.background_color = 'blue'

#   sv3 = ui.View()
#   sv3.background_color = 'yellow'

#   m.indicator_tint_color = 'brown'
#   m.indicator_current_color = 'black'

#   m.add_subview(sv)
#   m.add_subview(sv2)
#   m.add_subview(sv3)
    
#   m.delegate = SampleDelegate()

#   print(m.indicator_tint_color)
#   print(m.indicator_current_color)
#   print(m.page_count)
#   print(m.current_page)
#   print(m.hide_on_single_page)

#   m.present('fullscreen

    image_names = ['test:Boat', 'test:Lenna', 'test:Mandrill', 'test:Peppers']

    pages = PageControl(
        background_color='black',
        indicator_tint_color='grey',
        indicator_current_color='white')
    
    for image_name in image_names:
        pages.add_subview(ui.ImageView(
            image=ui.Image(image_name),
            content_mode=ui.CONTENT_SCALE_ASPECT_FIT))
            
    pages.present(style='fullscreen', 
        hide_title_bar=False
    )

as you can see, just by lowering the scrollView 20pt (i believe tjis is the title bar height), we fix the issue. by placing an override in our PageControl class we check if hide_title_bar and only if True we then lower the y attribute.

I tested and even after changing y the childview's image can still completely cover the screen. this tells myself that somthing behind the scenes is not right. the image should not be able to display above 20 since the parent view is set to 20 for y.

@omz i also noticed that there is an issue if you stack too deep (3 deep in my case) in the UI Builder. App doesnt seem to hold onto the objects data and they disapear when you leave subviews for the given custom View object.

Main View
- sub View
- - sub sub View
- - - datalost...

maybe in this case we might be feling a bit of this with the ImageView we are using?

Obj-c instance
- PageControl
- - ScollView
- - - ImageView

EDIT: what i mean is the imageview might be losing its placement data from creation so it defaults to having a tittle bar, and then when we initiate the event loop we remind it of its placement when delegate for scrolling gets fired..

And ofcourse this is with me asuming two things..

objc instance and python are separate intities
if so then objc takes persistance over the python view.

hopfully this helps get an idea of whats going on and hopfully im not wrong on these. this is just my perspective and im by no means an expert.

mikael

@stephen, probably related to the 20 pt at the top, yes. I would really like to resolve it in a more generic way than putting in a specific check for the hide_title_bar.

Couple of data points regarding your other observations:

ImageViews, by design or accident, do not have their clipsToBounds set. This is why the images do not seem to respect the 20 pt boundary.
I have built many UIs with nesting deeper than 3 layers, and would say probably that is not the cause here.

I suspect there is something around the handling of the safe area that has changed around iOS 11 and has not been really addressed by Pythonista since.

What do you get on iPad if you check the safeAreaInsets for a fullscreen view?

mikael

@stephen, yes, this seems to be a bug or a feature, but not in @Samer’s component.

As a workaround, we can include an additional background view:

background = ui.View(background_color='black')

And then set the PageControl size only after the background has been presented:

background.present('fullscreen', 
    hide_title_bar=True
)

pages.frame = background.bounds
background.add_subview(pages)

No jumping around then.

mikael

@Samer, couple more simplification/maintainability comments, which do not affect functionality.

Forgiveness, not permission

For the delegate calling, the pythonic way is to rely a bit more on the exception mechanism:

try:
    callback = self.delegate.page_changed
except AttributeError: return
if self.pageControl.currentPage() is not self._prev_page:
    callback(self, self.pageControl.currentPage())
    self._prev_page = self.pageControl.currentPage()

This is not in any way inefficient (hasattr relies on catching the same exception), is much more focused on the "good case", and avoids a fair bit of nesting.

Oh, I lied, there is a functionality change there: recommend adding self as the first parameter to the callback. This enables using two or more instances of the component, all tracked with the same delegate, which then gets the information which component was triggered. This is in line how Button actions have a sender, TextView delegates get the textview etc.

Minimize attributes

In add_subview, we add a pNum attribute to the pages. This is unnecessary, as we can change the layout method to simply use the order of subviews:

for i, v in enumerate(self.scrollView.subviews):
    v.x = i * self.bounds.width

This even supports the future option of reorganising the views, without needing to fix the pNum.

Let iOS do the resizing wherever possible

If in add_subview we set the page size and flex:

def add_subview(self, page):
    page.frame = self.scrollView.bounds
    page.flex = 'WH'
    ...

... we do not need to set v.width and v.height explicitly in the layout loop, so it reduces to the simple version above. I imagine native iOS resizing is slightly more efficient as well.

stephen

@mikael

sorry for the delay brotha heres a rundown per call of layout without hardsetting the y to 20

⇨⇨ Results

Samer

I took a few days to think about this bug/feature. I implemented a workaround for it which at the very least hides the problem. I don’t like it, but it works. If anyone has a better solution then overriding the present method, I would be happy to replace my current solution with it.

stephen

@Samer

im sorry i never posted.. you dont need to override present. in your __init__ just add y=20 to your scrollView creation.



class PageControl(ui.View):
    def __init__(self, **kwargs):
        
        
        self.scrollView = ui.ScrollView(
            delegate=self,
            paging_enabled=True,
            shows_horizontal_scroll_indicator=False,
            bounces=False,
            frame=self.bounds,
            flex='WH',
            y=20 # <-- here
        )

just one line , 4 characters 🤓

stephen

i only overrided present cuz i tent to make stuff complicated when im tired lol i apologize

Samer

@stephen There are two problems I encountered with that solution, the first is that when hide_title_bar=True The whole view is shifted down 20px. The second is that on my iPad it still jumps down a few pixels, yet it doesn’t on my iPhone. I wish the solution was that simple however it is unfortunately not.

stephen

@Samer Sorry for the late reply. been working on this one all night.

my post

I still dont have the ideal fix for this.. (meaning without overriding present) but am u got three choices..

ONE:

Hard setting scrollView() like before..



self.scrollView = ui.ScrollView(
        delegate=self,
        paging_enabled=True,
        shows_horizontal_scroll_indicator=False,
        bounces=False,
        frame=self.bounds,
        flex='WH',
        y=20 # ⥢⬅ here
    )

TWO:

Hard set inside SetPage..


def set_page(self, page_number):
        if page_number < self.pageControl.numberOfPages() and page_number > -1:
            x = page_number * self.scrollView.width
            self.scrollView.content_offset = (x, -20) # ⥢⬅ here 
        else:
            raise ValueError("Invalid Page Number. page_number is zero indexing.")

THREE:

Your favorit override..
added an instance variable to it though..


class PageControl(ui.View):
    def __init__(self, **kwargs):
    
        self.titleBarAdjustment=0 # ⥢⬅ here 
        
        ...

    #with this guy..
    def present(self, **kwargs): # evaluate input before presenting
            if kwargs['hide_title_bar']:
                self.scrollView.y=20 #if hide_title_bar then adjust scrollView
            super(PageControl, self).present(**kwargs) # Continue..

the second option needs to know if the bar is present otherwise it just has a revers effect to original image issue.. (jumps up)

im still looking for a beter solution for this. the objc methods were not working last night and im sure it was writers error. but im the mean time at least two of these will hold by maybe?

as for your other issues..

Depending on your phone and tabelets they could be explained.

i suspect that it has todo with Retina scaling and resolution. i have an iPhone 6s and iPad Air 2 and they both have a 2x1 Retina Display so i dont get this issue but id imagine if u has a 2x1 phone and 3x1 ipad it would creat this. all you really need to do if thats the case is check device at runtime and setup Layout accordingly. ui/scene, atleast for 2x1, should auto compensate for this but pil doesnt. just for future info lol.. but by using ui.from_data(data, scale) is where u set scaling for retina convertion. this could help if your dispay happends to be a factor. if i find anything ill let you know!

UIPageControl (Paging scrollview with page indicators) Watch Unwatch browsing

Changelog:

ONE:

TWO:

THREE:

UIPageControl (Paging scrollview with page indicators) browsing