我们都知道,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分栏控制器上图片的大小问题的更多相关文章

  1. 分栏控制器和导航栏目tabBarItem,UINavigationController

    ////  AppDelegate.m//  TabBarControllerDemo////  Created by qianfeng on 15/9/22.//  Copyright (c) 20 ...

  2. 安卓手机和ios手机上图片未设置宽度可能导致ios上图片贼小

    处理方法: 设置固定宽度,高度自适应

  3. 微信小程序入门四: 导航栏样式、tabBar导航栏

    实例内容 导航栏样式设置 tabBar导航栏 实例一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { & ...

  4. ActiveReports 报表应用教程 (4)---分栏报表

    在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...

  5. Finder 的分栏显示模式宽度调整

    Mac系统下设置 Finder 分栏默认宽度的方法     苹果电脑 Mac OS X 系统中最重要的功能:Finder 有四种显示模式:图标.列表.分栏.Cover Flow,很多 Mac “老手” ...

  6. 设置TabBar图片

    设置TabBar图片 // 拿到 TabBar 在拿到想应的item UITabBar *tabBar = _tabBarController.tabBar; UITabBarItem *item0 ...

  7. Word 分栏页码,一个页面两个不同页码的设置

    1. 前言 在一些报纸.杂志中,我们可以见到各种各样的排版风格效果,其中有一种效果是一个页面设置了两栏,并且每栏下面都有不同的页码,那么,这种效果是如何实现的呢?这种页码在Word中默认页码样式中是没 ...

  8. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  9. CSS实现各类分栏布局

    在CSS中,实现分栏布局有两种方法.第一种方法是使用四种CSS定位选项(absolute .static.relative和fixed)中的绝对定位(absolute positioning),它可以 ...

随机推荐

  1. OSCache 使用

    引入OSCache的jar包 package com.sun.utils; import java.util.Date; import com.opensymphony.oscache.base.Ne ...

  2. Java 泛型 泛型方法

    Java 泛型 泛型方法 @author ixenos 泛型方法可以定义在普通类中,也可以定义在泛型类中 类型变量放在修饰符(如public static)后面,返回类型的前面 一个static方法无 ...

  3. Graph Algorithm

    1.定义 A graph consists of a set of vertices V and a set of edges E. Each edge is a pair (v, w), where ...

  4. use include to read a file

    #include<iostream> #include<fstream> using namespace std; void process(string filename) ...

  5. ocean所用的蝴蝶纹理

    #include <ork/render/FrameBuffer.h> #include <ork/scenegraph/SceneManager.h> #include &l ...

  6. .Net Core 第三方工具包整理

    本地日志[NLog.Extensions.Logging]:https://github.com/NLog/NLog.Extensions.Logging

  7. ejabberd模块开发

    参考: http://anders.conbere.org/journal/ http://www.process-one.net/en/wiki/ejabberd_module_developmen ...

  8. SQL函数学习(一):substring()函数

    秒懂例子: substring('98765',-1,3) 结果:9 substring('98765',0,3) 结果:98 substring('98765',1,3) 结果:987 在操作sql ...

  9. caffe层解读系列-softmax_loss

    转自:http://blog.csdn.net/shuzfan/article/details/51460895 Loss Function softmax_loss的计算包含2步: (1)计算sof ...

  10. POJ1613 147/思维题

    题目链接[https://www.oj.swust.edu.cn/problem/show/1613] 题意:输出第K小的由1.4.7数字组成的数字. 解题过程:1.4.7.11.14.17.41.4 ...