Ringo-82 통화 중 ui 구현

iOS/Ringo/Ringo.xcodeproj/project.pbxproj

@@ -7,9 +7,11 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		940C25642B73D20900E069D0 /* ConnectionCollectionViewCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 940C25632B73D20900E069D0 /* ConnectionCollectionViewCell.swift */; };
 		94470A8A2B71050700F0A942 /* Alamofire in Frameworks */ = {isa = PBXBuildFile; productRef = 94470A892B71050700F0A942 /* Alamofire */; };
 		94470A8D2B710A3100F0A942 /* Starscream in Frameworks */ = {isa = PBXBuildFile; productRef = 94470A8C2B710A3100F0A942 /* Starscream */; };
 		94470A902B710CE500F0A942 /* WebRTC in Frameworks */ = {isa = PBXBuildFile; productRef = 94470A8F2B710CE500F0A942 /* WebRTC */; };
+		94470A972B717DC300F0A942 /* ConnectionViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 94470A962B717DC300F0A942 /* ConnectionViewController.swift */; };
 		945603132B6AC07D002F4B33 /* TabBarViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 945603122B6AC07D002F4B33 /* TabBarViewController.swift */; };
 		945603152B6AC22A002F4B33 /* ContactsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 945603142B6AC22A002F4B33 /* ContactsViewController.swift */; };
 		945603172B6AC2D3002F4B33 /* RecentsViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 945603162B6AC2D3002F4B33 /* RecentsViewController.swift */; };
@@ -26,6 +28,8 @@
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
+		940C25632B73D20900E069D0 /* ConnectionCollectionViewCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ConnectionCollectionViewCell.swift; sourceTree = "<group>"; };
+		94470A962B717DC300F0A942 /* ConnectionViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ConnectionViewController.swift; sourceTree = "<group>"; };
 		945603122B6AC07D002F4B33 /* TabBarViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabBarViewController.swift; sourceTree = "<group>"; };
 		945603142B6AC22A002F4B33 /* ContactsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ContactsViewController.swift; sourceTree = "<group>"; };
 		945603162B6AC2D3002F4B33 /* RecentsViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RecentsViewController.swift; sourceTree = "<group>"; };
@@ -92,7 +96,9 @@
 				94470A912B71157C00F0A942 /* Screens */,
 				945CF97A2B67E1CD00396E4E /* AppDelegate.swift */,
 				945CF97C2B67E1CD00396E4E /* SceneDelegate.swift */,
+				940C25632B73D20900E069D0 /* ConnectionCollectionViewCell.swift */,
 				945603222B6D31D9002F4B33 /* ContactsTableViewCell.swift */,
+				94470A962B717DC300F0A942 /* ConnectionViewController.swift */,
 				945603202B6D2F06002F4B33 /* Canvas.swift */,
 				945CF9832B67E1CE00396E4E /* Assets.xcassets */,
 				945CF9852B67E1CE00396E4E /* LaunchScreen.storyboard */,
