iOS 7: UITableView se muestra en la barra de estado

La primera pantalla de mi aplicación es UITableViewControllersin barra de navegación, lo que significa que el contenido fluye debajo de la barra de estado, por lo que hay muchas colisiones de texto. He ajustado tanto las propiedades Under top barscomo las Adjust scroll view insetsque realmente evitan que se desplace hacia abajo, pero a costa de mantener la parte superior de la vista de tabla debajo. Intenté configurar el UITableViewmarco para que se compensara en 20 píxeles, pero no parece surtir efecto y, como actualmente necesito que la aplicación sea compatible con iOS 6, no puedo saltar a Storyboards de iOS 7 para forzar el uso de la distribución automática La guía de altura superior. ¿Alguien ha encontrado una solución que funcione para ambas versiones?

Cosas que he intentado: configurar edgesForExtendedLayout, cambiar la configuración dentro de Storyboard para Under top barsy Adjust scroll view, forzar el marco a una nueva área.

Una imagen vale mas que mil palabras:

Para cualquier persona interesada en replicar esto, simplemente siga estos pasos:

1. Crea un nuevo proyecto de iOS
2. Abra el guión gráfico principal y elimine el predeterminado / inicial UIViewController
3. Arrastre un nuevo UITableViewControllerdesde la Biblioteca de objetos
4. Configúrelo como el controlador de vista inicial
5. Alimente la tabla con algunos datos de prueba

Si sigue los pasos anteriores, cuando ejecute la aplicación, verá que nada, incluso ajustar las casillas de verificación de Xcode para "Extender bordes debajo de {Barras superiores, inferiores, opacas}" funciona para evitar que la primera fila aparezca debajo de la barra de estado, ni puedes abordar esto programáticamente.

Por ejemplo, en el escenario anterior, la siguiente tendrá ningún efecto:

// These do not work
self.edgesForExtendedLayout=UIRectEdgeNone;
self.extendedLayoutIncludesOpaqueBars=NO;
self.automaticallyAdjustsScrollViewInsets=NO;

Este problema puede ser muy frustrante, y creo que es un error del lado de Apple, especialmente porque aparece en su propio cableado UITableViewControllerde la biblioteca de objetos.

No estoy de acuerdo con todos los que están tratando de resolver esto usando cualquier forma de "Números Mágicos", por ejemplo, "use un delta de 20px". Este tipo de programación estrechamente acoplada definitivamente no es lo que Apple quiere que hagamos aquí.

He descubierto dos soluciones a este problema:

• Preservación de la UITableViewControllerescena :
  si desea mantener el UITableViewControlleren el guión gráfico, sin colocarlo manualmente en otra vista, puede incrustarlo UITableViewControlleren un UINavigationController(Editor> Incrustar en> Controlador de navegación) y desmarcar "Muestra la barra de navegación" en el inspector . Esto resuelve el problema sin necesidad de ajustes adicionales, y también conserva su UITableViewControllerescena en el guión gráfico.

• Usando AutoLayout e incrustando UITableViewen otra vista (creo que así es como Apple quiere que hagamos esto) : cree
  un vacío UIViewControllery arrastre el suyo UITableView. Luego, arrastre Ctrl y arrastre desde su UITableViewhacia la barra de estado. Cuando el mouse llegue a la parte inferior de la barra de estado, verá una burbuja de Autolayout que dice "Guía de diseño superior". Suelte el mouse y elija "Espaciado vertical". Eso le indicará al sistema de diseño que lo coloque justo debajo de la barra de estado.

He probado ambas formas en una aplicación vacía y ambas funcionan. Es posible que deba hacer algunos ajustes adicionales para que funcionen para su proyecto.

Si está haciendo cosas programáticamente y está utilizando un UITableViewControllersin UINavigationControllersu mejor apuesta es hacer lo siguiente en viewDidLoad:

Swift 3

self.tableView.contentInset = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)

Anterior Swift

self.tableView.contentInset = UIEdgeInsetsMake(20.0f, 0.0f, 0.0f, 0.0f);

El UITableViewControllertodavía se desplazará detrás de la barra de estado, pero no habrá debajo de ella cuando desplazado hasta la parte superior.

