iOS, Swift/iOS 개발

iOS Image Slicing 해서 resizableImage 만들기

Developer88 2025. 3. 22. 15:42
반응형

앱을 만들다 보면,

말풍선처럼 특정부분을 늘려서 사용해야하는 경우가 있는데요.

안드로이드에서는 9patch라는 것을 이용했는데요.

ios에서는 Slicing한 후, Stretch(늘어나도록) 설정을 해서 이와 같은 효과를 얻을 수 있습니다.

오히려 이미지에 여기저기 칠하지 않아도 되어서 좋기도 합니다.

오늘은 이 방법에 대해 정리하겠습니다.

 

1. Asset Catalog에서 Slicing 설정 찾기

AssetCatalog에서 직접 이미지를 슬라이싱 할 수 있는데요.

먼저 아래와 같이 Slicing 섹션을 찾아서, 

Slices와 Center를 설정해 줍니다.

  • Xcode의 Asset Catalog에서 이미지 선택
  • Attributes Inspector에서 'Slicing' 섹션 찾기(하단)
  • Slices: 'Horizontal and Vertical'을 선택
  • Center: Stretches 로 설정

Attributes Inspector의 가장 하단에 슬라이싱 영역을 볼 수 있는데,

위의 값을 우선 설정해 줍니다.

아래 이미지와 같이,

특정 값을 적어놓어야 하는데,

어떤 값을 적어야 할지 감이 잘 오지 않습니다.

 

 

 

비주얼적인 도움이 필요한 시점이지요.

 

이럴 때, XCode의 슬라이싱 영역을 확인하고 설정하는 기능을 이용해 주면 됩니다.

 

asset에서 작업하려고 하는 이미지를 선택한 다음,

메뉴의 'Editor > Show Slicing'을 선택해 줍니다.

 

 

 

그럼 아래와 같이 작업영역이 나오는데요.

위에서처럼, 수치가 아니라,

영역을 마우스로 드래그할 수 있습니다.

 

이제, 최적의 위치를 찾아 영역을 수정해주기만 하면 됩니다.

교차되어, 짙은 영역이 확장될 영역입니다.

 

 

참고로 위에서 선택한 메뉴는,

assets가 선택된 화면에서,

아래의 이미지와 같이, 우측 상단의 아이콘을 통해서도 접근이 가능합니다.

 

 

2. 코드에서 적용하기

이제 아래와 같이 슬라이싱된 이미지를 사용해주면,

컨텐츠에 따라서 확장된 이미지를 사용할 수 있습니다.

 

Text(numString)
    .foregroundColor(.white)
    .padding([.horizontal], 10)
    .padding([.vertical], 5)
    .background(
        Image("test")
    )

 

 

3. 코드에서 동적으로 슬라이싱하기

어느정도의 수치를 알고 있다면,

코드에서 동적으로 슬라이싱해서 사용할 수도 있는데요.

 

아래와 같이,

Insets 값들을 설정해,

늘려야 하는 위치를 설정하는 것 입니다.

 

VStack(spacing: 0) {
    Text("test\n2줄")
        .foregroundColor(.white)
        .padding([.horizontal], 10)
        .padding([.vertical], 5)
        .background(
            Image(BusDataConstants.getBusBtnResourceId(routeType: routeType))
                .resizable(capInsets: EdgeInsets(top: 10, leading: 8, bottom: 10, trailing: 8))
        )
}

 

resizable Modifier(수정자)의 capInsets를 설정하면 되는데요.

EdgeInsets객체를 인자로 넣어 줍니다.

 

EdgeInsets는,

UI 요소의 각 가장자리(edge)에 적용되는 여백이나 간격(inset)을 정의하는 구조체인데요.

각각은 다음의 의미를 가지고 있습니다.

  • Top: 이미지의 상단 가장자리에서 얼마만큼의 영역을 고정(늘어나지 않는) 부분으로 지정할지 결정합니다
    • 값이 0이면 상단 가장자리가 없다는 의미로, 이미지 상단부터 늘어날 수 있습니다
    • 값이 클수록 상단의 더 많은, 더 큰 영역이 원본 크기로 유지됩니다
    • 예: 10으로 설정하면 이미지 상단에서 10포인트는 늘어나지 않고 고정됩니다
  • leading: 이미지의 왼쪽(leading) 가장자리에서 고정되는 영역을 지정
    • 값이 0이면 왼쪽 가장자리가 없다는 의미로, 이미지의 왼쪽부터 늘어날 수 있습니다
    • 예: 8로 설정하면 이미지 왼쪽에서 8포인트는 늘어나지 않고 고정됩니다
  • bottom: 이미지의 하단 가장자리에서 고정되는 영역을 지정합니다
    • 값이 0이면 하단 가장자리가 없다는 의미로, 이미지 하단까지 늘어날 수 있습니다
    • 값이 클수록 하단의 더 많은 영역이 원본 크기로 유지됩니다
    • 예: 10으로 설정하면 이미지 하단에서 10포인트는 늘어나지 않고 고정됩니다
  • trailing: 이미지의 오른쪽(trailing) 가장자리에서 고정되는 영역을 지정
    • 값이 0이면 오른쪽 가장자리가 없다는 의미로, 이미지의 오른쪽까지 늘어날 수 있습니다
    • 예: 8로 설정하면 이미지 오른쪽에서 8포인트는 늘어나지 않고 고정됩니다
728x90
저작자표시 비영리 변경금지