设置TabBar分栏控制器上图片的大小问题
我们都知道,iOS因为屏幕分辨率的问题,UID在交付我们iOS开发人员程序配图的时候,一般是三套图,分别对应三种不同的分辨率,对不同size的屏幕系统会自动使用不同像素的图片,我们只需要在命名时给三套图统一命名@1x、@2x和@3x就可以了。
那么为什么会有三套图呢?
这是根据iPhone不断更新而随之出现的。iPhone4之前的iPhone3G/iPhone3GS甚至于更早的iPhone一二代手机,屏幕特点是一个点位只有一个像素;而iPhone4开始到iPhone6/iPhone6s,使用的就是Retina屏幕了,特点是一个点位放置了两个像素,这样在不扩大屏幕的前提下,屏幕的像素就扩大了四倍,分辨率也随之扩大了整整一倍;而iPhone6 Plus/iPhone6s Plus 带给我们的并不仅仅是5.5英寸大屏幕的舒适,而提高更显著的是它的像素数量进一步扩大,屏幕尺寸仅仅从iPhone6/6s的375*667变为414*736,而像素数量则从750*1334增加到1242*2208,分辨率扩大了整整2.74倍。或许从数据上我们能更直观的看出分辨率的变化。
这就是三套图的根本原因了,就是因为要匹配苹果所有机型的屏幕分辨率,也就是像素点位的问题。
目前新接手的项目,项目中所有切图只有一套图。因为并不了解公司的习惯问题所以没有发问,不过最近跟公司的UID姐姐一说,她也疑惑为什么她接手的套图都只有一套,但也没有跟老板说。我们都感叹终于治好了彼此的三套图强迫症,但这是后话。
昨天合成了老板从外包公司那儿拿回的新功能后,喜滋滋的给老板看,没想到老板提出了一个我完全没想到问题,为什么你的分栏控制器上的图片这么大,看着一点儿也不协调。
哪儿大了?我怎么没注意?
这是我们的项目TabBar

这是外包给的项目TabBar

貌似确实是有点儿大。强迫症又犯了,这是什么情况,总不是我眼睛出了问题吧。
下面开始尝试:
1.摘下眼镜揉了揉眼睛,擦了擦眼镜,还是原样。排除眼花了的原因;
2.接下来我就想到之前跟我纠缠了很久的UITabBar上的imageInsets的问题了(详情见我之前的博文
设置UITabBarController上ImageInsets后点击不断缩小)。我的项目(简称项目1)的ImageInsets是在storyBoard上直接修改的,而外包公司的项目(简称项目2)是手写的代码,而且使用最终加到分栏控制器上的UINavigationController调到的tabBarController.tabBar。难道数值上有问题?
经过各种排列组合的尝试(过程不表),确认使用导航控制器还是视图控制器对调到的ImageInsets毫无影响,数值上两者也完全相同都是(0, 0, 0, 0),所以基本排除这方面的问题。
ps:至于调到tabBarItem的imageView后改变frame那是想都别想,没有这个接口。哎我也是什么招都想过了。或者有其他办法可以实现改变imageView的frame的,希望分享一下。
3。上面提到了,不管项目1还是项目2都只有一套图,而我默认都放在了@2x里面。难道与这个有关系?
放到@1x中

放到@3x中

