ImageRadio
ImageRadio(이미지라디오) 위젯은 여러 이미지 선택지 중 하나만 고를 수 있는 라디오 그룹을 이미지로 표현하는 위젯입니다.
같은 그룹 안에서 한 항목만 선택되며, 선택·비선택·비활성 상태마다 다른 이미지를 보여줍니다.
정의 / 역할
ImageRadio 위젯은 같은 groupId를 공유하는 항목들끼리 하나의 라디오 그룹을 이룹니다. 각 항목은 고유한 value를 가지며, 항목을 탭하면 그룹의 선택 값이 그 항목의 value로 바뀝니다. 선택 여부와 활성 여부의 조합에 따라 최대 4개의 이미지 중 하나를 표시하고, 선택되면 onChanged에 연결한 동작이 실행됩니다.
- 카테고리: Contents
- 그룹 단위 단일 선택 (같은
groupId항목 중 하나만 선택) - 상태별 이미지 표시 (선택+활성 / 비선택+활성 / 비선택+비활성 / 선택+비활성)
기능
| 기능 | 설명 |
|---|---|
| 그룹 단일 선택 | 같은 groupId를 가진 항목들이 한 그룹을 이루고, 그중 하나만 선택됩니다. 탭하면 그룹의 선택 값이 그 항목의 value로 바뀝니다. |
| 상태별 이미지 | 선택·활성 상태 조합에 따라 activeAssetPath·inactiveAssetPath·disabledAssetPath·disabledActiveAssetPath 중 하나의 이미지를 표시합니다. |
| 라벨 표시 | 이미지 옆에 텍스트 라벨(label)을 함께 표시하고, 간격(labelGap)과 글자 스타일(labelStyle)을 지정합니다. |
| 크기 설정 | radioWidth·radioHeight로 이미지 표시 크기를 지정합니다. |
| 선택 이벤트 | 항목이 선택되면 onChanged에 연결한 동작(로직·스크립트)이 실행됩니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- ImageRadio 항목을 캔버스로 끌어다 놓습니다.
- 한 그룹으로 묶을 항목들에 동일한
groupId를 지정합니다. - 각 항목에 서로 다른
value와 상태별 이미지(activeAssetPath·inactiveAssetPath등)를 지정합니다. - 필요하면
onChanged에 선택했을 때 실행할 동작을 연결합니다.
속성 (Property)
radioWidth·radioHeight·label·labelStyle·labelGap은 기본값이 없어 지정하지 않으면 적용되지 않습니다.
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
groupId | 라디오 그룹 식별자. 같은 값을 가진 항목끼리 한 그룹으로 동작 | 빈 문자열 | 문자열 |
value | 이 항목의 고유 값. 선택되면 그룹의 선택 값이 이 값으로 바뀜 | 빈 문자열 | 문자열 |
groupValue | 그룹의 현재 선택 값 | 빈 문자열 | 문자열 |
enable | 활성화 여부. 꺼지면 선택할 수 없고 비활성 이미지를 표시 | 켜짐(true) | 참 / 거짓 |
activeAssetPath | 선택 + 활성 상태에 표시할 이미지 경로 | 빈 문자열 | 이미지 경로(문자열) |
inactiveAssetPath | 비선택 + 활성 상태에 표시할 이미지 경로 | 빈 문자열 | 이미지 경로(문자열) |
disabledAssetPath | 비선택 + 비활성 상태에 표시할 이미지 경로 | 빈 문자열 | 이미지 경로(문자열) |
disabledActiveAssetPath | 선택 + 비활성 상태에 표시할 이미지 경로 | 빈 문자열 | 이미지 경로(문자열) |
radioWidth | 이미지 표시 너비 | 미지정 | 숫자(px) |
radioHeight | 이미지 표시 높이 | 미지정 | 숫자(px) |
label | 이미지 옆에 표시할 텍스트 라벨 (선택) | 미지정 | 문자열 |
labelStyle | 라벨 글자 스타일 (색·크기 등) | 미지정 | 텍스트 스타일 |
labelGap | 이미지와 라벨 사이 간격 | 미지정 | 숫자(px) |
주의 / 팁
한 그룹으로 동작하려면 항목들의 groupId가 동일해야 하고, 각 항목의 value는 서로 달라야 합니다. 탭하면 그룹의 선택 값이 자신의 value로 설정되어 같은 그룹의 다른 항목은 자동으로 비선택 상태가 됩니다.
상태별 이미지를 지정하지 않으면 대체 이미지(빈 이미지 표시)가 나타납니다. 이때 radioWidth·radioHeight를 지정하지 않으면 대체 이미지는 20×20 크기로 표시되고, label을 켰을 때 labelGap을 지정하지 않으면 이미지와 라벨 사이 간격은 8이 적용됩니다.
더 알아보기
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 ImageRadio (이미지라디오) Widget Control 문서에서 확인하세요.