---
title: Auto Layout iOS 7 (Video)
url: https://jarroba.com/auto-layout-ios-7-video/
author: Richard [Admin Jarroba]
date: 2013-11-20
modified: 2026-10-21
language: es
license: CC BY-NC-SA 3.0 (https://creativecommons.org/licenses/by-nc-sa/3.0/) — attribution: "Auto Layout iOS 7 (Video)", Richard [Admin Jarroba], jarroba.com
categories: Aplicaciones Móviles
tags: AutoLayout, iOS, iPhone
repository: https://github.com/jarroba/AutoLayoutExample
---

# Auto Layout iOS 7 (Video)

> Videotutorial para adaptar la interfaz de tu app iOS a las distintas pantallas de iPhone tras el iPhone 5, ajustando los elementos con Auto Layout.

Con la aparición del iPhone 5, las dimensiones de los iPhone han variado y una de las grandes ventajas que teníamos los desarrolladores de iOS frente a los de Android es que las dimensiones de las pantallas de los dispositivos móviles eran fijas. Con este cambio de tamaños de las pantallas de los iPhones, el diseño de las vistas se complica un poco, pero en esta entrada y en este video-tutorial vamos a ver que es muy sencillo adaptar nuestra App para los iPhones.

 

El proyecto realizado en el tutorial lo podéis descargar pulsando [AQUI](https://github.com/jarroba/AutoLayoutExample).

 

A continuación mostramos el video-tutorial:

 

 

En la siguiente imagen mostramos una comparativa de las dimensiones de las pantallas de los iPhone:

 

En las siguientes imágenes, mostramos el detalle de los pasos a realizar para que los elementos se ajusten a todas las pantallas de los iPhone:

 

[![sizes_iPhone_jarroba](https://jarroba.com/wp-content/uploads/2013/11/sizes_iPhone_jarroba.png)](https://jarroba.com/wp-content/uploads/2013/11/sizes_iPhone_jarroba.png)

 

PASO 1 – Deseleccionar el "Use Autolayout":

 

[![autoLayout_1_iPhone_jarroba](https://jarroba.com/wp-content/uploads/2013/11/autoLayout_1_iPhone_jarroba.png)](https://jarroba.com/wp-content/uploads/2013/11/autoLayout_1_iPhone_jarroba.png)

 

PASO 2 – Ajustar el elemento a los bordes de la pantalla:

 

[![autoLayout_2_iPhone_jarroba](https://jarroba.com/wp-content/uploads/2013/11/autoLayout_2_iPhone_jarroba.png)](https://jarroba.com/wp-content/uploads/2013/11/autoLayout_2_iPhone_jarroba.png)