Tenga en cuenta: Esto funcionó para mí para la siguiente configuración:

• No hay barra de navegación en la parte superior de la pantalla (la vista de tabla se encuentra con la barra de estado)
• La vista de tabla no es desplazable

Si no se cumplen los dos requisitos anteriores, su kilometraje puede variar.

Publicación original

Creé mi vista mediante programación y esto terminó funcionando para mí:

- (void) viewDidLayoutSubviews {
    // only works for iOS 7+
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {
        CGRect viewBounds = self.view.bounds;
        CGFloat topBarOffset = self.topLayoutGuide.length;

        // snaps the view under the status bar (iOS 6 style)
        viewBounds.origin.y = topBarOffset * -1;

        // shrink the bounds of your view to compensate for the offset
        viewBounds.size.height = viewBounds.size.height + (topBarOffset * -1);
        self.view.bounds = viewBounds;
    }
}

Fuente (en la sección topLayoutGuide en la parte inferior de la página 39).

Agregando a la respuesta superior:

después de que el segundo método no parecía funcionar inicialmente, hice algunos ajustes adicionales y encontré la solución.

TLDR; la segunda solución de la respuesta superior casi funciona, pero para algunas versiones de xCode ctrl + arrastrar a "Guía de diseño superior" y seleccionar Espaciado vertical no hace nada. Sin embargo, primero ajustando el tamaño de la Vista de tabla y luego seleccionando "Guía de diseño de espacio superior a superior" funciona

1. Arrastre un ViewController en blanco al guión gráfico.

2. Arrastre un objeto UITableView a la Vista. (No UITableViewController). Colóquelo en el centro usando las guías de diseño azules.

3. Arrastre un UITableViewCell al TableView. Esta será su celda de reutilización de prototipo, así que no olvide configurar su Identificador de reutilización en la pestaña Atributos o se bloqueará.

4. Cree su subclase personalizada de UIViewController y agregue los <UITableViewDataSource, UITableViewDelegate>protocolos. No olvide configurar ViewController de su guión gráfico para esta clase en el Inspector de identidad.

5. Cree una salida para su TableView en su archivo de implementación y asígnele el nombre "tableView"

6. Haga clic derecho en TableView y arrastre el dataSource y el delegado a su ViewController.

Ahora por la parte de no cortar en la barra de estado

7. Tome el borde superior de la Vista de tabla y muévalo hacia abajo a una de las guías azules de diseño automático discontinuas que se encuentran cerca de la parte superior

8. Ahora, puede controlar el arrastre desde la Vista de tabla a la parte superior y seleccionar la Guía de diseño de espacio superior a superior

9. Le dará un error sobre el diseño ambiguo de TableView, solo agregue restricciones faltantes y listo.

¡Ahora puede configurar la vista de la tabla como de costumbre y no recortará la barra de estado!

- (void) viewDidLayoutSubviews {
    if (floor(NSFoundationVersionNumber) > NSFoundationVersionNumber_iOS_6_1) {
        self.navigationController.navigationBar.barStyle = UIBarStyleBlackOpaque;
        if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
            self.edgesForExtendedLayout = UIRectEdgeNone;   // iOS 7 specific
        CGRect viewBounds = self.view.bounds;
        CGFloat topBarOffset = self.topLayoutGuide.length;
        viewBounds.origin.y = topBarOffset * -1;
        self.view.bounds = viewBounds;
        self.navigationController.navigationBar.translucent = NO;
    }
}

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/TransitionGuide/SupportingEarlieriOS.html#//apple_ref/doc/uid/TP40013174-CH14-SW1

Seleccione UIViewController en su guión gráfico y desactive la opción Extender bordes debajo de las barras superiores. Trabajó para mi. :)

Así es como se escribe en "Swift". Un ajuste a la respuesta de @ lipka:

tableView.contentInset = UIEdgeInsetsMake(20.0, 0.0, 0.0, 0.0)

Para Xcode 7, desmarcar la marca de verificación 'translúcida' para la barra de navegación funcionó para mí.

