Pulsating UIView

No Comments

I needed to create a pulsating UIImageView (this will work for any subclass including itself of UIView without any changes) and solved that task using chained UIViewAnimation so I wanted to share that bunch of code with you.


//this method is used to setup all the stuff any initially starting the chain as mentioned

-(void)addLoadingImage{

UIImageView* pulseView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myImage.png"]];

pulseView.tag = MY_PULSE_TAG; //needed to keep track of the view afterwards, change this to whatever you want (use #define for better style, this is just a quick writedown!)

[self.view addSubview:pulseView];

[self pulseBig];

}

//animating the pulsing to big by changing the frame of the view which should be pulsing

-(void)pulseBig{

//needed to stop animation if view got removed, otherwhise we will get EXC_BAD_ACCESS

if(![self.view viewWithTag:MY_PULSE_TAG])

return;

[UIView beginAnimations:@"pulsing" context:nil];

[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];

[UIView setAnimationDuration:1];

[UIView setAnimationDelegate:self];

[UIView setAnimationDidStopSelector:@selector(pulseSmall)];

[[self.view viewWithTag:MY_PULSE_TAG] setFrame:myBigFrame];

[UIView commitAnimations];

 

}

//pulsing the view small!

-(void)pulseSmall{

//needed to stop animation if view got removed, otherwhise we will get EXC_BAD_ACCESS

if(![self.view viewWithTag:MY_PULSE_TAG])

return;

[UIView beginAnimations:@"pulsing" context:nil];

[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];

[UIView setAnimationDuration:1];

[UIView setAnimationDelegate:self];

[UIView setAnimationDidStopSelector:@selector(pulseSmall)];

[[self.view viewWithTag:MY_PULSE_TAG] setFrame:mySmallFrame];

[UIView commitAnimations];

}

 

Just fill in your two frames and the tag and you are ready to go. Please be aware that you need to set the origin of the bigger frame half of the changed size to be sure the center remains the same.

Customizing UISearchBar

No Comments

Recently I needed to fully customize a UISearchBar, so here are some basic “recipes” on how to manage that using a UISearchDisplayController.

 

1. Changing the title of the “cancel” button

If you want to localize your UISearchBar or just want to apply a unique text matching your application just implement the following UISearchDisplayControllerDelegate method:


-(void)searchDisplayControllerWillBeginSearch:(UISearchDisplayController *)controller{

[searchBar setShowsCancelButton:YES animated:NO];

for(UIView *subView in searchBar.subviews){

if([subView isKindOfClass:[UIButton class]]){

[(UIButton*)subView setTitle:@"myCustomTitle" forState:UIControlStateNormal];

}

}

}

2. Changing the title of the “no results” label

Again you need to implement a delegate method


-(BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString{

for(UIView *subview in searchController.searchResultsTableView.subviews) {

if([subview isKindOfClass:[UILabel class]]) {

[(UILabel*)subview setText:@"my custom 'no results' text"];

}

}

return YES;

}

3. Custom background image

Insert this snippet directly after you initialized your UISearchBar

searchBarOverlay = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"SearchBarBack"]];
searchBarOverlay.frame = CGRectMake(-8, -2, 320, 48);
[searchBar addSubview:searchBarOverlay];
[searchBar sendSubviewToBack:searchBarOverlay];

for (UIView *v in [searchBar subviews]) {

if ([NSStringFromClass([v class]) isEqualToString:@"UISearchBarBackground"])
{
[searchBar sendSubviewToBack:v];
}

if ([NSStringFromClass([v class]) isEqualToString:@"UIImageView"] && v != searchBarOverlay)
{
[searchBar sendSubviewToBack:v];
}
}

5.Custom background color

Finally a one-liner

 searchBar.tintColor = [UIColor redColor]; 

Custom UINavigationBar-Background

No Comments

Hej there,

I’m really sorry that you guys didn’t hear from me such a long time but there was so much other stuff going on that I really couldn’t make it. Sorry for that.

Back to the topic: When writing an iOS application in a custom style that fits your needs you don’t want to miss the UINavigationBar-Class but also don’t want to give up your awesome style concept you and maybe your designers came up with. So the standard blue-to-white background-gradient isn’t that appropriate and you definitely will need a custom background-image and/or color. Finally, here are the two solutions I would suggest, the first should be the easiest.

Solution 1: Writing a category

Simply write a UINavigationBar-Category (mine will be named CustomImage, by the way: You don’t need to create a custom pair of files, simply add this to the UIViewController in which you want to use the custom background) and add the following to it to add a background named “NavigationBar.png” to the bar:

