<?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>Rune&#039;s Blog &#187; shadowOffset</title>
	<atom:link href="http://runmad.com/blog/tag/shadowoffset/feed/" rel="self" type="application/rss+xml" />
	<link>http://runmad.com/blog</link>
	<description>A blog about code, graphics, UI, marketing and whatever else interests me. Follow me on Twitter: @runmad</description>
	<lastBuildDate>Sat, 28 Jan 2012 14:08:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Random tips</title>
		<link>http://runmad.com/blog/2010/11/random-tips/</link>
		<comments>http://runmad.com/blog/2010/11/random-tips/#comments</comments>
		<pubDate>Mon, 22 Nov 2010 19:17:57 +0000</pubDate>
		<dc:creator>Rune Madsen</dc:creator>
				<category><![CDATA[#idevblogaday]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Objective-C]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[User Interface]]></category>
		<category><![CDATA[Xcode]]></category>
		<category><![CDATA[shadowcolor]]></category>
		<category><![CDATA[shadowOffset]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[uilabel]]></category>
		<category><![CDATA[uinavigationcontroller]]></category>
		<category><![CDATA[uitoolbar]]></category>
		<category><![CDATA[url]]></category>

		<guid isPermaLink="false">http://runmad.com/blog/?p=217</guid>
		<description><![CDATA[I was expecting this blog post to be about something completely different, but I&#8217;m still out of the country and have come down with a bad cold, so it&#8217;ll be a bit of a short and simple. I&#8217;ve decided just to a few coding tips, I have come across and though might be useful for [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://runmad.com/blog/wp-content/uploads/2010/11/randomtipsheader.png"><img class="aligncenter size-full wp-image-262" title="randomtipsheader" src="http://runmad.com/blog/wp-content/uploads/2010/11/randomtipsheader.png" alt="" width="616" height="250" /></a></p>
<p>I was expecting this blog post to be about something completely different, but I&#8217;m still out of the country and have come down with a bad cold, so it&#8217;ll be a bit of a short and simple.</p>
<p>I&#8217;ve decided just to a few coding tips, I have come across and though might be useful for other devs, especially if you haven&#8217;t worked much with UIKit before in your development, or perhaps just these areas below. (At the bottom of this post is an Xcode project file which includes examples of the tips below).</p>
<p><strong>Tip #1: Check for URL scheme and open correct app from your own<br />
</strong>You&#8217;ll probably run into having to link to another app, for example your company&#8217;s Twitter account. Instead of just linking to the Twitter website, you can do a quick check in code and open the Twitter app instead. You can also do it with other Twitter client apps as well, however, not all have URL schemes setup (that I could find), and most users will probably be using the official one anyway. Regardless, the code is good to do the same check for other apps, or if Twitter.app doesn&#8217;t exists on the user&#8217;s device, you can try another Twitter client app, or use a UIAlertView to ask the user what else they&#8217;d like to use (depending on which ones are possible to open using the URL scheme).</p>
<p>Basically, all you have to do is ask whether UIApplication responds to the URL:</p>
<pre class="brush: objc; title: ; notranslate">BOOL twitter = [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@&quot;twitter://user?screen_name=runmad&quot;]];
if (!twitter) {
	[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@&quot;http://www.twitter.com/runmad&quot;]];
} else {
	[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@&quot;twitter://user?screen_name=runmad&quot;]];
}</pre>
<p>List of URL Schemes: <a href="http://wiki.akosma.com/IPhone_URL_Schemes" target="_blank">http://wiki.akosma.com/IPhone_URL_Schemes</a> <strong> </strong></p>
<p><strong>Tip #2: Getting a free UINavigationController in your UIViewController<br />
<span style="font-weight: normal;">I have seen some apps that use a UIToolbar as a navigation bar, and this just doesn&#8217;t work. If you compare the two, they&#8217;re actually a bit different, and this really shows when put in the wrong place.</span></strong></p>
<p><strong><span style="font-weight: normal;">If you&#8217;ve got a UIViewController, turning it into a UINavigationController is really easy:</span></strong></p>
<pre class="brush: objc; title: ; notranslate">RootViewController *rootViewController = [[RootViewController alloc] init];
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];
[self.navigationController presentModalViewController:navigationController animated:YES];
[rootViewController release];
[navigationController release];</pre>
<p><strong>Tip #3: Getting a free UIToolbar in your UINavigationController<br />
<span style="font-weight: normal;">This one I only just recently found out (thanks to <a href="http://twitter.com/auibrian" target="_blank">@auibrian</a>)</span></strong>. UINavigationController actually comes with a UIToolbar. It&#8217;s property is set to hidden:YES by default, so all you have to do is override this property when you load the view.</p>
<pre class="brush: objc; title: ; notranslate">[self.navigationController setToolbarHidden:NO];</pre>
<p>Note: I have seen some weird behaviour when pushing view controllers onto the screen (buttons not getting a pushing animation, just appearing in the toolbar in place). Also, you will need to hide the toolbar if you&#8217;re popping or pushing to a view controller that you do not want to show the toolbar (because with pushing you&#8217;re reusing the same navigation controller). In my opinion it&#8217;s not a very good way, I wish the view controllers were more separate for this.</p>
<p><strong>Tip #4: Use shadowColor and shadowOffset appropriately when faking text indention<span style="font-weight: normal;"><br />
One thing that bugs me are improper use of a UILabel&#8217;s shadowColor and shadowOffset. When using these, one has to pay attention to the colour of the background as well as the text colour. In the below example (when we&#8217;re going for the look where text looks carved into the display, used by Apple across the entire UI), we&#8217;ll see that when using darker text, use a lighter colour for the shadow and a positive value for the offset. </span></strong></p>
<p><strong><span style="font-weight: normal;">When displaying lighter coloured text, use a darker shadow colour and a negative value for the offset, which in both cases create the proper indented or &#8220;carved&#8221; effect.</span></strong></p>
<p><strong><strong><span style="font-weight: normal;"><a href="http://runmad.com/blog/wp-content/uploads/2010/11/properfaketextindenting.png"><img class="aligncenter size-full wp-image-257" title="properfaketextindenting" src="http://runmad.com/blog/wp-content/uploads/2010/11/properfaketextindenting.png" alt="" width="300" height="150" /></a></span></strong></strong></p>
<p><strong><strong><span style="font-weight: normal;">Using the wrong combination doesn&#8217;t create this effect and makes the text appear raised from the rest of your UI, which is most likely not what you should be going for in most cases ;)</span></strong></strong></p>
<p>I&#8217;ve made a small Xcode project you can download <a href="http://runmad.com/blog/wp-content/uploads/2010/11/TipsFromRune.zip">here</a>, which has the code examples from tips 1, 2 and 3 and I suppose #4 as well, since navigationItem.title is using text indention.</p>
<p>Again, apologies for a bit of a short and simple post due to being under the weather and traveling.</p>
]]></content:encoded>
			<wfw:commentRss>http://runmad.com/blog/2010/11/random-tips/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Shadow offset in custom UITableViewCells (for the inner OCD in you)</title>
		<link>http://runmad.com/blog/2009/11/shadow-offset-in-custom-uitableviewcells/</link>
		<comments>http://runmad.com/blog/2009/11/shadow-offset-in-custom-uitableviewcells/#comments</comments>
		<pubDate>Mon, 16 Nov 2009 16:32:03 +0000</pubDate>
		<dc:creator>Rune Madsen</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Objective-C]]></category>
		<category><![CDATA[shadowOffset]]></category>
		<category><![CDATA[uitableview]]></category>
		<category><![CDATA[uitableviewcell]]></category>

		<guid isPermaLink="false">http://www.davesenior.com/rune/?p=68</guid>
		<description><![CDATA[Apple has a great example code for drawing fast UITableView using custom, complex UITableViewCells called AdvancedTableViewCells. In the example code, you get three versions and I prefer the one named CompositeSubviewBasedApplicationCell, because it draws your cell as one view, just like Loren Brichter&#8217;s Fast Scrolling example. However, Apple&#8217;s example code goes a bit further than [...]]]></description>
			<content:encoded><![CDATA[<p>Apple has a great example code for drawing fast UITableView using custom, complex UITableViewCells called <a href="http://developer.apple.com/iphone/library/samplecode/AdvancedTableViewCells/index.html">AdvancedTableViewCells</a>. In the example code, you get three versions and I prefer the one named <em>CompositeSubviewBasedApplicationCell</em>, because it draws your cell as one view, just like Loren Brichter&#8217;s <a href="http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/">Fast Scrolling example</a>.</p>
<p>However, Apple&#8217;s example code goes a bit further than Loren&#8217;s code and adds example for drawing images, different coloured backgrounds and also has better code for handling highlighted cells in my opinion.</p>
<p>As great as the code is, they left out one small detail that really adds a bit extra to the look of your UITableView, plus I find it makes the text less blurry and easier to read. It only requires a few lines of code for each piece of text you&#8217;re drawing. The example code provided is actually from the App Store, which, if you look on your device has the nice white shadow y offset.</p>
<p>Here are the before and after pictures:</p>
<p style="text-align: center;"><a href="http://runmad.com/blog/wp-content/uploads/2009/11/cells_before1.png"><img class="aligncenter size-full wp-image-137" title="UITableViewCells before applying shadow offset" src="http://runmad.com/blog/wp-content/uploads/2009/11/cells_before1.png" alt="" width="320" height="146" /></a><strong>BEFORE</strong></p>
<p style="text-align: center;"><strong><a href="http://runmad.com/blog/wp-content/uploads/2009/11/cell_after1.png"><img class="aligncenter size-full wp-image-139" title="UITableViewCells after applying shadow offset" src="http://runmad.com/blog/wp-content/uploads/2009/11/cell_after1.png" alt="" width="320" height="146" /></a> AFTER</strong></p>
<p>Original code:</p>
<div style="margin: 0px 0px 20px; text-align: left; color: #000000; background-color: #f1efe6; border: 1px solid #d3d1c7; padding: 0.5em 1em 0.5em 1em; overflow: auto; font-size: small; font-family: monospace;">_highlighted ? [[<span style="color: #400080;">UIColor</span> <span style="color: #6c0540;">whiteColor</span>] <span style="color: #6c0540;">set</span>] : [[<span style="color: #400080;">UIColor</span> <span style="color: #6c0540;">blackColor</span>] <span style="color: #6c0540;">set</span>];<br />
[_cell.name <span style="color: #6c0540;">drawAtPoint:</span><span style="color: #400080;">CGPointMake</span>(<span style="color: #0000ff;">81.0</span>, <span style="color: #0000ff;">22.0</span>) <span style="color: #6c0540;">withFont:</span>[<span style="color: #400080;">UIFont</span> <span style="color: #6c0540;">boldSystemFontOfSize:</span><span style="color: #0000ff;">17.0</span>]];</div>
<p>Drawing the shadow:</p>
<div style="margin: 0px 0px 20px; text-align: left; color: #000000; background-color: #f1efe6; border: 1px solid #d3d1c7; padding: 0.5em 1em 0.5em 1em; overflow: auto; font-size: small; font-family: monospace;"><span style="color: #400080;">CGPoint</span> point = <span style="color: #400080;">CGPointMake</span>(<span style="color: #0000ff;">81.0</span>, <span style="color: #0000ff;">23.0</span>);<br />
_highlighted ? [[<span style="color: #400080;">UIColor</span> <span style="color: #6c0540;">clearColor</span>] <span style="color: #6c0540;">set</span>] : [[<span style="color: #400080;">UIColor</span> <span style="color: #6c0540;">colorWithWhite:</span><span style="color: #0000ff;">1.0</span> <span style="color: #6c0540;">alpha:</span><span style="color: #0000ff;">0.3</span>] <span style="color: #6c0540;">set</span>];<br />
[_cell.name <span style="color: #6c0540;">drawAtPoint:</span>point <span style="color: #6c0540;">withFont:</span>[<span style="color: #400080;">UIFont</span> <span style="color: #6c0540;">boldSystemFontOfSize:</span><span style="color: #0000ff;">17.0</span>]];<br />
point.y -= <span style="color: #0000ff;">1</span>;<br />
_highlighted ? [[<span style="color: #400080;">UIColor</span> <span style="color: #6c0540;">whiteColor</span>] <span style="color: #6c0540;">set</span>] : [[<span style="color: #400080;">UIColor</span> <span style="color: #6c0540;">blackColor</span>] <span style="color: #6c0540;">set</span>];<br />
[_cell.name <span style="color: #6c0540;">drawAtPoint:</span>point <span style="color: #6c0540;">withFont:</span>[<span style="color: #400080;">UIFont</span> <span style="color: #6c0540;">boldSystemFontOfSize:</span><span style="color: #0000ff;">17.0</span>]];</div>
<p>There are a couple of things to note in the above code. Firstly, I made a CGPoint from the original code and made the Y location one pixel lower. This is because we&#8217;re drawing the shadow first, underneath the original text. After the shadow has been drawn, we just tell the point to move up one pixel and the text will be drawn in the original location from the original code.</p>
<p>Second, you&#8217;ll need to set the text colours twice. Note that for the shadow, we need to use [UIColor clearColor] so it doesn&#8217;t look weird when highlighted. Also, set the alpha low (you need to check with your cell&#8217;s background colour), but make sure it&#8217;s not too white. It&#8217;ll be really subtle, yet noticeable to anyone who appreciate nice UI design.</p>
<p>Of course it doesn&#8217;t work with white cells, but if you&#8217;re doing any kind of custom UITableViewCell drawing it&#8217;s a nice touch. Here&#8217;s how I use it in my app:</p>
<p><a href="http://runmad.com/blog/wp-content/uploads/2009/11/Screen-shot-2009-11-16-at-11.29.31-AM1.png"><img class="aligncenter size-full wp-image-140" title="Axel.app with nice shadow offset in custom drawn cells" src="http://runmad.com/blog/wp-content/uploads/2009/11/Screen-shot-2009-11-16-at-11.29.31-AM1.png" alt="" width="414" height="770" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://runmad.com/blog/2009/11/shadow-offset-in-custom-uitableviewcells/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

