[Swift] 책 검색 App (8) - 최근 본 책 플로팅 버튼 (UIImageView 원형 만들기)

이미지뷰로 만들어서 클릭 하면 상세페이지로 가도록 구현해볼게요

 

 

UI 설정

UIImageView로 만들고 오토레이아웃 잡아줍니다

recentlyBookImageView.snp.makeConstraints {
    $0.trailing.equalToSuperview().inset(25)
    $0.bottom.equalToSuperview().inset(110)
    $0.height.width.equalTo(50)
}

 

동그랗게 만들고 싶어서 설정하는데

recentlyBookImageView.layer.cornerRadius = recentlyBookImageView.frame.size.width / 2

도무지 이 코드가 안먹음 왜지 왜

원인: Radius는 레이아웃이 다 완료된 뒤에 설정해야 하는데 내가 속성을 메서드에 설정해서 메서드를 호출하는 식으로 하고 있어서 안되는거였다

override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        // recentlyBookImageView의 크기를 확인하고 원형으로 만듭니다.
        recentlyBookImageView.layer.cornerRadius = recentlyBookImageView.frame.size.width / 2
    }

이 메서드로 레이아웃을 다 설정한 뒤에 cornerRadius 값을 설정하거나 이미지의 크기가 고정되었다면 그냥 숫자로 넣으면 된다

 recentlyBookImageView.backgroundColor = .gray
recentlyBookImageView.contentMode = .scaleAspectFill
recentlyBookImageView.clipsToBounds = true
recentlyBookImageView.layer.cornerRadius = 25

그냥 숫자로 넣기로 함!

 

로직 구현

recentlyBookImageView.loadFromURL(selectBook.thumbnail)

테이블뷰 didSelctRowAt 에 이 코드 추가해줍니다

 

loadFromURL 메서드는 아래와 같이 구현했어요

extension UIImageView {
    func loadFromURL(_ urlString: String) {
        guard let url = URL(string: urlString) else { return }
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                    }
                }
            }
        }
    }
}

버튼이 잘 떠있네요

라이브러리 페이지에서도 띄우고 싶습니다

 

let libraryVC = LibraryViewController()
libraryVC.recentlyBookImageView.loadFromURL(selectBook.thumbnail)

처음에는 테이블뷰 didSelctRowAt 에 이렇게 구현했는데 안되더라구요

이유는 새로운 인스턴스 생성해서 속성값을 바꿔도 기존에 있는건 변함없기 때문입니다

 

그래서 아래와 같이 했는데요,,

if let tabBarController = self.tabBarController, //(1)
    let viewControllers = tabBarController.viewControllers, //(2)
    let navigationController = viewControllers[1] as? UINavigationController, //(3)
    let libraryVC = navigationController.viewControllers[0] as? LibraryViewController { //(4)
    libraryVC.recentlyBookImageView.loadFromURL(selectBook.thumbnail) //(5)
}

라이브러리페이지는 탭바에 속해 있어서 이런 코드가 나왔습니다,,,위에서부터 하나씩 뜯어보자면

1) 탭바컨트롤러를 바인딩합니다

2) 탭바컨트롤러에는 viewControllers 가 있는데요 요것도 바인딩 해줍니다

let if 어쩌구 = self.tabBarController.tabBarController.viewControllers

이렇게 작성해도 똑같습니다! 알아보기 쉽게 하나씩 분리해 바인딩 해본것이여요

 

 

3) viewControllers 는 배열로 되어 있어요 라이브러리뷰컨은 두번째 이므로 viewControllers[1] 요걸 네비게이션컨트롤러로 타입캐스팅 해줍니다. 왜냐면 제가 네비게이션뷰컨에다가 생성했기 떄문인데요,,

let ThirdViewController = UINavigationController(rootViewController: LibraryViewController())

사실 저는 네비게이션을 사용 안하기 때문에 

 

let ThirdViewController = LibraryViewController()

이렇게만 만들어 줬어도 됐던것,,, 그래도 이미 했으니 바인딩 해주구여

 

4) 그리고 네비게이션컨트롤러의 viewControllers 의 첫번째 그니깐

let ThirdViewController = UINavigationController(rootViewController: LibraryViewController())

요 코드의 첫번째 배열(= 라이브러리뷰컨)을 가져와서 LibraryViewController 타입으로 캐스팅 해줍니다

 

5) 그리고 이미지를 넣어주면 끝,,

libraryVC.recentlyBookImageView.loadFromURL(selectBook.thumbnail)

 

 

 

이제 최근 본책을 클릭하면 상세페이지로 넘어가는거 해볼게요,,,