@1x就比较呵呵了。。@3x似乎还可以,不过就是有点儿小了(哎强迫症又犯了)。看来此路行不通啊。
4.只好再一次查看两者之间的各种区别突然让我发现了一点:项目1的图片是72*72的像素,而项目2是60*60。
看到这儿各位应该就明白了吧。
我们习惯上的各种切图的大小,@1x一般是30*30,@2x相对应的是60*60,@3x则是90*90,分别对应三种分辨率。
而在实际使用当中,由于UIImage会根据UIImageView的frame和自身的缩放属性来决定缩放比例问题,所以图片自身的尺寸并不为我们看重,甚至无视了其30*30或60*60的必然性。而当我们无法改变上面的关于UIImageView和UIImage的属性的时候,我们才会看到切图自身的属性。
利用系统的切图工具将72*72缩放为60*60,问题解决。
最后再说一句,为什么会切出72*72这种尺寸的图片呢。。难道有什么特殊用法吗。
不过之后就能收到三套标准图啦,之前的都过去吧!
设置TabBar分栏控制器上图片的大小问题的更多相关文章
- 分栏控制器和导航栏目tabBarItem,UINavigationController
//// AppDelegate.m// TabBarControllerDemo//// Created by qianfeng on 15/9/22.// Copyright (c) 20 ...
- 安卓手机和ios手机上图片未设置宽度可能导致ios上图片贼小
处理方法: 设置固定宽度,高度自适应
- 微信小程序入门四: 导航栏样式、tabBar导航栏
实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...
- ActiveReports 报表应用教程 (4)---分栏报表
在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...
- Finder 的分栏显示模式宽度调整
Mac系统下设置 Finder 分栏默认宽度的方法 苹果电脑 Mac OS X 系统中最重要的功能:Finder 有四种显示模式:图标.列表.分栏.Cover Flow,很多 Mac “老手” ...
- 设置TabBar图片
设置TabBar图片 // 拿到 TabBar 在拿到想应的item UITabBar *tabBar = _tabBarController.tabBar; UITabBarItem *item0 ...
- Word 分栏页码,一个页面两个不同页码的设置
1. 前言 在一些报纸.杂志中,我们可以见到各种各样的排版风格效果,其中有一种效果是一个页面设置了两栏,并且每栏下面都有不同的页码,那么,这种效果是如何实现的呢?这种页码在Word中默认页码样式中是没 ...
- css遮罩蒙版效果 分栏效果
mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态 要展示的图像 使用mask之后产生的效果图 首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...
- CSS实现各类分栏布局
在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...
随机推荐
- php websocket聊天室
要理解socket就要先理解http和tcp的区别,简单说就是一个是短链,一个是长链,一个是去服务器拉数据,一个是服务器可以主动推数据. 而socket就是应用层与TCP/IP协议族通信的中间软件抽象 ...
- Nodejs(待补充)
Nodejs从入门到精通(待补充) 首先安装n模块: npm install -g n 第二步: 升级node.js到最新稳定版 n stable 是不是很简单?! n后面也可以跟随版本号比如: n ...
- POJ 1094 Sorting It All Out(经典拓扑+邻接矩阵)
( ̄▽ ̄)" //判环:当入度为0的顶点==0时,则有环(inconsistency) //判序:当入度为0的顶点仅为1时,则能得到有序的拓扑排序,否则无序 //边输入边判断,用contin ...
- hdu_5813_Elegant Construction(xjb搞)
题目链接:hdu_5813_Elegant Construction 题意: 给你n个点,每个点要可以到达ai个点,可以直接可以间接,不能有环,问是否可行,如果可行就任选一种方式连接,并输出连接的边数 ...
- 浙大pat 1062题解
1061. Dating (20) 时间限制 50 ms 内存限制 32000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Sherlock Holmes ...
- Struts文件上传
首先要加入上传文件需要的jar文件 commons-fileupload-1.2.1.jar commomons-io-1.3.2.jar不同版本的strutsjar文件的版本也可能不同,一般在配置s ...
- Struts入门学习(三)---自定义类型转换器
类型转换器是将浏览器传递的参数进行转换为了与服务器端的参数匹配,先举个例子如果我们想往服务器传递日期类型的参数时我们要怎么让浏览器传过去的让服务器明白 我们新建一个类 ConverterTest.ja ...
- ActiveMQ in Action(4) - Security
关键字: activemq 2.4 Security ActiveMQ支持可插拔的安全机制,用以在不同的provider之间切换.2.4.1 Simple Authentication Plug ...
- LeetCode OJ 121. Best Time to Buy and Sell Stock
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- java.util.Iterator
public interface Iterator<E>: 对 collection 进行迭代的迭代器. 方法摘要: boolean hasNext() 如果仍有元素可以迭代,则返回 tr ...