[Kotlin / Android] 09. 리소스 활용하기 - 메신저 앱의 인트로 화면 만들기

09-4 메신저 앱의 인트로 화면 만들기

---

 

 

1. 페이스북 메신저 앱의 인트로 화면 만들어 보기

2. 방향을 세로와 가로로 바꿀 때마다 다르게 보여주기

3. 기기를 사용하는 지역에 따라 메시지를 알맞은 언어로 출력하기

 

 

 1단계  리소스 파일 준비하기

。round_button.xml 과 intro.png 파일을 drawable 디렉터리에 넣기

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding = "10dp">
    <solid android:color="#0066FF"></solid>
    <corners
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"></corners>
</shape>

 

 2단계  언어별 문자열 리소스 작성하기

。res/values 디렉터리에 있는 strings.xml 파일 열고
    <resources> 태그 하위에 다음 코드 추가
   영어 사용자를 위한 문자열 리소스임

<resources>
    <string name="app_name">Ch9_Resource</string>
    <string name="intro_main">
        Find your phone contacts on Messenger
    </string>
    <string name="intro_detail">
        Continuously uploading your contacts helps Facebook and Messenger suggest connections
        and provide and improve ads for you and others, and offer a better service.
    </string>
    <string name="intro_more">Learn More</string>
    <string name="intro_button">TURN ON</string>
    <string name="intro_delay">NOT NOW</string>
</resources>

 

。한국어 사용자를 위한 문자열 리소스 파일 만들기

    1. values 디렉터리를 마우스 오른쪽 버튼 클릭

    2. [New → Values Resource File] 메뉴 선택

    3. File name에 strings.xml이라고 입력

    4. Available qualifiers에서 [Locale] 선택

    5. 오른쪽 화살표 버튼(>>) 클릭

。Language에서 [ko: Korean] 선택 후
    Specific Region Only에서 [KR: South Korea] 선택 후 완료

。한국어 리소스 파일 생성됨

。strings.xml (ko)열고 한국어 리소스 파일 작성하기

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Ch9_Resource</string>
    <string name="intro_main">
        Messenger에서 휴대폰 연락처에 있는 사람들을 찾아보세요
    </string>
    <string name="intro_detail">
        연락처를 계속 업로드하면 Facebook 및 Messenger에서 연결된 연락처를 추천하고 회원님과 다른
        사람들에게 더욱 관련성 높은 광고를 표시하여 더 나은 서비스를 제공하는 데 도움이 됩니다.
    </string>
    <string name="intro_more">더 알아보기</string>
    <string name="intro_button">설정</string>
    <string name="intro_delay">나중에 하기</string>
</resources>

 

 3단계  세로 방향 화면 구성하기

。화면을 세로 방향으로 구성하기 위해
    layout 디렉터리에 있는 activity_main.xml 파일에 작성

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/intro"
        android:layout_centerHorizontal="true" />
    <TextView
        android:id="@+id/mainTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:text="@string/intro_main"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:layout_below="@id/imageView"
        android:layout_marginTop="20dp" />
    <TextView
        android:id="@+id/detailTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro_detail"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:layout_below="@id/mainTextView"
        android:layout_marginTop="20dp" />
    <TextView
        android:id="@+id/delayTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro_delay"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="20dp" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro_button"
        android:background="@drawable/round_button"
        android:textColor="#FFFFFF"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/delayTextView"
        android:layout_marginBottom="20dp" />
</RelativeLayout>

 

 4단계  가로 방향 화면 구성하기

。layout 디렉터리 마우스 오른쪽 버튼 클릭

    1. [New → Layout Resource File] 메뉴 선택

    2. File name에 activity_main이라고 입력

    3. Available qualifiers에서 [Orientation] 선택

    4. 오른쪽 화살표 버튼(>>) 클릭

。Screen orientation 항목을 펼쳐서 [Landscape] 선택 후 완료

。가로 방향 레이아웃 리소스 파일 생성됨

。activity_main.xml (land) 열고 가로 방향일 때 화면 구성하는 코드 작성하기

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">
    <TextView
        android:id="@+id/mainTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro_main"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:layout_marginTop="20dp" />
    <TextView
        android:id="@+id/detailTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro_detail"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:layout_below="@id/mainTextView"
        android:layout_marginTop="20dp" />
    <TextView
        android:id="@+id/delayTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro_delay"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="20dp" />
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro_button"
        android:background="@drawable/round_button"
        android:textColor="#FFFFFF"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/delayTextView"
        android:layout_marginBottom="20dp" />
</RelativeLayout>

 

 5단계  앱 실행하기

 

 6단계  화면 회전 테스트하기

。에뮬레이터 화면에서 맨 위쪽 영역 마우스로 끌어 내린 후
    시스템 트레이 열리면 자동 회전 옵션 키기

 실행 결과 

 

 7단계  기기의 언어를 한국어로 설정하기

。앱 목록에서 Settings 앱을 실행

    1. 메뉴에서

    2. [System  → Languages & Input → Languages → Add a language] 선택

    3. 언어 목록에서 [한국어 → 대한민국] 을 선택

    4. 한국어 항목 추가되면 오른쪽에 있는 아이콘(=) 맨 위로 끌어서

    5. 순서를 1번으로 바꿈

    6. 다시 앱 실행하면 한국어로 나옴

 실행 결과