iphone6 plus ui 字号字号怎么适配

-完美适配iPhone 6、iPhone 6 Plus:在 App Store 上的内容
正在打开 iTunes Store。如果 iTunes 不自动打开,在 Dock 或 Windows 桌面上点击 iTunes 图标。进度指示器
正在打开 iBooks Store。如果 iBooks 未打开,请在 Dock 中打开 iBooks App。进度指示器
如要轻松整理及新增数码媒体收藏,iTunes 是全世界最简单的工具。
我们在您的电脑上找不到 iTunes。 如要下载 Yongteng Yuan 的免费 App 2048+
-完美适配iPhone 6、iPhone 6 Plus,请立即获取 iTunes。
已经有 iTunes 了? 现在点击「我有 iTunes」以打开 iTunes。
-完美适配iPhone 6、iPhone 6 Plus
开发商:Yongteng Yuan
打开 iTunes 以购买和下载 App。
2048+ 当你手指向四周滑动的时候,两个相同的方块会相加:2 + 2 = 4,4 + 4 = 8, = 2048....根本停不下来啊,有木有??独有的“悔棋”功能,可以时光倒流、梅开二度,让你在高潮中无法自拔!
版本 2.1 中的新功能
1.修复了游戏在iOS6下的BUG2.优化了体验
这个游戏不错
难得遇到一款喜欢的游戏。
这一款游戏玩起来好巴士!
就是有广告
用户购买的还有
此 App 专为 iPhone 和 iPad 设计免费类别: 版本: 2.1大小: 7.4 MB语言: 简体中文, 英语开发商: Yongteng Yuan兼容性: 需要 iOS 6.0 或更高版本。与 iPhone、iPad 和 iPod touch 兼容。
4.33333&&&&&9 份评分
&&&&&15 份评分
更多Yongteng Yuan的产品你的位置: >
> StoryBoard不使用AutoLayout情况下 按比例快速兼容适配iPhone6/6 Plus教程【原创】
声明:本文章是为了后期快速兼容6和6Plus的按比例放大方法,对于部分读者来说可能觉得该方法不妥。但是对于复杂的界面还有急于交付项目的人来说还是有一定帮助的。
现在由于苹果公司出了6和6Plus,让写苹果程序的哥们为了做兼容很头疼。用StoryBoard固然方便,但是后期做兼容要花费太多的时间和精力。
使用AutoLayout虽然会在不同尺寸的屏幕下自动布局,但是很多东西还是要自己手动修改,而且使用AutoLayout的话有一个弊病,就是无法通过代码来修改StoryBoard上控件的尺寸和位置。
使用纯代码搭建界面又会觉得不够直观,要花时间调整布局,虽然方便后期做调整兼容性,但是影响开发效率。
当然个人觉得还是代码和StoryBoard结合的方式比较方便。
先说下使用本方法的要求,首先iPhone5的界面一定要完全兼容,这样才能完美兼容6和6Plus。
首先,我么我们要观察一下5,6和6Plus的尺寸比例关系。发现了他们的关系后呆会做兼容就明白了。
很明显能看出这三种屏幕的尺寸宽高比是差不多的,因此可以在5的基础上,按比例放大来兼容6和6Plus的屏幕。
在AppDelegate.h中
@property float autoSizeScaleX;
@property float autoSizeScaleY;
在AppDelegate.m中
#define ScreenHeight [[UIScreen mainScreen] bounds].size.height//获取屏幕高度,兼容性测试
#define ScreenWidth [[UIScreen mainScreen] bounds].size.width//获取屏幕宽度,兼容性测试
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];
if(ScreenHeight & 480){
myDelegate.autoSizeScaleX = ScreenWidth/320;
myDelegate.autoSizeScaleY = ScreenHeight/568;
myDelegate.autoSizeScaleX = 1.0;
myDelegate.autoSizeScaleY = 1.0;
因为iPhone4s屏幕的高度是480,因此当屏幕尺寸大于iPhone4时,autoSizeScaleX和autoSizeScaleY即为当前屏幕和iPhone5尺寸的宽高比。比如,
如果是5,autoSizeScaleX=1,autoSizeScaleY=1;
如果是6,autoSizeScaleX=1.171875,autoSizeScaleY=1.;
如果是6Plus,autoSizeScaleX=1.29375,autoSizeScaleY=1.2957;
现在我们获取了比例关系后,先来看一下如何解决代码设置界面时的兼容。
CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height)这个方法使我们常用的设置尺寸的方法,现在我设置了一个类似于这样的方法。
在.m文件中
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake1(100, 100, 50, 50)];
CG_INLINE CGRect//注意:这里的代码要放在.m文件最下面的位置
CGRectMake1(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];
rect.origin.x = x * myDelegate.autoSizeScaleX; rect.origin.y = y * myDelegate.autoSizeScaleY;
rect.size.width = width * myDelegate.autoSizeScaleX; rect.size.height = height * myDelegate.autoSizeScaleY;
这样,这个btn按钮在5,6和6Plus的位置和尺寸比例都是一样的。
代码兼容完之后,来看一下StoryBoard的兼容,当然,在平时的项目中我们不可能就一两个视图,而且每个视图里面可定还套有很多其他视图,如果把所有视图的尺寸用手动输入CGRectMake的方法来改兼容的话工作量非常大,而且容易出错。经过多次试验,我想出一种能快速兼容大多数界面的方法
在AppDelegate.h中
//兼容函数
+ (void)storyBoradAutoLay:(UIView *)allV
在AppDelegate.m中
//storyBoard view自动适配
+ (void)storyBoradAutoLay:(UIView *)allView
for (UIView *temp in allView.subviews) {
temp.frame = CGRectMake1(temp.frame.origin.x, temp.frame.origin.y, temp.frame.size.width, temp.frame.size.height);
for (UIView *temp1 in temp.subviews) {
temp1.frame = CGRectMake1(temp1.frame.origin.x, temp1.frame.origin.y, temp1.frame.size.width, temp1.frame.size.height);
//修改CGRectMake
CG_INLINE CGRect
CGRectMake1(CGFloat x, CGFloat y, CGFloat width, CGFloat height)
AppDelegate *myDelegate = [[UIApplication sharedApplication] delegate];
rect.origin.x = x * myDelegate.autoSizeScaleX; rect.origin.y = y * myDelegate.autoSizeScaleY;
rect.size.width = width * myDelegate.autoSizeScaleX; rect.size.height = height * myDelegate.autoSizeScaleY;
storyBoradAutoLay是把当前view进行两层遍历,把里面的UIView类型的控件的尺寸取出来,乘以对应的比例再赋值给它的尺寸,这样StoryBoard里的兼容就完成了。如果你的界面里嵌套的比较多的话可以多加几层遍历。
在继承了UIViewController的.m文件中
#import &AppDelegate.h&
- (void)viewDidLoad{
[super viewDidLoad];
[AppDelegate storyBoradAutoLay:self.view];
在所有的继承了UIViewController的文件中,都加上storyBoradAutoLay这句代码,就能把当前的view进行兼容。
现在我们来看一下使用了该方法兼容的前后对比效果吧。
iPhone6兼容前
iPhone6兼容后
iPhone6Plus兼容前
iPhone6Plus兼容后
如果整个项目做完后才开始做兼容的话这个方法的优势就体现出来了,面对几十个工程文件,只需自定义并且替换你的CGRectMake方法,再加上storyBoradAutoLay这个方法就瞬间完成大部分甚至全部的兼容。
其实还是比较建议用代码和StoryBoard结合的方式来写代码,无论是从做兼容还是效率来说都是比较好的。
如果遇到tableView的或者其他的兼容改动,手动调整一下即可。如果真的有在兼容的其他方面的遇到问题的,也可以直接与我交流讨论。或者给我留言也可以。如果觉得我的兼容的方法有问题也可提出~
对于本文所采用的方法,请注意以下条例
0:本文原网址为:/5121.html
1:本方法不具权威性,只是个人平时的工作总结。觉得有用的拿走,不喜欢的也请不要抨击。
2:iPhone的兼容模式虽然能兼容图片,但是不能自动调整位置。
3:本方法iPad不适用,只适用于4,5,6,6Plus。
4:本方法用在iPhone上的话只需准备4,5的尺寸两套布局。效率高,也方便后期维护。
5:虽然本方法只是非常简单的按比例兼容。只要每张图都有三种分辨率的话,该方法完全不会让图片模糊或者变形。能还原出设计师的最初设计
本博客属于原创,原创不易。转载请声明出处。
本文永久地址:/5121.html本文出自
,转载时请注明出处及相应链接。
与本文相关的文章APP适配iPhone6&Plus截图简要说明-图翼网() - 优秀UI设计师互动平台
APP适配iPhone6&Plus截图简要说明
& youngxkk&&/&&10-01&&/&&&
UI设计交流新群:&&电商设计群:8083755
有幸在9月25日拿到了iP6和iP6 Plus的真机,恰好又要做适配APP的工作(从iphone5上适配到iphone6和ip6 plus上),所以在真机上研究了下苹果官方在不同分辨率下对系统APP所做的适配。同时在网上也没找到相关的真机对比截图说明什么的,又有朋友问我要IP6和PLUS的真机截图回去自己研究,既然这样,那么干嘛不利用自己已有的资源,让更多的设计师受益呢?所以那就说点什么吧,抛砖引玉,希望大家可以共同研究,少走些弯路,共同成长。之前看过@jingdesign 的关于适配ip6的文章:快速适配iPhone6及plus的诀窍:2.z0./v/30274.html还有@罗磊的文章:Web开发者和设计师必须要知道的 iOS 8 十个变化:2.z0./v/31006.html& & & & & & & & &作为参考(有摘抄部份)。正文:
& & & &首先我们先看一下iphone5,iphone6和iphone6 plus的一些数据:然后我把3个屏幕的App Store界面截图拿来对比一下:(无法查看原图?)点击这里可以查看高清大图:从图上可以看出来:一:Title bar和Tab barip5和ip6的Title bar和Tab bar的高度没变,并且tab bar的icon的大小也没变,只是整栏的宽拉伸了,所以IOS工程师在早期开发的时候如果用的是Autolayout自动布局会很爽,如果是布局写死了,那真是要一个界面一个界面的改了。结论:类似的高度不变,可以直接拉伸宽度的,还有设置界面等,甚至代码写的是靠左对齐和靠右对齐的话间距都不用调。二:Tab bar的icon大小图中标识的是排行榜的大小:ip5=46x46, ip6=46x46,ip6plus=69x69(恰好是46的1.5倍)。结论:iphone6的icon,大多可以直接使用ip5的资源,plus的icon需要把ip5的icon资源x1.5倍即可,(我们当时开发xx软件的时候,android的设计尺寸是基于1080P的,我把android的资源拿出来用在plus上是完全可以的,所以开发android用的是1080P屏幕的设计师有福了。)(在解释一下:例如ip5的某个icon名为:star@2x.png,那么我把android里面相同的icon拿过来改名子为 star@3x.png,直接扔到star@2x.png的同文件夹里面,xcode可以识别为plus的资源的,并且模拟器跑起来后icon的确变成高清的了,和别的没有替换的区别很明显。)二:bannerip5的banner是640x260,ip6是750x304 (即ip5的640x260等比缩放后的大小)。ip6 plus排版已变化,banner图的样式变的和ipad类似,显示3个,其中1个主显示,2个是可预览的。主大小为795x387. 比例和ip5,6都不一样,所以各家app可能需要根据自己的需要去重新排版调整了哦。结论:类似的位图,ip6等比放大即可,plus需要单独重新排版调整。在看一下手机拍的真机截图,Title和Tab bar在真机上的物理高度都是相同的。在看相册的变化(ip6 plus 对比 ip6截图),类似的位图应该都是等比放大的,并没有像 app store单行增加数量,ip6相册单个图片的大小是186x186,plus 的单个大小是309x309.在来看一下桌面icon的大小对比iphone5=120x120 & & &iphone6=120x120 & &&iphone6 plus=180x180 (是iphone6的1.5倍,即@3x)
三分钟为你解密中国最大的视频网站
豆瓣app分析
大话设计师38 - 那些年,被我们拆过台的领导
大屏手机时代,如何重塑界面交互
字体笔画中的连接设计
B类电商业务的Web动效研究与实践
超炫彩光环背景视频教程+PSD源文件下载
#一秒变神经病#第二十三集&&国之画&&布布分享&&&& &&&&
版权所有 京ICP备号-2
迷上了代码!查看: 13626|回复: 2
IOS字体规范与多屏幕适配(1)
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
才可以下载或查看,没有帐号?
移动界面设计由于针对繁杂的设备尺寸,适配和字体规范往往是新手容易头疼的问题。这次主要介绍IOS的设计规范与流程。由于iphone 6的出现,苹果手机的分辨率也多了起来,适配进而也变的复杂。。。
& & & & 先看市面上iPhone4、5、6、6 Plus的分辨率
& & & & 分辨率与像素(分辨率单位是程序所说的单位——点即pt,像素为真实Pixel)
& & & & 1.iphone4分辨率320*480pt,像素640*960px
& & & & 2.iphone5分辨率320*568pt,像素640*1136px
& & & & 3.iphone6分辨率375*667pt,像素750*1334px
& & & & 4.iphone6 Plus分辨率414*736pt,像素(注:Plus屏幕的实际分辨率只有,实际情况是在此分辨率下渲染的图像等比降低到1080P)
& & & & 另外,iPhone6和iPhone 6Plus都有标准模式和放大模式2种分辨率:
& & & & & & & & & & & & & & & &
& & & & 看到如此多的分辨率,是不是有点晕的感觉,仔细拆分:
& & & & 1.iPhone4和iPhone5宽度一样,5只是比4高176像素,所以5和4一套规范即可;
& & & & 2.iPhone6的放大模式分辨率是640*1136,和iPhone5正好相同;
& & & & 3.iPhone6的标准模式分辨率为750*1334,整体放大1.5倍正好是iPhone6 Plus的放大模式。
& & & & 我们来看淘宝购物车的截图(从左到右依次为iPhone4、5、6):
& & & & & & & & & & & & & & & &
& & & & 我们可以看出iPhone 4、5、6共用一套字体大小规范。
& & & & 而iPhone6 plus在放大模式下的字体正好是在此基础上放大了1.5倍:
& & & & & & & & & & & & & & & &
& & & & 看到这里明白了吧,对于字体我们只需要做一套iPhone 6的字号大小规范,Plus上直接放大1.5倍即可。
& & & & 下面我们来看IOS上具体字体常用字号规律;
& & & & 首先,一个视觉舒适的APP界面,字号大小对比要合适,并且各个不同界面大小对比要统一。
& & & & 先说一般规律(72像素/英寸下的字号大小规律):
& & & & 导航栏标题:大概34px-42px;现在标题越来越小,一般34或36比较合适。
& & & & 标签栏文字:20-24px。ios自带应用都是20px。个人认为标签栏时(图标+文字)形式的的话不要大于22比较合适。
& & & & 正文:28px-36px,新闻类基本都在用36,比如网易新闻正文部分。
& & & & 下面是IOS人际界面指南上的具体要求:
& & & & 1)正文样式在大字号下使用 34 px字体大小,最小也不应小于 22 。
& & & & 2)通常来说,每一档文字大小设置的字体大小和行间距的差异是 2 px。一般为了区别开标题和正文字体大小差异要至少为4px。
& & & & 3)标题和正文样式使用一样的字体大小。为了将其和正文样式区分,标题样式使用中等效果。(注意:mac电脑上默认使用黑体就有中等和细体2个选项)。
& & & & 最后,最后关于字号大小规律,最好找比较好的应用截图,然后量出现有规律直接套用即可:
& & & & & & & & & & & & & & & &
& & & & 关于多屏幕适配问题请看IOS字体规范与多屏幕适配(2).教程编号:136413 作者:Victor_J_C 出处:站酷
第二部分在哪里可以看啊~?
Powered by

我要回帖

更多关于 iphone6plus适配问题 的文章

 

随机推荐