iphone - uitableviewcontroller - Diferentes colores de fondo para la parte superior e inferior de un UITableView

uitableviewcontroller swift 4

Question

Si observa su Bandeja de entrada en la aplicación Correo del iPhone OS 3.0, verá que al deslizar hacia abajo se muestra un color de fondo grisáceo sobre la barra UISearch.

Ahora, si se desplaza hacia la parte inferior de la tabla, verá que el color de fondo en ese extremo es blanco.

Puedo pensar en un par de maneras de resolver este problema, pero son bastante intrépidas:

• Cambie el color de fondo de la vista de tabla en función del scrollOffset actual al reemplazar -scrollViewDidScroll:
• Dale a la UITableView un color de fondo claro y luego configura el color de fondo de su superview a una imagen de patrón degradado.

¿Alguien sabe cuál es la solución de "mejor práctica" para este problema? Gracias.

Answer 1

Aquí está la versión Swift 3:

var frame = self.tableView.bounds
frame.origin.y = -frame.size.height
let view = UIView(frame: frame)
view.backgroundColor = .gray
self.tableView.addSubview(view)

Answer 2

Cortesía de Erica Sadun:

- (void) scrollViewDidScroll: (UIScrollView *) sv
{
    float percent =  sv.contentOffset.y / sv.contentSize.height;
    percent = 0.5 + (MAX(MIN(1.0f, percent), 0.0f) / 2.0f);

    sv.backgroundColor = [UIColor colorWithRed:percent * 0.20392
                                         green:percent * 0.19607
                                          blue:percent * 0.61176 alpha: 1.0f];
}

y luego aquí está la versión modificada que estoy usando:

- (void)scrollViewDidScroll:(UIScrollView *)sv
{
        UIColor *backgroundColor = nil;

        float percent = sv.contentOffset.y / sv.contentSize.height;
        percent = 0.5 + (MAX(MIN(1.0f, percent), 0.0f) / 2.0f);

        if (0.5f == percent)
        {
            backgroundColor = RGBCOLOR(233.0f, 235.0f, 237.0f);
        }
        else
        {
            CGFloat r = 233.0f * (1.0f - percent) + 255.0f * percent;
            CGFloat g = 235.0f * (1.0f - percent) + 255.0f * percent;
            CGFloat b = 237.0f * (1.0f - percent) + 255.0f * percent;
            backgroundColor = RGBCOLOR(r,g,b);
        }           
        sv.backgroundColor = backgroundColor;
}

Answer 3

Creo que solo desea establecer el color BG de su celda en blanco, y hacer que el color BG de la tabla sea el otro color (gris). No estoy seguro de que tendrías éxito intentando hacer eso con celdas transparentes.

Answer 4

Debe considerar el uso de las propiedades tableHeaderView y tableFooterView de UITableView .

Answer 5

Esta es mi solución:

    let topColor = UIColor.blue
    let bottomColor = UIColor.black

    self.tableView.backgroundColor = topColor
    self.tableView.tableFooterView = UIView(frame: CGRect.zero)
    let footerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 1000))
    footerView.backgroundColor = bottomColor
    self.tableView.tableFooterView?.addSubview(footerView)

Answer 6

Establezca tableFooterView en una vista de 0 alto y ancho que se dibuje fuera de sus límites. Una forma fácil es agregarle una gran subvista:

self.tableView.tableFooterView = [[[UIView alloc] initWithFrame:CGRectZero] autorelease];
UIView *bigFooterView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1000)];
bigFooterView.backgroundColor = [UIColor whiteColor];
bigFooterView.opaque = YES;
[self.tableView.tableFooterView addSubview:bigFooterView];
[bigFooterView release];

ajuste [UIColor whiteColor] y el ancho de su bigFooterView en consecuencia (si su tableView puede ser horizontal, querrá que sea más ancho que 320). De esta forma, en la parte superior verá el fondo de la vista de tabla y, en la parte inferior, el fondo de la vista.

Answer 7

Esto podría no ser una "mejor práctica", pero si realmente quieres hacerlo como Apple, hay una propiedad privada de UITableView llamada tableHeaderBackgroundColor . El color grisáceo es #e2e7ed .