@implementation UINavigationBar (CustomImage)
- (void)drawRect:(CGRect)rect { //we are overriding the standard drawRect:-Method
UIImage *image = [UIImage imageNamed: @"NavigationBar.png"];
[image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
}
@end

Solution 2: Custom initialization of UINavigationBar

This solution is based on a custom method to be implemented which return a newly initialized UINavigationBar which was slightly modified after the original modification.

At first you need to define two constants so that the following method you will implement later can work correctly.

#define kNavBarImageTag 6183746
#define kNavBarColor [UIColor colorWithRed:0.54 green:0.18 blue:0.03 alpha:1.0]

Please remember to modify the kNavBarColor constant to fit your color-scheme!

Here’s the method you need to implement in one of the classes you wan’t to use your custom UINavigationBar:

+ (void)customizeNavigationController:(UINavigationController *)navController
{
    UINavigationBar *navBar = [navController navigationBar];
    [navBar setTintColor:kNavBarColor];

    UIImageView *imageView = (UIImageView *)[navBar viewWithTag:kNavBarImageTag];
    if (imageView == nil)
    {
        imageView = [[UIImageView alloc] initWithImage:
                     [UIImage imageNamed:@"navigation-bar-bg.png"]];
        [imageView setTag:kNavBarImageTag];
        [navBar insertSubview:imageView atIndex:0];
        [imageView release];
    }
}

There you go. Please send me an email or write a comment if you think I missed something!

Add custom WordPress fields to your RSS-Feed

No Comments

You know custom fields? (If not, just take a quick look here…) Unfortunatly I’m not really using them at the moment on this blog, but I’m planning to do so on another one, collaborating with a new iPhone-App. The fields where made, are filled with content anytime, but how to use them? For my needs it’s enough to past them into the RSS-Feed, they don’t really need to be visible at all, just be there to parse it from the XML-Source of the feed. So, how to manage this one?  Here is a quick how-to, after that you should be able to add as many field as you want to your feed, and any other meta informations too!

At first, let me tell you, that this is on your own risk because you need to “hack” some WordPress-files. But hey thats the deal if you want to mod your feed!

Part 1: Finding the source

Lets go: Grab a FTP-Tool of your choice and log in to your server. In this one, navigate to the place where you put all the WordPress-files. Navigate to “wp-includes” and find the .php-files starting with “f”. You will find multiple ones, all starting with “feed-….”. Thats the point where our way splits into 3 different ways: As you know, there is RSS, RSS2 and also the Atom format for feeds. Depending on which format you want to hand to your customers you need to select the matching file, the rest should still be the same. I’ll go on with the “feed-atom.php” file. Open the file in an editor of your choice. Now you will see a lot of code, depending on your skills in PHP and XML you won’t really understand anything but you don’t really need to even if it can be a little helpful for the following stuff.

Part 2: Starting to hack

Take a quick look of the opened file and find the

<entry>

...

</entry>

 tag. Just if you are interested, at the moment mine looks like this:


<entry>

<author>

<name><?php the_author() ?></name>

<?php $author_url = get_the_author_meta('url'); if ( !empty($author_url) ) : ?>

<uri><?php the_author_meta('url')?></uri>

<?php endif; ?>

</author>

<title type="<?php html_type_rss(); ?>"><![CDATA[<?php the_title_rss() ?>]]></title>

<link rel="alternate" type="text/html" href="<?php the_permalink_rss() ?>" />

<id><?php the_guid(); ?></id>

<updated><?php echo get_post_modified_time('Y-m-d\TH:i:s\Z', true); ?></updated>

<published><?php echo get_post_time('Y-m-d\TH:i:s\Z', true); ?></published>

<?php the_category_rss('atom') ?>

<summary type="<?php html_type_rss(); ?>"><![CDATA[<?php the_excerpt_rss(); ?>]]></summary>

<?php if ( !get_option('rss_use_excerpt') ) : ?>

<content type="<?php html_type_rss(); ?>" xml:base="<?php the_permalink_rss() ?>"><![CDATA[<?php the_content_feed('atom') ?>]]></content>

<?php endif; ?>

<?php atom_enclosure(); ?>

<?php do_action('atom_entry'); ?>

<link rel="replies" type="text/html" href="<?php the_permalink_rss() ?>#comments" thr:count="<?php echo get_comments_number()?>"/>

<link rel="replies" type="application/atom+xml" href="<?php echo get_post_comments_feed_link(0,'atom') ?>" thr:count="<?php echo get_comments_number()?>"/>

<thr:total><?php echo get_comments_number()?></thr:total>

</entry>

Let’s get ready to rumble! At first, we want to take a quick look at the WordPress-Codex how to access the database containing the postmeta. The Codex works like a wiki, you all should know. Search for “get_post_meta” and take a quick look at this one. As you hopefully will see this function is the one we need to use. Add the following lines inside the “<entry>” tag:

{code codetype=xml}

<!– this is what we add –>
<pricedrop><?php echo get_post_meta($post->ID,’pricedrop’,1); ?></pricedrop>
<!– …more fields below… –>

{/code}
For my needs I decided it would be the best to get the meta-informations all summed up at the end of each entry in the feed, unless they are not visible to the customers. I just added the codesnippet after the “content”-section. Now my <entry> looks like this one:

{code codetype=xml}

<entry>

<author>

<name><?php the_author() ?></name>

<?php $author_url = get_the_author_meta(‘url’); if ( !empty($author_url) ) : ?>

<uri><?php the_author_meta(‘url’)?></uri>

<?php endif; ?>

</author>

<title type=”<?php html_type_rss(); ?>”><![CDATA[<?php the_title_rss() ?>]]></title>

<link rel=”alternate” type=”text/html” href=”<?php the_permalink_rss() ?>” />

<id><?php the_guid(); ?></id>

<updated><?php echo get_post_modified_time(‘Y-m-d\TH:i:s\Z’, true); ?></updated>

<published><?php echo get_post_time(‘Y-m-d\TH:i:s\Z’, true); ?></published>

<?php the_category_rss(‘atom’) ?>

<summary type=”<?php html_type_rss(); ?>”><![CDATA[<?php the_excerpt_rss(); ?>]]></summary>

<?php if ( !get_option(‘rss_use_excerpt’) ) : ?>

<content type=”<?php html_type_rss(); ?>” xml:base=”<?php the_permalink_rss() ?>”><![CDATA[<?php the_content_feed('atom') ?>]]></content>

<?php endif; ?>

<?php atom_enclosure(); ?>

<?php do_action(‘atom_entry’); ?>

<!– this is what we add –>

<pricedrop><?php echo get_post_meta($post->ID,’pricedrop’,1); ?></pricedrop>

<!– …more fields below… –>

<link rel=”replies” type=”text/html” href=”<?php the_permalink_rss() ?>#comments” thr:count=”<?php echo get_comments_number()?>”/>

<link rel=”replies” type=”application/atom+xml” href=”<?php echo get_post_comments_feed_link(0,’atom’) ?>” thr:count=”<?php echo get_comments_number()?>”/>

<thr:total><?php echo get_comments_number()?></thr:total>

</entry>

{/code}

Finished….Did you know that it was that easy?

Part 3: Digging deeper

The “<pricedrop>” tag can replaced with any other you want it’s just used to make the field we added better visible when viewing the plain source-code of our feed. Just some more words about using the get_post_meta method: You probably took a look at the equivalent codex article, then just skip this one. Otherwise take a quick look here. As you see, this function got three parameters passed in its call, each seperated through a comma. The first one passes the id of the article which is posted to the feed, this one is the most essential because the id is needed to access the unique key-value-pair in the WordPress-Database. Without this or with an ID not matching the current article the meta informations gathered from the custom fields would be wrong or even just not there. The second one is nearly as essential: WordPress allows you to create multiple custom fields for each article. The code  you pasted above gets WordPress to identify the article you want to access but now which of the (possible) multiple custom fields. Because of that the second parameter needs to contain the exact name of the desired custom field, in my example I took “pricedrop”. Last but not least the third parameter is optional intending it is not that important: You decide if you want a single result returned, like a single picture, or even a whole array, like a gallery of pictures. In most of the times you can simply ignore this one.

Okay, thats what I had to say. I’m hoping you can use my snippets of code and feel inspired to mod your feed like you need it – you really got the tools by now!

Clever JPEG Optimization Techniques

No Comments

I found a nice article over at Smashing Magazine about JPEG Optimization. Since I’m writing my second iPhone-App I want to keep the bundle as small as possible but still deliver high quality. So I’m looking forward to test this, hopefully it’ll help me reaching my goal :)

