[TIL] 2022.07.05 (SeSAC iOS)

오늘 공부한 내용들을 내가 잊지 않기 위해 기록합니다.

틀린 내용이 있을 수 있는 점 참고 부탁드립니다 :)

 

■ 오늘의 과제

과제영상(배경 및 테두리색상 랜덤 변경)

과제 목표 : 뷰 객체를 @IBOutlet으로 선언한 뒤, UI를 코드를 통해 속성 조절해보기

• Netflix project에서 [재생] 버튼 클릭시 4개의 이미지뷰 이미지(포스터) 랜덤 변경
  → 여기서 고민이 된 부분이 생겼다.
      내가 구현한 화면에는 영화 포스터 들어갈 곳이 총 4개(배경 이미지 1개, 버튼 이미지 3개)인데..
      각각 랜덤으로 표기하게 하면 분명 중복되는 이미지가 아무래도 있을 것 같았다..흠 :(
      그래서 숫자 20개중에 4개를 랜덤으로 뽑아서 어디 저장해두고, 거기서 인덱스로 하나하나 뽑아서 이미지에 뿌려주기로 시도 예정!
      구글링을 했더니 비슷한 개념? 로직?같은게 로또관련 법호뽑기가 유사해보여서 참고해서 아래와 같이 구성했다.
  
  →  [재생]버튼 누를 때마다 이미지가 너무 딱딱하게 휙휙 바뀌는 것 같아서 애니메이션 관련 예시를 구글링해서 적용해봤다.
      근데 이미지뷰는 UIView.transitions(~~~)잘 적용되었으나 이상하게도 UIButton.transitions(~~~) 적용이 안되는거다..
      왜그럴까 구글링했더니 UIButton이 UIView의 subclass라서 동일하게 UIView.transitions(~~~)이렇게 사용할 수 있다고 한다.
     그러고보니 오늘 수업내용 중 UIKit 를 생각해봤더니 UIKit > UIView > UIButton 이런 관계였던 것이 기억났다.
  
    ※ Cocoa Touch Framework, UIKit에 대해서는 별도 포스팅으로 정리할 예정
  

// 로또같이 번호 4개 랜덤으로 뽑기
while numbers.count < 4 {
    let number = Int.random(in: 1...20)
     if !numbers.contains(number) {
        numbers.append(number)
     }
     print(numbers.sorted())
}
        
// 이미지뷰 이미지 변경
UIView.transition(with: self.backgroundImageView,
                  duration: 0.8,
                  options: .transitionCrossDissolve,
                  animations: {
     self.backgroundImageView.image = UIImage(named: "movie\(numbers[0])")
}, completion: nil )
        
// 버튼 이미지 변경
UIView.transition(with: self.button1,
                  duration: 0.8,
                  options: .transitionCrossDissolve,
                  animations: {
      self.button1.setImage(UIImage(named: "movie\(numbers[1])"), for: .normal)
}, completion: nil )

 

• Netflix project에서 3가지 이미지뷰의 테두리 색상과 모서리 둥글기 조절
  → 기존에 설정했던 identity inspector에서 각 버튼 3개의 cornerRadius값을 변경 (60 → 30)
  
  → 재생 버튼을 누를 때마다 버튼뷰의 테두리 색상도 랜덤으로 바뀌면 재밌을 것 같아 구글링을 해봤고 아래의 방법을 찾았다.
     : r, g, b값에 대한 랜덤 수치를 미리 생성해서 변수에 담아둔 다음
     : borderColor 색상설정시 각각 해당 r, g, b변수만 간단하게 넣어준 점이 편리해보였다! 오호
  
    ※ 특정한 경우로 색상설정시 꼭 마지막에 .cgColor를 추가해야 에러가 안나고 잘 적용되었는데,
       이거에 대해서는 별도로 공부 및 정리해서 포스팅 할 예정!

    func changeBorderColorRandom() {
        let r : CGFloat = CGFloat.random(in: 0.2...1)
        let g : CGFloat = CGFloat.random(in: 0.2...1)
        let b : CGFloat = CGFloat.random(in: 0.2...1)
        
        UIButton.animate(withDuration: 0.8) {
            self.button1.layer.borderColor = UIColor(red: r, green: g, blue: b, alpha: 1).cgColor
            self.button2.layer.borderColor = UIColor(red: r, green: g, blue: b, alpha: 1).cgColor
            self.button3.layer.borderColor = UIColor(red: r, green: g, blue: b, alpha: 1).cgColor
        }
    }

---

 

■ App icon 설정

프로젝의 Asset파일 중, 내가 따로 추가한 이미지 외 App Icons 라는 이미지 넣는 곳은 기본값으로 항상 있었다.

알고보니 여기에는 다양한 크기의 앱 아이콘 이미지를 넣어주는 곳이었다.

왜 이렇게 다양한 크기를 요구하나 했더니 앱스토에서 보이는 아이콘, 스크린 얼럿창에서 보이는 아이콘, iphone용, ipad용 등 다양한 케이스에서 아이콘 이미지가 보여질 일들이 많아서였다.

• App Icon Generator : https://appicon.co

오늘 알게 된 위 사이트에서는 icon image(단, 1024 X. 024) 1개를 input하면 output으로 여러 사이즈의 이미지들을 자동으로 변환해서 제공해주는 천사같은 기능을 제공해주고 있었다. 굳굳

여기서 다운받은 이미지 폴더 자체를 xcode Asset폴더에 그래도 넘겨주면 심지어 자동으로 크기별 이미지에 매칭되어 들어간다 크으

 

별도 추가한 app icon 폴더가 있고, 해당 폴더로 적용을 원할 경우 아래 경로에서 폴더명으로 source 지정도 가능하다고 한다.

• Project > Target > General > App Icons and Launch Images : App Icons Source

app icon source 지정

 

■ 선언 이후의 @IBOutlet의 변수명 변경하는 (편리한) 방법

이전에 한 번 이미 선언한 @IBOutlet의 변수명을 혼자 맘대로 고치고, 오류가 엄청나서 고생고생하다가 몇시간후에 고친 기억이 난다.

그 때 이걸 알았더라면..ㅎㅎ^^

무튼 연결을 끊고, 재선언하는 등 번거로운 절차 없이도 변수명을 변경할 수 있는 엄청 편리한 방법을 알았다!

• (선언한 변수명 위에서 마우스 오른쪽 클릭) > Refactor > Rename...
  : 여기서 넘어간 페이지에서 바꿀 변수명으로 타이핑 후 Rename 클릭하면 끝~

※ 추가팁! 연결한 객체나 액션의 연결이 끊겼을 경우,
  (gutter에서 바로 끌어서 연결하는 것보다)

  → 스토리 보드의 해당 객체에서 우측클릭하거나 connection inspector에서 끌어다 연결하는 것이 보다 정확함

마우스 오른쪽 클릭 > Refactor > Rename

변수명 변경

 

 

■ 코드 접어두기/펼쳐두기

xCode에서코딩할 때 코드를 접어두거나 다시 펼칠 수 있는 기능을 새롭게 알게 되었다!

코드가 늘어날 수록 앞으로 유용하게 잘 쓸 것 같다.

• 코드 접어두기 : option + command + 왼쪽방향키
• 접은 코드 펼치기 : option + command + 오른쪽방향키

20~33라인에 적힌 코드들이 접혀있다

 

참고사이트

[1] https://programmingwithswift.com/animate-image-change-with-swift/

[2] https://stackoverflow.com/questions/36237668/transition-uibutton-image-from-one-image-to-another

[3] https://bo1126.tistory.com/3

[4] https://ppomelo.tistory.com/11

[5] https://jwonylee.tistory.com/entry/button-image