İPhone 5 ekran çözünürlüğü için uygulamalar nasıl geliştirilir veya taşınır?

Yeni iPhone 5 ekran yeni bir en boy oranına ve yeni bir çözünürlüğe (640 x 1136 piksel) sahip.

Yeni uygulamalar geliştirmek veya mevcut uygulamaları yeni ekran boyutuna geçirmek için neler gerekir?

Hem eski ekranlar hem de yeni geniş ekran en boy oranı için uygulamaları "evrensel" hale getirmek için nelere dikkat etmeliyiz?

1. Xcode'un en son sürümünü indirin ve yükleyin .
2. Uygulamanız için bir Başlatma Ekranı Dosyası ayarlayın (hedef ayarlarınızın genel sekmesinde). İOS 9'daki iPad bölünmüş görünüm boyutları da dahil olmak üzere herhangi bir ekranın tam boyutunu nasıl kullanacağınız.
3. Uygulamanızı test edin ve umarım başka bir şey yapmayın, çünkü otomatik yeniden boyutlandırma maskelerini doğru şekilde ayarladıysanız veya Otomatik Düzen'i kullandıysanız her şey sihirli bir şekilde çalışmalıdır.
4. Bunu yapmadıysanız, görünüm düzenlerinizi, tercihen Otomatik Düzen ile ayarlayın.
5. Özellikle büyük ekranlar için yapmanız gereken bir şey varsa, bunun [[UIScreen mainScreen] bounds]için belirli bir API olmadığı için yüksekliğini kontrol etmeniz gerekir . İOS 8'den itibaren, ekran boyutlarını dikey veya yatay olarak düzenli veya kompakt olarak özetleyen ve kullanıcı arayüzünüzü uyarlamanın önerilen yolu olan boyut sınıfları da vardır.

İPhone 4S veya daha eski sürümler için oluşturulmuş bir uygulamanız varsa, iPhone 5'te posta kutusu ile çalışır.

Uygulamanızı yeni uzun ekrana uyarlamak için ilk yapmanız gereken başlatma görüntüsünü Varsayılan-568h@2x.png olarak değiştirmektir. Boyutu 1136x640 (YxG) olmalıdır. Evet, yeni ekran boyutunda varsayılan görüntüye sahip olmak, uygulamanızın yeni iPhone 5'in ekranının tamamını almasına izin veren anahtardır .

(Adlandırma kuralının yalnızca varsayılan görüntü için çalıştığını unutmayın. Başka bir görüntüyü "Image-568h@2x.png" adlandırmak, "Image@2x.png" yerine yüklenmesine neden olmaz. Farklı görüntüler yüklemeniz gerekiyorsa farklı ekran boyutları için programlı olarak yapmanız gerekir.)

Çok şanslıysanız, bu olabilir ... ama herhalde, birkaç adım daha atmanız gerekecek.

• Xibs / Views cihazınızın, kendilerini yeniden boyutlandırmak için otomatik düzen kullandığından emin olun.
• Görünümleri yeniden boyutlandırmak için yayları ve destekleri kullanın.
• Bu, uygulamanız için yeterince iyi değilse, xib / storyboard'unuzu belirli bir ekran boyutu için tasarlayın ve diğeri için programlı olarak yeniden konumlandırın.

Aşırı durumda (yukarıdakilerin hiçbiri yeterli olmadığında), iki Xib'i tasarlayın ve uygun olanı görünüm denetleyicisine yükleyin.

Ekran boyutunu tespit etmek için:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
{
    CGSize result = [[UIScreen mainScreen] bounds].size;
    if(result.height == 480)
    {
        // iPhone Classic
    }
    if(result.height == 568)
    {
        // iPhone 5
    }
}

Yapmanız gereken tek şey, uygulama kaynaklarına "Default-568h@2x.png" adlı bir başlatma resmi eklemektir ve genel durumda (yeterince şanslıysanız) uygulama düzgün çalışır.