Clever JPEG Optimization Techniques – Smashing Magazine.

5 Apps every Web-Designer should have

No Comments

Today I want to share those 5 Apps I think of every designer should have them on his iPhone/iPod-Touch. Enjoy and comment :)

1. TweetDeck

My favourite twitter client, I tried a whole bunch of them but this is the only one I really like. It got coloumn view to keep you on track of everything you want for example searches, your Dm´s or lists. Multiple account managing is also supported, this should especially pay off for work and private accounts, always in your pocket!

2. Digg

The new Digg app isn´t really old, perhaps one month or so. It supports full account access, including the indexing in the different categories like “Technologie” or others and in addition the stories are sorted into “Top-Stories”, “Recent” and “Upcoming”. Social services like Facebook, Twitter or even Instapaper are included: When viewing a storie, you can send it directly to them including the title and a digg-url. Finally you can store stories in the phone´s memorie to access them offline and faster.

3. NetNewsWire

I also tried a huge amount of RSS-readers, but this was the only one which was able to serve my needs. This is a clean, simple but highly effective reader that syncs with the Google-FeedBurner service. Devided into categories you can decide and in the “Latest News”-group you can directly share the article of you choice via Twitter and others. This includes the automatic link-shortening!

4. WordPress

When maintaining your own WordPress-Blog while your away from your desk, this one is going to be a really time-saving app. Once logged in (you can manage multiple blogs by the way!) you should be able to access all the options you got when enter the dashboard online, so you can approve or disapprove comments, write posts or edit them and manage pages you set up. In addition this app fully supports integration of media like photos or other stuff you want to embed into your posts.

