iOS开发~iPhone6及iPhone6P的UI适配

2023-10-13 01:10

本文主要是介绍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  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


这样利用尺寸拉伸,并配合Autolayout,就轻松实现了iPhone设备适配。其中Cell高度自动适应请参考 UITableView+FDTemplateLayoutCell第三方库使用方法。

如果不使用Autolayout,而使用Frame方式,这里就不介绍了,还是尽快转向Autolayout吧,还有一些相关内容也很好,想了解可以参考:

http://blog.csdn.net/phunxm/article/details/42174937

http://www.cocoachina.com/ios/20141230/10800.html


欢迎一起讨论


Demo下载


这篇关于iOS开发~iPhone6及iPhone6P的UI适配的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/199702

相关文章

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”,帮你按时关掉电脑,而且全程不需要你多做

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode(VSCode)中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境:详细教程1. 什么是 VSCode?2. 安装 VSCo

C#图表开发之Chart详解

《C#图表开发之Chart详解》C#中的Chart控件用于开发图表功能,具有Series和ChartArea两个重要属性,Series属性是SeriesCollection类型,包含多个Series对... 目录OverviChina编程ewSeries类总结OverviewC#中,开发图表功能的控件是Char

鸿蒙开发搭建flutter适配的开发环境

《鸿蒙开发搭建flutter适配的开发环境》文章详细介绍了在Windows系统上如何创建和运行鸿蒙Flutter项目,包括使用flutterdoctor检测环境、创建项目、编译HAP包以及在真机上运... 目录环境搭建创建运行项目打包项目总结环境搭建1.安装 DevEco Studio NEXT IDE

Python开发围棋游戏的实例代码(实现全部功能)

《Python开发围棋游戏的实例代码(实现全部功能)》围棋是一种古老而复杂的策略棋类游戏,起源于中国,已有超过2500年的历史,本文介绍了如何用Python开发一个简单的围棋游戏,实例代码涵盖了游戏的... 目录1. 围棋游戏概述1.1 游戏规则1.2 游戏设计思路2. 环境准备3. 创建棋盘3.1 棋盘类

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert