En mi aplicación para iPad, quiero que aparezca una segunda vista en la página principal cuando el usuario haga clic en un botón. La nueva vista será más pequeña que la primera y oscurecerá el fondo cuando se muestre. Quiero que las dos esquinas superiores de la nueva vista aparezcan redondeadas, pero al usar cornerRadius las redondea todas. ¿Cómo puedo hacer solo dos esquinas redondeadas?¿Solo dos esquinas redondeadas?
Respuesta
Tienes que hacer esto en drawRect :. En realidad he modificado el addRoundedRectToPath clásica: por lo que se necesita un mapa de bits y redondea las esquinas se solicitan:
static void addRoundedRectToPath(CGContextRef context, CGRect rect, float radius, UIImageRoundedCorner cornerMask)
{
CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
if (cornerMask & UIImageRoundedCornerTopLeft) {
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius,
radius, M_PI, M_PI/2, 1);
}
else {
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height);
CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y + rect.size.height);
}
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius,
rect.origin.y + rect.size.height);
if (cornerMask & UIImageRoundedCornerTopRight) {
CGContextAddArc(context, rect.origin.x + rect.size.width - radius,
rect.origin.y + rect.size.height - radius, radius, M_PI/2, 0.0f, 1);
}
else {
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + rect.size.height - radius);
}
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
if (cornerMask & UIImageRoundedCornerBottomRight) {
CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius,
radius, 0.0f, -M_PI/2, 1);
}
else {
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, rect.origin.y);
}
CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
if (cornerMask & UIImageRoundedCornerBottomLeft) {
CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius,
-M_PI/2, M_PI, 1);
}
else {
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y);
CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + radius);
}
CGContextClosePath(context);
}
esto lleva una máscara de bits (lo llamé UIImageRoundedCorner porque yo estaba haciendo esto para imágenes, pero se puede llamar lo) y luego construye un camino basado en las esquinas que desea redondear. A continuación, aplicar ese camino a la vista en drawRect:
CGContextBeginPath(context);
addRoundedRectToPath(context, rect, radius, yourMask);
CGContextClosePath(context);
CGContextClip(context);
Como ya he dicho, yo estaba haciendo esto para UIImages, por lo que mi código no se ajusta exactamente para su uso en drawRect :, pero debe ser bastante fácil para adaptarlo. Básicamente, estás construyendo un camino y luego recortándole el contexto.
Editar: para explicar la parte de máscara de bits, es sólo una enumeración:
typedef enum {
UIImageRoundedCornerTopLeft = 1,
UIImageRoundedCornerTopRight = 1 << 1,
UIImageRoundedCornerBottomRight = 1 << 2,
UIImageRoundedCornerBottomLeft = 1 << 3
} UIImageRoundedCorner;
De esta manera se puede o cosas juntos para formar una máscara de bits que identifica las esquinas, ya que cada miembro de la enumeración representa una diferente potencia de dos en la máscara de bits.
Mucho más tarde Editar: he descubierto una manera más fácil de hacer esto utilizando UIBezierPath
's bezierPathWithRoundedRect:byRoundingCorners:cornerRadii:
. Simplemente use el objeto de ruta Bezier CGPath
en su contexto.
// Create the path (with only the top-left corner rounded)
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds
byRoundingCorners:UIRectCornerTopLeft| UIRectCornerTopRight
cornerRadii:CGSizeMake(10.0, 10.0)];
// Create the shape layer and set its path
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = imageView.bounds;
maskLayer.path = maskPath.CGPath;
// Set the newly created shape layer as the mask for the image view's layer
imageView.layer.mask = maskLayer;
Esta es otra esquina superior redondeada. Round two corners in UIView
Eso funciona bien ..gracias mucho –
Eso funciona, PERO causa la representación fuera de pantalla en toda el área 'imageView', lo que resulta en animación tartamuda – Philip007
¡La mejor respuesta que he encontrado sobre el tema! – PaperThick
El maravilloso trabajo realizado por Tomek Kuźma. Aquí está la nueva clase TKRoundedView para su requerimiento.
Su requisito puede cumplirse solo con este parámetro.
TKRoundedView *view = [[TKRoundedView alloc] initWithFrame:frame];
view.roundedCorners = TKRoundedCornerTopLeft | TKRoundedCornerTopRight;
Pero también ofrece las siguientes características adicionales.
TKRoundedView *view = [[TKRoundedView alloc] initWithFrame:frame];
view.roundedCorners = TKRoundedCornerTopLeft
view.borderColor = [UIColor greenColor];
view.fillColor = [UIColor whiteColor];
view.drawnBordersSides = TKDrawnBorderSidesLeft | TKDrawnBorderSidesTop;
view.borderWidth = 5.0f;
view.cornerRadius = 15.0f;
favor de partida de los siguiente enlace para el proyecto de ejemplo
https://github.com/mapedd/TKRoundedView
^¡muy bien! Funciona muy bien con el diseño automático. –
- 1. CSS esquinas redondeadas Divs
- 2. Esquinas redondeadas en UIImage
- 3. QLineEdit Esquinas redondeadas?
- 4. Esquinas redondeadas de MKMapView
- 5. CSS esquinas redondeadas
- 6. UIImage esquinas redondeadas
- 7. UIToolbar con esquinas redondeadas
- 8. Cuadros con esquinas redondeadas
- 9. NSImageView esquinas redondeadas + carrera
- 10. Esquinas redondeadas en UITableView
- 11. Esquinas redondeadas en XSL-FO
- 12. esquinas redondeadas en las imágenes
- 13. Esquinas redondeadas UIView o UIImageView
- 14. XML Android esquinas redondeadas recortadas
- 15. Esquinas redondeadas en un fieldset
- 16. UIImage con esquinas redondeadas transparentes
- 17. Imagebutton imagen completa, esquinas redondeadas
- 18. ImageView con esquinas redondeadas y sombra interior
- 19. Esquinas interiores redondeadas con marco interior transparente
- 20. Esquinas redondeadas del navegador cruzado (sin imagen)
- 21. UIView: esquinas redondeadas sin problemas de rendimiento
- 22. Cómo crear fondo css div/esquinas redondeadas?
- 23. Esquinas redondeadas antialias en Android ImageView
- 24. Esquinas redondeadas de fluido con jQuery
- 25. Configuración de esquinas redondeadas para svg: imagen
- 26. NSButton con ancho variable, esquinas redondeadas
- 27. objetivo c - UINavigationBar con esquinas redondeadas
- 28. UITableViewCell esquinas redondeadas y subvistas de clip
- 29. Cómo hacer un div con esquinas redondeadas
- 30. Creación de esquinas redondeadas en IE7/IE8
Gran respuesta! Solo necesito ayuda para implementarlo. En primer lugar, ¿cómo puedo hacer mi propia máscara de bits? – Jumhyn
Editando la respuesta para explicar enum. – kevboh
Mi respuesta está hecha para tomar las curvas que quieras redondear. Si solo necesita las dos esquinas superiores y no le importan las demás, podría editar las tonterías de la máscara de bits y simplemente usar las dos secciones que corresponden a las esquinas que necesita redondear. – kevboh