[끄적끄적1.1.2v] 텍스트가 뷰의 정중앙에 올 때 가이드선 띄우기

1/16

🙋질문
혹시 이렇게 Label을 움직일 때 가운데에 가이드라인이 잡히는 오픈소스 이름 아시는 분 있나요 ? 아니면 키워드라도 … #

🙋‍♂️답변

전찬주님 :
- 키노트에서는 정렬 안내선이라고 하는데, ‘정렬’ 이나 ‘안내선’ 으로 검색해봐요! 저도 찾아볼게요 ㅋㅋㅋ
- 붙는 느낌이 날지는 모르겠지만 아까 올리신 동영상을 보고 생각한 방법은요. 일단 끄적끄적 메인 화면에 미리 가이드 선을 그려둔다. 그리고 숨김 처리를 해둔다. 그리고 텍스트를 올린 뷰를 가이드 선보다 위에 보이도록 계층 구조를 만든다. 텍스트를 드래그하는 이벤트에서 현재 텍스트를 올린 뷰의 센터가 메인 화면의 가로, 세로 중간값이면 해당 가이드 선의 숨김 상태를 false로 하고 아니면 다시 true로 바꾼다.
유대열님 :
- 아마 영어로 검색하셔야되니까, Alignment guides 라고 키워드를 잡으심이 좋을 것 같습니다.
- StackOverflow에 답변 올렸어요 😀 #
강동혁님 :
- 저도 제대로 된건 못찾아서 만들었어요. 일단 UIPangesture로 라벨을 움직이는 방법을 찾으시고 그 이후 Pangesture 이벤트에서 라벨의 위치를 계속 체크해서 라벨 위치가 정가운데라고 판단될 때 라벨의 부모뷰에 라인을 그려주면 됩니다.
- 제스쳐에서 넘어오는 이벤트에서 gesture의 locationInView 메소드로 라벨의 위치를 잡을텐데요. 오차범위를 정해서 해당 포인트가 정중앙에서 오차 범위로 들어 오면 라벨의 frame 이나 center 값을 정중앙으로 셋팅하시면 됩니다.

개발시작 : 분더리스트 테스크 생성

개발 : [UI_ 기본배경 화면_ 텍스트] Label이 중앙에 오면 중앙정렬 가이드라인 띄우기 #루시

1) Label을 손가락으로 드래그시 x,y축 중앙에 올 때를 찾아보자

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        if let touch = touches.first {
            var  touchLocation = touch.location(in: self.superview)
            var prevTouchLocation = touch.previousLocation(in: self.superview)

            if !self.transform.isIdentity {
                touchLocation = touchLocation.applying(self.transform)
                prevTouchLocation = touchLocation.applying(self.transform)
            }

            // 레이블이 중앙으로 들어올 때
            if touchLocation.x == self.superview!.bounds.width/2
            { print(“x축 중앙입니다.") }

            if touchLocation.y == self.superview!.bounds.height/2
            { print(“y축 중앙입니다.") }            
        }

2) 레이블을 중앙으로 잡기가 너무 힘들다😱 ±10일때 중앙으로 오게끔 만들어보자

            // 레이블이 중앙으로 들어올 때 중앙으로 이동
            if touchLocation.x >= self.superview!.bounds.width/2 - 10 &&
               touchLocation.x <= self.superview!.bounds.width/2 + 10
            { print(“x축 중앙입니다.") }

            if touchLocation.y >= self.superview!.bounds.height/2 - 10 &&
                touchLocation.y <= self.superview!.bounds.height/2 + 10
            { print(“y축 중앙입니다.") }

3) 레이블이 ±10으로 들어올 때 중앙으로 촥촥 감기게 인터렉션을 만들자.
🤔 : 음…그럼 생각을 해보면 중앙으로 들어올 때 노티(Notification)를 보내서 Label의 x,y의 위치를 재설정해볼까?

// 레이블이 중앙으로 들어올 때 알려줄 노티피케이션, 오타나면 안되니까 변수로 생성해야지
let SQQuoteLabelonCenterXNotification = "SQQuoteLabelonCenterXNotification"
let SQQuoteLabelonCenterYNotification = “SQQuoteLabelonCenterYNotification"

            // 레이블이 중앙으로 들어올 때
            if touchLocation.x >= self.superview!.bounds.width/2 - 10 &&
               touchLocation.x <= self.superview!.bounds.width/2 + 10
            {
                NotificationCenter.default.post(name: Notification.Name(rawValue: SQQuoteLabelonCenterXNotification), object: nil)
            } 

            if touchLocation.y >= self.superview!.bounds.height/2 - 10 &&
                touchLocation.y <= self.superview!.bounds.height/2 + 10
            {
                NotificationCenter.default.post(name: Notification.Name(rawValue: SQQuoteLabelonCenterYNotification), object: nil)
            }

//class SQEditView: UIView
        // MARK:- 레이블이 중앙에 왔을 때 촥달라붙게 하는 인터렉션
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(handleSQQuoteLabelonCenterX(notification:)),
            name: NSNotification.Name(rawValue: SQQuoteLabelonCenterXNotification),
            object: nil
        )
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(handleSQQuoteLabelonCenterY(notification:)),
            name: NSNotification.Name(rawValue: SQQuoteLabelonCenterXNotification),
            object: nil
        )
    func handleSQQuoteLabelonCenterX(notification: Notification) {
        self.quoteLabel.frame.origin.x = self.superview!.bounds.width/2 - self.quoteLabel.frame.size.width/2
    }

    func handleSQQuoteLabelonCenterY(notification: Notification) {
        self.quoteLabel.frame.origin.y = self.superview!.bounds.width/2 - self.quoteLabel.frame.size.height/2
    }

⛑: 뭐야…어쩐지 잘된다 싶었더니…왜 갑자기 이렇게 되는거지? 머리아프돠…고민하다가 찬주님이 카톡보냈길래 나도 물어본다!

(생략)
* 문제의 비디오

⛑: 아오 위의 코드를 복붙하다가 값을 안 고쳤어 … 이런 허무한 답이 나올때마다 허탈함

//class SQEditView: UIView
        // MARK:- 레이블이 중앙에 왔을 때 촥달라붙게 하는 인터렉션
        NotificationCenter.default.addObserver(
            self,
            selector: #selector(handleSQQuoteLabelonCenterY(notification:)),
            name: NSNotification.Name(rawValue: SQQuoteLabelonCenterYNotification), //문제의 코드
            object: nil
        )

1/18

4) 애나에게 XD로 가이드 잡아달라고 요청함 (5분만에 작업해줌)
어도비XD파일을 열어서 가이드를 확인하고, UIView를 사용해서 그려야겠다고 결정

5) 오토레이아웃을 사용해서 UIView를 가이드선처럼 보이게 만듦
⛑ : 위치 잡는다고 잠시 삽질함, equal width / height을 엉뚱한 뷰로 해서 자꾸 에러뜸. 결국 적절한 Background Image View에다가 맞추니 빨간 아이콘들 사라짐

6) 중앙에 들어올 때마다, 숨겨졌던 guideLineY와 guideLineX가 보이게 만듦

    func handleSQQuoteLabelonCenterX(notification: Notification) {
        self.quoteLabel.frame.origin.x = self.superview!.bounds.width/2 - self.quoteLabel.frame.size.width/2
        self.guideLineY.isHidden = false
    }

    func handleSQQuoteLabelonCenterY(notification: Notification) {
        self.quoteLabel.frame.origin.y = self.superview!.bounds.width/2 - self.quoteLabel.frame.size.height/2
        self.guideLineX.isHidden = false
    }

⛑: 오 이제 끝!!…...일 줄 알았는데 가이드라인 선이 사라지지 않음. 그래 이것까지 해야하는 거였구나. 왜 또 당연하게 생각했지. 일단 머리 아프니까 내일하자

1/19

7) 드래그가 끝날 때를 체크할 수 있는 변수를 찾음! 여기있었구나 반갑다 😂


