Skip to content
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.

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

[Design] #12 - 햄버거바 UI 구현 #32

Merged
merged 26 commits into from
Jul 12, 2022

Conversation

yungu0010
Copy link
Member

🔥 Pull requests

⛳️ 작업한 브랜치

👷 작업한 내용

  • 햄버거바 UI를 구현
  • 제스처를 통한 햄버거바 애니메이션 구현
  • 햄버거바 바깥뷰를 터치했을 때 햄버거바 애니메이션 구현

🚨 참고 사항

  • dividingLineViews를 배열로 생성한 것이 좋은 방법인지 잘 모르겠습니다.
  • 컴포넌트 별 이름

image

📸 스크린샷

기능 스크린샷
햄버거바 + 애니메이션 Simulator Screen Recording - iPhone 13 mini - 2022-07-12 at 17 45 59

📟 관련 이슈

1. 배경색 지정
2. 레이아웃 지정
배경만 애니메이션 적용
햄버거바의 요소에는 적용되지 않음
제스처 추가
touchesBegan 오류 해결
@yungu0010 yungu0010 added Design UI 및 Layout 작업 🌈YunDol labels Jul 12, 2022
@yungu0010 yungu0010 added this to In progress in HeathFoodMe via automation Jul 12, 2022
@yungu0010 yungu0010 self-assigned this Jul 12, 2022
Copy link
Member

@L-j-h-c L-j-h-c left a comment

Choose a reason for hiding this comment

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

생각보다 섬세한 기능이 많아서 어려운 뷰였네요!! 너무 고생하셨어~~

//

import UIKit
import SnapKit
Copy link
Member

Choose a reason for hiding this comment

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

p5;

한칸 띄워주세용~~

Copy link
Member Author

Choose a reason for hiding this comment

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

넵~!

Comment on lines 32 to 39
struct HamburgerBar {
static let logout = "로그아웃"
static let setting = "설정"
static let reposrtCorrection = "수정사항 제보하기"
static let reportStore = "가게 제보하기"
static let myReview = "내가 쓴 리뷰"
static let scrapList = "스크랩한 식당"
}
Copy link
Member

Choose a reason for hiding this comment

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

p4;

이친구 Map 안에 들어갈거니까 struct Map으로 한번 더 감싸주세요~

