开发者

Creating iPhone screen with skinned controls

Didn't even know how to exactly phrase this question, but here is the the problem essentially.

I have an Android app开发者_JS百科lication I developed. I used drawing elements to basically create custom background for text controls, layouts and buttons to make a nice scalable UI.

Here is a picture of it:

https://ssl.gstatic.com/android/market/com.pacemaker.android/ss-0-320-480-160-0-b25671ad8a0f8862993fb6ac28db80618c36853e

Other screen-shots here as well:

https://market.android.com/details?id=com.pacemaker.android&feature=search_result

I want to do the same thing for the iPhone version, but I have no idea where to even begin. It appears the same approach isn't going to work, because there isn't a way to set a background for an iPhone control to a custom vector based image?

What is the best way to do this for an iPhone app?

Been doing some research and I have seen the tool Opacity, but I am still not sure how it call fits together.

For example: Take the title bar in my application that says "PaceMaker" how would be the best way to replicate that in iPhone.

I want to make sure it scales so it works on 3GS and iPhone 4s.


I think I found the right solution to this problem.

The answer of ignoring the problem and choosing to just use the standard controls isn't really acceptable to me as I am trying to build a feel for my application across platforms and a common experience.

What I ended up doing is to extend UIViews to create panels that had the correct shading and transparency and drew the borders how I wanted.

I extended UIView to create a rounded panel and a bordered panel. I simple overrode the drawRect method and used the Quartz drawing APIs to draw my shapes and borders and use gradient fills to achieve the desired effect.

Then I could use UIView control and drag them onto the UI. I just change the UIView controls to be of my class type and everything works.


first of all I think you don't need to reproduce your Android interface pixel-to-pixel into iOS interface. Both platforms have different user expirience. People used to and waiting for familiar interface with another apps on this platforms. Best way to know what Apple customers wait from you ^) is to read Apple Human Interface Guidelines

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html

and let's talk about "title bar". In my application I customize navigation bar. I just copy some code from my project to give you some starting points. This is how it looks - http://macsoj.wordpress.com/2011/01/28/astrofriends/.

I change navigation bar background to my custom image via creating the new category of UINavigationBar - and overriding drawRect method so

@interface UINavigationBar (TransparentAdditions)
@end
@implementation UINavigationBar (TransparentAdditions)
- (void)drawRect:(CGRect)rect {
        UIImage *image = [UIImage imageNamed: @"my_custom_background.png"];
        [image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];   
}
@end

and now I write the custom title

CGRect frame = CGRectMake(0, 0, 320, 44);
UILabel *label = [[[UILabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont fontWithName:@"MarkerFelt-Thin" size:20.0];
label.shadowColor = [UIColor colorWithWhite:0.0 alpha:0.5];
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor whiteColor];
self.navigationItem.titleView = label;
label.text = @"Friends";

I hope it helps )


You can simply set the tint color of navigation bar for this.......That will change the color of your navigation bar and you can put the text as well.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