iOS-需要為不同的iPhone調整按鈕和圖像的大小

Question

我有一個非常簡單的應用程序，當您按下此按鈕時，它具有一個視圖，一個按鈕和一個活動。 該按鈕為全屏尺寸以及其中的圖像。

在花了很長時間使Controller View，View Container和Button尺寸協同工作之后，我才能使其完美地在iPhone 6 Plus上運行，以便可以在iPhone 6 plus上正確地看到它，無論是硬件還是虛擬的。

該按鈕和圖像為全屏尺寸，並且需要花點時間才能使它適用於一個iPhone尺寸。 大聲笑。 Controller View是一種尺寸，不是我的iPhone 6 plus的真實尺寸。 它更大。 因此，“查看容器”和按鈕的大小正確。 圖像為Apple為iPhone 6 plus推薦的PNG 401PPI 1080 x 1920。 在我的iPhone上看起來正確。

我的問題如下：現在我該如何使用我的App，並為iPhone 5和iPhone 4創建其他兩種尺寸？

我已經在這里和Apple Developer網站上搜索到絕對沒有任何結果。 到目前為止，我什么都沒嘗試，除了讓我拔頭發外，什么也沒做。

我正在使用XCode 6.4，並定位到iOS 8及更高版本。

這是我在XCode環境中設置的：

iPhone 6 plus布局詳細信息：

一種。 視圖控制器屬性：-從NIB調整視圖大小-演示文稿：全屏-模擬指標iPhone 5.5英寸，固定大小（似乎太大，圖像未達到此大小）414 x 736

b。 ViewContainer-模式：縮放以填充（縮放至上方的View Controller）

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資產目錄文件如下所示：

Contents.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使得此代碼更少，因此更加簡單，您的答案是正確的。 在Swift中，ViewController不再需要兩個文件，只需要一個。 我還能夠將聲音分配給ViewController中的單個按鈕，從而無需為背景圖像使用任何ImageView容器：

ViewController：

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編碼的人有所幫助。