eunjoo

[SwiftUI] Image View 사용해보기

오늘은 Image View 써보기!!

튜토리얼 페이지는 여기 !!

이미지뷰를 사용하는만큼 asset에 넣을 이미지가 필요한데 그 부분은 튜토리얼 페이지 샘플 프로젝트에서 가져왔다.

Create a Custom Image View

요 Section에서는 Image View를 사용하는데, 기존에 사용하던 코드쪽에서는 뭔가를 하지 않고 새로운 파일에서 mask, border, shadow 등을 적용해본다.

Assets에 이미지 추가하기

우선 ImageView에 넣을 이미지를 Assets에 추가한다. 튜토리얼 페이지에 있는 샘플 파일에 Resources라는 폴더가 있다. 폴더에 있는 turtlerock@2x.jpg 파일을 프로젝트의 Assets에 넣어준다. (드래그 앤 드랍하면 간단하게 추가가 가능하다.)

image

그러면 위 사진처럼 turtlerock 이미지가 잘 들어온다.

SwiftUI View 파일 추가하기

custom image view를 만들기 위해 새로운 파일을 하나 만들어준다.

  • File > New > File 으로 이동해 SwiftUI View를 선택한다.
  • 파일 이름은 CircleImage.swift 로 지정 (이미지뷰를 동그랗게 만들건가보다.)

image

생성하고 나면 요렇게 ContentView의 코드와 같은 코드가 나타난다. 그럼 이제 이 파일을 Image View를 사용하도록 변경해보자.

Image(_:) 추가하기

  • 새로 만든 CircleImageView.swift 파일의 body 내부에 있는 Text를 지우고 Image(“turtlerock”) 을 넣는다.

image

이미지만 추가해주고 다른 설정은 아무것도 건드리지 않았기 때문에 정중앙에 이미지가 배치되었다.

.clipShape()

  • Image에 .clipShape(Circle()) 속성을 넣어준다.
    • 위 속성은 뷰의 clipping shape를 변경해줄 수 있도록 한다. (Circle()을 넣어주었기 때문에 동그랗게 변한다.)

image

따란 😎

.overlay(content: () -> View)

  • clipShape 아래에 overlay 속성을 추가해 원 하나를 더 만들어준다.
    • overlay 뜻이 덮어씌우다니까 overlay 내부에 생성한 View를 기존의 Image 위에 덮어씌우는 걸까?

image

  • 예제 코드에 있는대로 Circle().stroke(.white, lineWidth: 4) 를 추가해준다. (캡쳐할 땐 안보여서 purple로 설정)
    • stroke라는 메서드 자체가 원하는 색과 두께로 선을 만들어주는 메서드인 것 같다. Circle()에서 호출했으니 모양은 원형!
    • default lineWidth는 1이다.

.shadow

  • 마지막으로 .shadow를 추가해서 Image에 그늘이 진 것처럼 만들어준다.

image

굉장히 맥북 잠금화면스러운 이미지뷰가 완성됐다.

번외

  • .cilpShape에 다른 모양 넣어보기 (RoundedRactangle) image

생각보다 깔끔하고 귀여운 맛이 있다.

마무리

ImageView를 코드로 커스텀 해보는 시간… 사실 더 많은 기능이 있겠지만 여기는 튜토리얼이라 딱 기본만 보여준 것 같다. 옆에 preview가 있다보니 코드를 입력하면 바로바로 화면이 갱신되는 걸 보는 재미가 있다.

시간날 때 다른 속성들도 찾아보면 좋을 것 같다. (언제할지는 모르겠지만..)

Leave a comment