i3Factory World

Your Iphone, iPad & Android Application Factory

Browsing Posts tagged display

iPhone-6-plus_iPhone6_iPhone-5sIn conjunction with iOS 8 Apple unveiled the new iPhone 6 including the Plus version which show, respectively, with a screen of 4.7 “and 5.5” inches. The new iPhone fundamentally change the screen resolution and retina display than previous models. With full compatibility with standard sRGB we have a better contrast, brightness and white balance improved.
Retina display HD resolution:

  • iPhone 6 1334×750 pixels with 326 ppi
  • iPhone 6 Plus 1920×1080 pixels with 401 ppi

Points

 Initially, the coordinates of all the images were specified in points, these are abstract units and only make sense in this particular coordinate space.
In the original iPhone, the points correspond perfectly to the actual pixels on the screen, but now this is no longer true.
Risoluzione_dimensione_punti_pixel_iPhone6-iPhone-6-plus_iPhone6Plus

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Rendered Pixels
The drawings Pointbaseed are rendered in pixels. This process is known as “rasterization”.
The point coordinates are multiplied by scaling factors to obtain the coordinates of the pixels. Scale factors produce more for a higher level of detail. Scale factors are typical for iOS × 1, 2 × and 3 ×.

iPhone6-iPhone-6-plus_iPhone6Plus_Dimensione_punti_pixel_risoluzione

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

The content is made to the pixels with the scale factor. This process is called rasterization.

The content is defined mathematically by using the coordinates of the point.

iPhone6-iPhone-6-plus_iPhone6Plus_render_pixel_pollici_ppi

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

Physical Pixels
The new iPhone 6 Plus has a screen with pixels of lower resolution than the raster image that is shown in the previous step. Before the image is displayed on the screen, you need to downsampling (resized) per pixel of lower resolution.

iPhone6-iPhone-6-plus_iPhone6Plus_pollici_ppi

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

iPhone-6-Plus-resize_downsampling_pixeliPhone-6-plus_iPhone6Plus_downsamplingPhysical Device
The last step is to show the pixels calculated on the physical screen. Each screen is characterized by a density of pixels per inch (PPI). This number indicates the number of pixels covered by a thumb, and then how big the pixels appear in reality.
Line rendering

To demonstrate different pixel rendering on different devices, we compare as a broad line 1 point is given on the different iPhone models:

Original iPhone without the Retina Display. Scale factor is 1 (1x).
iPhone 5 with Retina Display, the scale factor is 2 (2x).
iPhone 6 Plus – with Retina Display HD. Scale factor is 3 (3x), and the image is then scaled by the rendered 2208 × 1242 pixels to 1920 × 1080 pixels.

The reduction ratio is 1920/2208 = 1080/1242 = 20 / 23. This means that every 23 pixels from the original render must be mapped to 20 physical pixels. In other words, the image is reduced by approximately 87% of its original size.

 

iPhone-6-plus_iPhone6Plus_physical-pixels

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/iphone-6-screens-demystified

iOS iPHONE‘S RESOLUTIONS GUIDE

iPhone2g-3g-3gs_iPhone4_iPhone6-plus_iPhone6Plus_dimensioni

Diagrams Source PixelCut: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

iPhone5 has a larger screen than its predecessors. Developers iOS6 must support resolutions of 640 x 1136 px instead of 640 x 960 px pf iPhone4.
But even in this case if you follow the logic Apple work to be done is not at all complicated.

The blog   http://blog.mugunthkumar.com/coding/supporting-the-iphone-5/ proposes to follow four phases:

Phase 1:

iPhone 5 requires a new set of instructions, armv7s. Only in the last version of Xcode (4.5) supports the generation instruction set armv7s. Doa note that Xcode 4.5 no longer supports armv6 and deplores iPhone 3G and older devices. So we must now develop our application using Xcode 4.5

Phase 2:

The next step is to add a picture to launch (Default-568h@2x.png). When you build the project with Xcode 4.5, you receive a warning, “Missing 4 Retina launch image”. Click “Add” to add a default image to the project.

 

Step 3:

However, most of the nib file still will not be scaled correctly. The next step is to check the mask to automatically resize (auto resizing mask) of all the nib file and make sure that the view (view) in the nib file is automatically sized according to the new height of the view.

 

The properties that are used are:

UIViewAutoresizingFlexibleTopMargin,
UIViewAutoresizingFlexibleBottomMargin,
UIViewAutoresizingFlexibleHeight.

It uses UIViewAutoresizingFlexibleHeight for display on top so that car size with the main window. It uses the UIViewAutoresizingFlexibleTopMargin and / or UIViewAutoresizingFlexibleBottomMargin for subviews.

UIViewAutoresizingFlexibleTopMargin is used if you want the subview eimanga “nailed” to the bottom (top edge is flexible) and UIViewAutoresizingFlexibleBottomMargin is used if you want the secondary display is “pinned” to the top (I bottom is flexible).

If you are using Cocoa Auto Layout, this step becomes optional. However, self Layout is not supported on iOS 5.

 

Finally, any Layer that you have added to the view must be manually resized. The following code shows how to do this. We use patternLayer to add a pattern for all view controllers. You need to resize the method viewWillLayoutSubviews.

 

-(void)viewWillLayoutSubviews {

self.patternLayer.frame = self.view.bounds;
[super viewWillLayoutSubviews];
}Step 5 (if you were a messy coder):

 

step 5

If the height of the view was encoded at 460 or 480, you may need to change all iinsrendo bounds. For example,

 

self.window = [[UIWindow alloc] initWithFrame: [[mainScreen UIScreen] bounds]];

instead of

self.window = [[UIWindow alloc] initWithFrame: CGRectMake (0, 0, 320, 480)];

 

Create images with the new dimensions

As I could see on the blog http://redth.info/get-your-monotouch-apps-ready-for-iphone-5-ios-6-today/ Unfortunately, the naming convention of image-568h @ 2x. png only seems to be used for the image by default, but does not apply to other images of ‘application. This means that if you are using a custom background image for display (eg UITableView background), you may need to create a new background image at the correct resolution, and the application to determine when to use each image.
It would be nice if Apple had extended into the new SDK support for the new screen using the method:
[UIImage imageNamed:@"my-image"]

Currently I can point to “my-image” the name of my image (without extension) and the operating system looks for the image in the application bundle according to this criterion: if the screen is an image with the search type retina @ 2x suffix in the name, if not found looks for the image without suffix. We would have expected from Apple to extend the algorithm to include the ability to search for the suffix-568h @ 2x in the case of screen sizes 4 “. Unfortunately it is not and that is why we encode it explicitly in our code.

For example, in our non-4inch compatible app, I have two images:

Images / TableViewBackground.png – 320×358
Images / TableViewBackground@2x.png – 640×716

With the new resolution, I need to create a third image (we decided to use the option-568h @ 2x.png naming convention, even if it is not processed by Apple):

Images/TableViewBackground-568h@2x.png

An elegant approach is to create a new category for UIImage class (with a little imagination we call UIImage + Retina4), and perform at runtime within the category of a substitution method “imageNamed:” with one that can handle the new Convention:


// inside UIImage+Retina4.h
#import

@interface UIImage (Retina4)

@end

// all’interno di UIImage+Retina4.m
#import “UIImage+Retina4.h”
#ifdef TARGET_MAC_OS
#import
#else
#import
#endif

static Method origImageNamedMethod = nil;

@implementation UIImage (Retina4)

+ (void)initialize {
origImageNamedMethod = class_getClassMethod(self, @selector(imageNamed:));
method_exchangeImplementations(origImageNamedMethod,
class_getClassMethod(self, @selector(retina4ImageNamed:)));
}

