<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Emmer Inc &#187; Facebook</title>
	<atom:link href="http://blog.emmerinc.be/index.php/tag/facebook/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.emmerinc.be</link>
	<description>Tales from a .NET developer who's making the jump to the iPhone &#38; App Store wonderland.</description>
	<lastBuildDate>Mon, 06 Sep 2010 19:43:52 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Facebook like loading indicator</title>
		<link>http://blog.emmerinc.be/index.php/2009/04/25/facebook-like-loading-indicator/</link>
		<comments>http://blog.emmerinc.be/index.php/2009/04/25/facebook-like-loading-indicator/#comments</comments>
		<pubDate>Sat, 25 Apr 2009 10:54:55 +0000</pubDate>
		<dc:creator>Yannick Compernol</dc:creator>
				<category><![CDATA[Cocoa Touch]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[threading]]></category>
		<category><![CDATA[UIActivityIndicator]]></category>

		<guid isPermaLink="false">http://blog.emmerinc.be/?p=219</guid>
		<description><![CDATA[When performing an action that may take some time, it&#8217;s advised to show something to signal that the operation is being performed &#38; the application is not crashing. Here&#8217;s an example on how to accomplish a loading indicator as used in the iPhone Facebook application.

First we&#8217;ll create the actual loading view, let&#8217;s add an empty [...]]]></description>
			<content:encoded><![CDATA[<p>When performing an action that may take some time, it&#8217;s advised to show something to signal that the operation is being performed &amp; the application is not crashing. Here&#8217;s an example on how to accomplish a loading indicator as used in the iPhone Facebook application.</p>
<p><img class="alignright size-full wp-image-330" title="Loading View" src="http://blog.emmerinc.be/wp-content/uploads/2009/03/loadingview.png" alt="Loading View" width="190" height="102" /></p>
<p>First we&#8217;ll create the actual loading view, let&#8217;s add an empty XIB to our Xcode project called LoadingView. Add a UIView to the nib and drag a UIImageView onto it. Use a vector program like <a title="Inkscape" href="http://www.inkscape.org/">Inkscape</a> to create a black rectangle with rounded corners. Use a UILabel and a UIActivityIndicator to create something like the screenshot to the right. Be sure to check the animating property of the activity indicator and change the alpha of the root view to 0.8 for intance, since we want the view to be slightly transparant.</p>
<p>Once we&#8217;ve made the actual view, it&#8217;s time to show it.</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span>UIView<span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span>newLoadingView <span style="color: #002200;">&#123;</span>
   <span style="color: #400080;">NSArray</span> <span style="color: #002200;">*</span>nib <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span><span style="color: #400080;">NSBundle</span> mainBundle<span style="color: #002200;">&#93;</span> loadNibNamed<span style="color: #002200;">:</span><span style="color: #bf1d1a;">@</span><span style="color: #bf1d1a;">&quot;LoadingView&quot;</span> owner<span style="color: #002200;">:</span>self options<span style="color: #002200;">:</span><span style="color: #a61390;">nil</span><span style="color: #002200;">&#93;</span>;
&nbsp;
   <span style="color: #400080;">NSEnumerator</span> <span style="color: #002200;">*</span>enumerator <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span>nib objectEnumerator<span style="color: #002200;">&#93;</span>;
   <span style="color: #a61390;">id</span> object;
&nbsp;
   <span style="color: #a61390;">while</span> <span style="color: #002200;">&#40;</span><span style="color: #002200;">&#40;</span>object <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span>enumerator nextObject<span style="color: #002200;">&#93;</span><span style="color: #002200;">&#41;</span><span style="color: #002200;">&#41;</span> <span style="color: #002200;">&#123;</span>
      <span style="color: #a61390;">if</span> <span style="color: #002200;">&#40;</span><span style="color: #002200;">&#91;</span>object isMemberOfClass<span style="color: #002200;">:</span><span style="color: #002200;">&#91;</span>UIView class<span style="color: #002200;">&#93;</span><span style="color: #002200;">&#93;</span><span style="color: #002200;">&#41;</span> <span style="color: #002200;">&#123;</span>
         <span style="color: #a61390;">return</span> object;
      <span style="color: #002200;">&#125;</span>
   <span style="color: #002200;">&#125;</span>
&nbsp;
   <span style="color: #a61390;">return</span> <span style="color: #a61390;">nil</span>;
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span>doWork <span style="color: #002200;">&#123;</span>
   <span style="color: #400080;">NSAutoreleasePool</span> <span style="color: #002200;">*</span>pool <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span><span style="color: #400080;">NSAutoreleasePool</span> alloc<span style="color: #002200;">&#93;</span> init<span style="color: #002200;">&#93;</span>;
&nbsp;
   <span style="color: #11740a; font-style: italic;">// Add lenghty operation.</span>
&nbsp;
   <span style="color: #002200;">&#91;</span>loadingView removeFromSuperview<span style="color: #002200;">&#93;</span>;
   <span style="color: #002200;">&#91;</span>pool release<span style="color: #002200;">&#93;</span>;
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span>someMethod <span style="color: #002200;">&#123;</span>
   loadingView <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span>self newLoadingView<span style="color: #002200;">&#93;</span>;
   loadingView.center <span style="color: #002200;">=</span> CGPointMake<span style="color: #002200;">&#40;</span><span style="color: #2400d9;">160</span>, <span style="color: #2400d9;">350</span><span style="color: #002200;">&#41;</span>;
   <span style="color: #002200;">&#91;</span>self.view addSubview<span style="color: #002200;">:</span>loadingView<span style="color: #002200;">&#93;</span>;
&nbsp;
   <span style="color: #002200;">&#91;</span><span style="color: #400080;">NSThread</span> detachNewThreadSelector<span style="color: #002200;">:</span><span style="color: #a61390;">@selector</span><span style="color: #002200;">&#40;</span>doWork<span style="color: #002200;">&#41;</span> toTarget<span style="color: #002200;">:</span>self withObject<span style="color: #002200;">:</span><span style="color: #a61390;">nil</span> <span style="color: #002200;">&#93;</span>;
<span style="color: #002200;">&#125;</span></pre></div></div>

<p>We&#8217;re using the newLoadingView: method to retrieve the view from the nib, the reason we&#8217;re looping through the contents of the nib is one cannot garantee the order in which items are retrieved will always be the same. For instance the index of the loading view will be different in firmware version 2.0 and 2.1. We retrieve a UIView item, in this case the loading view, since it&#8217;s the only UIView in the nib. I&#8217;m sure this code could be improved though, using your own derived UIView and checking for this derived class would be better. The center property of the loading view can be used to position the view, the top left corner has coordinates 0,0. (If anyone has a better method of getting a specific view from a nib, do tell)</p>
<p>The someMethod method is the one to call to start everything, this method will show the actual loading view and start the doWork method on a seperate thread. The reason we&#8217;re using a seperate thread is not to lock up the interface, otherwise the interface would freeze while the lenghty operation would be performed. The doWork method hides the loading view once everything is done.</p>
<p><strong>Extension:</strong> The above code has one disadvantage, when using a tab controller the loading view will disappear once another tab is selected, returning to the original tab will show the loading view again though. In some cases this behaviour isn&#8217;t wanted, how do we solve this? Instead of showing the loading view on top of the content view displayed by the tab controller, we&#8217;ll show it on top of all the views, on top of the tab controller.</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #11740a; font-style: italic;">// Show loading view on top of everything</span>
<span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>UIApplication sharedApplication<span style="color: #002200;">&#93;</span>.keyWindow addSubview<span style="color: #002200;">:</span>loadingView<span style="color: #002200;">&#93;</span>;</pre></div></div>

<p>And that&#8217;s all there is to it.</p>
<p><strong>Update</strong>: <a href="http://blog.emmerinc.be/index.php/2009/05/11/load-view-from-nib-improvement/">here</a>&#8217;s the correct method to load a view from a separate nib file.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.emmerinc.be/index.php/2009/04/25/facebook-like-loading-indicator/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