Uygulama dokunma olaylarını işlemezse, anahtar pencerenin uygun boyutta olduğundan emin olun. Çözüm uygun çerçeveyi ayarlamaktır:

[window setFrame:[[UIScreen mainScreen] bounds]]

İOS 6'ya geçerken ekran boyutu ile ilgili olmayan başka sorunlar da var . Ayrıntılar için iOS 6.0 Sürüm Notları'nı okuyun .

Bazen (film şeridi öncesi uygulamalar için), düzen yeterince farklı olacaksa, cihaza göre farklı bir xib belirtmeye değer ( bu soruya bakın - iPhone 5 ile başa çıkmak için kodu değiştirmeniz gerekir) viewController init, farklı grafiklere ihtiyacınız varsa otomatikleştirme maskeleriyle hiçbir twiddling işe yaramayacaktır.

-(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil

    NSString *myNibName;
    if ([MyDeviceInfoUtility isiPhone5]) myNibName = @"MyNibIP5";
    else myNibName = @"MyNib";

    if ((self = [super initWithNibName:myNibName bundle:nibBundleOrNil])) {


...

Bu, eski iOS sürümlerini hedefleyen uygulamalar için kullanışlıdır.

Burada güzel bir öğretici bulabilirsiniz (MonoTouch için, ancak MonoTouch dışı projeler için de bilgileri kullanabilirsiniz):
http://redth.info/get-your-monotouch-apps-ready-for-iphone-5 -Ios-6-bugün /

1. Açılış / varsayılan ekranınız ( 640 x 1136 piksel ) için " Varsayılan-568h@2x.png " adıyla yeni bir resim oluşturun

2. In iOS Simülatörü "> Cihaz menüsü ve seç -, Donanım gidin iPhone (Retina 4 inç) "

3. Arka plan resimleri gibi başka resimler oluşturun

4. Yeni görüntülerinizi yüklemek için iPhone 5'i tespit edin:

public static bool IsTall
{
    get {
        return UIDevice.currentDevice.userInterfaceIdiom
                    == UIUserInterfaceIdiomPhone
                && UIScreen.mainScreen.bounds.size.height
                    * UIScreen.mainScreen.scale >= 1136;
    }
}

private static string tallMagic = "-568h@2x";
public static UIImage FromBundle16x9(string path)
{
    //adopt the -568h@2x naming convention
    if(IsTall())
    {
        var imagePath = Path.GetDirectoryName(path.ToString());
        var imageFile = Path.GetFileNameWithoutExtension(path.ToString());
        var imageExt = Path.GetExtension(path.ToString());
        imageFile = imageFile + tallMagic + imageExt;
        return UIImage.FromFile(Path.Combine(imagePath,imageFile));
    }
    else
    {
        return UIImage.FromBundle(path.ToString());
    }
}

İPhone5 ve iPhone4'ü XIB'ler aracılığıyla taşımak kolaydır .........

UIViewController *viewController3;
if ([[UIScreen mainScreen] bounds].size.height == 568)
{
    UIViewController *viewController3 = [[[mainscreenview alloc] initWithNibName:@"iphone5screen" bundle:nil] autorelease];               
}    
else
{
     UIViewController *viewController3 = [[[mainscreenview alloc] initWithNibName:@"iphone4screen" bundle:nil] autorelease];
}

Bu sorunu burada çözüyorum . Sadece görüntülere ~ 568h @ 2x soneki ve xib'lere ~ 568h ekleyin. Daha fazla çalışma zamanı denetimine veya kod değişikliğine gerek yoktur.

Yeni varsayılan başlatma görüntüsünü ekledim ve (diğer birkaç SE yanıtını kontrol ederken ...) film şeridlerimin kendileri ve alt görünümleri otomatik olarak boyutlandırdı, ancak retina 4 inç hala mektup kutusu.

Sonra benim bilgi plist "Böylece görüntü kaldırıldı ve sihirli bir şekilde mektup kutusu artık görünmedi " Varsayılan.png "olarak ayarlanmış" Görüntü Başlat " için bir satır öğesi olduğunu fark ettim . İnşallah, bu başkalarına katlandığım çılgınlığı kurtarır.

Sanırım, her durumda işe yaramayacak, ama benim özel projemde NIB dosyalarının kopyalanmasını önledi:

İçinizde bir yerde common.hbu tanımları ekran yüksekliğine göre yapabilirsiniz:

#define HEIGHT_IPHONE_5 568
#define IS_IPHONE   ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone)
#define IS_IPHONE_5 ([[UIScreen mainScreen] bounds ].size.height == HEIGHT_IPHONE_5)

Temel denetleyicinizde:

- (void)viewDidLoad
{
    [super viewDidLoad];
    if (IS_IPHONE_5) {
        CGRect r = self.view.frame;
        r.size.height = HEIGHT_IPHONE_5 - 20;
        self.view.frame = r;
    }
    // now the view is stretched properly and not pushed to the bottom
    // it is pushed to the top instead...

    // other code goes here...
}

Bir constants.hdosyaya şu tanım ifadelerini ekleyebilirsiniz:

 #define IS_IPAD UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad 
 #define IS_IPHONE UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone
 #define IS_WIDESCREEN (fabs((double)[[UIScreen mainScreen] bounds].size.height - (double)568) < DBL_EPSILON) 
 #define IS_IPHONE_5 (!IS_IPAD && IS_WIDESCREEN)

Uygulamanızın iPhone 5 Retina'yı destekleyip desteklemediğini belirlemek için bunu kullanın: (Bu, ekran türünü, 4S Retina vb. Evet veya Hayır)

Ortak bir ".h" dosyasına ekleyin:

BOOL IS_IPHONE5_RETINA(void);

Ortak bir ".m" dosyasına ekleyin:

BOOL IS_IPHONE5_RETINA(void) {
    BOOL isiPhone5Retina = NO;
    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        if ([UIScreen mainScreen].scale == 2.0f) {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            CGFloat scale = [UIScreen mainScreen].scale;
            result = CGSizeMake(result.width * scale, result.height * scale);

            if(result.height == 960){
                //NSLog(@"iPhone 4, 4s Retina Resolution");
            }
            if(result.height == 1136){
                //NSLog(@"iPhone 5 Resolution");
                isiPhone5Retina = YES;
            }
        } else {
            //NSLog(@"iPhone Standard Resolution");
        }
    }
    return isiPhone5Retina;
}

Her şeyden önce iki xibs oluşturun ve tüm delegeleri ekleyin, ana sınıf xibve sonra u appdelegate.mdosyanızda aşağıda belirtilen bu koşulu koyabilirsiniz

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 

    if ([[UIScreen mainScreen] bounds].size.height == 568)
        {

        self.ViewController = [[ViewController alloc] initWithNibName:@"ViewControlleriphone5" bundle:nil];
        }

        else
        {
             self.ViewController = [[ViewController alloc] initWithNibName:@"ViewControlleriphone4" bundle:nil];

        }

ViewControllersınıflarınızda bile gereksinimlerinize bağlı olarak programın herhangi bir yerinde kullanabilirsiniz . En önemlisi, iki xibdosya için ayrıiphone 4(320*480) and iphone 5(320*568)

Aşağıdaki yöntemi tek bir sınıfta deneyin:

-(NSString *)typeOfDevice
    {
        if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
        {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            if(result.height == 480)
            {
                return @"Iphone";
            }
            if(result.height == 568)
            {
                return @"Iphone 5";
            }
        }
        else{
            return @"Ipad";;
        }


        return @"Iphone";
    }

Auto LayoutÖzelliği kullanabilir ve iPhone 5 ekran çözünürlüğünü kullanarak tasarım oluşturabilirsiniz ve hem 4 "hem de 3.5" cihazlar için çalışacaktır, ancak bu durumda düzen yöneticisi hakkında yeterli bilgiye sahip olmalısınız.

denetleme boundsile568Yatay modda başarısız olur. iPhone 5 yalnızca portre modunda başlatılır, ancak rotasyonları desteklemek istiyorsanız, iPhone 5 "check" in bu senaryoyu da ele alması gerekir.

İşte yönlendirme durumunu işleyen bir makro:

#define IS_IPHONE_5 (CGSizeEqualToSize([[UIScreen mainScreen] preferredMode].size, CGSizeMake(640, 1136)))

'PreferMode' çağrısının kullanımı, birkaç saat önce okuduğum başka bir gönderiden geliyor, bu yüzden bu fikri bulamadım.

Önce bu resmi göster. Bu görüntüde Retina 4 desteği için uyarı gösterirsiniz, bu nedenle bu uyarıyı tıklayın ve Retina 4 açılış ekranınızın projenize otomatik olarak eklenmesini sağlayın.

ve bu kodu kullandıktan sonra:

if([[UIScreen mainScreen] bounds].size.height == 568)
    {
        // For iphone 5
    }
    else
    {
        // For iphone 4 or less
    }

Herhangi bir cihazla böyle bir sorunla karşılaşmadım, çünkü herhangi bir sabit kod değeri olmadan herkes için bir kod tabanına sahibim. Ne yaptığım, her aygıt için bir yerine kaynak olarak maksimum boyutlu görüntü elde etmektir. Örneğin, retina görüntüleme için bir tane olacak ve her cihaza olduğu gibi görüntülenmesi için en boyuna uygun olarak göstereceğim. Düğmenin çerçevesine, örneğin çalışma zamanında karar vermeye geliyor. Bunun için patent görünümünün% değerini kullanıyorum, örneğin, genişliğin üst görünümün yarısı olmasını istiyorsanız, üst öğenin% 50'sini alıp aynı yükseklik ve merkez için de geçerlidir.

Bununla xib'lere bile ihtiyacım yok.

İPhone 5'i ekran boyutuna göre kullanıp kullanmadığınızı hesaplamak için bu tanımı kullanabilirsiniz:

#define IS_IPHONE_5 ( fabs( ( double )[ [ UIScreen mainScreen ] bounds ].size.height - ( double )568 ) < DBL_EPSILON )

daha sonra basit bir ififade kullanın :

    if (IS_IPHONE_5) {

    // What ever changes
    }

Peter, Canappi'ye gerçekten bir göz atmalısın, sizin için her şeyi yapar, tek yapmanız gereken düzeni böyle belirtmektir:

button mySubmitButton 'Sumbit' (100,100,100,30 + 0,88,0,0) { ... }

Oradan Canappi, uygulamanın çalıştığı cihazı algılayan ve kullanacak doğru obj-c kodunu oluşturur:

(100,100,100,30) for iPhone4
(100,**188**,100,30) for iPhone 5

Canappi, metinsel formda olması dışında Arayüz Oluşturucu ve Öykü Panosu gibi çalışır. Zaten XIB dosyalarınız varsa, bunları dönüştürebilirsiniz, böylece tüm kullanıcı arayüzünü sıfırdan yeniden oluşturmanız gerekmez.

Hangi cihazı kullandığınızı belirlemek için ekran boyutunu manuel olarak kontrol edebilirsiniz:

#define DEVICE_IS_IPHONE5 ([[UIScreen mainScreen] bounds].size.height == 568)

float height = DEVICE_IS_IPHONE5?568:480;
if (height == 568) {
    // 4"

} else {

    // 3"

}

Bu kodu ekleyebilirsiniz:

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
        if ([[UIScreen mainScreen] respondsToSelector: @selector(scale)]) {
            CGSize result = [[UIScreen mainScreen] bounds].size;
            CGFloat scale = [UIScreen mainScreen].scale;
            result = CGSizeMake(result.width * scale, result.height * scale);

            if(result.height == 960) {
                NSLog(@"iPhone 4 Resolution");
            }
            if(result.height == 1136) {
              NSLog(@"iPhone 5 Resolution");
            }
        }
        else{
            NSLog(@"Standard Resolution");
        }
    }