@@ -184,8 +190,10 @@
 			buildActionMask = 2147483647;
 			files = (
 				945603212B6D2F06002F4B33 /* Canvas.swift in Sources */,
+				94470A972B717DC300F0A942 /* ConnectionViewController.swift in Sources */,
 				945603132B6AC07D002F4B33 /* TabBarViewController.swift in Sources */,
 				945CF97F2B67E1CD00396E4E /* ViewController.swift in Sources */,
+				940C25642B73D20900E069D0 /* ConnectionCollectionViewCell.swift in Sources */,
 				945603192B6AC365002F4B33 /* AccountViewController.swift in Sources */,
 				945CF97B2B67E1CD00396E4E /* AppDelegate.swift in Sources */,
 				945603172B6AC2D3002F4B33 /* RecentsViewController.swift in Sources */,

iOS/Ringo/Ringo/Assets.xcassets/translate.imageset/Contents.json

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

iOS/Ringo/Ringo/ConnectionCollectionViewCell.swift

@@ -0,0 +1,79 @@
+//
+//  ConnectionCollectionViewCell.swift
+//  Ringo
+//
+//  Created by 강진혁 on 2/7/24.
+//
+
+import UIKit
+import SnapKit
+
+class ConnectionCollectionViewCell: UICollectionViewCell {
+
+    static let identifier = "ConnectionCollectionViewCell"
+    var nameLabel = UILabel()
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setUpView()
+        setUpValue()
+        setConstraints()
+    }
+
+    override init(frame: CGRect) {
+        super.init(frame: .zero)
+        setUpView()
+        setUpValue()
+        setConstraints()
+    }
+
+    func setUpView() {
+        contentView.addSubview(nameLabel)
+    }
+
+    func setUpValue() {
+        nameLabel.text = "name"
+        nameLabel.textColor = .white
+        nameLabel.font = .preferredFont(forTextStyle: .title2)
+        nameLabel.textAlignment = .center
+        nameLabel.backgroundColor = .black.withAlphaComponent(0.5)
+        nameLabel.layer.cornerRadius = 15
+        nameLabel.clipsToBounds = true
+
+//        nameLabel.layer.borderColor = UIColor.systemGreen.cgColor
+//        nameLabel.layer.borderWidth = 2
+    }
+
+    func setConstraints() {
+        nameLabel.snp.makeConstraints { make in
+            make.edges.equalTo(contentView.safeAreaLayoutGuide)
+        }
+    }
+}
+// MARK: - canvas 이용하기
+import SwiftUI
+struct ConnectionViewCellPreview<View: UIView>: UIViewRepresentable {
+let view: View
+
+init(_ builder: @escaping () -> View) {
+    view = builder()
+}
+
+func makeUIView(context: Context) -> UIView {
+    return view
+}
+
+func updateUIView(_ view: UIView, context: Context) {
+    view.setContentHuggingPriority(.defaultHigh, for: .horizontal)
+    view.setContentHuggingPriority(.defaultHigh, for: .vertical)
+}
+}
+
+struct ConnectionCollectionViewCellPreview: PreviewProvider{
+static var previews: some View {
+    UIViewPreview {
+        let button = ConnectionCollectionViewCell(frame: .zero)
+        return button
+    }
+}
+}

iOS/Ringo/Ringo/ConnectionViewController.swift

