IOS) Pull to Refresh에 대해 알아보자 2부

hururuek-chapchap.tistory.com/15?category=909178

IOS) Pull to Refresh에 대해 알아보자 1부

 

안녕하세요! 후르륵짭짭 입니다!

저번에 Pull to Refresh에 대해 배웟는데요!

이번에는 Pull to Refresh를 꾸미는 방법에 대해서 알아볼까 합니다!

 

1) 뱅뱅이를 바꿔 보자

원래 뱅뱅이의 색은 회색입니다.

하지만 완성 본에서는 빨간색이져

방법은 간단합니다. tint 색을 바꿔 주면 됩니다.

 refreshControll.tintColor = UIColor.red

뱅뱅이는 coreGraphic이 아니기 때문에 단순히 UIColor로 바꿔 주면 됩니다.

 

2) 배경화면을 바꿔보자

새로고침을 하기 위해서는 화면을 당겨야합니다

당기면 새로운 화면이 나오는데, 그 배경화면을 바꾸기 위해서는 

그냥 단순히 배경화면을 바꿔주는 코드를 적어주면 됩니다.

 refreshControll.backgroundColor = UIColor.lightGray

쉽죠?

 

3) 새로고침에 글을 넣어보자

완성 본을 본다면 새로고침 할 때 새로운 글이 나오는 것을 확인 할 수 있습니다

글을 생성해주기 위해서는 attributedTitle을 사용해야합니다.

이 attributedTitle은 NS로 object-c 형 타입인데요.

refreshControll.attributedTitle = NSAttributedString(string: "아무글")

이렇게 해주시면 됩니다.

 

4) 글을 꾸며보자

NSAttributedString은 object-c 타입이기 때문에

그에 맞게 사용해줘야합니다.

NSAttributedString.Key. 내부에 글자색 변경, 글자 크기 변화 등 다양한 기능등이 있습니다.

그래서 찾아서 사용하면 되는데, 딕셔너리 형태로 넣어줘야합니다,

refreshControll.attributedTitle = NSAttributedString(string: "데이터를 추가하는 중,,,", 
	attributes: [ NSAttributedString.Key.foregroundColor: UIColor.yellow , NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 17)])

위에 보이는 것 같이 attributes 속성이 [key:value] 형태로 딕셔너리 입니다.

따라서 key 부분에 설정하고 싶은 것 valeu에 그 설정의 값을 넣어주면 됩니다.

왜 딕셔너리냐면, dictionary[key]  = value 형태 이기 때문입니다.

 

5) 끝까지 당겼을 때 마무리 멘트 넣어주기!!! 

 모든 tableView나 CollectionView은 모두 ScrollView로 되어 있습니다.

이렇게 ScrollView를 Delegate로 받고 있죠!

Delegate로 받는 다는 것은 저번에 말한 것 처럼 규제를 따르고 있다고 말했습니다.

결국 ScrollView의 함수를 사용 할 수 있습니다.

scrollViewDidScroll() 함수는 스크롤 해서 움직일 때, x 좌표와 y 좌표를 알려줍니다.

y = 0 부터 시작하고 아래로 내릴 수록 음수값으로 떨어집니다.

반대로 x는 증가합니다.

따라서 일정 값으로 떨어지면 새로고침의 글을 바꿔 주면 됩니다.

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        
        if offsetY < -150 {
            refreshControll.attributedTitle = NSAttributedString(string: "데이터를 추가 완료!", attributes: [ NSAttributedString.Key.foregroundColor: UIColor.yellow , NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 17)])
        }
        
        refreshControll.backgroundColor = UIColor.lightGray
    }

여기서!!!

scrollViewDidScroll에 배경화면 변경 코드를 넣어준 이유는, 우리가 끌어당기는 위치가 디폴트 값 보다 아래이기 때문에

매번 호출 할 때 마다 배경화면을 변경해줘야합니다!!

 

** 전체 코드 **

class TestViewController: UIViewController {

    @IBOutlet weak var MenuView: UIVIewDesignable!
    @IBOutlet weak var MenuBtnView: UIVIewDesignable!
    @IBOutlet weak var MenuBtn: UIButton!
    @IBOutlet weak var ClickBtn: UIButton!
    
    @IBOutlet weak var tableView: UITableView!
    let refreshControll : UIRefreshControl = UIRefreshControl()
    
    var infoList = ["Hururuek-ChapChap", "IOS Devloper", "University Student"]
    var interestList : [String] = []
    var sectionList = ["Info", "Interest"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        ClickBtn.alpha = 0
        
        setTableDelegate()
        // Do any additional setup after loading the view.
    }

}

extension TestViewController : UITableViewDataSource , UITableViewDelegate{
    
    
    //https://stackoverflow.com/questions/28651360/how-to-change-the-font-and-color-of-uirefreshcontrol
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        
        //섹션에 따라서 보여주는 갯수를 달리한다.
        if section == 0{
            return infoList.count
        }
        
        return interestList.count
        
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "TestViewTableViewCell") as! TestViewTableViewCell
        
        //섹션에 따라서 어떻게 할 것인가
        if indexPath.section == 0 {
        
            cell.updateUI(label: infoList[indexPath.row])
            
        }
        else {
            
            cell.updateUI(label: interestList[indexPath.row])
        }
        
        return cell
    }
    
    //MARK : 섹션의 설정
    //섹션의 객수를 몇개로 할 것인가?
    func numberOfSections(in tableView: UITableView) -> Int {
        return sectionList.count
    }
    
    //각 섹션의 이름을 어떻게 할 것인가를 알려준다.
    func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return sectionList[section]
    }
    
    //MARK : viewDidLoad()에서 부를 기본설정
    func setTableDelegate(){
        self.tableView.dataSource = self
        self.tableView.delegate = self
        
        //IOS10 이후에는 이렇게 refreshControll을 넣어준다.
        tableView.refreshControl = refreshControll
        settingRefreshControl()
    }
    
    //refreshControll에 기능을 추가해준다.
    func settingRefreshControl(){
        
        //당겨서 새로고침을 할 때, 해줄 함수적 기능을 넣어준다.
        refreshControll.addTarget(self, action: #selector(self.refreshFunction), for: .valueChanged)
        //회전에 색을 추가한다.
        refreshControll.tintColor = UIColor.red
        
        //배경색을 변경한다.
//        refreshControll.backgroundColor = UIColor.lightGray
        
        //밑에 설명을 넣어준다. NSAttriibutedString에 NSAttributedStriiing.Key를 통해서 변경한다.
        refreshControll.attributedTitle = NSAttributedString(string: "데이터를 추가하는 중,,,", attributes: [ NSAttributedString.Key.foregroundColor: UIColor.yellow , NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 17)])
        
        
    }
    
    //MARK : refresh할 때 기능을 추가
    @objc func refreshFunction(){
        
            interestList.append("Machine Learning")
            interestList.append("Apple Device")
            interestList.append("NBA")
  

        refreshControll.endRefreshing()
        
        tableView.reloadData()
    }
    
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        
        if offsetY < -150 {
            refreshControll.attributedTitle = NSAttributedString(string: "데이터를 추가 완료!", attributes: [ NSAttributedString.Key.foregroundColor: UIColor.yellow , NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 17)])
        }
        
        refreshControll.backgroundColor = UIColor.lightGray
    }
    
    
}

지금까지 Pull to refresh를 배워봤습니다!!

모두모두 즐코하세요!!!