Bu gerçek bir evrensel kod, 3 farklı hikaye panosu oluşturabilirsiniz:

Projenizin Evrensel modunu ayarlayın ve ana hikaye iPhone'unuzu iPhone5 film şeridi ve iPad ana film şeridi ile ipad main ile ayarlayın, şimdi iphone için yeni film şeridi hedefi ekleyin ve iphone 4s veya daha azının çözünürlüğünü değiştirin şimdi AppDelegate.m'nizi uygulayın

iPhone4 / 4s (3 / 3Gs için aynıdır) ve iPhone5 için bir tane ve iPad için yeni bir Storyboard hedefi ile projeyi evrensel hale getirin , şimdi bu kodu ekleyin altında AppDelegate.m'dedidFinishLaunching :

    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
        UIStoryboard *storyBoard;

        CGSize result = [[UIScreen mainScreen] bounds].size;
        CGFloat scale = [UIScreen mainScreen].scale;
        result = CGSizeMake(result.width *scale, result.height *scale);

//----------------HERE WE SETUP FOR IPHONE4/4s/iPod----------------------

        if(result.height == 960){
            storyBoard = [UIStoryboard storyboardWithName:@"iPhone4_Storyboard" bundle:nil];
            UIViewController *initViewController = [storyBoard instantiateInitialViewController];
            [self.window setRootViewController:initViewController];
        }

