Cómo personalizar el separador TableView en iPhone

Question

De forma predeterminada, hay un único separador de línea en uitableview.

Pero quiero poner mi línea personalizada como separador.

¿Es posible? ¿Cómo?

Answer 1

Si desea hacer algo más que cambiar el color del separador con el separatorColor propiedad de la UITableView entonces usted podría establecer la propiedad separatorStyle-UITableViewCellSeparatorStyleNone y luego o bien:

• crear personalizados UITableViewCell s que incluyen el separador personalizado dentro de ellas
• crear alternativas UITableViewCell s que incluyen el separador personalizado

Por ejemplo, si su tabla actualmente muestra 5 filas, puede actualizarla para mostrar 9 filas y las filas en el índice 1, 3, 5, 7 serían celdas de separación.

Consulte Subclassing UITableViewCell en el Table View Programming Guide para obtener más información sobre cómo crear UITableViewCell s personalizado.

Answer 2

No sé si esto se puede hacer "automáticamente" con alguna configuración. Pero una sugerencia sería establecer el separador de línea como ninguno, y en los bordes de las celdas dibujar el separador de línea que desee ..

Answer 3

se agrega el siguiente código cellForRowAtIndexPath delegado de tableView para crear una vista de imagen personalizada altura de 1 píxel y 200 píxeles de ancho para everyCell

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, 1)]; 
lineView.backgroundColor = [UIColor blackColor]; 
[cell.contentView addSubview:lineView]; 

Nota: no sé lo pesado que es en el rendimiento.

Answer 4

Una mejor solución es utilizar el ancho y la altura actuales de la celda. Algo como esto:

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)]; 

lineView.backgroundColor = [UIColor darkGrayColor]; 
[cell.contentView addSubview:lineView]; 

Answer 5

Si usted necesita diversos colores de separador para diferentes filas o desea que el separador permanezca visible cuando la fila se resalta de barril luego intente esto:

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; 

// We have to use the borderColor/Width as opposed to just setting the 
// backgroundColor else the view becomes transparent and disappears during 
// the cell's selected/highlighted animation 
UIView *separatorView = [[UIView alloc] initWithFrame:CGRectMake(0, 43, 1024, 1)]; 
separatorView.layer.borderColor = [UIColor redColor].CGColor; 
separatorView.layer.borderWidth = 1.0; 
[cell.contentView addSubview:separatorView]; 

Esto supone que su celda de el color de fondo es transparente.

---

La solución anterior surgió de una amplia experimentación.He aquí algunas notas sobre mis hallazgos que estoy seguro que ayudará a la gente:

En el estado normal “no seleccionado”

• El contentView (cuál está en su XI ter menos que codifica de otra manera) se dibuja normalmente
• el selectedBackgroundView se oculta
• el backgroundView es visible (así lo dispone su contentView es transparente se ve el backgroundView o (si no se ha definido un backgroundView verá el color de fondo de la propia UITableView)

se selecciona una celda, ocurre lo siguiente inmediatamente con-OUT cualquier animación:

• Todas las vistas/subvistas dentro de la contentView tienen su backgroundColor borra (o se establece en transparente), etiqueta etc color del texto de cambie a su color seleccionado
• El selectedBackgroundView se vuelve visible (esta vista siempre es el tamaño completo de la celda (se ignora un marco personalizado, use una subvista si es necesario). También tenga en cuenta que backgroundColor de subViews no se muestran por alguna razón, tal vez estén configurados de manera transparente como contentView. Si no se define una selectedBackgroundView continuación cacao creará/insertar el azul (o gris) gradiente de fondo y mostrar esto para usted)
• El backgroundView no se ha modificado

Cuando se anula la selección de la célula, una animación para eliminar las aperturas de resaltado: propiedad alpha

• El selectedBackgroundView está animado de 1,0 (totalmente opaco) a 0,0 (completamente transparente).
• El backgroundView es de nuevo sin cambios (por lo que la animación se ve como un fundido cruzado entre selectedBackgroundView y backgroundView)
• Sólo una vez que la animación ha terminado hace el contentView conseguir vuelve a dibujar en el estado "no seleccionado" y su subvista backgroundColor del vuelven a ser visibles (esto puede causar la animación a un aspecto horrible, por lo que es aconsejable que no se utiliza en su UIView.backgroundColor contentView)

Answer 6

en una pantalla de la retina, incluso trazar una línea de 0,5 unidades dará lugar a dos píxeles línea, debido a anti-aliasing. Para que sea como un solo píxel en ambas pantallas, desplazarlo hasta una cuarta parte de una unidad:

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, self.contentView.frame.size.height - (1.0 - 0.25), self.contentView.frame.size.wi 
lineView.backgroundColor = [UIColor colorWithRed:(230.0/255.0f) green:(233/255.0f) blue:(237.0/255.0f) alpha:1.0f]; 
[self.contentView addSubview:lineView]; 

Answer 7

Estas respuestas dan como resultado el punto culminante rect ser sobrescrito por el separador que añadir a su celular (en iOS 6 con mi probando al menos). Es necesario configurar el separatorColor a [UIColor clearColor] para que las células todavía están separadas por 1 píxel, a continuación, puede llamar su separador en el Hueco:

- (void)viewDidLoad { 
    self.tableView.separatorColor = [UIColor clearColor]; 
} 

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
    // snip 
    CALayer *separator = [CALayer layer]; 
    separator.backgroundColor = [UIColor redColor].CGColor; 
    separator.frame = CGRectMake(0, 43, self.view.frame.size.width, 1); 
    [cell.layer addSublayer:separator]; 
    return cell; 
} 

