#Uiimage systemname mac#

The content configuration object will then generate a content view for the custom cell, and the content view will display the data provided by the content configuration object.ĭon’t worry if all these sound a bit confusing to you, I am sure things will clear up once we start looking into the sample code.įor the sample app, we will reuse the data item type of my previous article - SFSymbolItem. To summarize, the custom cell will create and assign a content configuration object to itself. It has only 1 task - generate a properly configured content configuration object based on the state (selected, highlighted, disabled, etc.) of the cell and then assign the configuration to itself. Thus, you can treat it as a bridge that links up both content view and custom cell.Ī custom cell of a UICollectionView list is a subclass of UICollectionViewListCell. How do I make custom SF Symbols Select a random symbol in the SF Symbol library and go to File/Export Template or press E. Use the image inside a UIImageView, UIButton, or any other UI element. Use the name inside the UIImage (systemName:) initializer.

#Uiimage systemname mac#

On top of that, it is also in charge of generating a content view instance for the custom cell. Browse and find your icon in the SF Symbols Mac app. It is also in charge of displaying the correct data and appearance based on the provided content configuration.Ī content configuration will be the content view‘s view model and it is conforms to the UIContentConfiguration protocol. It defines the layout and appearance of the custom cell. The same goes to the symbol.īefore we start implementing the custom cell, we must first understand what is content configuration, content view, and also the relationship between a custom cell, a content configuration, and a content view.Ī content view is a UIView subclass that conforms to the UIContentView protocol. When the cell is selected, its text will become red and the text’s weight will become heavy. Instead, they all have a custom top-bottom image-text layout.įurthermore, the appearance of the custom cells will change based on the state of the cell.

The sample app we going to buildĪs you can see, all the cells in the list have a layout that is different from the usual side-by-side image-text layout.

The following animated GIF showcases what we are trying to build in this article. Therefore, if you are not familiar with building a list using a collection view, I highly recommend you check it out before proceeding. This is a continuation of my previous article “ Building a List with UICollectionView in Swift“. In this article, let’s look at how we can create a custom cell and use it alongside a custom content configuration to build a list in a UICollectionView. In iOS14, Apple introduced the list layout in UICollectionView, allowing developers to easily create a list using UICollectionViewListCell - A collection view cell that comes along with iOS14 which provides list features and default styling.Įven though UICollectionViewListCell is highly customisable, there are still situations where we might need to create our own custom cell in order to fit our app’s requirements.