+ (UIImage *)retina4ImageNamed:(NSString *)imageName {
NSMutableString *imageNameMutable = [imageName mutableCopy];
NSRange retinaAtSymbol = [imageName rangeOfString:@”@”];
if (retinaAtSymbol.location != NSNotFound) {
[imageNameMutable insertString:@”-568h” atIndex:retinaAtSymbol.location];
} else {
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
if ([UIScreen mainScreen].scale == 2.f && screenHeight == 568.0f) {
NSRange dot = [imageName rangeOfString:@”.”];
if (dot.location != NSNotFound) {
[imageNameMutable insertString:@”-568h@2x” atIndex:dot.location];
} else {
[imageNameMutable appendString:@”-568h@2x”];
}
}
}
NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageNameMutable ofType:@”png”];
if (imagePath) {
return [UIImage retina4ImageNamed:imageNameMutable];
} else {
return [UIImage retina4ImageNamed:imageName];
}
return nil;
}

@end

What this code does is initializing replace Apple’s implementation of “imageNamed:” with our “retina4ImageNamed:” (and vice versa). At the very moment when the runtime calls “imageNamed:” actually going to call our function that will load the image optimized for the screen to 4 “on condition that it exists and that we are running the app on a device with this screen (including the simulator). If the image is not present or the screen is the traditional 3.5 “would then call the original function (renamed due to the initial exchange).
Obviously, this implementation can not be used in case the loading of images occurs explicitly by means of calls of the type
[UIImage imageWithContentsOfFile …]
in which the name of the file to be constructed explicitly.

Tablet Apple iPad

In questo articolo proverò a sintetizzare gli elementi base della human interface (UI) dell’iPad. Sarà utile per i Designers di User experience (UX)  che vogliono progettare un’applicazione che rispetti il design e l’usabilita’ ideale alla Apple. La stessa Apple attraverso le proprie guidelines mette in guardia gli sviluppatori ad non uscire da un vero e proprio stile “grammaticale” che permette agli utenti di utilizzare al meglio le caratteristiche dello schermo dell’ipad.
Iniziamo quindi a ragionare sulla dimensione dello schermo dell’ipad che ha una risoluzione di 1024 x768 pixel contro i 480 x 320 px dell’iPhone e dell’iPod touch.

Il Display dell’ipad:
Risoluzione: 1024 × 768 px a 132 PPI (Pixel per pollice)
Aspect ratio:  4:3
Diagonale: 29 cm
Dimensioni: 20 × 15 cm

Led Display: XGA con vetro antigraffio
IPS LCD multi-touch display

Apple ci consiglia, e spesso ci impone, di utilizzare delle dimensioni standard nella costruzione dello schema di navigazione e nella definizione dei vari bottoni o spazi menù.
Nessuno ci vieta di sbizarrirci in creatività per un’usabilita’ non convenzionale, ma questo potrebbe portare ad una bocciatura nella review di Apple store a meno di non avere degli argomenti molto convincenti che rassicurino i revisori di Apple circa il miglioramento dell’esperienza d’uso per l’utilizzatore finale.
E’ possibile utilizzare un qualsiasi strumento , come ad esempio lo  Screen Aspect Ratio & Dimension Calculator , per determinare i valori delle specifiche dello schermo.

Gli elementi standard presenti nelle applicazioni ipad e iphone ,che permettono di avere un’interfaccia uniforme sono i seguenti:

a) Status bar (20 pixels)
b) Navigation Bar – Navbar (44 pixels)
c) Tool Bar – Toolbar (26 pixels)
d) Tab Bar – Menu bar (44 pixels)
e) Bottoni, Freccie, Icone

Tutte le icone iPhone & iPad UI devono essere in formato 24-bit PNG
Le dimesioni delle icone per la tab bar devono essere 30×30 pixelsmentre 20×20 pixels oer le icone della toolbar and navigation. Maggiorni informazioni sono disponibile direttamente sulla guida ufficiale Apple iPhone Human Interface Guidelines

Le Linee Guida della User interface iPad, UI Element Guidelines

Di seguito elenchiamo acuni degli elementi introdotti in iPhone OS 3.2, il sistema operativo del nostro ipad.

La Status Bar o Barra di Stato

La status bar e’ alta 20px ed è posizionata in alto sul bordo superiore dello schermo del dispositivo (in tutti gli orientamenti) e contiene informazioni  quali  la connessione di rete, l’ora  e la carica della batteria.

