Gyroscope - iPhone

While the entire world was giddily anticipating the start of World Cup soccer this year, it was nose to the grindstone here at Sourcebits developing new soccer madness updates of Funbooth for Mac and iPhone.  Work notwithstanding, our development team had serious fun during production of these applications.  Throughout the beta testing and QA we were constantly capturing images of ourselves in the props of the teams we support, and we made the most of the new social features with the on-the-fly uploading to Facebook and Twitter.  And at the same time, our gaming wing guys at Wandake were busy putting the finishing touches on their now-huge hit Wake Up the Box! for iPhone and iPad.  So it was a real party at times.

While all this was going on, of course there was some big news on June 7, when Steve Jobs introduced yet another Apple engineering marvel: iPhone 4.  Bundled with new features like front-facing camera, superior rear camera, dual mikes for increased noise cancellation, eye-popping Retina Display, multitasking, 720p HD video recording and even a new kind of gyroscope technology, iPhone 4 is a huge evolutionary step in smartphone design.  As the tag line says: “This changes everything.  Again.”  And, marketing hyperbole aside, as far as day-to-day use is concerned for sure this will change the way we use iPhone.
Before this year’s launch, several leaked – or mislaid – iPhone 4 models made the rounds of the major tech blogs, complete with gory dissections and the standard tsunami of specu-babble.  But there was one stealth feature all the teardowns and pundits failed to even guess at: the gyroscope.  And on our side, as veteran iPhone developers, when Steve Jobs announced this during WWDC we were all pretty excited.  And while it still hasn’t gotten much attention in the press, this feature is a game changer in iPhone’s rivalry with Android and Symbian devices.

Apple’s been pioneering smartphone innovations since iPhone’s introduction in 2007 with many widely imitated micro-technologies, in particular the accelerometer.  The accelerometer is a type of sensor that detects changes in a device’s orientation, vibration, rotation or fall by detecting linear acceleration along one of the three X, Y and Z axes – that is: up/down, right/left, and front/back.

3-axis accelerometers enable features we by now take for granted in smartphones (and lately, too, in non-Apple branded consumer digital cameras, music players, and gaming peripherals).  For example, landscape/portrait orientation shifting, tilt for directional control in games and applications, and shake features for refreshing a webpage or shuffling a playlist.  The 1st generation of accelerometer – pre iPhone 4 – could measure only linear motion; it couldn’t sense direction on a compass or twisting motions or rotation, nor had any notion of gravity.

Then last year Apple added a magnetometer to the iPhone 3Gs, enabling it to sense magnetized direction relative to the Earth’s poles. And now, with the introduction of the gyro in iPhone 4, Apple once more ups the ante in spatial detection / orientation with a new sensor for detecting 3-axis angular acceleration around the X,Y and Z axes, enabling far more precise virtualization of pitch, yaw and roll on iPhone.
While detection of change in velocity has been possible for some time thanks to conventional accelerometer calculations in terms of linear acceleration, the gyroscope has been designed to detect angular acceleration, which will detect change in both velocity and direction at the same time.  iPhone 4’s gyroscope enables the sensing of even slight degrees of rotation while simultaneously rejecting linear movements and hand jitters – both still ably handled by accelerometer’s linear movement detection technology.
Combining the 3 axes of the gyroscope along with the 3 axes of the accelerometer now enables iPhone to recognize distance, speed and direction as it moves real-time through space. And thanks to the CoreMotion APIs in iOS, developers with the vision to make use of gyroscope data can access it freely, as some have already done.

iOS 5 : UIStepper Control

There is a new pre-built control in iOS 5 for incrementing or decrementing a value, UIStepper. The control has two buttons aligned horizontally, one labeled with a plus (+) the other a minus (-).
One nice feature is a continuous option, wherein if the user presses and holds down either +/- button, the stepper value is incremented repeatedly. The longer the button is held down, the faster the increment will occur. Also, you can have the increment value wrap around when a range of values is specified, for example, if you set min and max to 0 and 99 respectively, when the value reaches 99, the next value will be 0 (and vice-versa).

Below is a screenshot that shows the output of the example code below:


Below is a short code example showing the various properties available in UIStepper:

 

