Open Source Fusion: CRPixellatedView & MGSpotyViewController

October 11, 2014

Sometimes I like to experiment with ideas I have, but these ideas are not quite big enough for an open source project, much less a full app. Therefore, I hope to have a series of posts called, Open Source Fusion, where I combine at least 2 open source projects to create something cool, interesting, or weird.

For this Open Source Fusion, I choose to substitute the blurring in MGSpotyViewController with a more pixelated approach, using CRPixellatedView. I will explain more of how I did this, but without further adieu, here is what I made:

cat gif

How It Came About

I enjoy discovering new and trending repositories on Github. So when I come across some repos I like, I star them so that I might use them in my own creations someday. For this, I liked what these two repos did separately, but I thought they might be even better together, like the classic example of peanut butter and chocolate or better yet, bacon and everything else. Regardless, I came across MGSpotyViewController and I liked the effect of the image expanding as the tableview was scrolled down, in addition the blurring effect fading in and out.

MGSpotyViewController

There is similar story for how I came across CRPixellatedView and I just loved the effect.

I had noticed a lot of iOS apps were doing the expanding image with their table view headers and I wondered how I could take it one step further. Therefore, I made my own little project and began fusing these two amazing projects.

The Details

In my implementation, I used the same design pattern as MGSpotyViewController, using a transparent header over a UIImageView that is actually on self.view. It is important for the image to be on self.view because if it was on the tableview header it would get scrolled down somewhat, but we want the y value to stay in place. I then modify the frame in a scrollViewDidScroll delegate method to increase and decrease the size of the image depending on how the tableview is scrolled.

Adding CRPixellatedView was actually pretty simple, I just dropped in the .h and .m into my project and started using them. I made the previously mentioned UIImageView a CRPixellatedView which is a subclass of UIImageView, so it worked great. I then set the animationDuration and pixelScale for when I pixelate the view later.

Roadblock: unfortunately, I do not think there is a way to instantly pixelate a view with the API for CRPixellatedView. Therefore, when scrolling, you will notice the image only pixelates one time whenever you scroll down past a certain point and not in many small increments. The animation starts to get buggy and laggy when you set the animationDuration too small (e.g. 0.1) or try to animate the view too often. It would be nice if the update was instant and I did not have to set an animationDuration, but I worked within these constraints.

In the scrollViewDidScroll method, I kept a boolean value, pulled, so that once I pixelated the view, I would not reverse that pixelation until the tableview was greater than or equal to the starting offset. Once that was implemented, everything started working pretty smoothly.

The Code

I didn’t insert any code snippets because I felt it made the most sense to see my PixelViewController in it’s entirety.

So check my Github gist here: 

Thanks for reading, I look forward to more of these Open Source Fusions!

Tweet submit to reddit

Recent Posts

  • Moving From iOS To Server-Side Swift
  • The Default Memberwise Initializers Headache
  • Types of Swift Error Handling
  • My NSHipster Reader Submission
  • Top 9 Storyboard Mistakes in Xcode