[SwiftUI] Circle ImageView

개요

ImageView를 동그랗게 만들어보기로 한다.

 

파일 생성

아래와 같은 순서대로 SwiftUI 파일을 생성한다.

 

1. New File을 클릭한다.

2. User Interface -> SwiftUI View를 선택한 후 Next 버튼을 누른다.

3. 파일명을 입력한 후 Create 버튼을 눌러 파일을 생성한다.

 

동그란 모양의 ImageView 생성

생성된 파일에 아래와 같이 코딩을 해준다.

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("dog")
            .clipShape(Circle())
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

 

위와 같이 코딩을 해주면 아래 미리보기 화면처럼 동그란 이미지가 화면에 표시된다.

 

마치며

storyboard에서는 동그란 이미지를 만드려면 radius를 변경해줘야 했는데 SwiftUI에서는 코드 몇줄로 간단하게 처리가 가능하다. Storyboard로 개발하다 SwiftUI를 접하니 신세계가 따로없다. 얼른 Storyboard를 사용하지 않아도 되는 날이 오면 좋겠다.