Non bisogna nascondere la status bar se l’applicazione non è un gioco o un’applicazione a schermo intero per la visualizzazione di filmati.
La Apple giustifca che piccole dimensioni della barra di stato e gli angoli leggermente arrotondati della barra superiore dell’applicazione si combinano per rendere la status bar come parte dello sfondo del dispositivo.

Si puo’ nascondere la barra di stato quando si lancia un filmato a schermo intero, ma se si esegue questa operazione, ci si deve assicurare che l’utente possa comunque recuperare la barra di stato con un solo tocco.

Anche se un gioco potrebbe definitivamente nascondere la barra di stato, si dovrebbe essere consapevoli delle conseguenze di questa decisione di progettazione.  Nascondere permanentementela barra di stato significa che gli utenti dovranno chiudere l’applicazione per scoprire, ad esempio, di aver bisogno di ricaricare il proprio iPad.

Navigation Bar o Barra di Navigazione

La Nagigation Bar (barra di navigazione) è alta 44px e compare sul bordo superiore di una schermata dell’applicazione. Una barra di navigazione di solito mostra il titolo della View corrente, e può contenere i controlli per la gestione della visualizzazione dei contenuti, oltre ai controlli di navigazione, quando ce ne sono.

Nell’immagine si mostra la Navigation Bar dell’app  Mail.

Nelle vostra applicazione per iPad potete usare una navigation bar in:

  • Either pane of a split view
  • popover
  • modal view
  • A full-screen application view (anche se questo utilizzo è inusuale in un’applicazione iPad)

Utilizzare una barra di navigazione quando si vuole consentire all’utente di visualizzare il dettaglio di una gerarchia di contenuti o informazioni. Lo si può fare al livello più alto della vostra applicazione o all’interno di una View discreta, come ad esempio una scheda, tab, split view pane o un popover.

Si deve Usare il titolo della View corrente come il titolo della barra di navigazione.
Quando poi l’utente si sposta ad un nuovo livello, e’ necessario che:
1)La barra del titolo dovrebbe cambiare il titolo del nuovo livello.
2)Un tasto Back dovrebbe apparire alla sinistra del titolo, e deve essere etichettato con il titolo del livello precedente.

Utilizzate una Tool Bar (barra degli strumenti), invece di una barra di navigazione se avete bisogno di offrire un insieme più ampio di controlli, o se non è necessario consentire la navigazione.

Valutare l’ipotesi di un controllo segmentato (segmanted control) in una barra di navigazione al livello più alto di un’applicazione. Ciò è particolarmente utile se così facendo aiutamo ad appiattire la gerarchia di informazioni per trovare piu’ facilmente quello che si sta cercando. Se si utilizza un controllo segmentato in una barra di navigazione, assicurarsi di scegliere i titoli accurati per i livelli di informazioni successivi.

Evitare di affollare la  barra di navigazione con controlli aggiuntivi, anche se  potrebbe essereci spazio sufficiente. Oltre al titolo della View, la barra di navigazione dovrebbe contenere non più del tasto back e un controllo che gestisce il contenuto della visualizzazione. Se invece si utilizza un controllo segmentato nella barra di navigazione, la barra non  dovrebbe avere un titolo e non deve contenere altri controlli.

Utilizzare i bottoni  system-provided come documentato in “Standard Buttons for Use in Toolbars and Navigation Bars” e in iPhone Human Interface Guidelines e “Icons for Navigation Bars, Toolbars, and Tab Bars” in iPhone Human Interface Guidelines.

Attenzione al fatto che una barra di navigazione non deve mai cambiare la sua altezza o traslucenza con la rotazione. Questo comportamento è diverso dal comportamento di una barra di navigazione in un Applicazione per iPhone.

Tab Bar

La tab bar di solito appare sul bordo inferiore di una schermata di applicazione e dà la possibilità di passare tra diverse sottoattività, visualizzazioni o modalità.
L’immagine mostra una Tab Bar in iTunes.

