2 분 소요

👊🏻 [2주차] 회의

이오가 조금밖에 안남은 GUI를 완성하기로 했고

서버팀은 플랫폼을 JPA로 하기로 해서 이를 습득하는데 시간이 걸린다고 했다. 아마 이번주에 DB 테이블과 API 작업을 끝내지 못할 수도 있는데, 다음주까지만 끝내면 된다. API를 연결하면 앱 제작은 거의 끝난거나 마찬가지니….(1월 12일 저녁 8시 서버팀 회의에 서버팀 리드 독구가 급하게 호출해서 서버팀 회의에서 들은 결론이었다)

그리고 우리 작고 소중한 iOS 팀은 나머지 화면을 제작하기로 했다.

우리의 작업 범위는

2-1

파란색 부분!

잭잭이 저번주에 제작했던 /목표 테이블 뷰 화면(아직 미완)과 / 상세 기록 화면 / 돼지 사장님 화면과 레포트 화면/ 목표 테이블 뷰 화면에서 들어가는 상세 셀, 목표 추가 화면/ 이렇게 구성이 된다.

그 중 내가 맡은 건 주황색 박스인

상세 기록 화면

상세 기록 화면은 원래 화면이 1개 였지만, 제작하다보니 기록(record)를 등록했을 때 우리 앱의 핵심인 애니메이션을 보여줘야 해서 위의 이미지에서 보이는 알림창(Alert)을 하나의 화면으로 구성했다.

2-2

API 연결 할 때에도 힘들겠지만, 이번 주차도 레전드였다.

처음에는 화면 구성이 저게 아니라, 각 셀마다 드롭다운박스가 있던 거여서

그걸 겨우겨우 구현했는데

화면이 바뀌었다. 그래서….(크흡)

전부 삭제한 다음 처음부터 눈물을 머금고 다시 구현했다.

1우

1월 17일 새벽 12시 1시에서 회의를 진행했다.

피치가 기록화면과 기록상세 화면에서 질문할 것도 있다고 하고, 내 스토리보드에서 제대로 전환이 안됐기 때문이다.

문제는 pull이 제대로 안먹었거였다.

결국 만들어낸 실제 화면은 이렇게 구성했다. 2-3

저 드롭다운박스 만드는 게 제일 귀찮…힘들었는데

pod 파일에 ‘Dropdown’ 라이브러리를 추가한 다음


override func viewDidLoad() {
        super.viewDidLoad()
        self.initUI()
        self.setDropdown()
        
    }

let dropdown = DropDown()

        // DropDown 아이템 리스트
    var itemList = ["용돈", "적금", "월급", "의복", "식재", "배달음식", "교통비", "고정지출"]
        
        
        func initUI() {
            // DropDown View의 배경
            dropView.backgroundColor = UIColor.init(named: "#F1F1F1")
            dropView.layer.cornerRadius = 8
            
            DropDown.appearance().textColor = UIColor.black // 아이템 텍스트 색상
            DropDown.appearance().selectedTextColor = UIColor.red // 선택된 아이템 텍스트 색상
            DropDown.appearance().backgroundColor = UIColor.white // 아이템 팝업 배경 색상
            DropDown.appearance().selectionBackgroundColor = UIColor.lightGray // 선택한 아이템 배경 색상
            DropDown.appearance().setupCornerRadius(8)
            dropdown.dismissMode = .automatic // 팝업을 닫을 모드 설정
                
            tfInput.text = "선택해주세요." // 힌트 텍스트
                
            ivIcon.tintColor = UIColor.gray
        }

        func setDropdown() {
            // dataSource로 ItemList를 연결
           
                dropdown.dataSource = itemList
            // anchorView를 통해 UI와 연결
            dropdown.anchorView = self.dropView
            
            // View를 갖리지 않고 View아래에 Item 팝업이 붙도록 설정
            dropdown.bottomOffset = CGPoint(x: 0, y: dropView.bounds.height)
            
            // Item 선택 시 처리
            dropdown.selectionAction = { [weak self] (index, item) in
                //선택한 Item을 TextField에 넣어준다.
                self!.tfInput.text = item
                self!.categorytype = item
                self!.ivIcon.image = UIImage.init(named: "DropDownDown")
            }
            
            // 취소 시 처리
            dropdown.cancelAction = { [weak self] in
                //빈 화면 터치 시 DropDown이 사라지고 아이콘을 원래대로 변경
                self!.ivIcon.image = UIImage.init(named: "DropDownDown")
            }
        }
        
        @IBAction func dropdownClicked(_ sender: UIButton) {
            dropdown.show() // 아이템 팝업을 보여준다.
              // 아이콘 이미지를 변경하여 DropDown이 펼쳐진 것을 표현
              self.ivIcon.image = UIImage.init(named: "DropDownDown")
        }

이렇게 해주면 작동한다.

댓글남기기

참고

[GDSC] GDSC

최대 1 분 소요

[GDSC] GDSC