This is a guest post by +Tope who is Vault Overseer at App Design Vault where you get stunning iPhone App Design templates for developers with a budget or lack of good design contacts.
The App Store with over half a million Apps is now a crowded place. To succeed, your app needs to stand out both in design and functionality. Customizing the appearance of your User interface is a good way to separate your App from the others out there.
Making custom interfaces used to be a painful process in previous releases of the iOS SDK. With iOS 5, Apple made the process easier by introducing the Appearance API.
In this tutorial, I am going to show you how to design an app similar to the cool Find my Friends App.
Basically, at the end of this tutorial, you will be able to transform your app like the screenshot below.
I will be using a fictional recipe app. The screen will have a navigation toolbar with two UIBarButtonItems, Edit and Cancel. There will also be an image with the dish we are making a recipe for, ingredients for the dish and lastly a button that will show the steps needed to prepare the dish. The design elements for this app are part of the suite of iPhone App Design elements called Foody on App Design Vault.
Let’s get started.
Create a new Xcode Project
First, let’s create a new Xcode Single View project and call it styletutorial.
Add the UI Components needed
Now in the ViewController.xib file. Add two instances of UIImageView and a UILabel to the screen. The Image views will be our background for the dish and the ingredients respectively.
Add a Label for the title of the Ingredients list and change the colour to Red.
Add a UITextView component to the screen and change the background to transparent by clicking on the Background tab, then choose the Clear Color option.
Select the top Image View and change the Image field to the “details-photo-mask.png” image. This image is a mask image that gives a photo-frame illusion to the main dish image. Also, choose the “ingredients-list.png” for the image view behind the ingredients. This image is a “scrunched” paper texture so it gives a “Take a note” feeling to our ingredients list.
Now we need to add the Image View that will hold the dish itself. Add another Image view to the screen just above the Image View we just modified. Change the Image field to “food-large.jpg”. Resize the new Image view so that is just slightly smaller than the Image View with the Photo-frame/mask.
If you run the application, you should see our View with all the elements, we have just added. You will not be able to see the navigation controller toolbar at the top because we haven’t added it yet.
Add a Navigation Controller
To add a navigation controller, go to the AppDelegate.m file and modify the application didFinishLaunchingWithOptions: method to look like this.
This will add a navigation controller and then add our initial view as the first view of the navigation controller. Now let’s add some buttons to that navigation controller.
Add Buttons To The Navigation Controller
Add this bit of code as the viewDidLoad method of the ViewController.m class
This is will add two UIBarButton items “Edit” and “Cancel” to our navigation controller . Now, let’s run the application in the simulator and you should see something similar to this.
Let the Styling Begin
Ok, now the magic starts. Let us customise the background of the UINavigationController. To do this, we shall use the Appearance API which is new in iOS 5. Create a method in the AppDelegate.m file and call it customizeAppearance.
In this method, we shall replace the background of the Navigation Bar with the file navar.png. Note: These files are all included in the source files for this tutorial.
In the code above, we created a new Image with the “navbar.png” file and then used the static function UINavigationBar appearance: to modify the background image.
This will set the background image of your Navigation globally across your app.
Now run the application in the Simulator and you should see our new navigation bar with a cool leather theme.
Styling UIBarButtonItems
Our Edit and Cancel buttons look like fish out of water so let’s fix that. All we need to do is add a couple of lines to our customizeAppearance: method
The two new lines uses the same principle used to customise the navigation bar. Create a UIImage instance and then set the background image of our buttons. Check out our new navigation bar. We are getting there.
Changing the background of the View
The next step is to change the background of our view. Gray just doesn’t look like a cool colour to have. Luckily, we have a leather background image we can use to make it look better. To do this, we will need to switch to the ViewController.m file again and the add these lines to our viewDidLoad: method
This bit of code creates a pattern with our image and then sets this as the background of the view.
Lastly, Styling the Button
Lastly, we need to style our button.
First, connect the button to the ViewController.h file to create a reference. I have called this button “stepsButton”.
Change the button Type to default in the Interface Builder and then change the text colour to white with a tray drop shadow.
To style the button, we need to set the background image of our button for two states. The selected and default states. The following code snippet resides in the viewDidLoad: method again.
Run , the app in the simulator and now we have our final product, fully customized and looking almost like the Find my Friends app.
If you have any questions, let me know in the comments and I will make sure to get you an answer.
没有评论:
发表评论