supports for swiftUI

[vasquezdennisalon]

Feature Request/Suggestion

With the latest developments that have been existing from Apple, the question arises that if this library will have support for swiftUi as well as a demo of how the integration of this library with swiftUi will be

Additional context

N/A

---

Internal data

• Associated internal bug: b/142078897

[material-automation[bot]]

The title doesn't have a [Component] prefix.

[pascalguizard]

You can steel use Material components in your SwiftUI files by create UIViewRepresentable to instantiate your Component.

Here an example for bottomAppBar:

struct UIBottomAppBarView: UIViewRepresentable {
     func makeUIView(context: Context) -> MDCBottomAppBarView {
        let bar = MDCBottomAppBarView()
        bar.barTintColor = UIColor(named: "background")
        
        let buttonImage = UIImage(systemName: "plus")?.withRenderingMode(.alwaysTemplate)
        bar.floatingButton.setImage(buttonImage, for: .normal)
        bar.floatingButton.backgroundColor = UIColor(named: "secondary")
        bar.floatingButton.tintColor = UIColor(named: "onSecondary")!
        bar.floatingButton.addTarget(
            context.coordinator,
            action: #selector(Coordinator.onFloatingButtonCkick),
            for: .touchUpInside
        )
        
        bar.leadingBarButtonItems = [UIBarButtonItem(
            image: UIImage(systemName: "line.horizontal.3")?.withRenderingMode(.alwaysTemplate),
            style: .done,
            target: context.coordinator,
            action: #selector(Coordinator.onNavigationClick)
        )]
        return bar
    }
    
    func updateUIView(_ uiView: MDCBottomAppBarView, context: Context) {
        // nothing
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        var parent: UIBottomAppBarView
        
        init(_ bottomAppBar: UIBottomAppBarView) {
            parent = bottomAppBar
        }
        
        @objc func onNavigationClick() {
            print("onNavigationClick")
        }
        
        @objc func onFloatingButtonCkick() {
             print("onFloatingButtonCkick")
        }
    }
}

Use like this :

struct BottomAppBarView: View {
    var body: some View {
        VStack {
            UIBottomAppBarView()
        }
    }
}

[carlosrc]

Any news about this?

I'm trying to make a wrapper to a text field with a controller (MDCTextInputControllerUnderline) but I don't know how to make it work, because this controller doesn't return a view. And, if I return

Can you help me, @pascalguizard ? Thanks.

[akshayjshah]

I think the thrust of the question is a bit broader: Apple is clearly doubling down on SwiftUI as their preferred UI framework for Mac, iOS, and watchOS. Developers can use SwiftUI's UIKit compatibility wrappers (e.g., UIKitRepresentable) to use these material components, but it's a fair amount of work to do for every component. Are there any plans to provide SwiftUI versions of these components and update documentation and tutorials? If so, can the open-source community help implement that plan?

[bernhardwaidacher]

@carlosrc did you find a solution? currently having the same problem...

[matteosist]

Hi, any update on this feature request?

[asanzred]

You can steel use Material components in your SwiftUI files by create UIViewRepresentable to instantiate your Component.

Here an example for bottomAppBar:

struct UIBottomAppBarView: UIViewRepresentable {
     func makeUIView(context: Context) -> MDCBottomAppBarView {
        let bar = MDCBottomAppBarView()
        bar.barTintColor = UIColor(named: "background")
        
        let buttonImage = UIImage(systemName: "plus")?.withRenderingMode(.alwaysTemplate)
        bar.floatingButton.setImage(buttonImage, for: .normal)
        bar.floatingButton.backgroundColor = UIColor(named: "secondary")
        bar.floatingButton.tintColor = UIColor(named: "onSecondary")!
        bar.floatingButton.addTarget(
            context.coordinator,
            action: #selector(Coordinator.onFloatingButtonCkick),
            for: .touchUpInside
        )
        
        bar.leadingBarButtonItems = [UIBarButtonItem(
            image: UIImage(systemName: "line.horizontal.3")?.withRenderingMode(.alwaysTemplate),
            style: .done,
            target: context.coordinator,
            action: #selector(Coordinator.onNavigationClick)
        )]
        return bar
    }
    
    func updateUIView(_ uiView: MDCBottomAppBarView, context: Context) {
        // nothing
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject {
        var parent: UIBottomAppBarView
        
        init(_ bottomAppBar: UIBottomAppBarView) {
            parent = bottomAppBar
        }
        
        @objc func onNavigationClick() {
            print("onNavigationClick")
        }
        
        @objc func onFloatingButtonCkick() {
             print("onFloatingButtonCkick")
        }
    }
}

Use like this :

struct BottomAppBarView: View {
    var body: some View {
        VStack {
            UIBottomAppBarView()
        }
    }
}

Trying this option requests me an UIVewtype, which kind should be if I try to implement a MDCFieldText?

[22Round]

As @akshayjshah sad this wouldn’t be for a long time, because rewrite all components to SwiftUI will take lot of time and afford.

[carlosrc]

The truth is that integrating with SwiftUI is quite difficult and problematic...

But here is a simple example of a text field wrapper:

import UIKit
import SwiftUI
import MaterialComponents

// MARK: - Wrapper

struct TextFieldWrapper: UIViewControllerRepresentable {
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<TextFieldWrapper>) 
    -> TextFieldViewController {
        let controller = TextFieldViewController()
        return controller
    }
    
    func updateUIViewController(_ uiViewController: TextFieldViewController,
                                context: UIViewControllerRepresentableContext<TextFieldWrapper>) {
        
    }
}

// MARK: - Controller

class TextFieldViewController: UIViewController, UITextFieldDelegate, UITextViewDelegate {
        
    private var textInputController: MDCTextInputControllerUnderline?
    private var textField: MDCTextField
        
    init() {
        self.textField = MDCTextField()
        super.init(nibName: nil, bundle: nil)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.textField = MDCTextField()
        self.view.addSubview(textField)
                        
        self.textInputController = MDCTextInputControllerUnderline(textInput: textField)
        
        /// placeholder
        self.textInputController!.placeholderText = NSLocalizedString("Name", comment: "")
        
        self.textInputController!.applyTheme(withScheme: MDCContainerScheme())
        
        let size = CGSize(width: view.frame.size.width, height: 200)
        self.textField.frame.size = size
    }
}

Usage:

TextFieldWrapper()

Hope it helps.

[davidqphan]

Hi @jverkoey will there be support for Material Design Components in SwiftUI (similar to Compose on Android)? I see the suggestions are to either:

1. Implement the components ourselves from scratch (SwiftUI)
2. Find a way to use the existing Material Components library (UIKit + SwiftUI)

What is the recommendation from Google / yourself? Thanks, much appreciated!

[andrewoverton]

Hi everyone, We have done some internal explorations related to building SwiftUI components, but we haven't yet made plans to open source them. We have not yet examined the UIViewRepresentable wrapper approach, but haven't ruled it out either. We should hopefully have more information about SwiftUI in Q2. In the meantime, I encourage everyone to keep tinkering. Thank you for your patience!

[davidqphan]

Hi @andrewoverton, thank you for replying! I'm picking up iOS development again after a year off, so just trying to catch up to the latest tools and libraries available. Appreciate all the work you guys do 😄