- (void)viewDidLoad
{
[super viewDidLoad];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 20, 100, 30)];
[label setTextColor:[UIColor blackColor]];
[label setBackgroundColor:[UIColor clearColor]];
[label setTextAlignment:UITextAlignmentLeft];
[label setText: @"Значение:"];
[[self view] addSubview:label];
UIStepper *stepper = [[UIStepper alloc] initWithFrame:CGRectMake(120, 20, 0, 0)];
[stepper addTarget:self action:@selector(stepperPressed:) forControlEvents:UIControlEventValueChanged];

[stepper setMinimumValue:0];
[stepper setMaximumValue:99];

[stepper setWraps:YES];

[stepper setContinuous:NO];

[stepper setStepValue:2];

[[self view] addSubview:stepper];
}

- (void) stepperPressed:(UIStepper *)stpr{
[label setText: [NSString stringWithFormat:@"Значение:%2.0f", stpr.value]];
}

Show the UITableView textField cell above the Keyboard when typing

Scenario:

Keyboard

I have an app where, in Interface Builder, I set up a UITableView that has a text field near the bottom of the view. When I run the app and try to enter text into that field, the keyboard slides up overtop of the field so I can’t see what I’m typing until I hide the keyboard again.
Most of the iPhone App developers come across this situation. I found the solution for this issue.

Solution:

- (UITableViewCell *)tableView:(UITableView *)mytableView

cellForRowAtIndexPath:(NSIndexPath *)indexPath {

cell.delegate = self;

cell.indexPath = indexPath;

cell.rightTextField.tag = (NSInteger)indexPath;

//Disables UITableViewCell from accidentally becoming selected.

cell.selectionStyle = UITableViewCellEditingStyleNone;
}

– (void)keyboardWasShown:(NSNotification*)aNotification

{

//when keyboard is up, that time just bring your text filed above the keyboard

NSIndexPath *indexPath = (NSIndexPath*)self.actifText.tag;

NSDictionary* info = [aNotification userInfo];

CGSize kbSize = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;

UIEdgeInsets contentInsets = UIEdgeInsetsMake(0.0, 0.0, kbSize.height, 0.0);

self.m_myTable.contentInset = contentInsets;

self.m_myTable.scrollIndicatorInsets = contentInsets;

[self.m_myTable scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];

} 

// Called when the UIKeyboardWillHideNotification is sent

- (void)keyboardWillBeHidden:(NSNotification*)aNotification

{ // Once keyboard is hidden then bring back your table into your original position.

UIEdgeInsets contentInsets = UIEdgeInsetsZero;

self.m_myTable.contentInset = contentInsets;

self.m_myTable.scrollIndicatorInsets = contentInsets;

} 

How to Create an Iphone App Layout in Photoshop

Step 1:Setting up the Workspace

