如何在 TableViewCell 中设置图标的背景颜色？
Posted
技术标签:
【中文标题】如何在 TableViewCell 中设置图标的背景颜色？【英文标题】：How to set icon's background color in TableViewCell? 【发布时间】：2020-04-21 19:41:28 【问题描述】：伙计们！我有一个有点傻的问题。我想在 TableViewCell 中制作图标 like here 带有背景颜色和圆角。据我了解，我可以使用 Xcode 中定义的本机图标，但我无法更改背景，因为图标的大小与设置相比是错误的。 苹果是怎么做到的？他们制作图像还是可以通过 Xcode 和 Swift 本身来完成？谢谢
附：我将 TableViewController 与静态单元格一起使用，现在它看起来像 that
【问题讨论】：
你想制作一个可点击的按钮吗？或者只是在UIImageView 中显示System Image？
我使用 ImageView。 imgur.com/kDNNGNV
【参考方案1】：
您几乎肯定会想要使用Custom 单元格样式而不是Basic。
添加UIView 以用作图标的“圆角”部分。为您的系统图像添加一个以该视图为中心的图像视图。添加标签。
基本方法（如您所述，使用静态表格视图）：
这是“圆形视图”的代码 - 配置为 @IBDesignable，因此您可以在 Storyboard 中看到它：
@IBDesignable
class RoundedView: UIView
override init(frame: CGRect)
super.init(frame: frame)
commonInit()
required init?(coder: NSCoder)
super.init(coder: coder)
commonInit()
func commonInit() -> Void
layer.cornerRadius = 8
layer.masksToBounds = true
输出：
这里是完整的故事板源代码，可帮助您入门：
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="ios.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="WtW-LE-VWk">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Table View Controller-->
<scene sceneID="qc4-73-L2A">
<objects>
<tableViewController id="27Q-AC-Jb0" sceneMemberID="viewController">
<tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="static" style="insetGrouped" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="18" sectionFooterHeight="18" id="IFE-zD-nEK">
<rect key="frame" x="0.0" y="0.0" />
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<sections>
<tableViewSection id="LW5-bS-sCO">
<cells>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" rowHeight="55" id="sxh-Sk-bNM">
<rect key="frame" x="16" y="18" />
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="sxh-Sk-bNM" id="H0b-UB-YIR">
<rect key="frame" x="0.0" y="0.0" />
<autoresizingMask key="autoresizingMask"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="pz9-zZ-kOc" customClass="RoundedView" customModule="MiniScratch" customModuleProvider="target">
<rect key="frame" x="16" y="11" />
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<constraints>
<constraint firstAttribute="width" secondItem="pz9-zZ-kOc" secondAttribute="height" multiplier="1:1" id="YcQ-rh-NHn"/>
<constraint firstAttribute="width" constant="32" id="jck-uB-cqC"/>
</constraints>
</view>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="bolt.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="JeW-kU-JcB">
<rect key="frame" x="23.5" y="16" />
<color key="tintColor" red="0.3623966575" green="0.55341643100000004" blue="0.62130481000000004" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="clR-2W-9tl">
<rect key="frame" x="56" y="16.5" />
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.10831441729999999" green="0.10833679879999999" blue="0.11850371210000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="JeW-kU-JcB" firstAttribute="centerY" secondItem="pz9-zZ-kOc" secondAttribute="centerY" id="9cf-bd-KWA"/>
<constraint firstItem="pz9-zZ-kOc" firstAttribute="leading" secondItem="H0b-UB-YIR" secondAttribute="leadingMargin" id="BDH-af-jJ9"/>
<constraint firstAttribute="bottomMargin" relation="greaterThanOrEqual" secondItem="pz9-zZ-kOc" secondAttribute="bottom" id="DgH-q4-Bu8"/>
<constraint firstItem="clR-2W-9tl" firstAttribute="centerY" secondItem="pz9-zZ-kOc" secondAttribute="centerY" id="JZT-iV-Btg"/>
<constraint firstItem="JeW-kU-JcB" firstAttribute="centerX" secondItem="pz9-zZ-kOc" secondAttribute="centerX" id="Qwc-Ki-K4f"/>
<constraint firstAttribute="trailingMargin" secondItem="clR-2W-9tl" secondAttribute="trailing" constant="8" id="hSO-P4-ERd"/>
<constraint firstItem="clR-2W-9tl" firstAttribute="leading" secondItem="pz9-zZ-kOc" secondAttribute="trailing" constant="8" id="l5p-PI-tUW"/>
<constraint firstItem="pz9-zZ-kOc" firstAttribute="top" secondItem="H0b-UB-YIR" secondAttribute="topMargin" id="qlH-ce-h5Q"/>
</constraints>
</tableViewCellContentView>
</tableViewCell>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" rowHeight="55" id="Vlt-uX-i4X">
<rect key="frame" x="16" y="73" />
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="Vlt-uX-i4X" id="FvK-6i-Ped">
<rect key="frame" x="0.0" y="0.0" />
<autoresizingMask key="autoresizingMask"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="C2d-Cl-1Vf" customClass="RoundedView" customModule="MiniScratch" customModuleProvider="target">
<rect key="frame" x="16" y="11" />
<color key="backgroundColor" red="0.98642545940000004" green="0.74593347310000002" blue="0.57237553600000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="C2d-Cl-1Vf" secondAttribute="height" multiplier="1:1" id="EIW-gj-enD"/>
<constraint firstAttribute="width" constant="32" id="Iok-r4-lBV"/>
</constraints>
</view>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="star.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="4yK-2K-GYt">
<rect key="frame" x="21" y="17" />
<color key="tintColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="GAQ-UB-6qR">
<rect key="frame" x="56" y="16.5" />
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.10831441729999999" green="0.10833679879999999" blue="0.11850371210000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="4yK-2K-GYt" firstAttribute="centerY" secondItem="C2d-Cl-1Vf" secondAttribute="centerY" id="0r3-0F-9sC"/>
<constraint firstItem="GAQ-UB-6qR" firstAttribute="leading" secondItem="C2d-Cl-1Vf" secondAttribute="trailing" constant="8" id="8wC-js-QNq"/>
<constraint firstAttribute="bottomMargin" relation="greaterThanOrEqual" secondItem="C2d-Cl-1Vf" secondAttribute="bottom" id="CY5-96-3hI"/>
<constraint firstAttribute="trailingMargin" secondItem="GAQ-UB-6qR" secondAttribute="trailing" constant="8" id="H0b-Vp-33Y"/>
<constraint firstItem="C2d-Cl-1Vf" firstAttribute="top" secondItem="FvK-6i-Ped" secondAttribute="topMargin" id="eNy-0L-bfh"/>
<constraint firstItem="4yK-2K-GYt" firstAttribute="centerX" secondItem="C2d-Cl-1Vf" secondAttribute="centerX" id="jZa-av-lov"/>
<constraint firstItem="C2d-Cl-1Vf" firstAttribute="leading" secondItem="FvK-6i-Ped" secondAttribute="leadingMargin" id="pn9-As-KE5"/>
<constraint firstItem="GAQ-UB-6qR" firstAttribute="centerY" secondItem="C2d-Cl-1Vf" secondAttribute="centerY" id="tie-Yc-jw2"/>
</constraints>
</tableViewCellContentView>
</tableViewCell>
</cells>
</tableViewSection>
<tableViewSection headerTitle="Section Header" id="9ZP-e3-t3g">
<cells>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" rowHeight="55" id="UZ5-EZ-H5Y">
<rect key="frame" x="16" y="184" />
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="UZ5-EZ-H5Y" id="ABd-id-DDv">
<rect key="frame" x="0.0" y="0.0" />
<autoresizingMask key="autoresizingMask"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="KaK-vV-uVH" customClass="RoundedView" customModule="MiniScratch" customModuleProvider="target">
<rect key="frame" x="15" y="11" />
<color key="backgroundColor" red="0.83741801979999997" green="0.83743780850000005" blue="0.83742713930000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="KaK-vV-uVH" secondAttribute="height" multiplier="1:1" id="AM4-pp-HAO"/>
<constraint firstAttribute="width" constant="32" id="UcR-9P-CI0"/>
</constraints>
</view>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="dollarsign.circle.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="U8c-Bp-yMq">
<rect key="frame" x="21" y="17.5" />
<color key="tintColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="12T-Ga-3Q3">
<rect key="frame" x="55" y="16.5" />
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.10831441729999999" green="0.10833679879999999" blue="0.11850371210000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="U8c-Bp-yMq" firstAttribute="centerX" secondItem="KaK-vV-uVH" secondAttribute="centerX" id="4um-Hn-oWU"/>
<constraint firstItem="KaK-vV-uVH" firstAttribute="leading" secondItem="ABd-id-DDv" secondAttribute="leadingMargin" id="COf-5P-6Uz"/>
<constraint firstItem="12T-Ga-3Q3" firstAttribute="leading" secondItem="KaK-vV-uVH" secondAttribute="trailing" constant="8" id="N47-hy-itj"/>
<constraint firstItem="U8c-Bp-yMq" firstAttribute="centerY" secondItem="KaK-vV-uVH" secondAttribute="centerY" id="ThJ-LN-iPp"/>
<constraint firstItem="KaK-vV-uVH" firstAttribute="top" secondItem="ABd-id-DDv" secondAttribute="topMargin" id="Ya3-A5-iUX"/>
<constraint firstAttribute="trailingMargin" secondItem="12T-Ga-3Q3" secondAttribute="trailing" constant="8" id="bJy-ZC-oKM"/>
<constraint firstItem="12T-Ga-3Q3" firstAttribute="centerY" secondItem="KaK-vV-uVH" secondAttribute="centerY" id="fM8-fC-9K3"/>
<constraint firstAttribute="bottomMargin" relation="greaterThanOrEqual" secondItem="KaK-vV-uVH" secondAttribute="bottom" id="kvZ-QP-3Ai"/>
</constraints>
</tableViewCellContentView>
</tableViewCell>
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" rowHeight="55" id="Wm0-f3-rlS">
<rect key="frame" x="16" y="239" />
<autoresizingMask key="autoresizingMask"/>
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="Wm0-f3-rlS" id="EEv-Md-d6p">
<rect key="frame" x="0.0" y="0.0" />
<autoresizingMask key="autoresizingMask"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="7MA-zO-mfe" customClass="RoundedView" customModule="MiniScratch" customModuleProvider="target">
<rect key="frame" x="15" y="11" />
<color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="7MA-zO-mfe" secondAttribute="height" multiplier="1:1" id="Gvh-tX-e0t"/>
<constraint firstAttribute="width" constant="32" id="fRi-hL-8PM"/>
</constraints>
</view>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="globe" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="wSv-n8-uf2">
<rect key="frame" x="21.5" y="18" />
<color key="tintColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="pnh-HT-JDj">
<rect key="frame" x="55" y="16.5" />
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.10831441729999999" green="0.10833679879999999" blue="0.11850371210000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="pnh-HT-JDj" firstAttribute="centerY" secondItem="7MA-zO-mfe" secondAttribute="centerY" id="2MY-6y-DAB"/>
<constraint firstAttribute="bottomMargin" relation="greaterThanOrEqual" secondItem="7MA-zO-mfe" secondAttribute="bottom" id="7ES-kW-TRx"/>
<constraint firstItem="wSv-n8-uf2" firstAttribute="centerY" secondItem="7MA-zO-mfe" secondAttribute="centerY" id="97K-2Q-0GG"/>
<constraint firstItem="7MA-zO-mfe" firstAttribute="leading" secondItem="EEv-Md-d6p" secondAttribute="leadingMargin" id="9c3-12-fqv"/>
<constraint firstAttribute="trailingMargin" secondItem="pnh-HT-JDj" secondAttribute="trailing" constant="8" id="FgF-cy-Ex8"/>
<constraint firstItem="7MA-zO-mfe" firstAttribute="top" secondItem="EEv-Md-d6p" secondAttribute="topMargin" id="bgS-Cz-64I"/>
<constraint firstItem="wSv-n8-uf2" firstAttribute="centerX" secondItem="7MA-zO-mfe" secondAttribute="centerX" id="lX8-69-qVu"/>
<constraint firstItem="pnh-HT-JDj" firstAttribute="leading" secondItem="7MA-zO-mfe" secondAttribute="trailing" constant="8" id="xSU-A1-3Is"/>
</constraints>
</tableViewCellContentView>
</tableViewCell>
</cells>
</tableViewSection>
</sections>
<connections>
<outlet property="dataSource" destination="27Q-AC-Jb0" id="qb8-kc-ZDj"/>
<outlet property="delegate" destination="27Q-AC-Jb0" id="UJ5-Rn-UKL"/>
</connections>
</tableView>
<navigationItem key="navigationItem" id="DrP-bd-JmI"/>
</tableViewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="MZt-E3-d6F" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1024.8" y="89.505247376311857"/>
</scene>
<!--Navigation Controller-->
<scene sceneID="OjR-lK-dFV">
<objects>
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="WtW-LE-VWk" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="djt-qE-oyG">
<rect key="frame" x="0.0" y="0.0" />
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
<connections>
<segue destination="27Q-AC-Jb0" kind="relationship" relationship="rootViewController" id="GGU-bG-Zsb"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="K6D-eL-jlc" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="85.599999999999994" y="89.505247376311857"/>
</scene>
</scenes>
<resources>
<image name="bolt.fill" catalog="system" />
<image name="dollarsign.circle.fill" catalog="system" />
<image name="globe" catalog="system" />
<image name="star.fill" catalog="system" />
</resources>
</document>
【讨论】：
【参考方案2】：我认为最简单的方法是自己构建图标。只需使用 Sketch 或 Illustrator，在矩形顶部的 SF Pro Text 中添加一个新文本字段，然后将 SFSymbols 中的图标粘贴进去。将其导出为 PDF，您可以将其用作应用中的图标.
Here is a screenshot of the setup in Sketch.
只是一个圆角矩形顶部的文本层
【讨论】：
以上是关于如何在 TableViewCell 中设置图标的背景颜色？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 ios 中使用图案图像在可扩展的 tableViewCell 中设置 UIButton
解析和斯威夫特。从 Parse 关系中设置 tableViewCell 附件类型