Просмотр исходного кода

Add Meet and Zoom tab logos with retina assets.

Include template image sets at 1x, 2x, and 3x scales and wire them into the platform tab bar with configurable logo sizing.

Made-with: Cursor
huzaifahayat12 3 месяцев назад
Родитель
Сommit
c0dd05eb00

+ 27 - 0
meetings_app/Assets.xcassets/MeetLogo.imageset/Contents.json

@@ -0,0 +1,27 @@
+{
+  "images" : [
+    {
+      "filename" : "meet_logo.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "meet_logo@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "meet_logo@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : false,
+    "template-rendering-intent" : "template"
+  }
+}

BIN
meetings_app/Assets.xcassets/MeetLogo.imageset/meet_logo.png


BIN
meetings_app/Assets.xcassets/MeetLogo.imageset/meet_logo@2x.png


BIN
meetings_app/Assets.xcassets/MeetLogo.imageset/meet_logo@3x.png


+ 26 - 0
meetings_app/Assets.xcassets/ZoomLogo.imageset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images" : [
+    {
+      "filename" : "zoom_logo.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "zoom_logo@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "zoom_logo@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  },
+  "properties" : {
+    "template-rendering-intent" : "template"
+  }
+}

BIN
meetings_app/Assets.xcassets/ZoomLogo.imageset/zoom_logo.png


BIN
meetings_app/Assets.xcassets/ZoomLogo.imageset/zoom_logo@2x.png


BIN
meetings_app/Assets.xcassets/ZoomLogo.imageset/zoom_logo@3x.png


+ 29 - 10
meetings_app/ViewController.swift

@@ -154,8 +154,8 @@ private extension ViewController {
         stack.distribution = .fillEqually
         stack.distribution = .fillEqually
         stack.spacing = 4
         stack.spacing = 4
 
 
-        stack.addArrangedSubview(topTab("Meet", icon: "􀤆", selected: true))
-        stack.addArrangedSubview(topTab("Zoom", icon: "􀤉", selected: false))
+        stack.addArrangedSubview(topTab("Meet", icon: "􀤆", selected: true, logoImageName: "MeetLogo"))
+        stack.addArrangedSubview(topTab("Zoom", icon: "􀤉", selected: false, logoImageName: "ZoomLogo", logoPointSize: 30))
         stack.addArrangedSubview(topTab("Teams", icon: "􀉨", selected: false))
         stack.addArrangedSubview(topTab("Teams", icon: "􀉨", selected: false))
         stack.addArrangedSubview(topTab("Zoho", icon: "􀯶", selected: false))
         stack.addArrangedSubview(topTab("Zoho", icon: "􀯶", selected: false))
 
 
@@ -389,22 +389,41 @@ private extension ViewController {
         return item
         return item
     }
     }
 
 
-    func topTab(_ title: String, icon: String, selected: Bool) -> NSView {
+    func topTab(_ title: String, icon: String, selected: Bool, logoImageName: String? = nil, logoPointSize: CGFloat = 26) -> NSView {
         let tab = roundedContainer(cornerRadius: 19, color: selected ? palette.primaryBlue : .clear)
         let tab = roundedContainer(cornerRadius: 19, color: selected ? palette.primaryBlue : .clear)
         tab.translatesAutoresizingMaskIntoConstraints = false
         tab.translatesAutoresizingMaskIntoConstraints = false
 
 
-        let iconLabelView = textLabel(icon, font: typography.tabIcon, color: palette.textPrimary)
+        let leadingView: NSView
+        if let name = logoImageName, let logo = NSImage(named: name) {
+            let imageView = NSImageView(image: logo)
+            imageView.translatesAutoresizingMaskIntoConstraints = false
+            imageView.imageScaling = .scaleProportionallyDown
+            imageView.imageAlignment = .alignCenter
+            imageView.isEditable = false
+            imageView.contentTintColor = palette.textPrimary
+            leadingView = imageView
+        } else {
+            leadingView = textLabel(icon, font: typography.tabIcon, color: palette.textPrimary)
+        }
+
         let titleLabel = textLabel(title, font: typography.tabTitle, color: palette.textPrimary)
         let titleLabel = textLabel(title, font: typography.tabTitle, color: palette.textPrimary)
 
 
-        tab.addSubview(iconLabelView)
+        tab.addSubview(leadingView)
         tab.addSubview(titleLabel)
         tab.addSubview(titleLabel)
 
 
-        NSLayoutConstraint.activate([
-            iconLabelView.leadingAnchor.constraint(equalTo: tab.leadingAnchor, constant: 16),
-            iconLabelView.centerYAnchor.constraint(equalTo: tab.centerYAnchor),
-            titleLabel.leadingAnchor.constraint(equalTo: iconLabelView.trailingAnchor, constant: 6),
+        var constraints: [NSLayoutConstraint] = [
+            leadingView.leadingAnchor.constraint(equalTo: tab.leadingAnchor, constant: 16),
+            leadingView.centerYAnchor.constraint(equalTo: tab.centerYAnchor),
+            titleLabel.leadingAnchor.constraint(equalTo: leadingView.trailingAnchor, constant: 6),
             titleLabel.centerYAnchor.constraint(equalTo: tab.centerYAnchor)
             titleLabel.centerYAnchor.constraint(equalTo: tab.centerYAnchor)
-        ])
+        ]
+        if logoImageName != nil {
+            constraints.append(contentsOf: [
+                leadingView.widthAnchor.constraint(equalToConstant: logoPointSize),
+                leadingView.heightAnchor.constraint(equalToConstant: logoPointSize)
+            ])
+        }
+        NSLayoutConstraint.activate(constraints)
 
 
         return tab
         return tab
     }
     }