private let screenWidth = UIScreen.main.bounds.width
private lazy var hamburgerBarButton = UIButton()
private var menuButtons: [UIButton] = []
private let buttonTitles: [String] = ["스크랩한 식당", "내가 쓴 리뷰", "가게 제보하기",
Copy link
Member

Choose a reason for hiding this comment

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

예네도 StringLiterals에 빼줄 수 있을 것 같아요~

Copy link
Member Author

Choose a reason for hiding this comment

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

오케이!!


override func viewDidLoad() {
super.viewDidLoad()

Copy link
Member

Choose a reason for hiding this comment

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

p4;

요부분 공백 지워주세요~~ 슬랙에 태그해드렸습니당!

Comment on lines 107 to 112
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first,
touch.view != hamburgerBarView {
dismissHamburgerBarWithAnimation()
}
}
Copy link
Member

Choose a reason for hiding this comment

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

p5;

👍 👍

Comment on lines 127 to 139
for buttonIndex in 0...3 {
let button = UIButton()
button.setTitle(buttonTitles[buttonIndex], for: .normal)
button.setTitleColor(.helfmeBlack, for: .normal)
button.titleLabel?.font = UIFont.PretendardRegular(size: 16)
menuButtons.append(button)

if buttonIndex < 2 {
storeButtonStackView.addArrangedSubviews(menuButtons[buttonIndex])
} else {
reportButtonStackView.addArrangedSubviews(menuButtons[buttonIndex])
}
}
Copy link
Member

Choose a reason for hiding this comment

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

p5;

응용 잘하셨네요~~! 굳굳

Copy link
Member Author

Choose a reason for hiding this comment

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

덕분에 중복코드 많이 줄였습니다,, 최고선배🥺

Comment on lines 143 to 147
for _ in 0...2 {
let view = UIView()
view.backgroundColor = .helfmeLineGray
dividingLineViews.append(view)
}
Copy link
Member

Choose a reason for hiding this comment

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

p5;

요것도 원한다면 UIView 배열 선언할 때 클로저 안에서 해줄 수 있어용~

Copy link
Member Author

Choose a reason for hiding this comment

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

private var dividingLineViews: [UIView] = {
//code
}()

이런식으로 작성하는건가요?! 만약 맞다면 dividingLineViews.append(view)는 어디서 해주는건지 잘 모르겠습니다😞

Comment on lines 224 to 227
let hamburgerViewWidth = screenWidth * 0.71
self.hamburgerBarView.snp.updateConstraints { make in
make.trailing.equalToSuperview().inset(screenWidth - hamburgerViewWidth)
}
Copy link
Member

Choose a reason for hiding this comment

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

p5;

상수로 정리하니까 깔끔하네요~~!

Comment on lines 264 to 281
if hambergurBarViewTranslation.x > -80 {
let containerViewWidth = screenWidth * 0.71
self.hamburgerBarView.snp.updateConstraints { make in
make.trailing.equalToSuperview().inset(screenWidth - containerViewWidth)
}

UIView.animate(withDuration: 0.4) {
self.view.backgroundColor = .helfmeBlack.withAlphaComponent(0.4)
self.hamburgerBarView.transform = CGAffineTransform(translationX: 0, y: 0)
self.view.layoutIfNeeded()
}

UIView.animate(withDuration: 0.1) {
self.hamburgerBarView.transform = .identity
}
} else {
dismissHamburgerBarWithAnimation()
}
Copy link
Member

Choose a reason for hiding this comment

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

p5;

덕분에 저도 좋은거 하나 알아가요~~

Copy link
Member

@i-colours-u i-colours-u left a comment

Choose a reason for hiding this comment

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

고생하셨습니다 🙇🏼
햄버거바가 만만해보였지만... 생각보다 처리할게 많았을지도..!?


class ButtonVC: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
Copy link
Member

Choose a reason for hiding this comment

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

p3;
요건 지워주세요~!

Copy link
Member Author

Choose a reason for hiding this comment

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

넵!!

Comment on lines +16 to +17
var hambergurBarViewTranslation = CGPoint(x: 0, y: 0)
var hambergurBarViewVelocity = CGPoint(x: 0, y: 0)
Copy link
Member

Choose a reason for hiding this comment

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

이거 사용하지 않은 프로퍼티라면 날려주세요 !! p3;

Copy link
Member Author

Choose a reason for hiding this comment

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

moveHamburgerBarWithGesture()에서 위치와 방향 잡을 때 사용하는 변수라 살려두겠슴다!

private let screenWidth = UIScreen.main.bounds.width
private lazy var hamburgerBarButton = UIButton()
private var menuButtons: [UIButton] = []
private let buttonTitles: [String] = ["스크랩한 식당", "내가 쓴 리뷰", "가게 제보하기",
Copy link
Member

Choose a reason for hiding this comment

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

나중에 I18N 스트링 적어두고 따로 빼주시면 좋을것 같아요!! p4;

Copy link
Member Author

Choose a reason for hiding this comment

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

오케이 확인~!

Copy link
Member

@L-j-h-c L-j-h-c left a comment

Choose a reason for hiding this comment

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

수고하셨어용~~~!

@yungu0010 yungu0010 merged commit bc60135 into Health-Food-Me:develop Jul 12, 2022
HeathFoodMe automation moved this from In progress to Done Jul 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Design UI 및 Layout 작업 🌈YunDol
Projects
Development

Successfully merging this pull request may close these issues.

[Design] 햄버거바 UI 구현
3 participants