【AutoLayout案例04-游戏图片-按钮适配 Objective-C语言】

一、好,我们再看一个案例,

通知

刚才,这个案例,

通知

这么一个案例

通知

这个案例,是什么意思呢,

通知

这里给大家做一个3.5英寸、4.0英寸的屏幕适配,

因为我们这里图片,只有一个,就是4英寸的这么一个图片

什么意思呢,要求我们在3.5英寸的屏幕、和4英寸的屏幕的时候,都能正常显示这个图片,

那么,先给大家做个什么呢,没有屏幕适配的时候,是什么样子

再让大家看一下,这个屏幕适配以后,的这么一个样子,

通知

下面,我把这个思路,再给大家捋一下

因为我们只做3.5英寸、4英寸的适配吗,所以说,这里,

1)先把控制器改成4英寸,因为我们图片,没有更大的图片了

2)再一个,就是我们设置适配的一个大致思路,首先,设置图片框水平居中,垂直居中

3)设置图片距离左右是0,高度为568

4)修改距离左右为-16(或者把Constraint勾去掉,左右依然设置为0)

5)适配第一个按钮(设置按钮的大小,距离左边5,垂直居中对齐,然后修改按钮的垂直对齐时的constant值)。

6)依次适配每个按钮,两个按钮在同一条水平线上是要设置垂直居中

通知
通知

新建一个项目

通知

Name:007游戏首页图片屏幕适配

通知

看看

通知

先把控制器改成4英寸的

然后,在控制器里面放一个图片框

通知

让这个图片框填满整个屏幕

通知

是这个

通知

home_bg

好,拷过来

通知

把这个拷过来以后,接下来,我们看一下,在我们这个控制器里面

通知

在这个图片框中,设置一下图片,是那个home_bg

通知

在当前,4英寸的这个屏幕上,我们把它改成iPhone5S

通知

在4英寸屏幕下,因为这个图片本身,就是4英寸的大小

然后呢,在我们这个4英寸的屏幕下,是不是显示是刚刚好

这里显示,是不是刚刚好

然后,再把它改成我们的3.5英寸,给大家看一下

然后呢,我把这里的启动,改成我们的iPhone4S

通知

command + R

通知

看到啥了

是不是下面这边,短了不少

上面这边,是不是还是留着,长这么多啊

看到了吗

通知

下边短了不少,上边是不是留出来不少空白啊

你说,这样不行吗

这样不行吧

这样是不是,我们下边这些按钮,就不全了吧

按钮都不全了

我们希望的效果,是什么效果呢

我们希望这里在iPhone5S、iPhone4S、在4英寸、3.5英寸下面

运行效果是什么效果呢,我们希望是这样的效果

如果说,我们现在是4英寸的主机

通知

这时候,会把我们整个这个图片,都显示出来

通知

如果是3.5英寸的屏幕,这个时候,怎么显示呢,

只显示中间这部分,就够了,

通知

这个美工做图,其实它还是挺聪明的

通知

上边是不是一堆砖头

下边是不是一堆地板

这堆地板,是不是要和不要,没啥关系

你在4英寸的屏幕上,你把它整个儿都显示出来,是不是也挺好的

你到3.5英寸下的时候,你把这个上面砖头去几块儿,下边这个地板少几块儿,是不是只显示中间这部分,也可以吧

这也是一种思路吗,这也是一种思路

所以,我们就用这种思路,做一下这个屏幕适配

我们怎么做呢,

二、屏幕适配

1.知道我现在在3.5英寸下、4英寸下、屏幕适配的思路吧

1)在4英寸下,显示整个图片

2)在3.5英寸下,只显示中间那一部分,

把上面的砖头,去掉,不要它了

把下面的地板,也去掉,不要它了

通知

你看看,在3.5英寸的屏幕下,是如何显示的

通知

在3.5英寸下,砖头一堆,下面的按钮,是不是少了

这样你就不合适了吧

我把上边的砖头去了,把下边的地板去一部分,中间的按钮,正常显示

我要的是这样的效果

2.首先,选中这个图片框

通知

让这个图片框,是不是永远是居中显示啊

无论手机怎么做,是不是它永远是居中显示啊

好,我们选中这个图片框,设置它的约束

通知

让它,水平居中、垂直居中

通知

然后,把它勾上,点增加

通知

设完水平居中、垂直居中以后,这里把它更新一下frame

通知

这里的警告,给它解决一下

通知

点击Fix Misplacement

解决完毕以后

通知

解决完毕以后,看到啥了,是不是由于这个图片本身是比较大的,直接是不是放到很大很大了

这样做,肯定不是我们想要的吧

我们要的是这个图片,距离手机屏幕两边是0,这个图片,别超过手机宽度,

这个图片,距离手机两边,是不是都是0啊

那我们就设置一下,注意看

再选中这张图片

