iOS - нужно изменить размер кнопки и изображения для разных айфонов
У меня есть действительно простое приложение, с одним представлением, одной кнопкой с одним действием, когда вы нажимаете эту кнопку. Кнопка имеет полный размер экрана, а также изображение, которое в нем.
Он отлично работает на моем iPhone 6 Plus, после того как я потратил много времени на то, чтобы размеры Controller View, View Container и Button работали вместе, чтобы он хорошо отображался на 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 плюс:
а. Атрибуты View Controller: - изменить размер представления из NIB - Презентация: полноэкранный режим - смоделированные метрики iPhone 5,5 дюйма, фиксированный размер (кажется, слишком большой, изображение не полноразмерное для этого размера) 414 x 736
б. ViewContainer - Mode: масштаб для заполнения (масштаб до View Controller выше)
с. Кнопка - Изображение = iOS 401PPI.png - Выравнивание = По центру по горизонтали и вертикали - Край = Содержимое - Вид = Масштаб до заливки - Размер Инспектора Размер = Ширина 375 x Высота 652 Внутренний размер = По умолчанию
фактический размер экрана = 667 x 375 "ViewContainer"
размер кнопки = 652 x 375 "кнопка"
Оригинальное изображение 401ppi 1080 x 1920 @ 401 ppi
ПОМОГИТЕ...
2 ответа
Система iPhone и iOS использует интеллектуальную систему именования для выбора изображения с соответствующим разрешением в зависимости от устройства, на котором изображение отображается.
Тогда iPhone 3 или 3gs имели размер экрана 320х480 пикселей. В этой среде, если мы хотели кнопку размером 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
Который я изменил до 600x900 для изображения eggs@3x.png iPhone 6/6+.
Тогда мы имеем:
- eggs@3x.png 600x900 пикселей
- eggs@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, а только с сетчаткой iPhone.
Результат симулятора iPhone 4/4s
Результат симулятора iPhone 5/5s
Результат симулятора iPhone 6
Обратите внимание, что кадр нашего imageView смещен на 50 пикселей со всех четырех сторон относительно вида контроллера представления?
Если вы хотите, чтобы изображение заполняло весь кадр ImageView, вы можете использовать UIViewContentModeScaleAspectFill вместо UIViewContentModeScaleAspectFit в приведенном выше коде.
Это дает такой результат:
Так что в случае с изображением вашей кнопки вы бы сделали нечто подобное.
Спасибо, Чжан. Я пошел дальше и создал новый каталог активов с тремя изображениями, по одному для каждого размера iPhone, а затем просто перетащил изображения в эту папку в окне редактора XCode.
Файл каталога content.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.