Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resizing UImage when using SF Symbols - UIImage(systemName:)

I have the following pre-packaged, system SF image:

UIImage(systemName: "location.fill")

It may seem trivial, but how can I resize it to make it bigger? Thank you.

like image 219
Ludovico Verniani Avatar asked Mar 29 '20 06:03

Ludovico Verniani


People also ask

How do I change the size of my SF symbol?

To change the scale of an SF Symbol you can make use of a UIImage Symbol Configuration. It allows you to set the font, scale, point size, weight, and text style.

How do I change the color of my SF?

SF Custom symbols can be colored in 4 distinct color modes : Monochrome, Hierarchical, Palette, Multicolor. To access the colors modes open the SF Symbols and click on the segmented control with the Pain Brush icon and chose a different Rendering.


2 Answers

You can instantiate a UIImage.SymbolConfiguration. For example, you can specify a point size:

let configuration = UIImage.SymbolConfiguration(pointSize: 24)
let image = UIImage(systemName: "location.fill", withConfiguration: configuration)

Or UIFont.TextStyle:

let configuration = UIImage.SymbolConfiguration(textStyle: .title1)
let image = UIImage(systemName: "location.fill", withConfiguration: configuration)

With the latter approach, it will honor the accessibility text size settings on the device.

like image 137
Rob Avatar answered Oct 12 '22 23:10

Rob


The code below provides two methods:

  1. The UIKit suggested way (see developer.apple.com/documentation). Here you treat the SF Symbol image like a font and apply a point size to it.

  2. A SwiftUI way. The button (and, in the example, some associated text) scale to the frame provided.

        import UIKit
        import SwiftUI
    
        class SwiftUIButton : ObservableObject {
    
              @Published var state : Bool = true { didSet { buttonDidChange(state) } }
    
              private lazy var viewController = UIHostingController(rootView: SwiftCustomButton(delegate: self))
              var view : UIView { guard let view = viewController.view else {
                    preconditionFailure("*Fatal Error* Could not create SwiftUI button") }
                    return view
              }
    
              typealias typeForAction = () -> Void
              var action : typeForAction?
    
              func buttonDidChange(_ state : Bool) {
                    guard let action = action else {
                          return
                    }
                    action()
              }
        }
    
        struct SwiftCustomButton : View {
    
              @ObservedObject var delegate : SwiftUIButton
    
              var body : some View {
                    VStack() {
                          Button(action: {
                                self.delegate.state = !self.delegate.state
                          }) { Image(systemName: "gear")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                          }
    
                          Text(delegate.state ? "Hello" : "Goodbye")
                    }
              }
        }
    
    
        class ViewController: UIViewController {
    
              override func viewDidLoad() {
                    super.viewDidLoad()
    
                    let button = SwiftUIButton()
                    button.action = { print("In the ViewController the button has changed to: \(button.state)")}
                    button.view.frame = CGRect(x: 200, y: 200, width: 80, height: 80)
                    view.addSubview(button.view)
    
                    let image = UIImage(systemName: "gear")
                    let symbolConfiguration = UIImage.SymbolConfiguration(pointSize: 64.0)
    
                    let adjustedImage = image?.applyingSymbolConfiguration(symbolConfiguration)
    
                    let uButton = UIButton(type: .custom)
                    uButton.setImage(adjustedImage , for: .normal)
                    uButton.frame = CGRect(x: 20, y: 200, width: 80, height: 80)
                    uButton.target(forAction: #selector(self.buttonAction), withSender: uButton)
                    view.addSubview(uButton)
    
                    self.view = view
              }
    
              @objc func buttonAction() {
                    print("UIButton pressed")
              }
        }
    
like image 34
Obliquely Avatar answered Oct 13 '22 01:10

Obliquely