Esquinas redondeadas en UITableView

Question

¿Cuál es la mejor manera de obtener esquinas redondeadas en toda una UITableView como se ve en Stocks y Spotlight? El estilo agrupado no resuelve el problema porque las esquinas redondeadas se desplazan con la celda. Intento recortar la vista para que las esquinas estén siempre redondeadas independientemente de la posición de desplazamiento.

Vi otra discusión sobre cómo hacer esto en un UIImage que sugirió enmascararlo con otra imagen. No estoy seguro de si esto funcionaría porque necesito que los grifos pasen a la mesa. Esto no es ideal para mí porque quiero que el patrón de fondo se muestre a través de las esquinas.

Answer 1

¿Has probado el estilo de vista de tabla "agrupada"?

self.tableView.style = UITableViewStyleGrouped; 

Para obtener más información, consulte el Table View Programming Guide. El capítulo "Acerca de las vistas de tabla" tiene algunas bonitas capturas de pantalla que describen los diferentes estilos.

Answer 2

Otra forma sería enmascarar el UITableView utilizando Core Graphics. Puede encontrar un ejemplo de enmascaramiento de UIView aquí: http://iphonedevelopment.blogspot.com/2008/11/creating-transparent-uiviews-rounded.html

Answer 3

Es una vieja pregunta, pero tal vez aún desee saber cómo hacerlo.

He reproducido un tableView como en Stocks/Spotlight. El truco es

view.layer.cornerRadius = 10; 

Para que esto funcione es necesario incluir la QuartzCore en la clase que se llama a esa propiedad:

#import <QuartzCore/QuartzCore.h> 

He oído que esto sólo funciona desde OS 3.0. Pero dado que mi aplicación está utilizando datos centrales, no fue un problema porque ya era para OS 3.0 y Hight.

he creado un UIView personalizado con una vista secundaria con CornerRadius 10 y con

view.backgroundColor = [UIColor clearColor]; 

entonces usted tiene que colocar un estilo agrupados en UITableView que subvista. Debe establecer backgroundColor para clearColor y separatorColor para clearColor. Luego, debe colocar la vista de tabla dentro de la vista de esquina redondeada, esto se hace ajustando el tamaño y el origen del marco. Mi clase loadView de mi UIView costumbre se ve así:

self.view = [[UIView alloc] init]; 
self.view.backgroundColor = [UIColor clearColor]; 

CustomUIViewClass *scherm = [[CustomUIViewClass alloc] init]; 

CGRect frame; 
frame.origin.x = 10; 
frame.origin.y = 50; 
frame.size.width = 300; 
frame.size.height = 380; 

scherm.frame = frame; 
scherm.clipsToBounds = YES; 
scherm.layer.cornerRadius = 10; 

[self.view addSubview:scherm]; 

CustomUITableViewClass *table = [[CustomUITableViewClass alloc] initWithStyle:UITableViewStyleGrouped]; 

frame.origin.y = -10; 
frame.origin.x = -10; 
frame.size.width = 320; 
frame.size.height = 400; 

table.tableView.frame = frame; 
[scherm addSubview:table.tableView]; 

espero que entiendan mi Inglés, tal vez voy a escribir un post corto acerca de esta técnica con un proyecto de ejemplo, será enviar el enlace aquí cuando estoy Listo.

Answer 4

Hace poco encontré este problema y lo resolví de otra manera. Pensé que compartiría los resultados con todos.

Creé una UIView rectangular con un interior claro y de esquina redondeada, y luego la coloqué encima de la UITableView. Puede encontrar la descripción completa en my programming blog.

Funciona exactamente de la manera que yo quiero. Espero que ayude.

Answer 5

Aquí está la solución que se me ocurrió. Combina una máscara de capa y una esquina de capaRadius. iPhone OS 3.x solamente. No perdí el tiempo tratando de hacer funcionar las barras de desplazamiento, pero creo que no debería ser demasiado difícil.

http://github.com/beetlebugorg/RoundedUITableView

Answer 6

Una forma más fácil de hacer esto es simplemente importar el marco QuartzCore a su proyecto. #import <QuartzCore/QuartzCore.h> a su tableViewController y acaba de establecer

myTableView.layer.cornerRadius=5; 

Esto le dará esquinas redondeadas y sin tener que añadir su tableview a un Superview o encajándolo.

Answer 7

Bueno, hay mucho enfoque para resolver este problema.

Sin embargo, en mi caso, todo no funciona correctamente. Mi mesa a veces es más pequeña que el tamaño de la mesa.

Compartiré la forma en que lo hice. Creo que es mucho más fácil y más rápido que algunas de las opciones anteriores.

Haga que la primera y la última pieza sean redondeadas.

• Crear CAShapeLayer para arriba (a la izquierda | derecha) e inferior (de izquierda | derecha).

  shapeTop = [CAShapeLayer layer]; 
  shapeTop.path = [UIBezierPath 
  bezierPathWithRoundedRect:CGRectMake(0.0f, 0.0f, 306.0f, 58.0f) 
  byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight 
  cornerRadii:CGSizeMake(6.0f, 6.0f)].CGPath; 
  
  shapeBottom = [CAShapeLayer layer]; 
  shapeBottom.path = [UIBezierPath 
  bezierPathWithRoundedRect:CGRectMake(0.0f, 0.0f, 306.0f, 58.0f) 
  byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight 
  cornerRadii:CGSizeMake(6.0f, 6.0f)].CGPath; 
  

• La tabla debe tener fondo claroColor;

• Las celdas tienen que ser un fondo de color;

• Conjunto del layer.mask de ella

  UIView* backgroundView = [[UIView alloc] initWithFrame:CGRectZero]; 
  backgroundView.backgroundColor = [UIColor whiteColor]; 
  cell.backgroundView = backgroundView; 
  

• No olvide #import <QuartzCore/QuartzCore.h>

Answer 8

En lugar de cortar a través del código, esto es una forma fácil de imitar el estilo agrupados. Esto funciona si todo lo que quieres es una sección.

En Interface Builder:

• conjunto de estilos UITableView en Normal y hacer que el marco con un poco de relleno de la izquierda y la derecha, tal vez con x = 10 y width = 300.

asentando después el radio de esquina y colorear usted mismo:

#import <QuartzCore/QuartzCore.h> 

self.tableView.layer.borderColor = [UIColor colorWithWhite:0.6 alpha:1].CGColor; 
self.tableView.layer.borderWidth = 1; 
self.tableView.layer.cornerRadius = 4; 

Answer 9

a continuación código para la versión Swift:

let redColor = UIColor.redColor() 
self.tableView.layer.borderColor = redColor.colorWithAlphaComponent(0.9).CGColor 
self.tableView.layer.borderWidth = 1; 
self.tableView.layer.cornerRadius = 4; 

Asegúrate de que tienes import QuartzCore en la sección de importación.