Esto lo arreglará para un UITableViewController (sin ningún número mágico). Lo único que no pude solucionar es si estás en una llamada telefónica, en cuyo caso la parte superior de la vista de tabla se presiona demasiado. Si alguien sabe cómo resolverlo, háganoslo saber.

class MyTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()    
        configureTableViewTop()
    }

    override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
        coordinator.animateAlongsideTransition({ (context) -> Void in
            }, completion: { (context) -> Void in
                self.configureTableViewTop()
        })
    }

    func configureTableViewTop() { 
        tableView.contentInset.top = UIApplication.sharedApplication().statusBarFrame.height
    }
}

No sé cómo es Kosher, pero descubrí que este esquema mueve la vista de ViewController hacia abajo y proporciona a la barra de estado un fondo sólido:

- (void)viewDidLoad {
    [super viewDidLoad];

    // Shove everything down if iOS 7 or later
    float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue];
    if (systemVersion >= 7.0f) {

        // Move the view down 20 pixels
        CGRect bounds = self.view.bounds;
        bounds.origin.y -= 20.0;
        [self.view setBounds:bounds];

        // Create a solid color background for the status bar
        CGRect statusFrame = CGRectMake(0.0, -20.0, bounds.size.width, 20);
        UIView* statusBar = [[UIView alloc] initWithFrame:statusFrame];
        statusBar.backgroundColor = [UIColor redColor];
        [self.view addSubview:statusBar];
    }

Por supuesto, reemplácelo redColorcon el color que desee para el fondo.

Debe hacer una de las combinaciones por separado para establecer el color de los caracteres / símbolos en la barra de estado. Yo uso View controller-based status bar appearance = NOy Status bar style = Opaque black styleen el plist, para hacer esto a nivel mundial.

Parece funcionar, y me interesaría saber de cualquier error o problema con él.

La respuesta de chappjc funciona muy bien cuando se trabaja con XIB.

Encontré que la solución más limpia al crear TableViewControllers mediante programación es envolver la instancia de UITableViewController en otro UIViewController y establecer las restricciones en consecuencia.

Aquí está:

UIViewController *containerLeftViewController = [[UIViewController alloc] init];
UITableViewController *tableViewController = [[UITableViewController alloc] init];

containerLeftViewController.view.backgroundColor = [UIColor redColor];

hostsAndMoreTableViewController.view.translatesAutoresizingMaskIntoConstraints = NO;
[containerLeftViewController.view addSubview:tableViewController.view];

[containerLeftViewController addChildViewController:tableViewController];
[tableViewController didMoveToParentViewController:containerLeftViewController];

NSDictionary * viewsDict = @{ @"tableView": tableViewController.view ,
                              @"topGuide": containerLeftViewController.topLayoutGuide,
                              @"bottomGuide": containerLeftViewController.bottomLayoutGuide,
                              };
[containerLeftViewController.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[tableView]|"
                                                                                         options:0
                                                                                         metrics:nil
                                                                                           views:viewsDict]];
[containerLeftViewController.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[topGuide][tableView][bottomGuide]"
                                                                                         options:0
                                                                                         metrics:nil
                                                                                           views:viewsDict]];

Saludos, Ben

Creo que el enfoque para usar UITableViewController podría ser un poco diferente de lo que has hecho antes. Me ha funcionado, pero es posible que no seas fanático de eso. Lo que he hecho es tener un controlador de vista con una vista de contenedor que apunta a mi UItableViewController. De esta manera, puedo usar la Guía de diseño superior proporcionada en mi guión gráfico. Simplemente agregue la restricción a la vista del contenedor y debe tener cuidado tanto para iOS7 como para iOS6.

Terminé usando una vista adicional con el fondo deseado, agregué después de TableView y coloqué debajo de la barra de estado:

    self.CoverView = [[UIView alloc]init];

    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {

    self.CoverView.frame = CGRectMake(0,0,self.view.bounds.size.width,20);
    }

    self.CoverView.backgroundColor = [UIColor whiteColor];
    self.TableView = [[UITableView alloc]initWithFrame:CGRectMake(0,
    self.CoverView.bounds.size.height,XXX, YYY)];
    [self.view addSubview:self.TableView];
    [self.view addSubview:self.CoverView];