Podrías poner algo como esto en el método -viewDidLoad de un UITableViewController :

UIColor *grayishColor = [UIColor colorWithRed:226/255.0
                                        green:231/255.0
                                         blue:237/255.0 alpha:1.0];
[self.tableView setValue:grayishColor forKey:@"tableHeaderBackgroundColor"];

Answer 8

La forma más fácil y liviana de resolver este problema es:

1. Establezca el color de fondo de la vista de tabla en lo que desee, en su caso, blanco.
2. Coloque la vista de la barra de búsqueda dentro de una vista de contenedor. Establezca la vista de encabezado de la vista de tabla en esta vista de contenedor (en lugar de la vista de la barra de búsqueda, que es probablemente lo que estaba haciendo anteriormente).
3. En esa vista de contenedor, agregue otra subvista con un marco igual a un rect como (0, -480, 320, 480) y configure el color de fondo de esa subvista al color que desee, en su caso, grisáceo.

Eso debería ser todo lo que necesita hacer. Simplemente hice esto y logré el aspecto que quería, exactamente igual que la aplicación Mail. El uso de scrollViewDidScroll es un gran desperdicio de recursos de la CPU, y la subclasificación de UITableView es súper desordenada, IMO.

Answer 9

Resolví este problema con el uso de autolayouts. La solución funciona en diferentes tamaños de pantalla y con cambio de orientación.

   self.tableView.tableFooterView = UIView();

   if let tableFooterView = self.tableView.tableFooterView {
         let bigFooterView = UIView();
         bigFooterView.backgroundColor = UIColor.white;
         bigFooterView.isOpaque = true;
         tableFooterView.addSubview(bigFooterView);

         bigFooterView.translatesAutoresizingMaskIntoConstraints = false;

         tableFooterView.addConstraint(NSLayoutConstraint(item: bigFooterView, attribute: .trailing, relatedBy: .equal, toItem: tableFooterView, attribute: .trailing, multiplier: 1, constant: 0));
         tableFooterView.addConstraint(NSLayoutConstraint(item: bigFooterView, attribute: .leading, relatedBy: .equal, toItem: tableFooterView, attribute: .leading, multiplier: 1, constant: 0));
         tableFooterView.addConstraint(NSLayoutConstraint(item: bigFooterView, attribute: .top, relatedBy: .equal, toItem: tableFooterView, attribute: .top, multiplier: 1, constant: 0));
         tableFooterView.addConstraint(NSLayoutConstraint(item: bigFooterView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 1000));
   }

Answer 10

Swift 3.0+ solución reutilizable con una extensión:

extension UITableView {

    func addTopBounceAreaView(color: UIColor = .white) {
        var frame = self.bounds
        frame.origin.y = -frame.size.height

        let view = UIView(frame: frame)
        view.backgroundColor = color

        self.addSubview(view)
    }
}

Uso: tableView.addTopBounceAreaView()

Answer 11

También he expandido la respuesta en el fondo gris claro en el "área de rebote" de un UITableView al lado inferior. Espero que esto ayude :)

CGRect topFrame = self.tableView.bounds;
topFrame.origin.y = -topFrame.size.height;
UIView* topView = [[UIView alloc] initWithFrame:topFrame];
topView.backgroundColor = [UIColor grayColor]; // change to any color you want
[self.tableView addSubview:topView];

CGRect bottomFrame = self.tableView.bounds;
bottomFrame.origin.y = self.tableView.contentSize.height;
UIView* bottomView = [[UIView alloc] initWithFrame:bottomFrame];
bottomView.backgroundColor = [UIColor grayColor]; // change to any color you want
[self.tableView addSubview:bottomView];

Answer 12

Hay buenas respuestas en el fondo gris claro en "área de rebote" ...

Donde encontré este código (ligeramente modificado) que funciona muy bien:

CGRect frame = self.tableView.bounds;
frame.origin.y = -frame.size.height;
UIView* grayView = [[UIView alloc] initWithFrame:frame];
grayView.backgroundColor = [UIColor grayColor];
[self.tableView addSubview:grayView];
[grayView release];