From e4eff6aba92b35e47c5704e44f72b0fca278e888 Mon Sep 17 00:00:00 2001 From: Benoit Martins Date: Tue, 21 Mar 2023 15:34:09 +0100 Subject: [PATCH] Change Progress bar to CircularProgressBar (Like Android) in Download Bubble Chat Message --- .../Chat/Views/CircularProgressBarView.swift | 54 +++++++++++++++++++ .../Chat/Views/DownloadMessageCell.swift | 24 +++++++-- .../Chat/Views/MultilineMessageCell.swift | 6 ++- Classes/Swift/Voip/Theme/VoipTheme.swift | 1 + linphone.xcodeproj/project.pbxproj | 4 ++ 5 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 Classes/Swift/Chat/Views/CircularProgressBarView.swift diff --git a/Classes/Swift/Chat/Views/CircularProgressBarView.swift b/Classes/Swift/Chat/Views/CircularProgressBarView.swift new file mode 100644 index 000000000..beee5a55d --- /dev/null +++ b/Classes/Swift/Chat/Views/CircularProgressBarView.swift @@ -0,0 +1,54 @@ +// +// CircularProgressBarView.swift +// linphone +// +// Created by Benoît Martins on 21/03/2023. +// + +import UIKit + +class CircularProgressBarView: UIView { + + private var circleLayer = CAShapeLayer() + private var progressLayer = CAShapeLayer() + + private var startPoint = CGFloat(-Double.pi / 2) + private var endPoint = CGFloat(3 * Double.pi / 2) + + override init(frame: CGRect) { + super.init(frame: frame) + createCircularPath() + } + + required init?(coder: NSCoder) { + super.init(coder: coder) + } + + func createCircularPath() { + let circularPath = UIBezierPath(arcCenter: CGPoint(x: 69, y: 69), radius: 20, startAngle: startPoint, endAngle: endPoint, clockwise: true) + circleLayer.path = circularPath.cgPath + circleLayer.fillColor = UIColor.clear.cgColor + circleLayer.lineCap = .round + circleLayer.lineWidth = 10.0 + circleLayer.strokeEnd = 1.0 + circleLayer.strokeColor = VoipTheme.backgroundWhiteBlack.get().cgColor + layer.addSublayer(circleLayer) + progressLayer.path = circularPath.cgPath + progressLayer.fillColor = VoipTheme.backgroundWhiteBlack.get().cgColor + progressLayer.lineCap = .round + progressLayer.lineWidth = 5.0 + progressLayer.strokeEnd = 0 + progressLayer.strokeColor = VoipTheme.primary_color.cgColor + layer.addSublayer(progressLayer) + } + + func progressAnimation(fromValue: Float, toValue: Float) { + let circularProgressAnimation = CABasicAnimation(keyPath: "strokeEnd") + circularProgressAnimation.duration = 0 + circularProgressAnimation.fromValue = fromValue + circularProgressAnimation.toValue = toValue + circularProgressAnimation.fillMode = .forwards + circularProgressAnimation.isRemovedOnCompletion = false + progressLayer.add(circularProgressAnimation, forKey: "progressAnim") + } +} diff --git a/Classes/Swift/Chat/Views/DownloadMessageCell.swift b/Classes/Swift/Chat/Views/DownloadMessageCell.swift index 4198fc2bb..a918b3cb1 100644 --- a/Classes/Swift/Chat/Views/DownloadMessageCell.swift +++ b/Classes/Swift/Chat/Views/DownloadMessageCell.swift @@ -14,10 +14,12 @@ class DownloadMessageCell: UIView { let downloadImageView = UIImageView(image: UIImage(named: "file_picture_default")) let downloadNameLabel = StyledLabel(VoipTheme.chat_conversation_download_button) let downloadButtonLabel = StyledLabel(VoipTheme.chat_conversation_download_button) - let downloadProgressBar = UIProgressView() + var circularProgressBarView = CircularProgressBarView() + let circularProgressBarLabel = StyledLabel(VoipTheme.chat_conversation_download_progress_text) let downloadSpacing = UIView() var content: Content? = nil + var fromValue : Float = 0.0 override init(frame: CGRect) { super.init(frame: frame) @@ -30,10 +32,8 @@ class DownloadMessageCell: UIView { downloadView.addSubview(downloadImageView) downloadStackView.addArrangedSubview(downloadNameLabel) downloadStackView.addArrangedSubview(downloadButtonLabel) - downloadStackView.addArrangedSubview(downloadProgressBar) downloadStackView.addArrangedSubview(downloadSpacing) - downloadStackView.backgroundColor = VoipTheme.backgroundWhiteBlack.get() downloadStackView.size(w: 138, h: 138).done() @@ -42,11 +42,25 @@ class DownloadMessageCell: UIView { downloadButtonLabel.size(w: 130, h: 22).done() downloadSpacing.size(w: 138, h: 14).done() downloadImageView.center = CGPoint(x: 69, y: 40) - downloadProgressBar.size(w: 120, h: 22).done() - downloadProgressBar.isHidden = true + + addSubview(circularProgressBarView) + circularProgressBarView.isHidden = true + circularProgressBarLabel.text = "0%" + circularProgressBarLabel.size(w: 30, h: 30).done() + circularProgressBarView.addSubview(circularProgressBarLabel) } required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } + + func setUpCircularProgressBarView(toValue: Float) { + + circularProgressBarLabel.text = "\(Int(toValue*100))%" + circularProgressBarLabel.center = CGPoint(x: 69, y: 69) + + + circularProgressBarView.progressAnimation(fromValue: fromValue, toValue: toValue) + fromValue = toValue + } } diff --git a/Classes/Swift/Chat/Views/MultilineMessageCell.swift b/Classes/Swift/Chat/Views/MultilineMessageCell.swift index 7e720fd1b..aff1c8d87 100644 --- a/Classes/Swift/Chat/Views/MultilineMessageCell.swift +++ b/Classes/Swift/Chat/Views/MultilineMessageCell.swift @@ -1174,7 +1174,8 @@ class MultilineMessageCell: UICollectionViewCell, UICollectionViewDataSource, UI } downloadContentCollection[indexTransferProgress]!.downloadButtonLabel.isHidden = true - downloadContentCollection[indexTransferProgress]!.downloadProgressBar.isHidden = false + downloadContentCollection[indexTransferProgress]!.circularProgressBarView.isHidden = false + //downloadContentCollection[indexTransferProgress]!.downloadProgressBar.isHidden = false } DispatchQueue.main.async(execute: { [self] in @@ -1187,7 +1188,8 @@ class MultilineMessageCell: UICollectionViewCell, UICollectionViewDataSource, UI collectionViewImagesGrid.reloadItems(at: [IndexPath(row: indexTransferProgress, section: 0)]) indexTransferProgress = -1 } else { - downloadContentCollection[indexTransferProgress]!.downloadProgressBar.setProgress(p, animated: true) + downloadContentCollection[indexTransferProgress]!.setUpCircularProgressBarView(toValue: p) + //downloadContentCollection[indexTransferProgress]!.downloadProgressBar.setProgress(p, animated: true) } }) } diff --git a/Classes/Swift/Voip/Theme/VoipTheme.swift b/Classes/Swift/Voip/Theme/VoipTheme.swift index 47370e199..0eed573e1 100644 --- a/Classes/Swift/Voip/Theme/VoipTheme.swift +++ b/Classes/Swift/Voip/Theme/VoipTheme.swift @@ -154,6 +154,7 @@ import UIKit static let chat_conversation_forward_label = TextStyle(fgColor: LightDarkColor(voip_dark_gray,.white), bgColor: LightDarkColor(.clear,.clear), allCaps: false, align: .left, font: fontName+"-Regular", size: 12.0) static let chat_conversation_download_button = TextStyle(fgColor: LightDarkColor(voip_dark_gray,.white), bgColor: LightDarkColor(.clear,.clear), allCaps: false, align: .center, font: fontName+"-Regular", size: 14.0) + static let chat_conversation_download_progress_text = TextStyle(fgColor: LightDarkColor(voip_dark_gray,.white), bgColor: LightDarkColor(.clear,.clear), allCaps: false, align: .center, font: fontName+"-Regular", size: 12.0) // Buttons Background (State colors) diff --git a/linphone.xcodeproj/project.pbxproj b/linphone.xcodeproj/project.pbxproj index c98f6acdf..18cedf440 100644 --- a/linphone.xcodeproj/project.pbxproj +++ b/linphone.xcodeproj/project.pbxproj @@ -947,6 +947,7 @@ D7013DB82940AA12004EEAAE /* MessageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7013DB72940AA12004EEAAE /* MessageView.swift */; }; D7097B35296D684900AEF6C5 /* FileType.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7097B34296D684900AEF6C5 /* FileType.swift */; }; D71418E329C9B4E0002EEF75 /* DownloadMessageCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = D71418E229C9B4E0002EEF75 /* DownloadMessageCell.swift */; }; + D71418E529C9E2CD002EEF75 /* CircularProgressBarView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D71418E429C9E2CD002EEF75 /* CircularProgressBarView.swift */; }; D7421D9E29228A5200290CAB /* ChatConversationViewSwift.swift in Sources */ = {isa = PBXBuildFile; fileRef = D7421D9D29228A5200290CAB /* ChatConversationViewSwift.swift */; }; D74A44912923BAF90017D063 /* BackActionsNavigationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D74A44902923BAF90017D063 /* BackActionsNavigationView.swift */; }; D77057F1292E4A340031A970 /* ChatConversationViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = D77057F0292E4A340031A970 /* ChatConversationViewModel.swift */; }; @@ -2209,6 +2210,7 @@ D7013DB72940AA12004EEAAE /* MessageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MessageView.swift; sourceTree = ""; }; D7097B34296D684900AEF6C5 /* FileType.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FileType.swift; sourceTree = ""; }; D71418E229C9B4E0002EEF75 /* DownloadMessageCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DownloadMessageCell.swift; sourceTree = ""; }; + D71418E429C9E2CD002EEF75 /* CircularProgressBarView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CircularProgressBarView.swift; sourceTree = ""; }; D7421D9D29228A5200290CAB /* ChatConversationViewSwift.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatConversationViewSwift.swift; sourceTree = ""; }; D74A44902923BAF90017D063 /* BackActionsNavigationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BackActionsNavigationView.swift; sourceTree = ""; }; D77057F0292E4A340031A970 /* ChatConversationViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ChatConversationViewModel.swift; sourceTree = ""; }; @@ -3892,6 +3894,7 @@ D7C6DE812948CF3100756E03 /* DropDownCell.swift */, D7C6DE822948CF3100756E03 /* DropDownCell.xib */, D71418E229C9B4E0002EEF75 /* DownloadMessageCell.swift */, + D71418E429C9E2CD002EEF75 /* CircularProgressBarView.swift */, ); path = Views; sourceTree = ""; @@ -5311,6 +5314,7 @@ C63F7250285A24B10066163B /* CallStatsView.swift in Sources */, 6306440E1BECB08500134C72 /* FirstLoginView.m in Sources */, C63F721F285A24B10066163B /* BackNextNavigationView.swift in Sources */, + D71418E529C9E2CD002EEF75 /* CircularProgressBarView.swift in Sources */, D3807FC315C28940005BE9BC /* DCRoundSwitchOutlineLayer.m in Sources */, C63F723D285A24B10066163B /* TextStyle.swift in Sources */, C6548823292D369500BF646B /* AbstractCallView.swift in Sources */,