1. 程式人生 > >iOS開發~iPhone6及iPhone6P的UI適配

iOS開發~iPhone6及iPhone6P的UI適配

概要

目前為止,iPhone螢幕尺寸已經有四種:

3.5(inch):1/3G/3GS/4/4S

4.0inch:5/5S/5C

4.7inch:6

5.5inch: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))]
實踐
有了思路之後,實踐一下看看效果,首先看一下最終目標效果圖:


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

歡迎一起討論