6월 3일의 ⁠#Android11: 베타 버전 출시 행사에 참여하세요.

Resource Manager를 사용하여 앱의 UI 리소스 관리하기

Resource Manager는 앱에서 리소스를 가져오고 관리하고 사용할 수 있는 도구 창입니다. 메뉴 바에서 View > Tool Windows > Resource Manager를 선택하거나 왼쪽 사이드바에서 Resource Manager를 선택하여 도구 창을 열 수 있습니다.

그림 1: Resource Manager

  1. Add 를 클릭하여 프로젝트에 새로운 리소스를 추가합니다. 이미지 애셋, 벡터 애셋, 글꼴, 리소스 파일, 값을 추가하거나 프로젝트에 리소스를 가져올 수 있습니다.
  2. 모듈 드롭다운을 사용하면 모듈과 관련된 리소스를 볼 수 있습니다.
  3. 검색창을 사용하여 프로젝트의 모든 모듈에서 리소스를 검색합니다.
  4. Resource Manager는 리소스를 유형별로 그룹화합니다. 이 탭을 사용해 각 리소스 유형을 전환할 수 있습니다. 더보기 아이콘 더보기 아이콘을 클릭하여 추가 리소스 유형을 표시합니다.
  5. 필터 버튼을 사용하면 로컬 종속 모듈, 외부 라이브러리, Android 프레임워크의 리소스를 확인할 수 있습니다. 필터를 사용하여 테마 속성을 표시할 수도 있습니다.
  6. 기본 콘텐츠 영역에는 리소스의 미리보기가 표시됩니다. 리소스를 마우스 오른쪽 버튼으로 클릭하면 무엇보다 리소스의 이름을 바꾸고 앱에서 리소스가 사용되는 곳을 검색할 수 있는 컨텍스트 메뉴가 표시됩니다.
  7. 이 버튼을 클릭하면 리소스를 타일 또는 목록 형식으로 볼 수 있습니다.
  8. 이 버튼을 클릭하면 리소스의 미리보기 크기를 변경할 수 있습니다.

위에서 언급한 기능 외에도 Resource Manager에는 대량의 드로어블을 프로젝트로 간단하게 가져올 수 있는 기능이 제공됩니다. SVG 파일을 포함한 이미지 파일을 Resource Manager로 직접 드래그 앤 드롭하거나 Import Drawables 마법사를 사용할 수 있습니다. 자세한 내용은 아래 프로젝트로 리소스 가져오기 섹션을 참조하세요.

Resource Manager가 더 자세한 정보를 표시하게 하려면 리소스를 더블클릭합니다. 여러 버전의 리소스가 있는 경우 이 자세히 보기 화면에는 그림 2와 같이 관련 정성자와 함께 각 버전이 표시됩니다. 여기에서 특정 버전을 더블클릭하여 편집기 창에서 열 수도 있습니다.

그림 2: 다양한 화면 밀도의 이미지 리소스 버전을 보여주는 Resource Manager

프로젝트로 드로어블 가져오기

리소스 파일 또는 폴더를 Resource Manager로 직접 드래그 앤 드롭하여 이미지 리소스를 가져올 수 있습니다. 리소스를 Resource Manager에 드롭하면 Import drawables 대화상자가 표시됩니다. 이 대화상자에서 리소스를 요약한 내용을 보고 가져오기 전에 필요한 한정자를 추가할 수 있습니다.

이미지 리소스를 프로젝트로 가져오려면 다음 단계를 따르세요.

  1. 이미지를 Android 스튜디오의 Resource Manager 창으로 직접 드래그 앤 드롭합니다. 또는 플러스 아이콘(+)을 클릭하고 그림 3과 같이 Import Drawables를 선택한 다음 가져오려는 파일 및 폴더를 선택할 수 있습니다.

    그림 3: 드롭다운 메뉴에서 Import Drawables 선택

  2. Import drawables 대화상자가 나타납니다. 그림 4처럼 이 대화상자에는 가져올 리소스의 목록이 표시됩니다. 각 리소스 미리보기 위에 있는 텍스트 상자를 클릭하여 리소스 이름을 변경할 수 있습니다.

    동일한 리소스의 여러 버전을 제공하는 경우 리소스에서 지원되는 특정 구성을 설명하는 기기 구성 한정자를 추가해야 합니다. 예를 들어 여러 화면 밀도에 동일한 리소스를 여러 버전으로 제공하는 경우 각 버전에 밀도 한정자를 추가할 수 있습니다. 이름과 정성자가 동일한 리소스가 2개 이상 있는 경우 1개의 버전만 가져옵니다. 리소스 한정자에 관한 자세한 내용은 대체 리소스 제공을 참조하세요.

    그림 4: Import Drawables 대화상자

    리소스 이름을 지정하고 필요한 한정자를 추가하면 Next를 클릭합니다.

  3. 다음 화면에는 가져올 리소스의 요약이 표시됩니다. 가져올 준비가 되면 Import를 클릭합니다.

