iOS - 需要为不同的 iPhone 调整按钮和图像的大小
iOS - Need to resize a button and image for different iPhones
我有一个非常简单的应用程序，只有一个视图，一个按钮，当您按下此按钮时，一个 activity。该按钮是全屏大小，以及其中的图像。
我 运行 在我的 iPhone 6 Plus 上完美地安装了它，在花了很长时间让 Controller View、View Container 和 Button 大小一起工作之后，它在iPhone 6 加，硬件和虚拟。
按钮和图像是全屏尺寸，为了使它在一个 iPhone 尺寸下工作也费了一番功夫。哈哈。控制器视图是一个尺寸，这不是我的 iPhone 6 plus 的实际尺寸。它更大。所以 View Container 和按钮的大小是正确的。图像为 PNG 401PPI 1080 x 1920，Apple 建议 iPhone 6 plus。它在我的 iPhone.
上看起来是正确的
我的问题如下：我现在如何使用我的应用程序，并为 iPhone 5 和 iPhone 4 创建另外两个尺寸？
我已经在这里和 Apple Developer 网站上搜索过，但完全无济于事。到目前为止，我什么都没试过，除了让我拉头发。
我正在使用 XCode 6.4 并且目标是 iOS 8 及更高版本。
这是我在 XCode 环境中设置的：
iPhone 6 加布局细节：
一个。查看控制器属性：
- 从 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
求助...
iPhone 和 iOS 系统使用智能命名系统 select 根据渲染图像的设备选择合适的分辨率图像。
那时，iPhone 3 或 3gs 的屏幕尺寸为 320x480 像素。在这种环境下，如果我们想要一个 100 x 50 像素的按钮，那么我们会在 Photoshop 中创建一个该尺寸的按钮。
随着 Retina 显示屏的引入，屏幕像素分辨率翻了一番，但 Apple 希望让开发人员更容易使用我们的 Objective C 代码，我们仍然告诉我们的按钮尺寸为 100x50，但是iOS 以点而不是像素来衡量它。
这样，在 Retina 屏幕上，100x50 点将转换为 200x100 像素。
iOS 还将尝试查找带有命名后缀“@2x”的图像，如果可用则加载该图像。
演示
所以假设我们在这里得到了这个 public 域鸡蛋图像：
http://www.publicdomainpictures.net/view-image.php?image=14453&picture=easter-eggs-in-grass&large=1
我已将鸡蛋尺寸调整为 600x900@3x.png iPhone 6/6+ 图片。
那么我们有：
- 鸡蛋@3x.png 600x900 像素
- 鸡蛋@2x.png 400x600 像素
- eggs.png 200x300 像素
在 Xcode 中创建一个新的单视图模板项目。将所有三个鸡蛋图像拖放到 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模拟器，只有视网膜iPhones。
iPhone 4/4s 模拟器结果
iPhone 5/5s 模拟器结果
iPhone 6 模拟器结果
注意我们的 imageView 的框架如何在所有四个边上保持 50 像素偏移，相对于视图控制器的视图？
如果你想让图片填满整个ImageView的框架，你可以使用UIViewContentModeScaleAspectFill代替上面代码中的UIViewContentModeScaleAspectFit。
这会产生如下结果：
所以对于您的按钮图片，您会做类似的事情。
谢谢张老师。
我继续创建了一个包含三张图片的新资产目录，每个图片对应 iPhone 大小，然后简单地将图片拖到 XCode 编辑器 window.[=12 中的文件夹中=]
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 中，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()
}
}
我希望这对开始使用 Swift 在 XCode 中编码的任何人有所帮助。
我有一个非常简单的应用程序，只有一个视图，一个按钮，当您按下此按钮时，一个 activity。该按钮是全屏大小，以及其中的图像。
我 运行 在我的 iPhone 6 Plus 上完美地安装了它，在花了很长时间让 Controller View、View Container 和 Button 大小一起工作之后，它在iPhone 6 加，硬件和虚拟。
按钮和图像是全屏尺寸，为了使它在一个 iPhone 尺寸下工作也费了一番功夫。哈哈。控制器视图是一个尺寸，这不是我的 iPhone 6 plus 的实际尺寸。它更大。所以 View Container 和按钮的大小是正确的。图像为 PNG 401PPI 1080 x 1920，Apple 建议 iPhone 6 plus。它在我的 iPhone.
上看起来是正确的我的问题如下：我现在如何使用我的应用程序，并为 iPhone 5 和 iPhone 4 创建另外两个尺寸？
我已经在这里和 Apple Developer 网站上搜索过，但完全无济于事。到目前为止，我什么都没试过，除了让我拉头发。
我正在使用 XCode 6.4 并且目标是 iOS 8 及更高版本。
这是我在 XCode 环境中设置的：
iPhone 6 加布局细节：
一个。查看控制器属性： - 从 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
求助...
iPhone 和 iOS 系统使用智能命名系统 select 根据渲染图像的设备选择合适的分辨率图像。
那时，iPhone 3 或 3gs 的屏幕尺寸为 320x480 像素。在这种环境下，如果我们想要一个 100 x 50 像素的按钮，那么我们会在 Photoshop 中创建一个该尺寸的按钮。
随着 Retina 显示屏的引入，屏幕像素分辨率翻了一番，但 Apple 希望让开发人员更容易使用我们的 Objective C 代码，我们仍然告诉我们的按钮尺寸为 100x50，但是iOS 以点而不是像素来衡量它。
这样，在 Retina 屏幕上，100x50 点将转换为 200x100 像素。
iOS 还将尝试查找带有命名后缀“@2x”的图像，如果可用则加载该图像。
演示
所以假设我们在这里得到了这个 public 域鸡蛋图像：
http://www.publicdomainpictures.net/view-image.php?image=14453&picture=easter-eggs-in-grass&large=1
我已将鸡蛋尺寸调整为 600x900@3x.png iPhone 6/6+ 图片。
那么我们有：
- 鸡蛋@3x.png 600x900 像素
- 鸡蛋@2x.png 400x600 像素
- eggs.png 200x300 像素
在 Xcode 中创建一个新的单视图模板项目。将所有三个鸡蛋图像拖放到 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模拟器，只有视网膜iPhones。
iPhone 4/4s 模拟器结果
iPhone 5/5s 模拟器结果
iPhone 6 模拟器结果
注意我们的 imageView 的框架如何在所有四个边上保持 50 像素偏移，相对于视图控制器的视图？
如果你想让图片填满整个ImageView的框架，你可以使用UIViewContentModeScaleAspectFill代替上面代码中的UIViewContentModeScaleAspectFit。
这会产生如下结果：
所以对于您的按钮图片，您会做类似的事情。
谢谢张老师。 我继续创建了一个包含三张图片的新资产目录，每个图片对应 iPhone 大小，然后简单地将图片拖到 XCode 编辑器 window.[=12 中的文件夹中=]
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 中，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()
}
}
我希望这对开始使用 Swift 在 XCode 中编码的任何人有所帮助。