5. Evernote

Keep track of your brilliant ideas with Evernote: All the pieces you come across daily on the internet or other places are stored for you at one  single place on the internet providing great access equal if you are at your desc or in the train using you iPhone. Evernote stores you ideas, after setting up a free account on their website you can access it on the go. The features are really great visualized…thumbs up for that!

Apple about to rush the ad-market

2 Comments

With releasing the iPhone Apple started to “fight” against Microsoft,Google & Co. on the mobilphone-market. Now they released the iPad targeting the capture of the netbook/complete mobile market. Apple introduced “iAd”, a marketplace for displaying adverts on iPhones and iPad which can be seen as a direct confrontation with Google which owns todays leader “AdSense”. Apple wants to get a piece of the ad-cake.

The Concept

Apple wants to give registered Developers who are allowed to distribute Apps for the Apple App-Store the possibility to sign up their applications for ads, displayed by Apple who wants to hand out 60 percent of the refunds to the developers. Since todaymost mobile ads are sold by the company AdMob, which is about to be absorbed by Google, Apple needs to contrast their ad-service: There are gonna be videos or even games displayed in the ad which open in a NEW application when tapped on them.

This is an enormous market opened to Apple: In reference to company-intern report Apple sold about 85 Million mobile devices and 4 Billions of  Apps which are mostly used every single day. Apple is calculating to deliver around one billion ads per day if one ad is displayed every three minutes. Whereas on desktop computers most ads are delivered around search phrases and engines, users of mobile devices don´t use the standard search engines, they use apps.

Apple vs. Google

By now many analysts are seeing a huge rivalry between Google and Apple since the both companies used to worked a lot together in the past but are coming apart more and more in the last couple of month. But instead of “hurting” Google by building up their own ad-service Apple could help them involuntarily instead: The Federal Trade Commission FTC was investigating against Googles absorption of AdMob because they feared the monopoly position of Google on the mobil-market. With Apple as a direct concurrent Google wouldn’t own the monopoly and could swallow up AdMob.

In the background also Microsoft, the third big company is planing to enter  the mobile-market. At the moment they seem to develop the new Windows 7 Mobile and announced an own smartphone for autumn. In alliance with the american mobile-company Verizon Wireless Microsoft support all of Verizon´s 80 Million clients with their own search engine named Bing.

What´s coming soon?

Two “camps”, two different company-philosophies: Google & Microsoft are contributing their software as OpenSource(Google Android) or are at least licensing them to other smartphone companies(Microsoft). Apple instead tries to keep everything shut down and closed to retain the control over the platform, the apps and still the ads but is earning a huge amount of money through this. The future will show which concept works best and how we get spammed with Ad´s and by whom.

HootSuite – the power of the owl

2 Comments

Today I finally want to introduce HootSuite, a Twitter client which is both, web and desctop based.

Follow, Unfollow, Lists and Retweets

The basic functionality each client should have: HootSuite allows you to follow, unfollow users, watch your or their lists and retweet them. The different options are stored in you account tap (you can manage multiple accounts by the way!) which displays you personal queries in columns you can order, edit or delete. These columns can nearly fit everything from DM´s over Search queries to Lists.

