iOS - 需要为不同的 iPhone 调整按钮和图像的大小
Posted
技术标签:
【中文标题】iOS - 需要为不同的 iPhone 调整按钮和图像的大小【英文标题】:iOS - Need to resize a button and image for different iPhones 【发布时间】:2015-08-26 03:51:18 【问题描述】:我有一个非常简单的应用程序,当您按下此按钮时,它具有一个视图、一个按钮和一个活动。该按钮是全屏尺寸,以及其中的图像。
在我花了很长时间让控制器视图、视图容器和按钮大小协同工作之后,我让它在我的 iPhone 6 Plus 上完美运行,因此它在 iPhone 6 Plus 上可以正常看到,包括硬件和虚拟。
按钮和图像是全屏尺寸的,为了让这个尺寸适用于 ONE iPhone 尺寸,我们花了一些功夫。哈哈。控制器视图是一种尺寸,这不是我的 iPhone 6 plus 的真实尺寸。它更大。所以 View Container 和按钮的大小都是正确的。图像为 PNG 401PPI 1080 x 1920,苹果推荐用于 iPhone 6 plus。在我的 iPhone 上看起来是正确的。
我的问题如下:我现在如何获取我的应用程序,并为 iPhone 5 和 iPhone 4 创建另外两种尺寸?
我已经在这里和 Apple Developer 网站上进行了搜索,但完全无济于事。到目前为止,我什么都没有尝试过,除了让我扯头发之外什么都没做。
我正在使用 XCode 6.4 并针对 ios 8 及更高版本。
这是我在 XCode 环境中设置的内容:
iPhone 6 plus 布局细节:
一个。查看控制器属性: - 从 NIB 调整视图大小 - 演示:全屏 - 模拟指标 iPhone 5.5 英寸,固定尺寸(似乎太大,图像不是全尺寸)414 x 736
b.视图容器 - 模式:缩放填充(缩放到上面的视图控制器)
c。按钮 - 图片 = iOS 401PPI.png - 对齐 = 居中水平和垂直 - 边缘 = 内容 - 视图 = 缩放填充 — 尺寸检查员 视图 = 宽度 375 x 高度 652 内在大小 = 默认
屏幕实际尺寸 = 667 x 375 “ViewContainer”
按钮大小 = 652 x 375 “按钮”
图片为原始 401ppi 1080 x 1920 @ 401 ppi
帮助...
【问题讨论】:
在我看来,您是一名 android 开发人员。 iPhone 使用点并根据命名选择适当的图像。非视网膜 iPhone 使用 image.png 并且是 320x480 点/像素,但像 iPhone 4 这样的视网膜手机使用 image@2x.png 命名,尺寸为 320x480 点但 480x640 像素(像素数量的两倍)。 iPhone 6 和 6+ 使用 image@3x.png 命名。 你可以使用自动布局,pl。参考下面的教程appcoda.com/introduction-auto-layout。在下面的***链接***.com/questions/25780213/…中也讨论了它 你好张,谢谢你的评论,我接下来会尝试这些东西。是的,我已经为同一个 App 做了一点 Android 开发。在 android 中似乎更容易,但我也必须在 iPhone 上使用它。所以,如果我能够创建我的图像,并按照你的建议简单地命名它们,那可能会奏效吗?我会试试的,还有你提供的链接。 尝试将 300x300 的图像命名为 image@3x.png,然后将 300x300 的图像缩小为 200x200 的图像,命名为 image@2x.png,然后重复 100x100,命名为 image.png。当您将所有三个图像文件拖到 Xcode 中的 Image.xcassets 窗口中时。创建一个 UIImageView 并设置属性 myImageView.image = [UIImage imageNamed:"image"];我还建议使用自动布局,但您也可以使用框架。尝试在不同的模拟器上运行应用程序,您应该会看到图像在不同的设备分辨率上保持相同的相对大小(到屏幕)。我将在下面添加演示代码。 您好张,现在运行良好,谢谢!!!我将已经调整大小的图像重命名为 image、image@2x 和 image@3x,并用这三个创建了一个新的图像资源,现在它正在调整大小。这与 Android 中的几乎相同,除了创建资产目录的额外步骤。现在我将添加我的按钮并继续。 【参考方案1】:iPhone 和 iOS 系统使用智能命名系统,根据正在渲染图像的设备选择合适的分辨率图像。
当时,iPhone 3 或 3gs 的屏幕尺寸为 320x480 像素。在这种环境中,如果我们想要一个 100 x 50 像素的按钮,那么我们会在 Photoshop 中创建一个该大小的按钮。
随着 Retina 显示器的引入,屏幕像素分辨率翻了一番,但 Apple 希望让开发人员更容易使用我们的 Objective C 代码,我们仍然告诉我们的按钮是 100x50 尺寸,但 iOS 以点为单位测量它而不是像素。
这样,在 Retina 屏幕上,100x50 点将转换为 200x100 像素。
iOS 还将尝试查找带有命名后缀“@2x”的图像并加载该图像(如果可用)。
演示
所以假设我们在这里得到了这个公共领域的鸡蛋图像:
http://www.publicdomainpictures.net/view-image.php?image=14453&picture=easter-eggs-in-grass&large=1
我已将 Eggs@3x.png iPhone 6/6+ 图像的大小调整为 600x900。
那么我们有:
eggs@3x.png 600x900 像素 eggs@2x.png 400x600 像素 eggs.png 200x300 像素在 Xcode 中创建一个新的 Single View Template 项目。将所有三个鸡蛋图像拖放到Image.xcassets
文件管理器。然后修改 ViewController 文件如下所示:
ViewController.h
#import <UIKit/UIKit.h>
@interface ViewController : UIViewController
@property (nonatomic, strong) UIImageView *imageView;
@end
ViewController.m
- (void)viewDidLoad
[super viewDidLoad];
[self initViews];
[self initConstraints];
-(void)initViews
self.imageView = [[UIImageView alloc] init];
// ---------------------------------------------------------------
// extension not needed since we added images to the
// Images.xcassets manager instead of directly to project
// ---------------------------------------------------------------
self.imageView.image = [UIImage imageNamed:@"eggs"];
// ---------------------------------------------------------------
// image might not cover the imageView's frame, I'm using
// a grey background color so you can see where the frame is
// ---------------------------------------------------------------
self.imageView.backgroundColor = [UIColor grayColor];
// ---------------------------------------------------------------
// images may or may not be square, we use AspectFit
// to ensure we can see the entire image within the
// dimension we specified without any cropping
// ---------------------------------------------------------------
self.imageView.contentMode = UIViewContentModeScaleAspectFit;
// add the view to the view controller's view
[self.view addSubview:self.imageView];
-(void)initConstraints
// tell iOS we want to use Autolayout for our imageView
self.imageView.translatesAutoresizingMaskIntoConstraints = NO;
// ---------------------------------------------
// name binding for our imageView for
// Autolayout Visual Formatting Language
// ---------------------------------------------
NSMutableDictionary *viewNames = [[NSMutableDictionary alloc] init];
[viewNames setValue:self.imageView forKey:@"imageView"];
// ------------------------------------------------------------------
// Autolayout code
//
// H: for horizontal constraint
// V: for vertical constraint
// |: parent view edges (so H:| == left edge for example)
//
//
// Here we're telling our imageView to be offset 50 pixels
// from the left and right as well as 50 pixels from the top
// and bottom of its parent view, which in this case, is our
// View Controller's view
// ------------------------------------------------------------------
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-50-[imageView]-50-|"
options:0
metrics:nil
views:viewNames]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-50-[imageView]-50-|"
options:0
metrics:nil
views:viewNames]];
不幸的是,Xcode 不再附带 iPhone 3/3gs 模拟器,只有视网膜 iPhone。
iPhone 4/4s 模拟器结果
iPhone 5/5s 模拟器结果
iPhone 6 模拟器结果
注意我们的 imageView 的框架如何在所有四个边上保持 50 像素的偏移,相对于视图控制器的视图?
如果你想让图片填满整个 ImageView 的框架,你可以在上面的代码中使用UIViewContentModeScaleAspectFill
而不是UIViewContentModeScaleAspectFit
。
这会产生如下结果:
所以对于你的按钮图像,你会做类似的事情。
【讨论】:
谢谢张。除了我使用 Swift 使代码更少因此更简单之外,您的答案是正确的。【参考方案2】:谢谢张。 我继续创建了一个新的资产目录,其中包含三张图像,每种尺寸的 iPhone 一张,然后简单地将图像拖到 XCode 编辑器窗口中的该文件夹中。
contents.json 资产目录文件如下所示:
内容.json:
"images" : [
"idiom" : "universal",
"scale" : "1x",
"filename" : "MainImage.png"
,
"idiom" : "universal",
"scale" : "2x",
"filename" : "MainImage@2x.png"
,
"idiom" : "universal",
"scale" : "3x",
"filename" : "MainImage@3x.png"
],
"info" :
"version" : 1,
"author" : "xcode"
除了我使用的是 Swift,它使代码更少,因此更简单,你的答案是正确的。在 Swift 中,ViewController 不再需要两个文件,只需一个。我还能够将我的声音分配给 ViewController 中的单个按钮,从而无需任何 ImageView 容器来存储我的背景图像:
视图控制器:
import UIKit
import AVFoundation
class ViewController: UIViewController
var myPlayer = AVAudioPlayer()
var yourSound = NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource("RemSound_01", ofType: "wav")!)
func initYourSound()
myPlayer = AVAudioPlayer(contentsOfURL: yourSound, error: nil)
myPlayer.prepareToPlay()
override func viewDidLoad()
super.viewDidLoad()
initYourSound()
// Do any additional setup after loading the view, typically from a nib.
override func didReceiveMemoryWarning()
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
@IBAction func playMySound(sender: AnyObject)
myPlayer.play()
我希望这对任何开始在 XCode 中使用 Swift 进行编码的人有所帮助。
【讨论】:
以上是关于iOS - 需要为不同的 iPhone 调整按钮和图像的大小的主要内容,如果未能解决你的问题,请参考以下文章
如何在 iOS 中创建在每部 iPhone 中正确显示的按钮列表
如何从 iphone 6 到 iphone 6+ 调整按钮图像和按钮大小
如何使用 Xcode 8 上的自动布局调整对象的大小以适应不同的屏幕尺寸?
为不同的 iPhone 设备自动调整 CollectionView 单元的大小