设置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这种尺寸的图片呢。。难道有什么特殊用法吗。

  不过之后就能收到三套标准图啦,之前的都过去吧!

时间: 2024-10-07 08:02:57

设置TabBar分栏控制器上图片的大小问题的相关文章

分栏控制器与导航控制器的联合使用-主流框架

现在的一些主流的框架基本上是按 分栏控制器和导航控制器配合使用的 导航控制器负责横向切换 分栏控制器是控制纵向的切换 我们应该研究 一些主流框架的实现原理 在此基础上提升的速度才会比较快 这里只是给大家抛砖,希望大家能够学习到一些知识 我们所说的栈控制器 -本质上就是一个数组 ,用于管理每个页面 直接上代码了: // // AppDelegate.h // 88888-tabbar #import <UIKit/UIKit.h> @interface AppDelegate : UIRespo

如何设置Matlab输出到Word中图片的大小

方法一:快速型核心方法:设置Word显示比例100%,Matlab的图像大小与屏幕所见的相同:根据Word的排版要求,估计Matlab图像在Word中的大小,进而调整图像大小. 具体操作:(以下操作应对图像绘制完成后进行,图像绘制中字体大小.线宽等都与排版需要一致,比如8号字体,需要故意设置很大再缩小) (1)在Matlab图像窗口中,选择Edit--Copy Options--Preferences --match screen size(所见即所得) (2)将Word的显示比例设置成100%

设置导航栏控制器背景色

效果 说明 1. 去掉了原始导航栏控制器上面的黑线 2. 可以定制背景透明度 源码 // // AppDelegate.m // UINavigationControllerSet // // Created by YouXianMing on 15/9/1. // Copyright (c) 2015年 YouXianMing. All rights reserved. // #import "AppDelegate.h" #import "ViewController.h

导航状态栏(UINavigationBar)和分栏状态栏(UITabBar)

//*************导航状态栏(UINavigationController)*************** 1.在导航控制器中,所有的子视图控制器共用一个导航状态栏 UINavigationBar *navBar = self.navigationController.navigationBar 2.可设置导航栏的显示风格 navBar.barStyle = UIBarStyleDefault; 3.可设置导航栏的不透明度,默认为YES(不透明) //如果设置为透明,则子视图的左上角

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

原文:ActiveReports 报表应用教程 (4)---分栏报表 在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印等.本文主要讲解如何在 ActiveReports 中实现横向分栏.纵向分栏和分组分栏报表. 1.横向分栏报表 1.1.在 ASP.NET 应用程序中添加一个名为 rptAcrossDown.cs 的 ActiveReports

分栏报表制作攻略

一.分栏的意义 我们常常会遇到一些列数很少行数很多的报表,这种报表窄窄长长,打印在一张 A4 纸上,横向留出大片空白:或者行数很少,列数很多的报表,打印在 A4 纸上,纵向留出大片空白·····这些情况下不但浪费张纸而且不美观,不方便用户查阅. 为了解决这种问题,我们提出了分栏的解决方案,把数据按照一定的规则分栏分块的显示在纸张上.下面我们来具体看一下润乾报表是如何解决分栏问题的. 二.分栏的实现方法 我们吧分栏大致分为三类:卡片分栏.行分栏.列分栏.我们按照分类看下不同类别下应该如何实现分栏效

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

Mac系统下设置 Finder 分栏默认宽度的方法 苹果电脑 Mac OS X 系统中最重要的功能:Finder 有四种显示模式:图标.列表.分栏.Cover Flow,很多 Mac “老手”用第三种分栏模式. 但 Finder 的默认分栏宽度比较窄,文件名长的话可能显示不全.每次拖拽调整分栏宽度后,一关闭,下次打开 Finder,分栏宽度又回到默认值了. Finder 的分栏显示模式 设置 Finder 分栏的默认宽度很简单,按住 “option” 键,再用鼠标拖动调整分栏宽度,以后再关闭 F

JS修改图片的大小

注:利用js是不能修改图片的实际大小的,修改的只是图片在标签中对应的width,height属性. 1.通过var p = document.getElementById('image')获取到对应id的DOM对象 2.再使用对象的style属性(前提是image对象已经设置过style属性),p.style.width='200px'(切记:此处是字符串,格式一定是:???px,不能只写个数字,否则在有的浏览器上图片的大小是不会改变的) 以下代码实现了每次点击按钮可以实现图片变大或缩小一点:

IOS7上设置TabBar的图片

IOS7上设置TabBar的图片 by 伍雪颖 - (void)setTarBarStyle { UIEdgeInsets insets = UIEdgeInsetsMake(6, 0, -6, 0); _tarBar.imageInsets = insets; _tarBar.selectedImage = [[UIImage imageNamed:@"near_on"] imageWithRenderingMode:UIImageRenderingModeAlwaysOrigina