ios thoughts from jordan

Download a set of files in parallel or sequential order.

Why i created this

Ever wanted to download a set of images in a parallel or sequential order, like creating a table cell view that resembles Facebook timeline cell that contains multiple images.

If you tried to create such thing, then you realised that some images has to be downloaded before the others, namely the first image in the timeline cell must be downloaded before the second image in this same cell (remember we have multi images inside the same cell)

Introducing the IADownloadManager

MY first approach was to create a parallel download manager, this manager will download any set of unique URLs in a parallel order.

This worked fine now multiple images will be downloaded asynchronously, but raised a new issue, since we have multiple images on the same cell, it may be possible that the 2nd image will be downloaded before the first image, the user will not be able to notice the 2nd image since it will be mostly out of bounds.

Introducing the IASequentialDownloadManager

The second approach was by downloading a set of images in a sequential order, best way to do this i figured was using NSOperationQueue,

So i for each time i wanted to download a NSArray of NSURL, I would create an NSOperationQueue with maxConcurrentOperationCount set to one, each NSURL download operation would be added to this queue.

This would create a sequential download order for the items of the array.

So to sum thins up.

IADownloadManager downloads a set of URLS in a parallel order.

IASequentialDownloadManager downloads a set of URLS in a sequential order.

What it provides

Easy to integrate and use iOS download manager.

Easily download file with the very robust AFNetworking library.

Deal only with NSURL, you will never have to keep strong or weak references of the Download managers.

Download files in sequential and parallel order.

Make sure each file (NSURL) is being downloaded only once.

Have multiple listener/delegates on a single download operation.

Download operation unique by URL, never download a URL twice.

Cache the downloaded file in Memory and on Disk using EGOCache.

Easily add and remove listeners to observe the download operations.

Singleton classes for fast access and minimum memory overhead.

Ensure that the UI Thread is never blocked.

Delegate or Block event callbacks.

All of the above in two lines of code.

Demoes and code.

We all faced times when our UITableView didn't scroll as we wanted to. I gathered bellow a simple yet thorough article about what may causes that.

Why is my scroll slow? When you create custom UITableViewCell and you use a combination of UIViews and UIImages, you may cause UIKit to do extra Offscreen rendering.

What is Offscreen rendering:

Simply put, is to generate images using Software process neglegting any Hardware acceleration boost.

Types of Offscreen rendering:

CPU offscreen, using the CPU to generate images:

Using Core Graphics

Anything inside drawRect

GPU offscreen (Blending), the GPU will have to calculate the final image, adds shadow, clips, etc...:

Layers with shouldRasterize

cornerRadios, masks, shadows, edge antialiasing

Offscreen impact on performance:

Offscreen rendering impacts the performance when its getting done on each frame, in scrolling or animation. but if its done and cached, it may enhance performance.

But hey!

We still need to create custom UITableViewCell, fear not the bellow list shows the ways we can achieve that ordered in performance cost.

Customisation methods ordered by performance:

Use resizable image and normal images

Use a combination of opaque, non-transparent UIViews.

Use Hybrid mode: Use CoreGraphics and code to create stretchable images that you will cache/purge

use CALayer only if you need animation

Worst! Draw using CoreGraphics inside drawRect

Major reasons for slow scroll, And their solutions:

Slow cell creation.

Offscreen creation of cell takes too long: to solve this issue simplify the drawRect.

Too complex drawRect function: Cache any result from drawRect and reuse it.

Too complex view hierarchy: Try to flatten the view hierarchy.

Slow cell movements.

offscreen gets called in each cell: Use hybrid mode from above and cache the images.

too many blending operations: Make views opaque and rasterize the layers.

Tips for fast scrolling:

Recycle cells.

Avoid transparent images, views, make them opaque.

Configure the reused cell must be fast.

Always make most of the views opaque, avoid alpha and clearColor.

Don't place views on fractions of pixels x = 34.5, always use ceil or floor on pixels.

When setting images adjust them (Scale, Clip) after download and before setting them, don't let iOS scales them down.

Scrolling images is faster than views, however the difference is very small if views are opaque.

Use shouldRasterize on layer whenever you can since rasters of the layer will be cached and reused, But remember if you enable shouldRasterize on layers that changes their content or sublayer content frequently you will add cause the performance to drop, since iOS will keep rasterising the layer on each change.