Answer 8

Probado en iOS 7 (GM):

@implementation MyTableViewController 

- (void)viewDidLayoutSubviews { 
    for (UIView *view in self.view.subviews) { 
     if ([view isKindOfClass:NSClassFromString(@"_UITableViewCellSeparatorView")]) 
      view.backgroundColor = [UIColor redColor]; 
    } 
} 

@end 

NOTA : parece que UITableView mueve separadores a las celdas en algunas configuraciones, lo que haría que este código no funcione a menos que descienda también a todas las UITableViewCells.

Answer 9

La celda en la parte inferior es una subclase de UITableViewCell donde cada celda podría tener su propio separador con muchos estilos (actualmente solo son compatibles .None y .Default). Está escrito en Swift y asume el uso de Autolayout.

https://gist.github.com/evgeniyd/fa36b6f586a5850bca3f

Cómo utilizar la clase:

1. estilo separador conjunto UITableView del objeto a UITableViewCellSeparatorStyle.None

   tableView.separatorStyle = .None 
   

2. Crear una subclase de MPSTableViewCell

3. En algún lugar dentro awakeFromNib() estilo separador de células conjunto

Nota: el código siguiente supone celular se carga desde xib/guión gráfico

class FASWorkoutCell: FASTableViewCell { 

    required init(coder aDecoder: NSCoder) { 
     super.init(coder: aDecoder) 
    } 

    override func awakeFromNib() { 
     super.awakeFromNib() 

     separatorType = .Default 
    } 

    // ... 

    } 

Answer 10

Si utiliza un UITableViewCell personalizado, simplemente puede añadir UIView en la parte inferior de la UITableViewCell. xib y pon el color de fondo como el color que quieras.

Por ejemplo, en xib agrego un UIView en el fondo y fijar la altura como 1. Usando autolayout, I juego de izquierda restricción a 12, restricción inferior a 0, la restricción derecho a 0 y la altura a 1.

Answer 11

Si está utilizando celdas personalizadas en Swift: un enfoque alternativo es extender UITableViewCell con una función que puede dibujar una línea en la parte superior de esa celda.

import UIKit 

extension UITableViewCell { 
    func addSeparatorLineToTop(){ 
     var lineFrame = CGRectMake(0, 0, bounds.size.width, 1) 
     var line = UIView(frame: lineFrame) 
     line.backgroundColor = UIColor.myGray_300() 
     addSubview(line) 
    } 
} 

A continuación, puede añadir esta línea a cualquier célula personalizado, por ejemplo en el awakeFromNib

override func awakeFromNib() { 
    super.awakeFromNib() 
    addSeparatorLineToTop() 
} 

Esta solución es agradable porque no es así estropear su guión gráfico y limita su código extra para 1 línea .

Answer 12

versión Swift:

private let kSeparatorTag = 123 
private let kSeparatorHeight: CGFloat = 1.5 

func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) 
{ 
    if cell.viewWithTag(kSeparatorTag) == nil //add separator only once 
    { 
     let separatorView = UIView(frame: CGRectMake(0, cell.frame.height - kSeparatorHeight, cell.frame.width, kSeparatorHeight)) 
     separatorView.tag = kSeparatorId 
     separatorView.backgroundColor = UIColor.redColor() 
     separatorView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] 

     cell.addSubview(separatorView) 
    } 
}