Saltar al contenido

iOS Swift Agregar imagen SVG al botón como Android

Este grupo de especialistas pasados muchos días de investigación y de recopilar de información, dieron con los datos necesarios, deseamos que resulte útil para ti para tu trabajo.

Solución:

UPD: Vea también esta publicación de blog UseYourLoaf

Acabo de encontrar en la publicación del blog de Erica Sadun que en iOS 11 podrías usar Vector Assets.

Qué significan los “activos vectoriales”:

Si hace clic en ese cuadro, los datos vectoriales se enviarán con su aplicación. Lo que, por un lado, hace que su aplicación sea un poco más grande, porque los datos vectoriales ocupan algo de espacio. Pero, por otro lado, le dará la oportunidad de escalar estas imágenes, lo que puede ser útil en varias situaciones diferentes. Entonces, una es, si sabe que esta imagen en particular se usará en varios tamaños. Pero eso podría ser menos obvio. Entonces, un caso es un glifo simbólico que debe cambiar de tamaño con tipo dinámico. Dado que estamos pensando en el tipo dinámico, también debería pensar en tener los glifos que aparecen junto al tipo con el tamaño adecuado. Otro caso que realmente no es obvio, son las imágenes de la barra de pestañas. … hay una característica de accesibilidad realmente excelente que recomendamos encarecidamente admitir, que permite a los usuarios que han aumentado el tamaño de su tipo dinámico. … Entonces, realmente recomendamos hacer eso para aumentar la usabilidad de su aplicación para todos los usuarios

Cómo utilizar:

  1. Convierta su archivo SVG a PDF, por ejemplo, en ZamZar.com
  2. Añade tu pdf a Assets.xcassets
    • Haga clic en “Conservar datos vectoriales” para el pdf importado.
  3. Crear UIImageView en tus UIViewController y asignar archivo pdf como UIImage.

o Asset Catalog Creator disponible en Mac App Store realizará los pasos 1 y 2 con un simple arrastrar y soltar.


iOS < 11

No hay una forma nativa de usar una imagen SVG.

Echa un vistazo a Guacamayo

Marco de importación a través de Cocoapod

pod "Macaw", "0.8.2"

Verifique su proyecto de ejemplo: así es como se renderiza tiger.svg (ubicado en el directorio del proyecto, no en un Assets.xcassets expediente)

import UIKit
import Macaw

class SVGExampleView: MacawView 

    required init?(coder aDecoder: NSCoder) 
        super.init(node: SVGParser.parse(path: "tiger"), coder: aDecoder)
    



Hay algunas otras bibliotecas de terceros, por supuesto:

  • SwiftSVG
  • Copo de nieve
  • Marco SVGKit Objective-C

Después de una pesadilla, se me ocurrió esta solución para usar SVG en el botón usando Swift. Esto es para todos los que no desean luchar como yo.

Usé la biblioteca SwiftSVG simple para obtener UIView desde un archivo SVG

uso :

namBtnVar.setSvgImgFnc("ikn_sev", ClrVar: UIColor.cyanColor())

Instalar la biblioteca SwiftSVG

1) Use pod para instalar:

// Para rápido 3

pod 'SwiftSVG'

// Para Swift 2.3

pod 'SwiftSVG', '1.1.5'

2) Agregar marco

Ir a la configuración de la aplicación
-> Pestaña General
-> Desplácese hacia abajo hasta Marcos y bibliotecas vinculados
-> Haga clic en el icono más
-> Seleccionar SVG.marco

3) Agregue el código a continuación en cualquier parte de su proyecto

extension UIButton

    func setSvgImgFnc(svgImjFileNameVar: String, ClrVar: UIColor)
    
        setImage((getSvgImgFnc(svgImjFileNameVar, ClrVar : ClrVar)), forState: .Normal)
    


func getSvgImgFnc(svgImjFileNameVar: String, ClrVar: UIColor) -> UIImage

    let svgURL = NSBundle.mainBundle().URLForResource(svgImjFileNameVar, withExtension: "svg")
    let svgVyuVar = UIView(SVGURL: svgURL!)

    /* The width, height and viewPort are set to 100 

        

        So we need to set UIView Rect also same
    */

    svgVyuVar.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    for svgVyuLyrIdx in svgVyuVar.layer.sublayers!
    
        for subSvgVyuLyrIdx in svgVyuLyrIdx.sublayers!
        
            if(subSvgVyuLyrIdx.isKindOfClass(CAShapeLayer))
            
                let SvgShpLyrIdx = subSvgVyuLyrIdx as? CAShapeLayer
                SvgShpLyrIdx!.fillColor = ClrVar.CGColor
            
        
    
    return svgVyuVar.getImgFromVyuFnc()


extension UIView

    func getImgFromVyuFnc() -> UIImage
    
        UIGraphicsBeginImageContext(self.frame.size)

        self.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        let image = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()
        return image!
    

Puede utilizar archivos PDF basados ​​en vectores de forma nativa si selecciona escala única por Factores de escala después de importar.

Las dimensiones del PDF serán las 1x dimensiones para el activo.

Xcode generará la imagen rasterizada para cada escala. A continuación, puede utilizarlo como cualquier otra imagen.

Te mostramos las comentarios y valoraciones de los usuarios

Si te sientes a gusto, puedes dejar una sección acerca de qué le añadirías a esta noticia.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *