enhancement/room-member-autolayout

Sources/UI/Room/RoomMemberAccessoryView.swift

@@ -1,21 +1,32 @@
 import UIKit
 
 class RoomMemberAccessoryView: UIView {
-    init(image: UIImage, frame: CGRect) {
-        super.init(frame: frame)
+    init(image: UIImage) {
+        super.init(frame: .zero)
+
+        translatesAutoresizingMaskIntoConstraints = false
 
-        layer.cornerRadius = frame.size.width / 2
         layer.masksToBounds = false
         clipsToBounds = true
 
         let imageView = UIImageView(image: image)
-        imageView.center = center
         imageView.tintColor = .white
+        imageView.translatesAutoresizingMaskIntoConstraints = false
 
         addSubview(imageView)
+
+        NSLayoutConstraint.activate([
+            imageView.centerYAnchor.constraint(equalTo: centerYAnchor),
+            imageView.centerXAnchor.constraint(equalTo: centerXAnchor),
+        ])
     }
 
     required init?(coder _: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        layer.cornerRadius = frame.size.width / 2
+    }
 }

Sources/UI/Room/RoomMemberAccessoryViewWithGradient.swift

@@ -1,25 +1,27 @@
 import UIKit
 
 class RoomMemberAccessoryViewWithGradient: RoomMemberAccessoryView {
-    override init(image: UIImage, frame: CGRect) {
-        super.init(image: image, frame: frame)
-
-        let gradient = CAGradientLayer()
-
-        gradient.colors = [
+
+    private let gradient: CAGradientLayer = {
+        let layer = CAGradientLayer()
+        layer.colors = [
             UIColor(red: 0.514, green: 0.349, blue: 0.996, alpha: 1).cgColor,
             UIColor(red: 0.263, green: 0.031, blue: 0.765, alpha: 1).cgColor,
         ]
-
-        gradient.locations = [0, 1]
-        gradient.startPoint = CGPoint(x: 0.25, y: 0.5)
-        gradient.endPoint = CGPoint(x: 0.75, y: 0.5)
-        gradient.frame = CGRect(x: 0.0, y: 0.0, width: 24, height: 24)
-        gradient.transform = CATransform3DMakeAffineTransform(CGAffineTransform(a: 1, b: 1, c: -1, d: 1, tx: 0.5, ty: -0.5))
-
+
+        layer.locations = [0, 1]
+        layer.startPoint = CGPoint(x: 0.25, y: 0.5)
+        layer.endPoint = CGPoint(x: 0.75, y: 0.5)
+        layer.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
+        layer.transform = CATransform3DMakeAffineTransform(CGAffineTransform(a: 1, b: 1, c: -1, d: 1, tx: 0.5, ty: -0.5))
+        return layer
+    }()
+
+    override init(image: UIImage) {
+        super.init(image: image)
         layer.insertSublayer(gradient, at: 0)
     }
-
+    
     required init?(coder _: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }

Sources/UI/Room/RoomMemberCell.swift

@@ -1,41 +1,44 @@
 import AlamofireImage
 import UIKit
 
-// @TODO: AutoLayout
-
 class RoomMemberCell: UICollectionViewCell {
     private(set) var user: Int64?
 
-    private var nameLabel: UILabel!
+    private var nameLabel: UILabel = {
+        let label = UILabel()
+        label.font = .rounded(forTextStyle: .body, weight: .regular)
+        label.textAlignment = .center
+        label.translatesAutoresizingMaskIntoConstraints = false
+        return label
+    }()
 
     private var muteView: RoomMemberAccessoryView = {
         let conf = UIImage.SymbolConfiguration(pointSize: 14, weight: .semibold)
-        let view = RoomMemberAccessoryView(
-            image: UIImage(systemName: "mic.slash.fill", withConfiguration: conf)!,
-            frame: CGRect(x: 0, y: 0, width: 24, height: 24)
-        )
+        let view = RoomMemberAccessoryView(image: UIImage(systemName: "mic.slash.fill", withConfiguration: conf)!)
         view.backgroundColor = UIColor(red: 28 / 255, green: 28 / 255, blue: 30 / 255, alpha: 1.0)
 
         return view
     }()
 
     private var speakingView: RoomMemberAccessoryViewWithGradient = {
         let conf = UIImage.SymbolConfiguration(pointSize: 14, weight: .heavy)
-        return RoomMemberAccessoryViewWithGradient(
-            image: UIImage(systemName: "waveform", withConfiguration: conf)!,
-            frame: CGRect(x: 0, y: 0, width: 24, height: 24)
-        )
+        return RoomMemberAccessoryViewWithGradient( image: UIImage(systemName: "waveform", withConfiguration: conf)!)
     }()
 
     private var adminView: RoomMemberAccessoryView = {
         let conf = UIImage.SymbolConfiguration(pointSize: 13, weight: .semibold)
-        return RoomMemberAccessoryViewWithGradient(
-            image: UIImage(systemName: "star.fill", withConfiguration: conf)!,
-            frame: CGRect(x: 0, y: 0, width: 24, height: 24)
-        )
+        return RoomMemberAccessoryViewWithGradient(image: UIImage(systemName: "star.fill", withConfiguration: conf)!)
     }()
 
-    private var profileImage: UIImageView!
+    private var profileImage: UIImageView = {
+        let image = UIImageView()
+        image.clipsToBounds = true
+        image.layer.masksToBounds = true
+        image.backgroundColor = .brandColor
+        image.contentMode = .scaleAspectFill
+        image.translatesAutoresizingMaskIntoConstraints = false
+        return image
+    }()
 
     private var reactionView: ReactionView!
 
@@ -54,26 +57,41 @@ class RoomMemberCell: UICollectionViewCell {
     override init(frame: CGRect) {
         super.init(frame: frame)
 
-        profileImage = UIImageView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.width))
-        profileImage.layer.cornerRadius = frame.size.width / 2
-        profileImage.clipsToBounds = true
-        profileImage.backgroundColor = .brandColor
-        profileImage.contentMode = .scaleAspectFill
         contentView.addSubview(profileImage)
-
-        nameLabel = UILabel(frame: CGRect(x: 0, y: profileImage.frame.size.height + 4, width: frame.size.width, height: 22))
-        nameLabel.font = .rounded(forTextStyle: .body, weight: .regular)
-        nameLabel.textAlignment = .center
-        addSubview(nameLabel)
-
-        muteView.frame.origin = CGPoint(x: frame.size.width - 24, y: 0)
+        contentView.addSubview(nameLabel)
         contentView.addSubview(muteView)
-
-        speakingView.frame.origin = CGPoint(x: frame.size.width - 24, y: 0)
         contentView.addSubview(speakingView)
-
-        adminView.frame.origin = CGPoint(x: 0, y: frame.size.width - 24)
         contentView.addSubview(adminView)
+
+        NSLayoutConstraint.activate([
+            muteView.heightAnchor.constraint(equalToConstant: 24),
+            muteView.widthAnchor.constraint(equalToConstant: 24),
+            muteView.rightAnchor.constraint(equalTo: rightAnchor),
+        ])
+
+        NSLayoutConstraint.activate([
+            speakingView.heightAnchor.constraint(equalToConstant: 24),
+            speakingView.widthAnchor.constraint(equalToConstant: 24),
+            speakingView.rightAnchor.constraint(equalTo: rightAnchor),
+        ])
+
+        NSLayoutConstraint.activate([
+            adminView.heightAnchor.constraint(equalToConstant: 24),
+            adminView.widthAnchor.constraint(equalToConstant: 24),
+            adminView.bottomAnchor.constraint(equalTo: profileImage.bottomAnchor),
+        ])
+
+        NSLayoutConstraint.activate([
+            profileImage.leftAnchor.constraint(equalTo: contentView.leftAnchor),
+            profileImage.rightAnchor.constraint(equalTo: contentView.rightAnchor),
+            profileImage.heightAnchor.constraint(equalTo: contentView.widthAnchor),
+        ])
+
+        NSLayoutConstraint.activate([
+            nameLabel.leftAnchor.constraint(equalTo: contentView.leftAnchor),
+            nameLabel.rightAnchor.constraint(equalTo: contentView.rightAnchor),
+            nameLabel.topAnchor.constraint(equalTo: profileImage.bottomAnchor, constant: 4),
+        ])
     }
 
     required init?(coder _: NSCoder) {
@@ -98,7 +116,7 @@ class RoomMemberCell: UICollectionViewCell {
         }
 
         reactionView = ReactionView(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.width))
-        reactionView.center = profileImage.center
+        reactionView.translatesAutoresizingMaskIntoConstraints = false
         contentView.addSubview(reactionView)
 
         if image != "" {
@@ -136,4 +154,10 @@ class RoomMemberCell: UICollectionViewCell {
         profileImage.image = nil
         user = nil
     }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+
+        profileImage.layer.cornerRadius = frame.size.width / 2
+    }
 }