Okay! First step is to set up the workspace.Open Photoshop (For your help, I`m using Adobe Photoshop CS5) and create a new canvas of 1300×950 px.

The layout will be 840px wide.Now, draw 2 vertical guides at 230px and 1070px to delimit the layout,like in the image.

Step 2: Creating the background

I`m going to add a gradient to the background and after, I`ll add some noise to it to make it rough.
Create a new layer and add to it a gradient like in the image below:

We can`t add noise to the layer because it has blending options applied.We should have a stand alone layer to do that.Create a new layer and merge it with the first layer.Now we have a stand alone layer which supports the noise effect and which has the gradient incorporated.

Now select the last layer and add it an uniform noise of 1.5% (Filter->Noise->Add Noise)

You should obtain something like this:

Step 3: Creating the header

Select the Rectangle Tool (U) and draw at the top of the canvas a rectangle with the height of 50px and wide of 1300px.After that, apply to it some blending options like Gradient Overlay and Drop Shadow:

Now, under the top-bar add a white horizontal line of 1px to create a deeper effect between the header and the background.

Over the header bar, draw another rectangle with the height of 25px and the width of 1300px also and make sure to be white.Change its opacity to 7-10% to obtain an Apple Iphone transparency effect!

In the right side of the top-bar, we`ll add the navigation menu.Add some text buttons.As shown in the image below, I draw a white rectangle using the Rounded Rectangle Tool with a Radius of 5px and made the “Home” text black.Then I added some blending options to the button to make it look good.The font used is Myriad Pro, Semibold, 14px.

On the left side of the header, add a logo using some text…I used some dummy text: My Iphone App. I used Myriad Pro as font and added the same blending options which the button has.
So far, the image looks good.

Step 4: Adding a big Iphone

I`m going to add a brand new Iphone 4G from our friends from DeviantArt.
Search for “Iphone 4 PSD” and you should have a list there.If you want the link, click here.
After I downloaded the Iphone, I resized it to 60% and hided the layer called “Reflection”.I allowed myself to change the image from the Iphone screen with a print screen of my website.

Step 5: Adding some text

I added some text on the right side of the canvas using Myriad Pro font and different fonts and colors.

We are at the half of the tutorial and the image looks like this:

Step 6: Creating an Iphone navigation slider

Ok, this is a nice step.I`m gonna show you how to create a beautiful navigation like in the fancy Iphone Apps.
Select the Rounded Rectangle Tool and draw a rectangle with a Radius of 7px under the Iphone.

Now add the next blending options:

Voila!

Now add numbers from 1 to 4 like in the image:

You noticed that the number “2″ is black.Is a reason for that.This will be the active button.
Select the Rounded Rectangle Tool(U) and draw a small rectangle under the number “2″.Add the next blending options to it:

The small iphone nav looks like this:

Step 7

Step number 7 is about creating 2 buttons which every Iphone App Website needs: The “Buy this app from Apple” and “Live Demo of the app”.
Select the Rounded Rectangle Tool (U) and with a Radius of 7px, draw a small rectangle under the text.

Add to it the next blending options:

Download this Iphone small icon from IconFinder, make it white and add it to the button.
Then write inside the button with Myriad Pro font “Available now on the Apple Store” ! The button is ready to be clicked!

Duplicate this button and align the duplicated one near to the original.Change the text with “View a Live Demo” or something like this and create a small “Play” button using the Custom Shape Tool(U).

We`re almost there.We have to build a footer and the layout is ready.Take a look at what we`ve done till now:

Step 8: Creating the footer background:

Select the Rectangle tool and draw a big rectangle at the bottom of the canvas.Add it the same gradient used at the “Apple Store” button.

The footer looks sleek now but we want to make it look rough like the background. For this, you have to repeat the Add Noise process used when we made the background: Create a new layer and merge it with the footer layer and apply to the new layer the Noise filter (Filter->Noise->Add Noise – 1.5%).You should obtain the next effect:

At the top of the footer draw 2 lines:a white line and a black line and but the white line just above the white line to create a nice effect.

The background of the footer is finished and looks like this:

Step 9: Creating a “Subscribe” box

Now that the footer background is ready, I want to show you how to create an Apple inspired “Subscribe” box.
Select the Rounded Rectangle Tool and with a Radius of 7px draw a rectangle like in the image below:

Now add the next blending options to the box:

The box should look like this:

Inside the box, we`ll create 2 fields and a submit button.Let`s start with the fields.Select the Rounded Rectangle Tool again and draw a small rectangle inside the box:

Stylize the field by adding the next blending options to it:

Duplicate the field obtained and move it under the first like in the image.

The fields are ready.To make the “Submit” button, duplicate one more time a field and place it under them.Clear the styles of the layer (Right Click on the layer and select “Clear Layer Style”) and add the next blending options to it:

The button is almost ready.

I wanted to add to the button a shine effect.For this, I selected the layer(Ctrl+Click on the layer) and with the Rectangular Marquee Tool(M) I subtracted the bottom half of the selection.Then I created a new layer and filled the remaining selection with white.After that, I reduced the opacity to 10% and obtained a nice glass effect for the button.Is the same procedure used at the header background.
Finally, add some text to finish the box. The result looks nice,don`t you think?

Step 10: Finishing the footer

Now with some text, populate the left side of the footer. I thought to make this by creating a “Features” area, with the features of the app.The small icons used are from the PixeloPhilia Icon Set, a beautiful set of free icons.
Don`t forget to add your copyright details at the bottom of the layer.
The footer is ready!

The final image is ready too! This was a nice tutorial and made me pleasure to write it for you.I hope you read it with pleasure too!Take a look at the final layout below:
Click image for full view.