使用蒙皮控件创建iPhone屏幕

时间:2011-04-15 02:39:40

标签: iphone ios mobile vector

甚至不知道如何准确地说出这个问题,但问题基本上就是这个问题。

我开发了一个Android应用程序。我使用绘图元素基本上为文本控件,布局和按钮创建自定义背景,以创建一个很好的可扩展UI。

以下是它的图片:

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

其他屏幕截图:

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

我想为iPhone版本做同样的事情,但我不知道从哪里开始。看起来同样的方法不起作用,因为没有办法将iPhone控件的背景设置为基于自定义矢量的图像?

为iPhone应用程序执行此操作的最佳方法是什么?

一直在做一些研究,我看过工具Opacity,但我仍然不确定它是如何拟合的。

例如:在我的应用程序中使用标题栏“PaceMaker”,这是在iPhone中复制它的最佳方式。

我想确保它适用于3GS和iPhone 4s。

3 个答案:

答案 0 :(得分:2)

我认为我找到了解决这个问题的正确方法。

忽略问题并选择仅使用标准控件的答案对我来说并不是真的可以接受,因为我试图通过平台和常见体验来构建我的应用程序。

我最终做的是扩展UIViews以创建具有正确阴影和透明度的面板,并绘制我想要的边框。

我扩展了UIView以创建一个圆形面板和一个带边框的面板。 我简单地覆盖了drawRect方法,并使用Quartz绘图API绘制我的形状和边框,并使用渐变填充来实现所需的效果。

然后我可以使用UIView控件并将它们拖到UI上。我只是将UIView控件更改为我的类类型,一切正常。

答案 1 :(得分:0)

首先,我认为您不需要将您的Android界面像素到像素再现到iOS界面。两个平台都有不同的用户使用期限。人们过去常常在这个平台上等待与其他应用程序熟悉的界面。了解Apple客户等待的最佳方式^)是阅读Apple人机界面指南

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

让我们谈谈“标题栏”。在我的应用程序中我自定义导航栏。我只是从我的项目中复制一些代码,给你一些起点。这就是它的外观 - http://macsoj.wordpress.com/2011/01/28/astrofriends/

我通过创建新的UINavigationBar类别将导航栏背景更改为我的自定义图像 - 并覆盖drawRect方法,所以

@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

现在我写了自定义标题

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";

我希望它有所帮助)

答案 2 :(得分:0)

您可以为此设置导航栏的色调颜色.......这将改变导航栏的颜色,您也可以放置文本。