參考?微信的多屏適配
目前為止,iPhone屏幕尺寸已經有四種:
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
ios屏幕適配三種方法。可粗略認為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 12NSString *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_DEBUGself.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
?