通知

然后,让它设置距离左右的距离

通知

先把这个勾去掉

距离左边、右边的竖线选上

通知

把这个下拉菜单打开,看一下,选上View

数字改成0

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/81931.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java集合框架扫盲

文章目录 一、故事背景二、知识点主要构成1、List1.1、ArrayList1.1.1、添加元素1.1.2、删除元素1.1.3、修改元素1.1.4、遍历元素 1.2、LinkedList1.2.1、添加元素1.2.2、删除元素1.2.3、修改元素1.2.4、遍历元素 1.3、Vector 2、Set2.1、HashSet2.2、LinkedHashSet2.3、TreeSe…

启动audit服务报错

启动centos audit服务报错 错误信息 $service auditd restart Stopping logging: [FAILED] Redirecting start to /bin/systemctl start auditd.service Job for auditd.service failed because the control process exited with error code. See “systemctl status auditd.s…

java-CyclicBarrier、CountDownLatch、Semaphore 的用法以及 volatile 关键字的作用

CyclicBarrier、CountDownLatch、Semaphore 的用法 1. CountDownLatch(线程计数器 ) CountDownLatch 类位于 java.util.concurrent 包下,利用它可以实现类似计数器的功能。比如有一个任务 A,它要等待其他 4 个任务执行完毕之后才…

Selenium环境+元素定位大法

selenium 与 webdriver Selenium 是一个用于 Web 测试的工具,测试运行在浏览器中,就像真正的用户在手工操作一样。支持所有主流浏览器 WebDriver 就是对浏览器提供的原生API进行封装,使其成为一套更加面向对象的Selenium WebDriver API。 使…

08-信息收集-架构、搭建、WAF等

信息收集-架构、搭建、WAF等 信息收集-架构、搭建、WAF等一、前言说明二、CMS识别技术三、源码获取技术四、架构信息获取技术五、站点搭建分析1、搭建习惯-目录型站点2、搭建习惯-端口类站点3、搭建习惯-子域名站点4、搭建习惯-类似域名站点5、搭建习惯-旁注,c段站点…

Python“牵手”易贝(Ebay)商品列表数据,关键词搜索ebayAPI接口数据,ebayAPI接口申请指南

Ebay平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范, EbayAPI接口是指通过编程的方式,让开发者能够通过HTTP协议直接访问Ebay平台的数据,包括商品信息、店铺信息、物流信息等,从而实现Ebay平…

MediaPlayer音频与视频的播放介绍

作者:向阳逐梦 Android多媒体中的——MediaPlayer,我们可以通过这个API来播放音频和视频该类是Androd多媒体框架中的一个重要组件,通过该类,我们可以以最小的步骤来获取,解码和播放音视频。 它支持三种不同的媒体来源…

Spring Boot进阶(58):集成PostgreSQL数据库及实战使用 | 万字长文,超级详细

1. 前言🔥 PostgreSQL是一种广泛使用的开源关系型数据库,具有可靠性高、性能优异、拥有丰富的数据类型和扩展等优点,越来越多的企业和开发者开始使用它来存储和管理数据。而Spring Boot是一种快速开发的框架,可以简化开发过程并提…

【业务功能篇77】微服务-OSS对象存储-上传下载图片

3. 图片管理 文件存储的几种方式 单体架构可以直接把图片存储在服务器中 但是在分布式环境下面直接存储在WEB服务器中的方式就不可取了,这时我们需要搭建独立的文件存储服务器。 3.1 开通阿里云服务 针对本系统中的相关的文件,图片,文本等…

Django基础3——视图函数

文章目录 一、基本了解1.1 Django内置函数1.2 http请求流程 二、HttpRequest对象(接受客户端请求)2.1 常用属性2.2 常用方法2.3 服务端接收URL参数2.4 QueryDict对象2.5 案例2.5.1 表单GET提交2.5.2 表单POST提交2.5.3 上传文件 三、HttpResponse对象&am…

时序预测 | MATLAB实现PSO-KELM粒子群算法优化核极限学习机时间序列预测(含KELM、ELM等对比)

时序预测 | MATLAB实现PSO-KELM粒子群算法优化核极限学习机时间序列预测(含KELM、ELM等对比) 目录 时序预测 | MATLAB实现PSO-KELM粒子群算法优化核极限学习机时间序列预测(含KELM、ELM等对比)预测效果基本介绍模型介绍程序设计参…

【AWS】安装配置适用于 Eclipse 的 AWS 工具包

目录 0.环境 1.步骤 1)安装Eclipse 2)安装AWS工具包 ① 在这个路径下点开安装软件的界面 ② 点击【Add】打开添加窗口 ③ 输入aws的工具包地址 ④ 勾选需要的工具,点击【Next】 ⑤ 将要安装的工具,点击【Next】 ⑥ 选择接受…