Evitare di includere nella Tab Bar  troppe schede. Mettere troppe schede in un Tap Bar può rendere fisicamente difficile per le persone accedere a quello che vogliono. Inoltre, con ogni scheda aggiuntiva si aumenta la complessità dell’applicazione. In generale, cercare di limitare il numero di schede nella vista principale o nel riquadro di destra di una View di divisione a  7 Schede (Tab) e 5 in un popover o nel riquadro di sinistra di una view per parti separate.

Evitare di creare un  tasto ” More tab“.

Visualizzare lo stesse numero e tipo di Tabs (schede) per ogni orientamento.

Utilizzare le system-provided tab icons according to their documented meaning.Vedere  “Standard Icons for Use in Tab Bars” in iPhone Human Interface Guidelines per maggiori informazioni. If you decide to create your own tab icons, see “Icons for Navigation Bars, Toolbars, and Tab Bars” in iPhone Human Interface Guidelines for advice on how to design them.

Nota : una barra delle schede non cambia il suo colore, l’opacità, o altezza, indipendentemente dall’orientamento. Questo comportamento è lo stesso comportamento di un’applicazione iPhone.

Toolbar (Barra degli Strumenti)

Una barra degli strumenti di solito compare sul bordo superiore di uno schermo o della view, ma può anche apparire sul bordo inferiore. La toolbar contiene i controlli che eseguono azioni legate agli oggetti sullo schermo o la View. L’immagine mostra una barra degli strumenti in Maps.

Utilizzare una Tool Bar per dare all’utente una selezione di comandi utilizzati di frequente che hanno senso nel contesto. Si può anche inserire un controllo segmentato (segmented control) nella barra degli strumenti per dare alle persone l’accesso a diversi punti di vista sui dati o alle diverse modalità dell’ applicazione. (Per le linee guida, leggere “Segmented Control.”)

NOTA: Mantenere una Target Area  di almeno 44 x 44 pixel per ogni elemento della barra degli strumenti. Se gli elementi della barra degli strumenti riusultassero troppo stretti, le uteniti avrebbero difficoltà a toccare cio’ che desiderano..

Ustilizzare i system-provided toolbar itemsin accordo con la documentazione. Leggere  “Standard Buttons for Use in Toolbars and Navigation Bars” in iPhone Human Interface Guidelines per maggiori informazioni.Se decidete di creare la vostra propria toolbar , leggere “Icons for Navigation Bars, Toolbars, and Tab Bars” in iPhone Human Interface Guidelines per consigli su come disegnarla.

Cercate di evitare di mescolare lo stile semplice (senza bordi) e delimitato gli elementi della barra degli strumenti nella barra degli strumenti stessi. È possibile utilizzare uno stile in una tool bar, ma non mescolandoli.

Apple Ipad Technical specifications

Model Wi-Fi Wi-Fi + 3G
Announcement date January 27, 2010
Release date April 3, 2010 April 30, 2010
Display 1024 × 768 px (aspect ratio 4:3), 9.7 in diagonal, appr. 45 in (290 cm), appr. 7.8 × 5.8 in (20 × 15 cm), 132 PPI, XGA, scratch-resistant glossy glass covered IPS LCD multi-touch display, with LED backlighting and fingerprint-resistant oleophobic coating
Processor 1 GHz Apple A4 PoP SoC
Storage Fixed, non-expandable capacity of 16, 32, or 64 GB
Wireless Wi-Fi (802.11a/b/g/n), Bluetooth 2.1+EDR
No wireless wide-area network interface 3G cellular HSDPA, 2G cellular EDGE
Geolocation Skyhook Wireless Assisted GPS, Skyhook Wireless, cellular network
Environmental sensors Accelerometer, ambient light sensor, magnetometer (for digital compass)
Operating system iPhone OS 3.2
Battery Built-in lithium-ion polymer battery; 25 W·h (90 kJ)
(10 hours video, 140 hours audio, 1 month standby)
Weight 680 g (1.5 lb) 730 g (1.6 lb)
Dimensions 242.8 × 189.7 × 13.4 mm (9.56 × 7.47 × 0.53 in)
Mechanical keys Home, sleep, screen rotation lock, volume

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close