微信字体尺寸适配:
https://mp.weixin.qq.com/s?__biz=MzAwNDY1ODY2OQ==&mid=207113485&idx=1&sn=c49615df4092cfc45a849d2e791fe5d8&scene=1&srcid=05042VAYQkR4KYdlTqltSmYh&pass_ticket=SCmaTqaAWpOx8%2Flb04ID22I49voiHBn1E%2B5oh7jKkD8%3D#rd
一文让你彻底了解iOS字体相关知识
http://www.cnblogs.com/dsxniubility/p/4699352.html
目前为止,iPhone屏幕尺寸已经有四种:
3.5(inch):1/3G/3GS/4/4S
4.0(inch):5/5S/5C
4.7(inch):6
5.5(inch):6Plus
看一下iPhone4~6(+)的屏幕高宽比:
iPhone4(s):分辨率960*640,高宽比1.5
iPhone5(s):分辨率1136*640,高宽比1.775
iPhone6:分辨率1334*750,高宽比1.779
iPhone6+:分辨率1920*1080,高宽比1.778
可粗略认为iPhone5(s)、6(+)的高宽比是一致的(16:9),即可以等比例缩放。因此可以按宽度适配:
fitScreenWidth= width*(SCREEN_WIDTH/320)
这样,共有iPhone3/4/5、6、6+三组宽度,在iPhone6、6+下将按比例横向放大,也就是说我们要适配宽、高、字号大小(如果说Android屏幕适配是地狱一般,那目前来看iPhone屏幕适配还是很美好的)
适配思路
现在产品设计稿有以iPhone5为基准的,也有以iPhone6为基准的,其实没太大影响,因为iPhone5、6、6P的屏幕尺寸比例几乎一样的,所以以iPhone5为基准标注的尺寸,那适配的方法如下:
#define kScreenWidthRatio (kScreenWidth / 320.0)
#define kScreenHeightRatio (kScreenHeight / 568.0)
#define AdaptedWidthValue(x) (ceilf((x) * kScreenWidthRatio))
#define AdaptedHeightValue(x) (ceilf((x) * kScreenHeightRatio))
其实就是计算一个比例,然后iPhone6、6P等比放大,这样就保持了iPhone5、6、6P屏幕视觉效果上的一致了。
控件尺寸思路搞定了,但仅仅控件等比例拉伸,其中的内容也要去适应,例如UILabel的字体大小适应,其实也很简单:
#define kUHSystemFontWithSize(R) [UIFont fontWithName: kULSystemFont size: (AdaptedWidthValue(R))]
实践
有了思路之后,实践一下看看效果,首先看一下最终目标效果图:
置顶
iOS开发~iPhone6及iPhone6P的UI适配
Demo简介:
1、利用TableView展示数据,其中TableView的headerView是滚动的广告,整体UI布局使用相对布局(Autolayout);
2、Autolayout用的是代码实现方式,借助与第三方库Masonry;
3、headerView的滚动广告实现是借助于第三方库SDCycleScrollView;
4、图片下载借助与第三方库SDWebImage;
5、UITableViewCell的自适应高度借助与第三方库UITableView+FDTemplateLayoutCell实现。
新建项目
使用Xcode新建项目后,由于使用到很多第三方,所以使用CocoPods,其中修改Podfile:
platform :ios, ‘7.0’
pod ‘Masonry’
pod ‘SDCycleScrollView’
pod ‘UITableView+FDTemplateLayoutCell’
pod ‘SDWebImage’
实现TableView
1、创建TableView,命名为newslistView:
@property (nonatomic, strong) UITableView *newslistView;
具体实现不说了,介绍一下TableView的布局,这里TableView沾满ViewController的View:
[self.newslistView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
2、实现TableViewHeader
- (void) loadTableViewHeaderView {
SDCycleScrollView * cycleScrollView = [SDCycleScrollView cycleScrollViewWithFrame:CGRectMake(0, 0, kScreenWidth, AdaptedHeightValue(SDCycleScrollViewHeight)) imageURLStringsGroup:nil]; // 模拟网络延时情景
cycleScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentRight;
cycleScrollView.delegate = self;
cycleScrollView.showPageControl = YES;
cycleScrollView.pageControlStyle = SDCycleScrollViewPageContolStyleAnimated;
cycleScrollView.pageControlAliment = SDCycleScrollViewPageContolAlimentCenter;
cycleScrollView.dotColor = [UIColor whiteColor]; // 自定义分页控件小圆标颜色
cycleScrollView.placeholderImage = [UIImage imageNamed:@”detail_top”];
[self.view addSubview:cycleScrollView];
cycleScrollView.imageURLStringsGroup = [self.dataDictionary valueForKey:@"advertisement"];
self.newslistView.tableHeaderView = cycleScrollView;
}
这里使用到了 AdaptedHeightValue(SDCycleScrollViewHeight)来适应屏幕尺寸,4/4S设备的TableViewHeader高度就小一些,6和6P的TableViewHeader高度就大一些,因为我们是已5代设备为参考实现的产品设计稿。
3、实现TableViewCell
#define UI_DEBUG 0
#define ULAppearanceFontSizeMiddle 13
#define ULAppearanceFontSizeSmall 12
NSString *const NewsListCellIdentifier = @"NewsListCellIdentifier";
static const CGFloat ULNewsListCellNewsimageViewMarginLeft = 10.0;
static const CGFloat ULNewsListCellNewsimageViewWidth = 100.0;
static const CGFloat ULNewsListCellNewsimageViewHeight = 80.0;
static const CGFloat ULNewsListCellTitleLabelMarginTop = 10.0;
static const CGFloat ULNewsListCellTitleLabelMarginLeft = 10.0;
static const CGFloat ULNewsListCellTitleLabelMarginRight = 10.0;
static const CGFloat ULNewsListCellTitleLabelHeight = 20.0;
static const CGFloat ULNewsListCellContentLabelMarginTop = 10.0;
static const CGFloat ULNewsListCellContentLabelMarginBottom = 10.0;
static const CGFloat ULNewsListCellLineViewMarginLeft = 10.0;
static const CGFloat ULNewsListCellLineViewMarginRight = 10.0;
static const CGFloat ULNewsListCellLineViewHeight = 0.5;
@interface NewsListCell ()
@property (nonatomic, strong) UIImageView *newsImageView;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UILabel *contentLabel;
@property (nonatomic, strong) UIView *lineView;
@end
@implementation NewsListCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
#if UI_DEBUG
self.contentView.backgroundColor = [UIColor redColor];
#endif
[self.contentView addSubview:self.newsImageView];
[self.contentView addSubview:self.titleLabel];
[self.contentView addSubview:self.contentLabel];
[self.contentView addSubview:self.lineView];
[self makeConstraintSubviews];
}
return self;
}
- (void) makeConstraintSubviews {
[self.newsImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(self.contentView.mas_left).offset(AdaptedWidthValue(ULNewsListCellNewsimageViewMarginLeft));
make.size.mas_equalTo(CGSizeMake(AdaptedWidthValue(ULNewsListCellNewsimageViewWidth), AdaptedHeightValue(ULNewsListCellNewsimageViewHeight)));
make.centerY.equalTo(self.contentView.mas_centerY);
}];
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.contentView.mas_top).offset(AdaptedHeightValue(ULNewsListCellTitleLabelMarginTop));
make.left.equalTo(self.newsImageView.mas_right).offset(AdaptedWidthValue(ULNewsListCellTitleLabelMarginLeft));
make.right.equalTo(self.contentView.mas_right).offset(-AdaptedWidthValue(ULNewsListCellTitleLabelMarginRight));
make.height.mas_equalTo(AdaptedHeightValue(ULNewsListCellTitleLabelHeight));
// make.bottom.equalTo(self.contentLabel.mas_top).offset(-AdaptedHeightValue(ULNewsListCellContentLabelMarginTop));
}];
[self.contentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self.titleLabel);
make.top.equalTo(self.titleLabel.mas_bottom).offset(AdaptedHeightValue(ULNewsListCellContentLabelMarginTop));
make.bottom.equalTo(self.lineView.mas_bottom).offset(-AdaptedHeightValue(ULNewsListCellContentLabelMarginBottom));
}];
[self.lineView mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.contentView.mas_bottom).offset(-ULNewsListCellLineViewHeight);
make.left.equalTo(self.contentView.mas_left).offset(AdaptedWidthValue(ULNewsListCellLineViewMarginLeft));
make.right.equalTo(self.contentView.mas_right).offset(-AdaptedWidthValue(ULNewsListCellLineViewMarginRight));;
make.height.mas_equalTo(ULNewsListCellLineViewHeight);
}];
}
- (void)configureWithData:(News *) news {
[self.newsImageView sd_setImageWithURL:[NSURL URLWithString:news.imageUrl]];
self.titleLabel.text = news.title;
self.contentLabel.text = news.content;
}
#pragma mark - Getters
- (UIImageView *) newsImageView {
if (!_newsImageView) {
_newsImageView = [[UIImageView alloc] init];
#if UI_DEBUG
_newsImageView.backgroundColor = [UIColor greenColor];
#endif
}
return _newsImageView;
}
- (UILabel *) titleLabel {
if (!_titleLabel) {
_titleLabel = [[UILabel alloc] init];
_titleLabel.font = kUHSystemFontWithSize(ULAppearanceFontSizeMiddle);
_titleLabel.textColor = [UIColor blackColor];
#if UI_DEBUG
_titleLabel.backgroundColor = [UIColor lightGrayColor];
#endif
}
return _titleLabel;
}
- (UILabel *) contentLabel {
if (!_contentLabel) {
_contentLabel = [[UILabel alloc] init];
_contentLabel.font = kUHSystemFontWithSize(ULAppearanceFontSizeSmall);
_contentLabel.textColor = [UIColor grayColor];
_contentLabel.numberOfLines = 0;
_contentLabel.lineBreakMode = NSLineBreakByWordWrapping;
_contentLabel.textAlignment = NSTextAlignmentLeft;
#if UI_DEBUG
_contentLabel.backgroundColor = [UIColor brownColor];
#endif
}
return _contentLabel;
}
- (UIView *) lineView {
if (!_lineView) {
_lineView = [[UIView alloc] init];
_lineView.backgroundColor = [UIColor lightGrayColor];
}
return _lineView;
}
@end