@@ -0,0 +1,209 @@
+//
+//  ConnectionViewController.swift
+//  Ringo
+//
+//  Created by 강진혁 on 2/6/24.
+//
+
+import UIKit
+import SnapKit
+
+class ConnectionViewController: UIViewController {
+
+    let connectionCollectionViewCell = ConnectionCollectionViewCell.identifier
+    let gradientLayer = CAGradientLayer()
+    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
+    let vStack = UIStackView()
+    let hStack1 = UIStackView()
+    let hStack2 = UIStackView()
+    let muteBtn = UIButton()
+    let speakerBtn = UIButton()
+    let translateBtn = UIButton()
+    let hangUpBtn = UIButton()
+
+    let randomNames = ["민준", "서준"]
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        setUpView()
+        setUpValue()
+        setConstraints()
+    }
+
+    func setUpView() {
+        view.layer.addSublayer(gradientLayer)
+        view.addSubview(collectionView)
+        view.addSubview(vStack)
+        vStack.addArrangedSubview(hStack1)
+        vStack.addArrangedSubview(hStack2)
+        hStack1.addArrangedSubview(muteBtn)
+        hStack1.addArrangedSubview(speakerBtn)
+        hStack1.addArrangedSubview(translateBtn)
+        hStack2.addArrangedSubview(hangUpBtn)
+    }
+
+    func setUpValue() {
+        view.backgroundColor = .clear
+        gradientLayer.frame = view.bounds
+        gradientLayer.type = .radial
+        gradientLayer.startPoint = CGPoint(x: -0.3, y: -0.15)
+        gradientLayer.endPoint = CGPoint(x: 2.0, y: 1.0)
+        gradientLayer.locations = [0,0.1,0.8,1]
+        gradientLayer.colors = [
+            CGColor(red: 111/255.0, green: 122/255.0, blue: 130/255.0, alpha: 1),
+            CGColor(red: 93/255.0, green: 114/255.0, blue: 126/255.0, alpha: 1),
+            CGColor(red: 17/255.0, green: 43/255.0, blue: 74/255.0, alpha: 1),
+            CGColor(red: 13/255.0, green: 36/255.0, blue: 69/255.0, alpha: 1)
+        ]
+
+        collectionView.register(ConnectionCollectionViewCell.self, forCellWithReuseIdentifier: connectionCollectionViewCell)
+        collectionView.delegate = self
+        collectionView.dataSource = self
+        collectionView.backgroundColor = .clear
+
+        vStack.layoutMargins = UIEdgeInsets(top: 30, left: 40, bottom: 30, right: 40)
+        vStack.isLayoutMarginsRelativeArrangement = true
+        vStack.axis = .vertical
+        vStack.alignment = .center
+        vStack.distribution = .fillEqually
+        vStack.spacing = 40
+
+        hStack1.axis = .horizontal
+        hStack1.alignment = .center
+        hStack1.distribution = .equalCentering
+
+        let imageSize = UIImage.SymbolConfiguration(font: .systemFont(ofSize: 25))
+
+        muteBtn.backgroundColor = .white.withAlphaComponent(0.16)
+        muteBtn.tintColor = .white
+        muteBtn.configuration = .plain()
+        muteBtn.setImage(UIImage(systemName: "mic.slash.fill",withConfiguration: imageSize), for: .normal)
+        muteBtn.clipsToBounds = true
+        muteBtn.invalidateIntrinsicContentSize()
+        muteBtn.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 25, leading: 25, bottom: 25, trailing: 25)
+        muteBtn.layer.cornerRadius = 40
+
+        speakerBtn.backgroundColor = .white.withAlphaComponent(0.16)
+        speakerBtn.tintColor = .white
+        speakerBtn.configuration = .plain()
+        speakerBtn.setImage(UIImage(systemName: "speaker.wave.3.fill",withConfiguration: imageSize), for: .normal)
+        speakerBtn.clipsToBounds = true
+        speakerBtn.invalidateIntrinsicContentSize()
+        speakerBtn.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 25, leading: 15, bottom: 25, trailing: 15)
+        speakerBtn.layer.cornerRadius = 40
+
+        translateBtn.backgroundColor = .white.withAlphaComponent(0.16)
+        translateBtn.tintColor = .white
+        translateBtn.configuration = .plain()
+        translateBtn.setImage(UIImage(systemName: "character.book.closed.fill",withConfiguration: imageSize), for: .normal)
+        translateBtn.clipsToBounds = true
+        translateBtn.invalidateIntrinsicContentSize()
+        translateBtn.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 25, leading: 23, bottom: 25, trailing: 23)
+        translateBtn.layer.cornerRadius = 40
+
+        hStack2.axis = .horizontal
+        hStack2.alignment = .center
+        hStack2.distribution = .equalCentering
+
+        hangUpBtn.backgroundColor = .systemRed
+        hangUpBtn.tintColor = .white
+        hangUpBtn.configuration = .plain()
+        hangUpBtn.setImage(UIImage(systemName: "phone.down.fill",withConfiguration: UIImage.SymbolConfiguration(font: .systemFont(ofSize: 30))), for: .normal)
+        hangUpBtn.clipsToBounds = true
+        hangUpBtn.invalidateIntrinsicContentSize()
+        hangUpBtn.configuration?.contentInsets = NSDirectionalEdgeInsets(top: 25, leading: 16, bottom: 25, trailing: 16)
+        hangUpBtn.layer.cornerRadius = 40
+    }
+
+    func setConstraints() {
+        collectionView.snp.makeConstraints { make in
+            make.top.equalTo(view.safeAreaLayoutGuide)
+            make.horizontalEdges.equalTo(view.safeAreaLayoutGuide)
+            make.height.equalTo(view.safeAreaLayoutGuide).multipliedBy(0.65)
+        }
+        vStack.snp.makeConstraints { make in
+            make.top.equalTo(collectionView.snp.bottom)
+            make.bottom.equalTo(view.safeAreaLayoutGuide)
+            make.horizontalEdges.equalTo(view.safeAreaLayoutGuide)
+        }
+        hStack1.snp.makeConstraints { make in
+            make.horizontalEdges.equalTo(vStack.layoutMarginsGuide)
+        }
+
+    }
+
+}
+//MARK: - CollectionViewDelegate
+extension ConnectionViewController: UICollectionViewDelegate {
+
+}
+//MARK: - CollectionViewDataSource
+extension ConnectionViewController: UICollectionViewDataSource {
+
+    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+        return randomNames.count
+    }
+
+    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: connectionCollectionViewCell, for: indexPath) as! ConnectionCollectionViewCell
+        cell.nameLabel.text = randomNames[indexPath.row]
+
+        return cell
+    }
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+        //6개까지 커버
+        var cellWidth = 300
+        switch randomNames.count {
+        case 5...:
+            cellWidth = Int((collectionView.frame.width - (40 * 2) - 20)/2)
+            return CGSize(width: cellWidth, height: Int((collectionView.frame.height - (60 * 2))/3))
+        case 3..<5:
+            cellWidth = Int((collectionView.frame.width - (40 * 2) - 20)/2)
+            collectionView.contentInset.top = ((collectionView.frame.height/2) - 50 - CGFloat(cellWidth))
+            return CGSize(width: cellWidth, height: cellWidth)
+        default:
+            cellWidth = Int((collectionView.frame.width - (40 * 2)))
+            if randomNames.count == 1 {
+                collectionView.contentInset.top = ((collectionView.frame.height/2) - 40 - CGFloat(cellWidth/4))
+            } else {
+                collectionView.contentInset.top = ((collectionView.frame.height/2) - 50 - CGFloat(cellWidth/2))
+            }
+            return CGSize(width: cellWidth, height: cellWidth/2)
+        }
+    }
+}
+
+//MARK: - cell layout
+extension ConnectionViewController: UICollectionViewDelegateFlowLayout {
+
+    // 위 아래 간격
+    func collectionView(
+        _ collectionView: UICollectionView,
+        layout collectionViewLayout: UICollectionViewLayout,
+        minimumLineSpacingForSectionAt section: Int
+        ) -> CGFloat {
+        return 20
+    }
+
+    // 옆 간격
+    func collectionView(
+      _ collectionView: UICollectionView,
+      layout collectionViewLayout: UICollectionViewLayout,
+      minimumInteritemSpacingForSectionAt section: Int
+      ) -> CGFloat {
+          return 20
+      }
+
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
+        return UIEdgeInsets(top: 40, left: 40, bottom: 40, right: 40)
+    }
+}
+
+// MARK: - canvas 이용하기
+import SwiftUI
+@available(iOS 13.0.0, *)
+struct ConnectionViewPreview: PreviewProvider {
+    static var previews: some View {
+        ConnectionViewController().toPreview()
+    }
+}

iOS/Ringo/Ringo/SceneDelegate.swift

@@ -16,7 +16,7 @@ class SceneDelegate: UIResponder, UIWindowSceneDelegate {
 
         guard let windowScene = (scene as? UIWindowScene) else { return }
         window = UIWindow(windowScene: windowScene)
-        let mainViewController = TabBarViewController()
+        let mainViewController = ConnectionViewController()
 
         window?.rootViewController = mainViewController
         window?.makeKeyAndVisible()

iOS/Ringo/Ringo/Screens/ViewController.swift

@@ -217,15 +217,15 @@ class ViewController: UIViewController {
     }
 }
 
-// MARK: canvas 이용하기
+// MARK: - canvas 이용하기
 import SwiftUI
 @available(iOS 13.0.0, *)
 struct ViewPreview: PreviewProvider {
     static var previews: some View {
         ViewController().toPreview()
     }
 }
-// hexcode로 색 지정하기
+// MARK: -  hexcode로 색 지정하기
 extension UIColor {
 
     convenience init(hexCode: String, alpha: CGFloat = 1.0) {