그림 5와 같이 Resource Manager 창에서 이제 리소스를 프로젝트에서 사용할 준비가 된 것을 알 수 있습니다.

그림 5: Resource Manager에 가져온 이미지가 표시됨

드로어블 밀도 자동 파싱

파일이나 폴더를 가져올 때 경로에 밀도 정성자가 포함된 경우 Resource Manager는 가져오는 과정에서 밀도 정성자를 자동 적용합니다. Resource Manager에서는 Android의 밀도 정성자와 iOS의 배율을 모두 파싱할 수 있습니다.

이 표에는 Android 및 iOS에서 지원되는 다양한 밀도를 표시하는 방식이 나열되어 있습니다.

밀도 Android 밀도 정성자 iOS 배율
저밀도(약 120dpi) ldpi 지원되지 않음
중밀도(약 160dpi) mdpi 원래의 배율
고밀도(약 240dpi) hdpi 지원되지 않음
초고밀도(약 320dpi) xhdpi @2x
초초고밀도(약 480dpi) xxhdpi @3x
초초초고밀도(약 640dpi) xxxhdpi @4x

다음은 입력 경로가 가져오기 후 리소스 경로로 변환되는 방식을 보여주는 몇 가지 예시입니다.

Android 밀도 한정자: hdpi
입력 경로: /UserFolder/icon1/hdpi/icon.png
리소스 경로: <projectFolder>/<moduleFolder>/src/main/res/drawable-hdpi/icon.png
Android 밀도 한정자: xxhdpi
입력 경로: /UserFolder/icon1/abc-xxhdpi/icon.png
리소스 경로: <projectFolder>/<moduleFolder>/src/main/res/drawable-xxhdpi/icon.png
iOS 배율: @2x
입력 경로: /UserFolder/icon1/icon@2x.png
리소스 경로: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon.png
iOS 배율: @2x
입력 경로: /UserFolder/icon1/icon@2x_alternate.png
리소스 경로: <projectFolder>/<moduleFolder>/src/main/res/drawable-xhdpi/icon_alternate.png

다양한 픽셀 밀도로 기기를 지원하는 방법에 관한 자세한 내용은 다양한 픽셀 밀도 지원을 참조하세요.

드로어블을 레이아웃으로 드래그 앤 드롭

Resource Manager에서 레이아웃으로 드로어블을 직접 드래그 앤 드롭할 수 있습니다. 리소스를 레이아웃에 드롭하는 경우 Resource Manager는 애니메이션 1과 같이 드로어블에 상응하는 ImageView를 생성합니다.

애니메이션 1: Design 뷰에서 드로어블을 레이아웃으로 드래그 앤 드롭하는 모습

애니메이션 2에 나온 것처럼 레이아웃의 XML에 바로 드래그 앤 드롭할 수도 있습니다.

애니메이션 2: Text 보기에서 드로어블을 레이아웃으로 드래그 앤 드롭하는 모습

Text 탭에서 드로어블을 레이아웃에 드롭할 때 생성되는 코드는 다음과 같이 레이아웃을 드롭하는 위치에 따라 다릅니다.

  • 드로어블을 빈 영역에 드롭하면 Resource Manager는 상응하는 ImageView를 생성합니다.
  • 드로어블을 레이아웃 XML의 속성에 드롭하면 Resource Manager가 이 속성 값을 드로어블의 참조로 바꿉니다. 다른 리소스 유형을 XML 속성에 드래그하여 속성 값을 바꿀 수도 있습니다.
  • 드로어블을 기존 ImageView 요소에 드롭하면 Resource Manager는 상응하는 소스 속성을 바꿉니다.