设置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),它可以 ...
随机推荐
- linux 添加定时任务脚本
主要分2个步骤第一步 编写要定时执行的脚本touch mytask.shvi mytask.sh里面写入:#! /bin/bashecho `date` >> /tmp/mytask.l ...
- 【LeetCode】462. Minimum Moves to Equal Array Elements II
Given a non-empty integer array, find the minimum number of moves required to make all array element ...
- F#中的自定义隐式转换
我们知道隐式变换在可控情况下会使代码变得简洁.熟悉C#的都知道C#中可以自定义隐式变换,例如 public class A { private int data; public static impl ...
- Chapter 15_2 编写模块的基本方法
在Lua中创建一个模块最简单的方法是:创建一个table. 并将所有需要导出的函数放入其中,最后返回这个table. 下例中的inv声明为程序块的局部变量,就是将其定义成一个私有的名称: local ...
- 一把刀终极配置 For XP v2.0 免费绿色版
软件名称: 一把刀终极配置 For XP 软件语言: 简体中文 授权方式: 免费软件 运行环境: WinXP 软件大小: 924KB 图片预览: 软件简介: 一把刀终极配置 For XP,用于快速方便 ...
- HttpServletRequest对象(一)
一:HttpServletRequest介绍: 代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中, 二:Request常用的方法 1):获得客户端信 ...
- matlab里的nargin
nargin是用来判断输入变量个数的函数,这样就可以针对不同的情况执行不同的功能.
- SqlSever 查询基本
查询语句: SQL sever 查询语句: 1.查询所有字段: select * from UserInfo 2.条件筛选 (如查询UserInfo中的UserName) select UserNam ...
- 自定义Button成进度条
ProgressButton源码: package com.example.progressbutton; import android.content.Context; import android ...
- POJ 1966 ZOJ 2182 Cable TV Network
无向图顶点连通度的求解,即最少删除多少个点使无向图不连通. 我校“荣誉”出品的<图论算法理论.实现及其应用>这本书上写的有错误,请不要看了,正确的是这样的: 对于每个顶点,分成两个点,v和 ...