//----------------HERE WE SETUP FOR IPHONE3/3s/iPod----------------------

        if(result.height == 480){
            storyBoard = [UIStoryboard storyboardWithName:@"iPhone4_Storyboard" bundle:nil];
            UIViewController *initViewController = [storyBoard instantiateInitialViewController];
            [self.window setRootViewController:initViewController];
        }
    }

        return YES;
 }

Böylece iPhone 3 / 3Gs / 4 / 4s / 5 için Evrensel bir uygulama oluşturdunuz. Tüm iPod türleri ve Tüm iPad türleri

Tüm IMG'yi myImage.pngve ile entegre etmeyi unutmayınmyImage@2x.png

Bana göre, bu tür sorunlarla başa çıkmanın ve cihazın yüksekliğini kontrol etmek için gerekli koşullardan kaçınmanın en iyi yolu, görünümler için göreli çerçeveyi veya örneğin görünümünüze eklediğiniz herhangi bir UI öğesini kullanmaktır: İstediğiniz bazı kullanıcı arabirimi görünümünün altında veya sekme çubuğunun hemen üstünde olmalıdır, o zaman görünümünüzün yüksekliğine veya sekme çubuğuna (varsa) göre y kaynağını almanız gerekir ve otomatik yeniden boyutlandırma özelliğimiz de vardır. Umarım bu senin için çalışır

