gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 01:43:01 25 4
gpt4 key购买 nike

我有一个非常简单的应用程序,当您按下此按钮时,只有一个 View 、一个按钮和一个事件。该按钮是全屏大小,以及其中的图像。

我让它在我的 iPhone 6 Plus 上完美运行,在花了很长时间让 Controller View 、 View 容器和按钮大小一起工作之后,它在 iPhone 6 Plus 上可以正常显示,无论是硬件还是虚拟。

按钮和图像是全屏尺寸,为了使它在一个 iPhone 尺寸下工作也花了一些功夫。哈哈。 Controller View 是一个尺寸,这不是我的 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 plus 布局细节:

一个。查看 Controller 属性:- 从 NIB 调整 View 大小- 演示:全屏- 模拟指标 iPhone 5.5 英寸,固定尺寸(看起来太大,图像不是这个尺寸的全尺寸)414 x 736

查看容器- 模式:缩放到填充(缩放到上面的 View Controller )

按钮- 图片 = iOS 401PPI.png- 对齐方式 = 居中水平和垂直- 边缘 = 内容- 查看 = 缩放以填充— 尺寸检查员 View = 宽度 375 x 高度 652内部大小 = 默认值

屏幕实际尺寸 = 667 x 375 “ViewContainer”

按钮大小 = 652 x 375 “按钮”

图像是原始 401ppi 1080 x 1920 @ 401 ppi

帮助...

最佳答案

iPhone 和 iOS 系统使用智能命名系统根据渲染图像的设备选择适当的分辨率图像。

那时,iPhone 3 或 3gs 的屏幕尺寸为 320x480 像素。在这种环境下,如果我们想要一个 100 x 50 像素的按钮,那么我们会在 Photoshop 中创建一个这样大小的按钮。

随着 Retina 显示屏的推出,屏幕像素分辨率增加了一倍,但 Apple 希望让开发人员更容易,因此在 Objective C 代码中,我们仍然告诉按钮尺寸为 100x50,但 iOS 以点为单位进行测量而不是像素。

这样,在 Retina 屏幕上,100x50 点将转换为 200x100 像素。

iOS 还将尝试查找带有命名后缀“@2x”的图像,并在可用时加载该图像。

演示

假设我们在这里得到了这张公共(public)领域的鸡蛋图片:

eggs

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 中创建一个新的单 View 模板项目。将所有三个鸡蛋图像拖放到 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 模拟器结果

enter image description here

iPhone 5/5s 模拟器结果

enter image description here

iPhone 6 模拟器结果

enter image description here

请注意我们的 imageView 的框架如何在所有四个边上相对于 View Controller 的 View 保持 50 像素的偏移量?

如果您希望图像填充整个 ImageView 的框架,可以使用 UIViewContentModeScaleAspectFill 而不是上面代码中的 UIViewContentModeScaleAspectFit

这会产生如下结果:

enter image description here

因此对于您的按钮图像,您会做类似的事情。

关于iOS - 需要为不同的 iPhone 调整按钮和图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32217693/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com