Skip to content

task hotfix chatting UI 개선 #297

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 3, 2024
Merged

task hotfix chatting UI 개선 #297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
488263a
fix chatInputField TapGestureRecognizer 제외
Siwon-L Dec 3, 2024
a898a45
fix PlayerControl 애니메이션 시 키보드 내려가는 문제 수정
Siwon-L Dec 3, 2024
9192b37
fix 채팅 스크롤 시 `최근 채팅으로 이동` 버튼 애니메이션 개선
Siwon-L Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 26 additions & 13 deletions Projects/Features/LiveStreamFeature/Sources/Chating/Views/ChattingListView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ protocol ChatInputFieldAction {
}

final class ChattingListView: BaseView {
private let chattingContainerView = UIView()
private let titleLabel = UILabel()
private let chatListView = UITableView(frame: .zero, style: .plain)
private let chatEmptyView = ChatEmptyView()
private let chatInputField = ChatInputField()
private let recentChatButton = UIButton()

@Published private var isScrollFixed = true
private var isAnimating = false

private var recentChatButtonShowConstraints: [NSLayoutConstraint] = []
private var recentChatButtonHideConstraints: [NSLayoutConstraint] = []
Expand Down Expand Up @@ -48,8 +50,9 @@ final class ChattingListView: BaseView {
}

override func setupViews() {
addSubview(titleLabel)
addSubview(chatListView)
addSubview(chattingContainerView)
chattingContainerView.addSubview(titleLabel)
chattingContainerView.addSubview(chatListView)
addSubview(recentChatButton)
addSubview(chatInputField)

Expand All @@ -59,7 +62,6 @@ final class ChattingListView: BaseView {
chatListView.register(ChattingCell.self, forCellReuseIdentifier: ChattingCell.identifier)
chatListView.register(SystemAlarmCell.self, forCellReuseIdentifier: SystemAlarmCell.identifier)
chatListView.backgroundView = chatEmptyView
chatListView.bounces = false
}

override func setupStyles() {
Expand All @@ -77,15 +79,21 @@ final class ChattingListView: BaseView {
}

override func setupLayouts() {
chattingContainerView.ezl.makeConstraint {
$0.horizontal(to: self)
.top(to: self)
.bottom(to: chatInputField.ezl.top)
}

titleLabel.ezl.makeConstraint {
$0.top(to: self)
.leading(to: self, offset: 20)
$0.top(to: chattingContainerView, offset: 24)
.leading(to: chattingContainerView, offset: 20)
}

chatListView.ezl.makeConstraint {
$0.horizontal(to: self)
$0.horizontal(to: chattingContainerView)
.top(to: titleLabel.ezl.bottom, offset: 21)
.bottom(to: chatInputField.ezl.top)
.bottom(to: chattingContainerView)
}

chatInputField.ezl.makeConstraint {
Expand All @@ -107,7 +115,7 @@ final class ChattingListView: BaseView {

override func setupActions() {
let tapGesture: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
self.addGestureRecognizer(tapGesture)
chattingContainerView.addGestureRecognizer(tapGesture)

$isScrollFixed
.sink { [weak self] in
Expand All @@ -117,8 +125,8 @@ final class ChattingListView: BaseView {

recentChatButton.addAction(
UIAction { [weak self] _ in
self?.updateRecentChatButtonConstraint(isHidden: true)
self?.scrollToBottom()
self?.updateRecentChatButtonConstraint(isHidden: true)
},
for: .touchUpInside
)
Expand All @@ -138,6 +146,7 @@ final class ChattingListView: BaseView {

private func scrollToBottom() {
guard let indexPath = lastIndexPath() else { return }
isAnimating = true
chatListView.scrollToRow(at: indexPath, at: .bottom, animated: true)
}

Expand Down Expand Up @@ -181,9 +190,13 @@ extension ChattingListView: ChatInputFieldAction {
}

extension ChattingListView: UITableViewDelegate {
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
guard let lastIndexPath = lastIndexPath(),
let indexPathList = chatListView.indexPathsForVisibleRows else { return }
isScrollFixed = indexPathList.contains(lastIndexPath)
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard !isAnimating else { return }
let offsetMaxY = scrollView.contentSize.height - scrollView.bounds.height
isScrollFixed = (offsetMaxY - 50...offsetMaxY) ~= scrollView.contentOffset.y || offsetMaxY < scrollView.contentOffset.y
Comment on lines +195 to +196
Copy link
Collaborator

@hyunjuntyler hyunjuntyler Dec 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기있는 50이라는 값은 어떻게 나온 값인지 궁금합니다!

Copy link
Member Author

@Siwon-L Siwon-L Dec 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

일정 높이 이상 스크롤 시 버튼이 표시되도록 구현했으며, 그 높이를 50으로 설정했습니다. 특별한 기준은 없고, 테스트를 진행한 결과 가장 자연스러운 높이여서 50으로 설정했습니다.

Copy link
Collaborator

@hyunjuntyler hyunjuntyler Dec 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그렇군요 감사합니다 :)

}

func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView) {
isAnimating = false
}
}
9 changes: 7 additions & 2 deletions .../Features/LiveStreamFeature/Sources/Player/ViewControllers/LiveStreamViewController.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ public final class LiveStreamViewController: BaseViewController<LiveStreamViewMo
}

chattingList.ezl.makeConstraint {
$0.top(to: infoView.ezl.bottom, offset: 24)
$0.top(to: infoView.ezl.bottom)
.horizontal(to: view)
.bottom(to: view.keyboardLayoutGuide.ezl.top)
}
Expand All @@ -133,6 +133,12 @@ public final class LiveStreamViewController: BaseViewController<LiveStreamViewMo
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture))
playerView.addGestureRecognizer(panGesture)
playerView.isUserInteractionEnabled = true

playerView.playerGestureDidTap
.sink { [weak self] _ in
self?.view.endEditing(true)
}
.store(in: &subscription)
}

public override func setupBind() {
Expand All @@ -158,7 +164,6 @@ public final class LiveStreamViewController: BaseViewController<LiveStreamViewMo
.sink { [weak self] flag in
guard let self else { return }
self.playerView.playerControlViewAlphaAnimalation(flag)
view.endEditing(true)
}
.store(in: &subscription)

Expand Down
Loading