Bir dizi koşul kullanmak yerine ekran boyutunu kullanarak görünümünüzü otomatik olarak yeniden boyutlandırabilirsiniz.

int h = [[UIScreen mainScreen] bounds].size.height;
int w = [[UIScreen mainScreen] bounds].size.width;
self.imageView.frame = CGRectMake(20, 80, (h-200), (w-100));

Benim durumumda, üstteki bazı giriş alanları ile alttaki bazı düğmeler arasındaki boşluğu dolduran bir görünüm istiyorum, bu yüzden ekran boyutuna bağlı olarak sol üst köşedeki sabit ve sağ alt değişken. Uygulamam, görüntü görünümünü kamera tarafından çekilen fotoğrafla dolduruyor, böylece alabileceğim tüm alanı istiyorum.

Zaten mevcut bir uygulamayı evrensel biçime dönüştürmeniz gerekiyorsa, karşılık gelen xib dosyasını-> Show Utilities-> Show Size denetçisini seçmeniz gerekir.

Boyut denetçisinde Otomatik Boyutlandırmayı görebilirsiniz, bu aracı kullanarak mevcut iOS Uygulamasına dönüştürebilirsiniz.

XCode 5'i kullanarak Proje> Genel'de "Varlık Kataloğuna Taşı" yı seçin.