No es muy bonito, pero es una solución bastante simple, si necesita trabajar con vistas sin xib, y tanto IOS6 como IOS7

He hecho esto para la pantalla Retina / No Retina como

BOOL isRetina = FALSE;

if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {
    if ([[UIScreen mainScreen] scale] == 2.0) {
        isRetina = TRUE;
    } else {
        isRetina = FALSE;
    }
}

if (isRetina) {
    self.edgesForExtendedLayout=UIRectEdgeNone;
    self.extendedLayoutIncludesOpaqueBars=NO;
    self.automaticallyAdjustsScrollViewInsets=NO;
}

La siguiente solución funciona lo suficientemente bien en código sin usar constantes mágicas, y explica que el usuario cambie la clase de tamaño, por ejemplo, mediante rotaciones o aplicaciones de lado a lado en ipads:

- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    [super traitCollectionDidChange:previousTraitCollection];
    // Fix up content offset to ensure the tableview isn't underlapping the status bar.
    self.tableView.contentInset = UIEdgeInsetsMake(self.topLayoutGuide.length, 0.0, 0.0, 0.0);
}

Funciona para swift 3 - En viewDidLoad ();

let statusBarHeight = UIApplication.shared.statusBarFrame.height

let insets = UIEdgeInsets(top: statusBarHeight, left: 0, bottom: 0, right: 0)
tableView.contentInset = insets
tableView.scrollIndicatorInsets = insets

Este código: 1. Obtiene la altura de la barra de estado 2. Da a la parte superior de la vista de tabla un contenido de contenido igual a la altura de la barra de estado. 3. Le da al indicador de desplazamiento el mismo recuadro, por lo que aparece debajo de la barra de estado.

Para aquellos como yo que prefieren no incrustar sus UITableViewControlleren un UIViewControllerintento esto:

Una UITableViewControllersubclase personalizada puede agregar una vista de máscara a la supervista de tableView. Agregue la máscara en viewDidAppear y elimine la máscara en viewWillDisappear.

private var statusBarMaskView: UIView!

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    if let superview = self.tableView.superview {
        self.statusBarMaskView = UIView(frame: CGRect.zero)
        superview.insertSubview(self.statusBarMaskView, aboveSubview: self.tableView)
        self.statusBarMaskView.backgroundColor = self.tableView.backgroundColor

        // using a nice constraint layout library to set the frame
        self.statusBarMaskView.pinTop(to: superview)
        self.statusBarMaskView.pinLeft(to: superview)
        self.statusBarMaskView.pinRight(to: superview)
        self.statusBarMaskView.addHeightConstraint(with: 22.0)
        ////
    }
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    self.statusBarMaskView.removeFromSuperview()
    self.statusBarMaskView = nil
}

Tenía una UISearchBar en la parte superior de mi UITableView y funcionó lo siguiente;

self.tableView.contentInset = UIEdgeInsetsMake(20, 0, 0, 0);
self.tableView.contentOffset = CGPointMake(0, -20);

Comparte y Disfruta...

Lo hice funcionar estableciendo el tamaño en forma libre

La solución de Abrahamchez https://developer.apple.com/library/ios/qa/qa1797/_index.html funcionó para mí de la siguiente manera. Tenía un solo controlador UITableview como mi vista inicial. Había intentado el código de desplazamiento e incrustado en un navcon pero ninguno resolvió la transparencia de la barra de estado.

Agregue un Viewcontroller y conviértalo en la vista inicial. Esto debería mostrarle las guías de diseño superior e inferior críticas.

Arrastre la vista de tabla anterior a la vista en el nuevo controlador.

Haga todo lo posible para adaptar la tabla al nuevo controlador:

Cambie su antiguo archivo view controller.h para heredar / subclase de UIViewController en lugar de UITableViewController.

Agregue UITableViewDataSource y UITableViewDelegate al viewcontroller .h.

Vuelva a conectar todo lo necesario en el guión gráfico, como una barra de búsqueda.

