使单比例 SVG 图像资产行在表格列中与 SF 符号行对齐？

Question

I have a UITableView of UITableViewCells. Using cell.defaultContentConfiguration I set image and attributedText properties of for each cell.

Images created from SF Symbols, all have the same.medium scale, and all align to the same left edge in their column.

But images I create from the asset catalog, single scale SVG images, align in the table column skewed left of the SF symbols in the rows above and below, regardless of what I do, and it also causes the text next to asset images to skew left of the column 'edge' I want to maintain.

Thus, I'm getting a staggered effect I don't want.

The following two UIImage constructors give me different image padding and/or alignments:

UIImage(named: ...)       // Asset catalog image
UIImage(systemName: ...)  // SF symbol image

I tried applying this to the asset image, but it doesn't change anything:

func withAlignmentRectInsets(UIEdgeInsets) -> UIImage

What would be the best approach to making the asset image align with the SF symbol images in the table?

Answer 1

I figured it out.

There are alignment properties for UITableViewCell.defaultContentConfiguiration() which returns a UIListContentConfiguration , that contains (among others), the following two properties:

imageToTextPadding

directionalLayoutMargins

Between those two properties I can adjust the insets and spacing between the image and text. Specifically, through the layout margins, the rendered single scale SVG image size can be tweaked by using the margin values to constrain the boundaries the SVG will be forced to scale itself to fit into.

All that was needed was to pass a flag or values to UITableView 's delegate method cellForRowAt() via the data model (eg table view row content data provided through my data source), wherein each row has a flag that indicates whether or not I need to do anything using UIListContentConfiguration properties or not, to deal with the inherent differences in the image types rendered, ie, SF Symbol vs. Asset Catalog.