Daha sonra lansman resminizi bulmak için "Bulucuda göster" i kullanın, 640x1136 olarak kukla düzenleyebilir ve ardından aşağıdaki resimde gösterildiği gibi varlık kataloğuna sürükleyebilirsiniz.

Hem iOS7 hem de iOS6 R4 bölümlerinde 640x1136 boyutunda bir resim bulunduğundan emin olun. Uygulamayı bir sonraki başlatışınızda siyah çubuklar kaybolacak ve uygulamanız 4 inç ekran kullanacak

Dikkat edilmesi gereken nokta - yeni Xcode'da bu resim dosyasını Default-568h@2x.png varlıklara eklemeniz gerekir

Kullan Auto Layout özelliği görünümler için . Tüm çözünürlüklere otomatik olarak ayarlanacaktır.

~ İphone veya ~ ipad sonekine sahip denetleyici adına sahip bir denetleyici için iki xibs oluşturun. Derleme zamanında, Xcode aygıta göre doğru xib'i alır.

Hem iPhone hem de iPad için tek bir xib oluşturmak istiyorsanız, görünüm iPhone ve iPad'e bağlanacak kadar basitse boyut sınıflarını kullanın.

Hem iOS cihazında hem de iOS Simulator'da test yaparken küçük bir sorun var. Simülatörün (XCode 6.0.1), [[UIScreen mainScreen] bounds].sizecihazın yönüne bağlı olarak genişlik ve yükseklik için anahtarlanmış değerler verdiği anlaşılıyor .

Bu nedenle, doğru fiziksel ekran boyutunu belirlerken bir sorun olabilir. Bu kod ayrıca tüm 2014'ü ayırt etmeye yardımcı olur. İPhone model nesiller:

• iPhone4S
• iPhone5 (ve iPhone5'ler)
• iPhone6 ​​(ve iPhone6 ​​+)

Ayrıca iPhone6 ​​+ 'dan iPhone6 ​​arasında ayrım yapmak için kolayca değiştirilebilir.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    CGSize iOSDeviceScreenSize = [[UIScreen mainScreen] bounds].size;

    if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPhone)
    {
        if (iOSDeviceScreenSize.width > 568 || // for iOS devices
            iOSDeviceScreenSize.height > 568) // for iOS simulator
        {   // iPhone 6 and iPhone 6+

            // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone6
            storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone6" bundle:nil];

            NSLog(@"loaded iPhone6 Storyboard");
        }
        else if (iOSDeviceScreenSize.width == 568 || // for iOS devices
                 iOSDeviceScreenSize.height == 568) // for iOS simulator
        {   // iPhone 5 and iPod Touch 5th generation: 4 inch screen (diagonally measured)

            // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone5
            storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPhone5" bundle:nil];

            NSLog(@"loaded iPhone5 Storyboard");
        }
        else
        {   // iPhone 3GS, 4, and 4S and iPod Touch 3rd and 4th generation: 3.5 inch screen (diagonally measured)

                // Instantiate a new storyboard object using the storyboard file named Storyboard_iPhone4
            storyboard = [UIStoryboard story    boardWithName:@"MainStoryboard_iPhone" bundle:nil];

                NSLog(@"loaded iPhone4 Storyboard");
        }
    }
    else if ([UIDevice currentDevice].userInterfaceIdiom == UIUserInterfaceIdiomPad)
    {   // The iOS device = iPad

        storyboard = [UIStoryboard storyboardWithName:@"MainStoryboard_iPadnew" bundle:nil];

        NSLog(@"loaded iPad Storyboard");
    }

    // rest my code
}

UI arayüzünüze göre uygulamalarınızda Autoresizing Mask'i kullanmanızı öneririm, çok fazla sorun kaydeder ve iPhone 4 ve 5 ekranlar için farklı kullanıcı arayüzü yapmaktan daha iyidir.