iOS - 需要为不同的 iPhone 调整按钮和图像的大小

Question

我有一个非常简单的应用程序，当您按下此按钮时，它具有一个视图、一个按钮和一个活动。该按钮是全屏尺寸，以及其中的图像。

在我花了很长时间让控制器视图、视图容器和按钮大小协同工作之后，我让它在我的 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

帮助...

Answer 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。

这会产生如下结果：

所以对于你的按钮图像，你会做类似的事情。

Answer 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 进行编码的人有所帮助。