override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?)

8) 이제 가이드라인을 숨겨줄 노티피케이션 생성과 동시에 중앙에서 벗어날 때 노티를 주게끔 설정

let HiddenGuideLineXNotification = "HiddenGuideLineXNotification"
let HiddenGuideLineYNotification = “HiddenGuideLineYNotification"

            // 레이블이 중앙으로 들어올 때
            if touchLocation.x >= self.superview!.bounds.width/2 - 10 &&
               touchLocation.x <= self.superview!.bounds.width/2 + 10
            {
                NotificationCenter.default.post(name: Notification.Name(rawValue: SQQuoteLabelonCenterXNotification), object: nil)
            } else
            {
                NotificationCenter.default.post(name: Notification.Name(rawValue: HiddenGuideLineXNotification), object: nil)
            }

            if touchLocation.y >= self.superview!.bounds.height/2 - 10 &&
                touchLocation.y <= self.superview!.bounds.height/2 + 10
            {
                NotificationCenter.default.post(name: Notification.Name(rawValue: SQQuoteLabelonCenterYNotification), object: nil)
            } else
            {
                NotificationCenter.default.post(name: Notification.Name(rawValue: HiddenGuideLineYNotification), object: nil)
            }

9) 자 이제 마지막! 이제 노티를 받아와서 사용자가 손가락을 뗄 때, 숨김처리를 해주잣!

//class SQEditView: UIView
        NotificationCenter.default.addObserver(
            self, selector: #selector(hiddenGuideLineX(notification:)),
            name: NSNotification.Name(rawValue: HiddenGuideLineXNotification),
            object: nil
        )
        NotificationCenter.default.addObserver(
            self, selector: #selector(hiddenGuideLineY(notification:)),
            name: NSNotification.Name(rawValue: HiddenGuideLineYNotification),
            object: nil
        )
    func hiddenGuideLineX(notification: Notification) {
        self.guideLineY.isHidden = true
    }

    func hiddenGuideLineY(notification: Notification) {
        self.guideLineX.isHidden = true
    }

🎉해결완료🎉

잘 작동하는 영상

느낀점 :

* 조금만 어려운 기능이 나오면 자꾸 오픈소스에 의존하려하는구나. 직접 만들 생각을 왜 자꾸 안하는지 😇 앞으로는 직접 만들 수 있을까?를 더 먼저 생각하고 실행을 해야겠다.
* 페이스북 그리고 직접 물어봐서 도움을 받으니 정말 좋구나 😭 혼자 개발했을 때 일주일 걸릴 거를 하루만에 답을 찾을 수 있구나. 정말 좋댜 너무 좋다...🙏

-
도움주신 분들 정말 감사합니다 🙏
앱 끄적끄적

찌랭이개발자의 삽질기록장⛑

[끄적끄적1.1.2v] 텍스트가 뷰의 정중앙에 올 때 가이드선 띄우기

1/16

1/18

1/19

🎉해결완료🎉