1. 소개
이 Codelab에서는 ImageView를 사용하여 앱에 이미지를 추가하는 방법을 알아봅니다.
기본 요건
- Android 스튜디오에서 새 앱을 만들고 실행하는 방법
- Layout Editor를 사용하여
TextViews에서 속성을 추가 및 삭제하고 설정하는 방법
학습할 내용
- Android 앱에 이미지나 사진을 추가하는 방법
ImageView를 사용하여 앱에서 이미지를 표시하는 방법- 더 쉽게 앱을 번역하고 문자열을 재사용할 수 있도록 문자열 리소스에 텍스트를 추출하는 방법
- 최대한 많은 사용자가 앱을 사용할 수 있도록 하는 방법
빌드할 프로그램
- Happy Birthday 앱을 확장하여 이미지를 추가합니다.
필요한 항목
- Android 스튜디오가 설치된 컴퓨터
- 생일 카드 만들기 Codelab의 앱
2. 앱 설정
- Android 스튜디오의 이전 Codelab에서 프로젝트를 엽니다. 솔루션 코드나 직접 만든 코드를 사용할 수 있습니다. 앱을 실행하면 다음과 같이 표시됩니다.
프로젝트에 이미지 추가
이 작업에서는 인터넷에서 이미지를 다운로드하여 Happy Birthday 앱에 추가합니다.
- 여기를 클릭하여 GitHub에서 생일 카드의 이미지에 액세스합니다.
- 오른쪽의 Download 버튼을 클릭합니다. 그러면 이미지가 표시됩니다.
- 이미지를 마우스 오른쪽 버튼으로 클릭하고 파일을 androidparty.png로 컴퓨터에 저장합니다. 저장한 위치(예: Downloads 폴더)를 기록해 둡니다.
- Android 스튜디오의 메뉴에서 View > Tool Windows > Resource Manager를 클릭하거나 Project 창 왼쪽에 있는 Resource Manager 탭을 클릭합니다.
- Resource Manager 아래의 +를 클릭하고 Import Drawables를 선택합니다. 파일 브라우저가 열립니다.
- 파일 브라우저에서 다운로드한 이미지 파일을 찾아 Open을 클릭합니다.
- Next를 클릭합니다. Android 스튜디오에 이미지의 미리보기가 표시됩니다.
- Import를 클릭합니다.
- 이미지를 성공적으로 가져오면 Android 스튜디오는 Drawable 목록에 이미지를 추가합니다. 이 목록에는 앱의 이미지와 아이콘이 모두 포함됩니다. 이제 앱에서 이 이미지를 사용할 수 있습니다.
- 메뉴에서 View > Tool Windows > Project를 클릭하거나 맨 왼쪽의 Project 탭을 클릭하여 프로젝트 뷰로 다시 전환합니다.
- app > res > drawable을 펼쳐 이미지가 앱의 drawable 폴더에 있는지 확인합니다.
3. ImageView 추가
앱에서 이미지를 표시하려면 표시할 위치가 필요합니다. TextView를 사용하여 텍스트를 표시하는 것처럼 ImageView를 사용하여 이미지를 표시할 수 있습니다.
이 작업에서는 앱에 ImageView를 추가하고 이미지를 다운로드한 컵케이크 이미지로 설정합니다. 그런 다음 이미지를 배치하고 크기를 조정하여 화면을 채웁니다.
ImageView 추가 및 이미지 설정
- Project 창에서 activity_main.xml(app > res > layout > activity_main.xml)을 엽니다.
- Layout Editor에서 Palette로 이동하여
ImageView를 앱으로 드래그합니다. 중앙 부근에서 드롭하여 텍스트와 겹치지 않도록 합니다.
Pick a Resource 대화상자가 열립니다. 이 대화상자에는 앱에서 사용할 수 있는 이미지 리소스가 모두 나열됩니다. Drawable 탭 아래에 생일 이미지가 표시됩니다. 드로어블 리소스는 화면에 그릴 수 있는 그래픽의 일반적인 개념입니다. 여기에는 이미지, 비트맵, 아이콘, 기타 여러 유형의 그려진 리소스가 포함됩니다.
- Pick a Resource 대화상자의 Drawable 목록에서 케이크 이미지를 찾습니다.
- 이미지를 클릭하고 OK를 클릭합니다.
그러면 이미지가 앱에 추가되지만 원하지 않는 위치에 있을 수 있고 화면을 채우지 않습니다. 다음 단계에서 이 문제를 해결합니다.
ImageView 배치 및 크기 조절
- Layout Editor에서
ImageView를 클릭하고 드래그합니다. 드래그할 때 분홍색 직사각형이 Design 뷰의 앱 화면 주위에 표시됩니다. 분홍색 직사각형은ImageView를 배치하기 위한 화면 경계를 나타냅니다. - 왼쪽과 오른쪽 가장자리가 분홍색 직사각형과 일치하도록
ImageView를 드롭합니다. Android 스튜디오는 이미지가 가장자리에 가까워지면 알맞게 좌우를 '맞춥니다'. 곧 상단과 하단도 처리합니다.
ConstraintLayout의 Views에는 ConstraintLayout에 배치 방법을 알려주는 가로 및 세로 제약 조건이 있어야 합니다. 다음 단계에서 제약조건을 추가합니다.
ImageView윤곽선의 상단에 있는 원 위로 포인터를 가져가면 다른 원과 함께 강조표시됩니다.- 원을 앱 화면 상단으로 드래그하면 드래그하는 동안 화살표가 원을 포인터에 연결합니다. 화면 상단에 맞춰질 때까지 드래그합니다.
ImageView상단의 제약조건을ConstraintLayout상단에 추가했습니다.
ImageView하단의 제약조건을ConstraintLayout하단에 추가합니다. 상단에서와 마찬가지로 가장자리와 너무 가까워서 드래그하지 못할 수 있습니다. 이 경우 Attributes 창의 Constraint Widget에서 하단 +를 클릭하여 제약 조건을 추가할 수 있습니다. 여백이 0인지 확인합니다.
- Attributes 창에서 Constraint Widget을 사용하여 왼쪽과 오른쪽에 0의 여백을 추가합니다. 그러면 자동으로 그 방향으로 제약조건이 만들어집니다.
이제 이미지가 중앙에 정렬되지만 아직 전체 화면을 차지하는 것은 아닙니다. 다음 단계에서 이 문제를 해결합니다.
- Constraints 섹션의 Constraint Widget 아래에서 layout_width를 0dp(match constraint)로 설정합니다. 0dp는
ImageView의 너비에 match constraint를 사용하라고 Android 스튜디오에 알려주는 간단한 방법입니다. 방금 추가한 제약조건으로 인해ConstraintLayout에서 여백을 뺀 만큼 넓어진다는 의미입니다.
- layout_height를 0dp(match constraint)로 설정합니다. 추가한 제약조건으로 인해
ImageView가ConstraintLayout에서 여백을 뺀 만큼 높아집니다.
ImageView는 너비와 높이가 앱 화면과 같지만 이미지는ImageView내부 중앙에 배치되며 이미지 위아래에 공백이 많습니다. 별로 보기 좋지 않으므로 이미지의 크기를 조절하고 정렬하는 방법을 나타내는ImageView의 scaleType을 조정합니다.ScaleType에 관한 자세한 내용은 개발자 참조 가이드를 참고하세요. 이제 아래와 같이 앱이 표시됩니다.
- scaleType 속성을 찾습니다. 아래로 스크롤하거나 이 속성을 검색해야 할 수 있습니다. scaleType에 다른 값을 설정하여 결과물을 확인합니다.
- 완료되었으면 scaleType을 centerCrop으로 설정합니다. 그러면 이미지가 왜곡되지 않고 화면을 채웁니다.
이제 케이크 이미지가 아래와 같이 전체 화면을 채우게 됩니다.
그러나 이제 생일 축하 메시지와 서명이 표시되지 않습니다. 다음 단계에서 이 문제를 해결합니다.
ImageView를 텍스트 뒤로 이동
ImageView가 화면을 채우도록 하면 텍스트가 더 이상 표시되지 않습니다. 이제 이미지가 텍스트를 가리기 때문입니다. 따라서 UI 요소의 순서가 중요합니다. TextViews를 먼저 추가하고 ImageView를 추가했으므로 ImageView가 위에 옵니다. 레이아웃에 뷰를 추가하면 뷰 목록 끝에 추가되고 목록에 있는 순서대로 그려집니다. ImageView는 ConstraintLayout의 Views 목록 끝에 추가되었으므로 마지막으로 그려지고 TextViews 위에 그려집니다. 이러한 문제를 해결하려면 뷰 순서를 변경하며 ImageView를 목록 시작 부분으로 이동하여 먼저 그려지도록 합니다.
Component Tree에서 ImageView를 클릭하고 ConstraintLayout 바로 아래 TextViews 위로 드래그합니다. ImageView가 이동하는 위치를 나타내는 삼각형이 있는 파란색 선이 표시됩니다. ConstraintLayout 바로 아래에서 ImageView를 드롭합니다.
이제 ImageView가 ConstraintLayout 아래의 목록에 첫 번째로 있고 그 뒤에 TextViews가 표시됩니다. 이제 'Happy Birthday, Sam!'과 'From Emma.'라는 텍스트가 모두 표시됩니다. 현재로서는 누락된 콘텐츠 설명에 관한 경고는 무시합니다.
축하합니다. Android 앱에 이미지를 추가했습니다.
4. 적절한 코딩 사례 채택
이전 Codelab에서 TextViews를 추가했을 때 Android 스튜디오에서는 경고 삼각형을 사용하여 신고했습니다. 이 단계에서는 이러한 경고 문제를 해결하고 ImageView의 경고 문제도 해결합니다.
번역
앱을 작성할 때는 특정 시점에 다른 언어로 번역될 수 있음을 기억해야 합니다. 이전 Codelab에서 알아본 것처럼 문자열은 'Happy Birthday, Sam!'과 같은 일련의 문자입니다.
하드코딩 문자열은 앱 코드에 직접 작성된 문자열입니다. 하드코딩 문자열로 인해 앱을 다른 언어로 번역하기가 더 어렵고 앱의 다른 위치에서 문자열을 재사용하기가 더 힘듭니다. 이러한 문제는 '리소스 파일로 문자열을 추출'하여 해결할 수 있습니다. 즉, 코드에서 문자열을 하드코딩하는 대신 문자열을 파일에 넣고 이름을 지정한 후 문자열을 사용할 때마다 이름을 사용합니다. 이름은 문자열을 변경하거나 다른 언어로 번역하더라도 동일하게 유지됩니다.
- 'Happy Birthday, Sam!'이 포함된 첫 번째
TextView옆에 있는 주황색 삼각형을 클릭합니다. Android 스튜디오에서 자세한 정보와 추천 해결 방법이 있는 창이 열립니다. Suggested Fix를 확인하려면 아래로 스크롤해야 할 수도 있습니다.
- Fix 버튼을 클릭합니다. Android 스튜디오에서 Extract Resource 대화상자가 열립니다. 이 대화상자에서 문자열 리소스 이름과 이를 저장하는 방법에 관한 세부사항을 맞춤설정할 수 있습니다. Resource name은 문자열이 앞으로 호출될 이름입니다. Resource value는 실제 문자열 자체입니다.
- Extract Resource 대화상자에서 Resource name을 happy_birthday_text로 변경합니다. 문자열 리소스에는 소문자 이름이 있어야 하고 여러 단어는 밑줄로 구분되어야 합니다. 다른 설정은 기본값으로 둡니다.
- OK 버튼을 클릭합니다.
- Attributes 창에서 text 속성을 찾습니다. Android 스튜디오에서는 이 속성을 @string/happy_birthday_text로 자동 설정했습니다.
- strings.xml(app > res > values > strings.xml)을 엽니다. Android 스튜디오에서는 happy_birthday_text라는 문자열 리소스를 만들었습니다.
<resources>
<string name="app_name">Happy Birthday</string>
<string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>
strings.xml 파일에는 사용자가 앱에서 보는 문자열 목록이 있습니다. 앱 이름도 문자열 리소스입니다. 문자열을 모두 한곳에 배치하면 앱의 모든 텍스트를 더 쉽게 번역하고 앱의 다양한 부분에서 문자열을 더 쉽게 재사용할 수 있습니다.
- 같은 단계를 따라
TextView서명 텍스트를 추출하고 문자열 리소스의 이름을 signature_text로 지정합니다.
완성된 파일은 다음과 같이 표시됩니다.
<resources>
<string name="app_name">Happy Birthday</string>
<string name="happy_birthday_text">Happy Birthday, Sam!</string>
<string name="signature_text">From Emma.</string>
</resources>
앱 접근성 확인
접근성을 위한 적절한 코딩 사례를 따르면 장애가 있는 사용자를 포함하여 사용자가 모두 더 쉽게 앱을 탐색하고 앱과 상호작용할 수 있습니다.
Android 스튜디오에서 제공하는 힌트와 경고를 통해 앱의 접근성을 개선할 수 있습니다.
- Component Tree에서 앞서 추가한
ImageView옆에 주황색 삼각형이 표시됩니다. 포인터를 주황색 삼각형 위로 가져가면 이미지의 누락된 'contentDescription' 속성에 관한 경고가 포함된 도움말이 표시됩니다. 콘텐츠 설명을 통해 UI 요소의 목적을 정의하여 음성 안내 지원과 함께 앱을 더 유용하게 활용할 수 있습니다.
그러나 이 앱의 이미지는 장식 목적으로만 포함됩니다. 사용자에게 표시되는 콘텐츠 설명을 설정하는 대신 importantForAccessibility 속성을 no로 설정하여 음성 안내 지원에 ImageView를 건너뛰라고 지시할 수 있습니다.
- Component Tree에서
ImageView을 선택합니다. - Attributes 창의 All Attributes 섹션에서 importantForAccessibility를 찾아 no로 설정합니다.
ImageView 옆의 주황색 삼각형이 사라집니다.
- 앱을 다시 실행하여 여전히 작동하는지 확인합니다.
축하합니다. Happy Birthday 앱에 이미지를 추가하고 접근성 가이드라인을 준수했으며 더 쉽게 다른 언어로 번역할 수 있도록 했습니다.
5. 솔루션 코드
Happy Birthday 앱의 솔루션 코드는 최종 코드를 확인하려는 경우에 대비하여 GitHub에 업로드되었습니다.
GitHub는 개발자가 소프트웨어 프로젝트의 코드를 관리할 수 있는 서비스로, 각 코드 버전의 변경사항을 추적하는 버전 제어 시스템인 Git를 사용합니다. Google 문서의 버전 기록을 본 적이 있다면 문서의 지난 수정 시점과 수정사항을 확인할 수 있습니다. 이와 마찬가지로 프로젝트에서 코드의 버전 기록을 추적할 수 있습니다. 개인적으로 또는 팀과 함께 프로젝트를 진행하는 경우 매우 유용합니다.
GitHub에는 프로젝트를 보고 관리할 수 있는 웹사이트도 있습니다. 이 GitHub 링크를 통해 Happy Birthday 프로젝트 파일을 온라인으로 탐색하거나 컴퓨터에 다운로드할 수 있습니다.
이 Codelab의 코드를 가져와서 Android 스튜디오에서 열려면 다음을 실행합니다.
코드 가져오기
- 제공된 URL을 클릭합니다. 브라우저에서 프로젝트의 GitHub 페이지가 열립니다.
- 프로젝트의 GitHub 페이지에서 Code 버튼을 클릭하여 대화상자를 엽니다.
- 대화상자에서 Download ZIP 버튼을 클릭하여 컴퓨터에 프로젝트를 저장합니다. 다운로드가 완료될 때까지 기다립니다.
- 컴퓨터에서 파일을 찾습니다(예: Downloads 폴더).
- ZIP 파일을 더블클릭하여 압축을 해제합니다. 프로젝트 파일이 포함된 새 폴더가 만들어집니다.
Android 스튜디오에서 프로젝트 열기
- Android 스튜디오를 시작합니다.
- Welcome to Android Studio 창에서 Open an existing Android Studio project를 클릭합니다.
참고: Android 스튜디오가 이미 열려 있는 경우 File > New > Import Project 메뉴 옵션을 대신 선택합니다.
- Import Project 대화상자에서 압축 해제된 프로젝트 폴더가 있는 위치로 이동합니다(예: Downloads 폴더).
- 프로젝트 폴더에서 Happy Birthday 폴더를 선택합니다.
- 'Open'을 클릭합니다.
- Android 스튜디오가 프로젝트를 열 때까지 기다립니다.
- Run 버튼
을 클릭하여 앱을 빌드하고 실행합니다. 예상대로 작동하는지 확인합니다. - Project 도구 창에서 프로젝트 파일을 살펴보고 앱이 설정된 방식을 확인합니다.
6. 요약
- Android 스튜디오의 Resource Manager를 사용하면 이미지와 기타 리소스를 추가하고 구성할 수 있습니다.
ImageView는 앱에서 이미지를 표시하는 UI 요소입니다.ImageViews에는 앱의 접근성을 개선할 수 있는 콘텐츠 설명이 있어야 합니다.- 생일 축하 메시지와 같이 사용자에게 표시되는 텍스트는 앱을 다른 언어로 쉽게 번역할 수 있도록 문자열 리소스로 추출해야 합니다.
7. 자세히 알아보기
- Kotlin에서 사용되는 Android 기초 용어
- Android 스튜디오의 Resource Manager
ImageView클래스- 접근성
- 다양한 언어 지원
- GitHub 시작하기
8. 연습하기
다음을 따르세요.
- 내 디자인에 기반하여 자체 생일 카드 앱을 만듭니다.
- 먼저 어떤
Views가 필요할지 생각해 봅니다. - 이를 가장 쉽게 추가할 수 있는 순서는 무엇인가요?
- 드로어블 폴더에 어떤 이미지를 추가해야 하나요?
Android 앱에 일반적으로 사용되는 두 가지 유형의 비트맵 이미지는 JPEG 파일과 PNG 파일입니다. PNG 파일에는 투명한(빈) 영역이 있을 수 있습니다. 이미지 형식에 관한 자세한 내용은 개발자 참조를 참고하세요.
- 먼저 제약조건과 여백으로
Views를 배치하고 스타일을 지정해야 합니다. - 일부 이미지에서 텍스트를 더 돋보이게 하려면 shadowColor, shadowDx, shadowDy, shadowRadius를 사용해 보세요.
학습 내용 확인:
완성된 앱은 오류 없이 실행되고 디자인한 생일 카드가 표시되어야 합니다.
축하합니다. 생일 카드 앱 만들기를 완료했습니다. 작업을 소셜 미디어에 공유하고 해시태그 #LearningKotlin을 사용하면 모두가 볼 수 있습니다.