Refs:

http://stackoverflow.com/questions/6731545/when-does-a-view-or-layer-require-offscreen-rendering

http://stackoverflow.com/questions/17593524/using-cornerradius-on-a-uiimageview-in-a-uitableviewcell?lq=1

http://robots.thoughtbot.com/post/33427366406/designing-for-ios-taming-uibutton

http://robots.thoughtbot.com/post/36591648724/designing-for-ios-graphics-performance

http://stackoverflow.com/questions/10563986/uiimage-with-rounded-corners

http://blogs.captechconsulting.com/blog/john-szumski/performance-tuning-older-ios-devices

Apple Developer Improving Drawing Performance

If you are like us then you love tools, you use them every where and you just love to get better and better with them.

Wether they are collaborative tools, or just plain IDEs, we use them every day. bellow i will enlist the tools i normally use and the environment i work with.

Environment and Computers:

Main Computer: Mac OS X 10.8.2 

Server Machine: Linux  Ubuntu 12.10

The IDEs used:

Main development IDE: Xcode v4.5.2 (It should be 4.6 but am too lazy to download it) I use xcode for Objective c mainly.

Secondary IDE: Textmate v1.5.11 For all other programing languages i just use this.

Optional Sublime Text 3: i am currently moving to sublime text 3, am getting to like it more and more.

Analytics tools:

Google Analytics: for any day to day analytics needs

Flurry analytics: for tracking conversions and also as a substitute to google analytics, i still didnt decide wich one of the two is better.

Crashlytics: for tracking crashes, i just love this tool, it sends me crashes real time.

Testflight SDK: also as a substitute to crashlytics, i used to use it in the past, but after discovering crashlytics i will remove this from my tools.

Collaborative tools and websites:

Git (SCM): no need to say any other words <3.

Gitolite: for managing git server on Ubuntu server machine.

Gitweb: for managing git repositories on the server machine.

Trello: managing tasks, todos with a team.

Seafile: Locally managed open source Dropbox. using this helped us in minimizing the time needed to distribute files, it makes distributing files between mac, linux and windows a fun experience.

Redmine: for issue tracking and wiki management.

wikiwikka: also for wiki managament.

Software - Mac:

SourceTree: i used to like CornerStone for SVN but after using SourceTree i feel in love with it. and its also FREE!

Mail App: mail client cant get better that this. and it comes pre installed also.

Pages: after using this i realized how much MS Word sucks!

MAMP Pro: php apache mysql cant get easier than this.

Charles: web proxy debugger that you will fall in love with.

Application distribution platforms:

TestFlightApp.com: distribution made easy and fast.

Todo lists and Bookmark helpers:

Dragdis.com: managing bookmarks on google chrome

Wunderlist: todo list for tracking ideas and simple tasks

Pocket: managing the reading list

Graphical aid tools:

ShipIt: Converting retina icons to standard icons, with this tool we eliminated the need to have the both retina and normal icons

xScope: no other tool can do what this tool does, it calculates sizes, takes screenshots and help fetch colors from images.

Isn't it annoying to manage both the retina and standard icons in your iOS application?

Having the designer slice both the sizes is quite annoying for both of you. and dealing with icons that have a slight not intentional difference between the retina and standard versions is time consuming.

Sometimes you build the app for the iPhone 4 and everything looks great, then you build the same version for iPhone 3GS  and some icons and images dont quite look right.

Well if you ever felt that this kind of work should be automated, then you were right. with a help of a couple of tools all of these annoying tasks will be done automatically.

The issues that i will discuss:

Dealing with retina and standard versions.

Getting the color and sizes from a designer wireframe or prototype.

After a lot of trials and errors regarding the points above i have created a subsystem of tools and scripts that does this work for me, i will share them with you and try to explain why they are so awesome.

In this part i will talk about the first point.

Dealing with retina and standard versions

If you ever created a mobile app then you have dealt with standard and retina images, but you dont have to do that anymore you can easily have a script or tool that batch converts all the retina icons and scales them back to standard. what you will need is only the retina version of the images from the designers.

You can use one of these two solutions:

Add a custom script to xcode, this is the most elegant solution, the creation of the standard images will be done automatically, check the answer here (http://stackoverflow.com/questions/8087997/automatic-resizing-for-non-retina-image-versions)

Use a standalone application. there are a lot of applications to use, some of them are free and some paid.

               Resource helper (paid)                Resizer (free)                Ship it (paid)

I use Resource helper since it has a lot of amazing features that helps creating mobile apps, like icons and screenshot resizing, artwork generating and other features.

There are other solutions, like using Mac automator and Photoshop (check video about using photoshop)

Here is a simple UX to approval process that i summarised after reading this article, i hope i got it right.

Collecting information about the problem(Done by the UX): Why, What, When, Where, How, and Who.

Getting ready to design(Done by the UX): Using Lo-Fi (paper and whiteboard) or Hi-Fi (tools or software) methods to create a Wireframe. Then presenting the wire frames to stakeholders and product owners.

Design (Done by the UI or visual designer):  Refine the wire frames, design the interaction. and move it to the UI Visual designer. The UI Visual Designers create the Mockup.

Optional prototyping (Done By UI and Developers): Create a prototype to show to thestakeholdersandproduct owners.

Approval: Get the approval from the stakeholders and product owners on the Mockup or Wireframe (or the Prototype).

Thats is the simple crude process that was stated (or at least what i grasped of) from the article above.

I would love to read your ideas about this article, any feedback will be much appreciated.

More info:

http://uxdesign.smashingmagazine.com/2012/08/29/beyond-wireframing-real-life-ux-design-process/ 

Bellow is a summerization of apple HIG. I will divide HIG to multiple parts. Following is part 1.

Display Size

Regardless of the iOS device, the following observation apply:

44 X 44 points is the minimum acceptable size for a tappable area.

People are aware of the quality of the app.

app screen should be focused on content.

Difference between pixels and points

Pixel are used when designing the icon on an image application.

Points are related to the representation of views and icons on the iOS device

Notes

1 Point = 1 Pixel (non retina device) 1 Point = 2 Pixel (retina device)

Devices Sizes (in Points)

DeviceResolutioniPhone 3G/3GS320 X 480 pointsiPhone 4/4S, iPod 4th320 X 480 pointsiPhone 5, iPod 5th320 X 568 pointsiPad 1/21024 X 768 pointsiPad 3/41024 X 768 pointsiPad mini1024 X 768 points

Devices Sizes (in Pixels)

DeviceResolutioniPhone 3G/3GS320 X 480 pixelsiPhone 4/4S, iPod 4th640 X 960 pixelsiPhone 5, iPod 5th640 X 1136 pixelsiPad 1/21024 X 768 pixelsiPad 3/42048 X 1572 pixelsiPad mini1024 X 768 pixels

iOS devices and orientations

Launching an app on the iPad and the iPhone responds differently.

on iPhone app launch as Portrait by default

on the iPad apps launch as the current orientation of the device.

Preferences and settings

There is a difference between prefferences and settings.

Preferences are kept inside the application itself.

settings are kept inside the settings app.

Functional differences:

Preferences deals with user settings, such as accounts, notifications etc… (common).

settings deals with app general and global settings (rare to be used).

App help should be minimal

Reasons:

Tendency from users to disregard help

Tendency from users to dislike help

So after posting my simple pseudo code for flow view, i came up with a pretty easy implementation for the flow view.

I also implemented a simple text flow, you add labels with text and it will space them evenly and divide them to rows.

How does this work

First: You specify the itemHeight for all the itmes that you want to add to the flowview.

self.flowView.itemHeight = 20;

Second: Create the any subclass of UIView and add it to the flow view You dont specify the frame of this view, since the flow view will calculate the frame at runtime. You will only need to specify the width of the added view

UIView *viewToAdd = [[UIView alloc] init]; 

viewToAdd.backgroundColor = [UIColor redColor]; 

viewToAdd.tag = 0; 

[self.flowView addItem:viewToAdd withWidth:220];

Thats it, now the views will be added to the flow view.

Third (Optional): You can set the delegate of the flow view to recieve touch event on the added views.

self.flowView.delegate = self;

The delegete function will be called when views are tapped

- (void)flowView:(IAFlowView *)flowView didPressView:(UIView *)view 

{ }

So my basic idea of flow view implementation would be like this

<![CDATA[// <![CDATA[ // ]]]]><![CDATA[>]]>

The check if fits  pseudo is like so