[Feat] #11 - 플로팅 버튼 라이브러리 사용 #18

yangsubinn · 2022-01-07T17:34:05Z

🌴 PR 요약

🌱 작업한 브랜치

feature/[Feat] 플로팅 버튼 라이브러리 사용 #11

🌱 작업한 내용

BaseViewController 생성, 적용
JJFloatingActionButton 라이브러리 적용
플로팅버튼 탭했을 때 버튼 색상 변경

📌 참고 사항

베이스뷰컨 누가 만들어준거 써보기만 해봤지,, 직접은 처음 만들어봤는데요..
그동안 제가 헛쓰고 있었다는 것을 깨달았습니다
햄짜기 듀나선생님 죄송했습니다..
그리구 그 공부하는 겸, 정리하는 겸 주석을 좀 상세히 달아보려고 했습니다
이해가 안되는 부분이 있거나 이건 쫌 아닌 듯 싶거나 왜이래? 싶은 곳이 있다면 언제든 말해주세여

아래 슬쩍 커밋을 보니까 마지막 커밋 제목을 단단히 잘못 지었네요....

📸 스크린샷

기능	스크린샷
플로팅 버튼

📮 관련 이슈

Resolved: [Feat] 플로팅 버튼 라이브러리 사용 #11

L-j-h-c

코베 강의 + 플로팅 버튼 이슈 해결 잘 배워갑니다!!

L-j-h-c · 2022-01-08T09:39:19Z

Practice-YSB/FloatingButton/FloatingButton/ViewController.swift

+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        /// BaseViewController를 상속받기 때문에, BaseViewController에서 viewDidLoad()에 넣어둔 함수는 다시 안넣어도 적용O


와 이거 너무 신기해요....!

L-j-h-c · 2022-01-08T09:40:23Z

Practice-YSB/FloatingButton/FloatingButton/ViewController.swift

