¿Cómo agrego un borde de línea discontinua UIView
?
Algo como esto
ios
objective-c
iphone
uiview
Sohaib
fuente
fuente
Respuestas:
Puede establecer el borde con este patrón utilizando la ruta de capa y Bezier como en los ejemplos a continuación.
C objetivo
Swift 3.1
También puede establecer diferentes tipos de diseño usando la imagen del patrón como en el siguiente ejemplo.
Aquí debe agregar el
<QuartzCore/QuartzCore>
marco en el proyecto e importarlo con la siguiente línea en elYourViewController.m
archivo.fuente
Otro método si te gustan las subcapas. En el inicio de su vista personalizada, ponga esto (_border es un ivar):
Y en sus revisiones de diseños, ponga esto:
fuente
_border.path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:5.f].CGPath;
_border.lineWidth = 3
border = CAShapeLayer() border.strokeColor = yourColor border.fillColor = nil border.lineDashPattern = [4, 2] self.layer.addSublayer(border)
Para aquellos de ustedes que trabajan en Swift, esta extensión de clase en UIView lo hace fácil. Esto se basó en la respuesta de sunshineDev.
Para usarlo:
fuente
addDashedBorder()
mientrasdidMoveToSuperview()
pensaba que el autolayout estaría completo para entonces y el tamaño del cuadro sería correcto pero no lo era. El ancho del borde punteado va más allá del ancho de la vista. ¡La línea punteada se ve tan bien por cierto! Elself.frame.size
no es correcto.Swift 3 :
Usar en un guión gráfico (como clase personalizada) o directamente en el código:
Resultado:
fuente
Sobre la base de lo que Prasad G ha sugerido, creé un método dentro de una clase UIImage Extras con lo siguiente:
Es importante señalar que si define la posición de su forma como (0,0), la esquina inferior del borde se colocará en el centro de la imagen, por eso lo configuro en: (frameSize.width / 2, frameSize .Altura / 2)
Luego uso mi método para obtener el borde discontinuo usando el UIImage de mi UIImageView y agrego el CAShapeLayer como una subcapa de la capa UIImageView:
fuente
Utilice el método CGContextSetLineDash ().
Creo que te será útil.
fuente
Aquí hay una subclase de UIView que puede funcionar para cualquier proyecto, también funciona para vistas redondas :
De esta manera puede editar desde el Guión gráfico de esta manera:
Un par de resultados:
fuente
Para esto necesita agregar CAShapeLayer para ese objeto en particular
fuente
Swift 4.2
Basado en la respuesta de rmooney como una
UIView
extensión con parámetros configurables que tienen valores predeterminados establecidos.fuente
shapeLayer.lineJoin = CAShapeLayerLineJoin.round
debería seryourViewBorder.lineJoin = kCALineJoinRound
Versión rápida de la respuesta QuartzCore.
El
CAShapeLayer
enfoque funciona, pero el enfoque QuartzCore es mejor para manejar una recarga de Vista de tabla, siUIView
está dentro de una celda.Para la imagen, puede usar algo como esto (es realmente pequeño):
Tiendo a preferir el vector sobre PNG cuando puedo salirse con la suya:
Images.xcassets
, crea unNew Image Set
patrón dotted llamadoScale Factors
aSingle Vector
fuente
Para Xamarin.iOS borde discontinuo / punteado.
fuente
En Swift 3
fuente
Esto es si lo querías en Swift 2
fuente
prueba el siguiente código
para uno como abajo
fuente
Para Swift 5
Cómo agregar
Cómo quitar el borde nuevamente
fuente
Terminé creando un IB Designable usando algunas de las implementaciones de @Chris:
CurvedDashedBorderUIVIew.h:
CurvedDashedBorderUIVIew.m:
luego configúrelo en el xib / storyboard:
fuente
Solución rápida con clase personalizada trabajada con autolayout
personalizado de @Iain Smith
fuente
Simplemente puede crear una clase IBDesignable como esta:
Luego, solo subclasifique su vista con BorderedView de Xcode. ¡De esta manera puede establecer el color y el ancho del borde muy fácilmente desde el generador de interfaces!
fuente
} y llame a esta función en viewdidLoad () con retraso:
fuente
• Swift 5
• Funciona con autolayout
• Funciona con el radio de la esquina.
fuente
En swift 4 creé una extensión UIView con la siguiente función:
fuente
Si desea que esto funcione con cornerRadius, intente esto
fuente
Swift 5+
Cómo utilizar:
fuente