Lo importante es configurar las restricciones, como en las preguntas y respuestas de Apple. No me molesté en insertar una barra de herramientas. No estoy seguro de la secuencia exacta. Pero apareció un icono rojo en las Guías de diseño, tal vez cuando construí. Hice clic y dejé que Xcode instalara / limpiara las restricciones.

Luego hice clic en todas partes hasta que encontré la restricción de Espacio vertical y cambié su valor superior de -20 a 0 y funcionó perfectamente.

Estoy usando un UISplitViewController con un controlador de navegación y un controlador de vista de tabla. Esto funcionó para mí en la vista maestra después de probar muchas soluciones aquí:

float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue];
if (systemVersion >= 7.0f) {

    // Move the view down 20 pixels
    CGRect bounds = self.view.bounds;
    bounds.origin.y -= 20.0;
    [self.navigationController.view setBounds:bounds];

    // Create a solid color background for the status bar
    CGRect statusFrame = CGRectMake(0.0, -20.0, bounds.size.width, 20);
    UIView* statusBar = [[UIView alloc] initWithFrame:statusFrame];
    statusBar.backgroundColor = [UIColor whiteColor];
    [statusBar setAlpha:1.0f];
    [statusBar setOpaque:YES];
    [self.navigationController.view addSubview:statusBar];
}

Es similar a la solución de Hot Licks, pero aplica la subvista al control de navegación.

override func viewDidLoad() {
 // your code

 if let nc = self.navigationController {
   yourView.frame.origin.y = nc.navigationBar.frame.origin.y + nc.navigationBar.frame.height
  }
}

Aquí hay un Swift 2.3. (Xcode 8.0) solución. He creado una subclase de UITableView.

class MYCustomTableView: UITableView
{   
    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        contentInset    = UIEdgeInsetsZero
    }
}

El contenido del recuadro siempre debe ser cero (por defecto). Lo estoy configurando a cero manualmente. También puede agregar un método de verificación que haga la verificación y si es algo diferente a lo que desea que sea, simplemente obtenga el rect correcto. El cambio se reflejará solo cuando se dibuje la vista de tabla (lo que no sucede a menudo).

No olvide actualizar TableView en su IB (en TableViewController o simplemente TableView dentro de su ViewController).

Estaba enfrentando este problema en ios 11 pero el diseño era correcto para ios 8 - 10.3.3. Para mi caso, configuré una restricción de espacio vertical en Superview.Margen superior en lugar de Superview.Top, que funciona para ios 8-11.

Encontré que la forma más fácil de hacer esto, especialmente si está agregando su vista de tabla dentro de la barra de pestañas es primero agregar una vista y luego agregar la vista de tabla dentro de esa vista . Esto le brinda las guías de margen superior que está buscando.

ver todas las soluciones: mi proyecto es solo usar xib, por lo tanto, la solución con storyboard no funcionó para mí. self.edgesForExtendedLayout = UIRectEdgeNone; solo funciona para el controlador si la barra de navegación está visible. pero si su vista es solo tener barra de estado, eso no funcionará. entonces combino dos condiciones.

- (void) viewDidLayoutSubviews {
float systemVersion = [[[UIDevice currentDevice] systemVersion] floatValue];
if (systemVersion >= 7.0f) {
    CGRect bounds = self.view.bounds;
    if(self.navigationController == nil || self.navigationController.isNavigationBarHidden == YES){
        bounds.origin.y -= 20.0;
        [self.view setBounds:bounds];
    }
    else{
        self.edgesForExtendedLayout = UIRectEdgeNone;
    }
}

ayuda esto funciona.

Si también necesita admitir iOS 6, deberá moverlo hacia abajo condicionalmente. Es decir, en iOS 7 solo debes moverlo 20 puntos hacia abajo (ya sea mediante framemanipulación o usando el diseño automático), y en iOS 6 lo dejas en paz. No creo que pueda hacer esto en IB, por lo que tendrá que hacerlo en código.

EDITAR

En realidad, puede hacer esto en IB, utilizando los deltas de iOS6 / iOS7. Establezca su posición en iOS 7, luego para iOS 6 configure el delta Y en -20 puntos. Vea esta pregunta SO para más información.