Accessing retweet, follow and unfollow buttons is realized through using a hover effect which means that these button appear when you move your mouse over a tweet.

When you do post tweets, you got the possibility to shorten URL´s through the build in ow.ly-shortener (notice: this is important for accessing stats!).

Talk to the future

HootSuite allows you to schedule tweets to be posted in the future. This feature can be especially useful for people who want to communicate with people living in other time zones via Twitter like me. Just schedule some tweets for the night an take a nap :)

This scheduling can be accessed like seen in the future through a well visible button. As you can see, there are different options for the tweet like the date, the time or email notification when it got send. The date selection is very well  visualized through a calendar displayed by clicking on the appropriate icon.

Stats

Another feature I like most on HootSuite are the stats. Like I mentioned previously you can view Stats of your tweets which used links shortened by the ow.ly-shortener. Through the Twitter-API limitation you can just view the clicks performed on this link but HootSuite beautifies this through drawing graphs when clicks where performed over days so you can access tendencies.

In addition you can view a summary of all links you posted which describes more or less accurate you profile popularity. This will be generally show a graph using the last 30-days clicks.

Assignments, other Social-Communities and more (NEW!)

Only a few days ago the servers went down for a short time and the HootSuite-Team added some new features and generally changed some layout elements. The new features: Assignments, including of RSS and Facebook and communication with your team.

You are now able to manage a whole team via HootSuite. This could be especially interesting for companies or freelancers. Simple assign tasks to other team members by just simply clicking one button, do intern communication with them or even view the status of assignments you or the others posted to keep yourself on track of the working process. In addition you can delegate status updates to other team members and add some notes to the updates you assign. This includes Facebook-Status too!

10 Google Chrome Extensions you need to have

3 Comments

Since Google´s Chrome is growing more and more, stealing the popularity of the Internet Explorer and others, you might want to switch or already did so. Using Plugins can make your live much more easier. What a coincidence like for Firefox there are also more and more Plugins covering nearly every segment you possibly could be interested in. A short list of those which I recommend will follow.

AdBlock

A classic Plugins on all the different browsers: AdBlock. This Plugin preserves you of those annoying ad´s you will be confronted on nearly every single website (beside mine :) ). Simple install and surf clean…

Google Mail Checker

This is a small but nifty plugin. It allows you to quick view your GoogleMail-Account in the toolbar to be informed about it´s status anytime you want to.

Google Page Rank/ Alexa Rank

If you ever visited a website you didn’t knew by yourself but which was recommended to you by friends or other sources you probably came across the interest of knowing how popular this site is and if there is any help you could offer to make it popular. Download, install, enjoy.

DualView

This one allows you to view two sites at one time. This could be useful not only for web-developers…

XChrome

XChrome allows you to install different Google Chrome Themes by just clicking one button. A lot easier than the normal way around!

Portable Chrome

Portable Chrome isn’t a plugin in but should still be mentioned. This one is about a mobile version of the Chrome browser to be installed on you USB-Stick to carry it around with you and use it on computers that don´t belong to you (work etc.) or ones where you don’t have admin-rights (this will save you plugins, bookmarks and so on!).

Session Manager

Allows you to save you current browser state and reload it up again whenever you want to view it.

WOT

This well developed tool will warn you when visiting risky sites through a rating system which is supported by a ranking-team and mostly by the community.

TPGoogleReader

This Plugin, residing in the toolbar, alerts you off unread RSS-News in your GoogleReader-Account. In addition it adds a RSS-Icon to the address line for adding the current address directly to your reader.

Facebook Notification

Adds the number of Facebook Notifications to your toolbar to keep you on track anytime.


My collection. What are your favourites? Add a comment, I´ll take a look and add it maybe :)

BlogThirsty aka. #BlogThursday

2 Comments

#FollowFriday, #MusicMonday,… every one does know this two “special” twitter days and most of you are using them. So there is a day for finding new people to follow, one for finding new music you might like. What’s about a special day for discovering new blogs? I want to introduce the new #BlogThursday to you:

Since the linking in the blogosphere is decreasing, not even only in Germany but also in other countrys we bloggers need to support ourselfs. Many traffic from blogs is pulled to or from Twitter. Many people are using twitterfeed to get their blog posts to Twitter, so why don’t go just the other way around? Support the blogosphere with just spending two seconds: Go through your feedreader or your bookmarks, select you favourite blog or one you really like and wan’t to support and post the link, the “#BlogThursday” and a short discription about the blog or why you like it. Finish, it won’t hurt!

More details in German and English: BlogThirsty?

Older Entries