+    // MARK: - Method
+
+    override func setUI() {
+        super.setUI()


매일 보던 super.viewDidLoad()가 이것과 같은 맥락에서 쓰였던거네요....너무신기해

L-j-h-c · 2022-01-08T09:44:43Z

Practice-YSB/FloatingButton/FloatingButton/ViewController.swift

+    override func setLayout() {
+        /// 프로퍼티를 View에 넣어줌 (storyboard에서 viewcontroller에 올리는 과정)
+        view.addSubview(titleLabel)
+        view.addSubview(actionButton)
+        view.addSubview(subTitleLabel)
+
+        /// textLabel의 레이아웃 설정
+        titleLabel.snp.makeConstraints { make in
+            /// superView를 기준으로 center에 배치
+            make.center.equalToSuperview()
+        }
+
+        subTitleLabel.snp.makeConstraints { make in
+            /// subTitleLabel의 top을 titleLabel의 bottom으로부터 20만큼 띄우겠다
+            make.top.equalTo(titleLabel.snp.bottom).offset(20)
+            make.centerX.equalTo(titleLabel.snp.centerX)
+        }
+
+        actionButton.snp.makeConstraints { make in
+            /// actionButton의 trailing과 bottom을 superView의 trailing과 bottom으로부터 각각 30씩 안쪽으로 constraint를 주겠다
+            /// 두개를 아래처럼 따로 써도 되고, 같은 값이라면 합칠 수도 O
+
+//            make.trailing.equalToSuperview().inset(30)
+//            make.bottom.equalToSuperview().inset(30)
+
+            make.trailing.bottom.equalToSuperview().inset(30)
+        }


슨배야....이거 코베 강의인가요?? 감동이에요 👍 👍 👍

스냅킷 trailing, bottom 한번에 적용가능

서로 독립된 것들은 offset으로, 종속관계이면 inset으로
잘 배워갑니다...!

아아 그 추가적으로 말하자면,

trailing이나 bottom 이외에도 leading, top, center 등 다양한 요소들을 같이 쓸 수도 있어여!
make.top.leading.bottom.trailing.equalToSuperview() 이런 식으로도 쓸 수 있구...

그리구 offset과 inset의 차이는 사실 저도 헷갈리긴 하는데,
inset은 그 요소의 여백?마진?을 주는 것이고, offset은 "현재 뷰 constraint = 슈퍼뷰 constraint + offset 값" 라고 하네여... 이건 그냥 직접 여러가지 해보면서 아는게 나을것 같기도 하고....
아래 링크 보면 offset과 inset의 차이를 설명해주길래 남겨봅니다아
https://eunjin3786.tistory.com/202

수빈이가 개념적으로 잘 설명해줬네요!!
쉽게 이해하자면 superview 의 안쪽으로 레이아웃을 잡고 싶다면! offset 사용하고
leading 기준에서는 inset 과 offset 이 동일하지만 trailing 과 bottom 기준에서는 inset 은 안쪽으로 offset 은 바깥쪽으로 적용된다고 보면 될거 같네용!

box.snp.makeConstraints { maker -> Void in maker.top.left.bottom.right.equalToSuperview().inset(UIEdgeInsets(top: 50, left: 50, bottom: 50, right: 50)) } box.snp.makeConstraints { maker -> Void in maker.top.equalToSuperview().offset(50) maker.left.equalToSuperview().offset(50) maker.right.equalToSuperview().offset(-50) maker.bottom.equalToSuperview().offset(-50) }

inset과 offset 덕분에 잘 이해하고 갑니다!

L-j-h-c · 2022-01-08T09:51:15Z

Practice-YSB/FloatingButton/FloatingButton/ViewController.swift

+    func setButtonColor() {
+        /// buttonState == 2 -> 플로팅 버튼 안펼쳐진 상태
+        if actionButton.buttonState.rawValue == 2 {
+            actionButton.buttonColor = .red
+        } else {
+            actionButton.buttonColor = .purple
+        }
+    }


매우깔끔...하네요 buttonstate라는 프로퍼티 너무 잘 찾으신... 유용하다 유용해!

L-j-h-c · 2022-01-08T09:52:38Z

Practice-YSB/FloatingButton/FloatingButton/ViewController.swift

+        subTitleLabel.textColor = .gray
+
+        /// gesture 지정할 요소 외의 모든 다른 부분의 touch도 받아들이도록 false 설정
+        tap.cancelsTouchesInView = false


true인 경우에 어떤 문제가 생길지 모르겠어요.... 🥔🥔 😢

@L-j-h-c true인 경우에는 view 이외에 다른 touch는 인식하지 못해여
그래서 플로팅 버튼 터치가 안먹습니다..!

우아 저도 알아가요!!

가릣... 귀한 정보 감사합니다!

hyun99999

잘보고 가요! 저도 클론 받아서 몇개 알아보고 싶네요! 수고하셨습니당!

hyun99999 · 2022-01-09T16:47:06Z

Practice-YSB/FloatingButton/FloatingButton/BaseViewController.swift

+class BaseViewController: UIViewController {
+
+    // MARK: - View Life Cycles
+    override func viewDidLoad() {
+        super.viewDidLoad()
+
+        setLayout()
+        setUI()
+    }
+
+    // MARK: - Override Method
+    func setLayout() {
+        // Override Layout
+    }
+
+    func setUI() {
+        view.backgroundColor = .black
+    }
+}


오호라... BaseViewController 를 상속시켜서 사용하는군여...!!! set 메서드에 대해서 통일성을 부여할 수 있겠어요..!

hyun99999 · 2022-01-09T16:53:28Z

Practice-YSB/FloatingButton/FloatingButton/ViewController.swift

+        subTitleLabel.textColor = .gray
+
+        /// gesture 지정할 요소 외의 모든 다른 부분의 touch도 받아들이도록 false 설정
+        tap.cancelsTouchesInView = false


우아 저도 알아가요!!

hyun99999 · 2022-01-09T17:00:42Z

Practice-YSB/FloatingButton/FloatingButton/ViewController.swift

+    override func setLayout() {
+        /// 프로퍼티를 View에 넣어줌 (storyboard에서 viewcontroller에 올리는 과정)
+        view.addSubview(titleLabel)
+        view.addSubview(actionButton)
+        view.addSubview(subTitleLabel)
+
+        /// textLabel의 레이아웃 설정
+        titleLabel.snp.makeConstraints { make in
+            /// superView를 기준으로 center에 배치
+            make.center.equalToSuperview()
+        }
+
+        subTitleLabel.snp.makeConstraints { make in
+            /// subTitleLabel의 top을 titleLabel의 bottom으로부터 20만큼 띄우겠다
+            make.top.equalTo(titleLabel.snp.bottom).offset(20)
+            make.centerX.equalTo(titleLabel.snp.centerX)
+        }
+
+        actionButton.snp.makeConstraints { make in
+            /// actionButton의 trailing과 bottom을 superView의 trailing과 bottom으로부터 각각 30씩 안쪽으로 constraint를 주겠다
+            /// 두개를 아래처럼 따로 써도 되고, 같은 값이라면 합칠 수도 O
+
+//            make.trailing.equalToSuperview().inset(30)
+//            make.bottom.equalToSuperview().inset(30)
+
+            make.trailing.bottom.equalToSuperview().inset(30)
+        }


수빈이가 개념적으로 잘 설명해줬네요!!
쉽게 이해하자면 superview 의 안쪽으로 레이아웃을 잡고 싶다면! offset 사용하고
leading 기준에서는 inset 과 offset 이 동일하지만 trailing 과 bottom 기준에서는 inset 은 안쪽으로 offset 은 바깥쪽으로 적용된다고 보면 될거 같네용!

hyun99999 · 2022-01-09T17:04:23Z

Practice-YSB/FloatingButton/FloatingButton/ViewController.swift

+    @objc
+    func setButtonColor() {
+        /// buttonState == 2 -> 플로팅 버튼 안펼쳐진 상태
+        if actionButton.buttonState.rawValue == 2 {
+            actionButton.buttonColor = .red
+        } else {
+            actionButton.buttonColor = .purple
+        }
+    }


와 진짜 깔끔했다... 최고! 이대로 써도 되겠네요!

yangsubinn added 6 commits January 7, 2022 13:30

[Chore] TeamSparker#11 - FloatingButton 프로젝트 세팅

b8f3aaf

[Add] TeamSparker#11 - BaseViewController 추가

eeae335

[Feat] TeamSparker#11 - BaseViewController 적용

47ce1b4

[Feat] TeamSparker#11 - JJFloatingActionButton 구현

5b9dffc

[Feat] TeamSparker#11 - actionButton 클릭에 따라 버튼 컬러 변경

2f7231e

[Feat] TeamSparker#11 - 플로팅 버튼 탭했을 때 버튼 색상 변경

30ca351

yangsubinn requested review from hyun99999 and L-j-h-c January 7, 2022 17:34

yangsubinn self-assigned this Jan 7, 2022

L-j-h-c reviewed Jan 8, 2022

View reviewed changes

yangsubinn merged commit 1e280fa into TeamSparker:develop Jan 8, 2022

hyun99999 reviewed Jan 9, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] #11 - 플로팅 버튼 라이브러리 사용 #18

[Feat] #11 - 플로팅 버튼 라이브러리 사용 #18

yangsubinn commented Jan 7, 2022

L-j-h-c left a comment

L-j-h-c Jan 8, 2022

L-j-h-c Jan 8, 2022

L-j-h-c Jan 8, 2022

yangsubinn Jan 8, 2022

hyun99999 Jan 9, 2022

L-j-h-c Jan 9, 2022

L-j-h-c Jan 8, 2022

L-j-h-c Jan 8, 2022

yangsubinn Jan 8, 2022

hyun99999 Jan 9, 2022

L-j-h-c Jan 9, 2022

hyun99999 left a comment

hyun99999 Jan 9, 2022

hyun99999 Jan 9, 2022

hyun99999 Jan 9, 2022

hyun99999 Jan 9, 2022

[Feat] #11 - 플로팅 버튼 라이브러리 사용 #18

[Feat] #11 - 플로팅 버튼 라이브러리 사용 #18

Conversation

yangsubinn commented Jan 7, 2022

🌴 PR 요약

📌 참고 사항

📸 스크린샷

📮 관련 이슈

L-j-h-c left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hyun99999 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment