iOS開發~iPhone6及iPhone6P的UI適配
阿新 • • 發佈：2019-02-17
概要
目前為止，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為基準標註的尺寸，那適配的方法如下：
其實就是計算一個比例，然後iPhone6、6P等比放大，這樣就保持了iPhone5、6、6P螢幕視覺效果上的一致了。#define kScreenWidthRatio (kScreenWidth / 320.0) #define kScreenHeightRatio (kScreenHeight / 568.0) #define AdaptedWidthValue(x) (ceilf((x) * kScreenWidthRatio)) #define AdaptedHeightValue(x) (ceilf((x) * kScreenHeightRatio))
控制元件尺寸思路搞定了，但僅僅控制元件等比例拉伸，其中的內容也要去適應，例如UILabel的字型大小適應，其實也很簡單：
#define kUHSystemFontWithSize(R) [UIFont fontWithName: kULSystemFont size: (AdaptedWidthValue(R))]有了思路之後，實踐一下看看效果，首先看一下最終目標效果圖：
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這樣利用尺寸拉伸，並配合Autolayout，就輕鬆實現了iPhone裝置適配。其中Cell高度自動適應請參考UITableView+FDTemplateLayoutCell第三方庫使用方法。
如果不使用Autolayout，而使用Frame方式，這裡就不介紹了，還是儘快轉向Autolayout吧，還有一些相關內容也很好，想了解可以參考：
http://blog.csdn.net/phunxm/article/details/42174937
http://www.cocoachina.com/ios/20141230/10800.html
歡迎一起討論