iOS适配那些事

来源:互联网 发布:同性电影推荐知乎 编辑:程序博客网 时间:2024/04/26 20:05

目前为止,iPhone屏幕尺寸已经有四种:
3.5(inch):1/3G/3GS/4/4S 
4.0(inch):5/5S/5C            -@2x
4.7(inch):6/6S                  -@2x
5.5(inch):6Plus/6Plus       -@3x

看一下iPhone4~6(+)的屏幕高宽比:
iPhone4(s):分辨率960*640,高宽比1.5 
iPhone5(s):分辨率1136*640,高宽比1.775 
iPhone6:分辨率1334*750,高宽比1.779 
iPhone6+:分辨率1920*1080,高宽比1.778

由上面的分辨率可得出结论:
1. iPhone4和iPhone5宽度是一样的, 高度不同所以4和5采用同一套字体规范;
2. iPhone6的放大模式正好和iPhone5的分辨率相同, 所以6和5采用一套字体规范;
3. iPhone6的标准模式为750x1334 px, 放大1.5倍正好是iPhone6 Plus的放大模式分辨率 1125x2001 px, 所以iPhone6 Plus的字体规范等于iPhone6的整体放大1.5倍。
所以: iPhone4、iPhone5、iPhone6共用一套字体规范;而iPhone6 Plus在放大模式下的字体正好是iphone6的基础上放大1.5倍。
 
下面我们来看看iOS上具体字体常用字号规律:
1. 作为对照, 正文样式在大字号下使用34px字体大小, 最小也不应小于22px。
2. 通常来说, 每一档文字大小设置的字体大小和行间距的差异是2px, 一般为了区别开标题和正文 字体大小差异至少要是4px。
3. 标题和正文样式使用一样的字体大小。 为了将其和正文区分开, 标题样式使用中等效果。

可粗略认为iPhone5(s)、6(+)、6S(+)的高宽比是一致的(16:9),即可以等比例缩放。因此可以按宽度适配: 
fitScreenWidth= width*(SCREEN_WIDTH/320) 
这样,共有iPhone3/4/5、6、6+三组宽度,在iPhone6、6+下将按比例横向放大,也就是说我们要适配宽、高、字号大小

iOS控件适配
由于4, 5, 6, 6plus的分辨率不相同, 我们要按下面三种适配规则进行多屏幕适配:
1. 文字流式
这个形式类似于window上文本编辑器的自动换行----- 较宽的屏幕文字显示多一些, 窄的屏幕文字显示少一些。文字根据屏幕的宽度进行自动布局。
显示文字的控件不能给固定值, 要根据屏幕的宽度进行自动布局。
2. 弹性控件
  就是界面元素垂直方向上高度不变; 水平方向上宽度变化时,通过调整元素间距或元素右对齐的方式自适应。
简而言之, 就是控件高度不变, 宽度对屏幕进行适配
3. 等比缩放
  有些元素适配到大屏幕时,例如图片, 在大屏幕上要做等比放大, 这样看着更舒服一些。
总结:
头条一栏: 所有设备上控件的高度一样 , 里面的字体大小也是一样, 这里用了文字弹性控件
图片: 这列根据屏幕的宽度进行了等比缩放适配。字体也是进行了等比适配。 还有文字流式适配。


字体大小适配------纯代码

定义一个宏定义如下:

#define SizeScale (SCREEN_WIDTH != 414 ? 1 : 1.2)

#define kFont(value) [UIFont systemFontOfSize:value * SizeScale]

宏中的1.2是在plus下的大小放大比例。
纯代码中设置字体大小通过使用这个宏来实现整体适配

方法二:

现在产品设计稿有以iPhone5为基准的,也有以iPhone6为基准的,其实没太大影响,因为iPhone5、6、6P的屏幕尺寸比例几乎一样的,所以以iPhone5为基准标注的尺寸,那适配的方法如下:

#define ScreenWidthRatio  (ScreenWidth / 320.0)

#define ScreenHeightRatio (ScreenHeight / 568.0)

#define AdaptedWidthValue(x)  (ceilf((x) * ScreenWidthRatio))

#define AdaptedHeightValue(x) (ceilf((x) * ScreenHeightRatio))

其实就是计算一个比例,然后iPhone6、6P等比放大,这样就保持了iPhone5、6、6P屏幕视觉效果上的一致了。 
控件尺寸思路搞定了,但仅仅控件等比例拉伸,其中的内容也要去适应,例如UILabel的字体大小适应

#define JYTSystemFontWithSize(R)     [UIFont fontWithName: JYTSystemFont size: (AdaptedWidthValue(R))]

字体大小适配------xib或SB
字体大小适配无外乎就是设置UIButton、UILabel、UITextView、UITextField的字体大小

通过创建这几个的类目来实现(Runtime方式的黑魔法method swizzling)

#import <UIKit/UIKit.h>

#import <objc/runtime.h>

/***  Label  ***/

@interface UILabel (Myfont)

@end

/***  button  ***/

@interface UIButton (MyFont)

@end

/***  TextField  ***/

@interface UITextField (myFont)

@end

/***  TextView  ***/

@interface UITextView (myFont)

@end

.m文件

#import "UILabel+Myfont.h"

#define SizeScale ((IPHONE_HEIGHT > 568) ? IPHONE_HEIGHT/568 : 1)

//同设备的屏幕比例(当然倍数可以自己控制)

@implementation UILabel (Myfont)

+ (void)load{

    Method imp = class_getInstanceMethod([self class], @selector(initWithCoder:));

    Method myImp = class_getInstanceMethod([self class], @selector(myInitWithCoder:));

    method_exchangeImplementations(imp, myImp);

}

- (id)myInitWithCoder:(NSCoder*)aDecode{

    [self myInitWithCoder:aDecode];

    if (self) {

        //部分不像改变字体的 tag值设置成333跳过

        if(self.tag != 333){

            CGFloat fontSize = self.font.pointSize;

            self.font = [UIFont systemFontOfSize:fontSize * SizeScale];

        }

    }

    return self;

}

@end

其他控件适配写法类似,在此不一一叙述了


Masonry去自适应ScrollView滚动视图

一般滚动视图ScrollView上下滑动式,使用Masonry可以去自适应内容大小,只要在最后一个控件后面增加一些ScrollView的约束即可,比如:

[_personCenterScrollView makeConstraints:^(MASConstraintMaker *make) {        make.edges.equalTo(weakSelf.view);        make.bottom.mas_equalTo(_EquipmentView.bottom).with.offset(5*Padding);    }];


0 0
原创粉丝点击