KOTLIN

[Kotlin] 공부 12일차 (2022-01-26)

HJ39 2022. 1. 28. 18:54

폰 크기의 호환성

9장 실습

 

  • 리소스 종류와 특징

리소스 : 정적 자원, 많이 사용할수록 코드를 더 간결하게 작성이 가능하다.

 

  • 앱 리소스 사용하기
디렉터리명 리소스 종류 디렉터리명 리소스 종류
animator 속성 애니메이션 XML mipmap 앱 실행 아이콘 리소스
anim 트윈 애니메이션 XML layout 레이아웃 XML
color 색상 상태 목록 정의 XML menu 메뉴 구성 XML
drawable 이미지 리소스 raw 원시 형태로 이용되는 리소스 파일
values 단순 값으로 이용되는 리소스 xml 특정 디렉터리가 정의되지 않은 나머지 XML파일
font 글꼴 리소스    

→ 표에 있는 리소스 디렉터리는 고정이고 res 디렉터리 아래에 개발자가 임의로 이름을 붙인 디렉터리를 만들 수 없고 하위 디렉터리에 추가할 수 없다.

→ valuse에 추가하는 파일을 제외하고 모두 자바의 이름 작성 규칙을 지켜야 하며 알파벳 대문자를 사용할 수 없다.

 

 

→ 레이아웃 리소스 - layout 디렉터리

화면을 구성하는 레이아웃 XML 파이을 저장하는 디렉터리이다.

 

→ 이미지 리소스 - drawable 디렉터리

이미지 리소스를 저장하는 디렉터리이다.

PNG, JPG, GIF, 9.PNG 파일을 저장 가능하다.(XML로 작성된 이미지도 저장 가능)

 

→ XML 이미지 제작 규칙

태그 설명
<shape> 도형을 의미하고 android:shape="rectangle"처럼 shape 속성을 이용해 도형의 타입을 지정
shape값은 rectangle, oval, line, ring중에서 선택 가능
<corners> 둥근 모서리를 그리는데 사용 
shape값이 rectangle일때 사용가능
<gradient> 그라데이션 색상 지정
<size> 도형의 크기 지정
<solid> 도형의 색상 지정
<stroke> 도형의 윤곽선 지정

 

→ 실행 아이콘 리소스 - mipmap 디렉터리

앱을 기기에 설치하면 나타나는 시행 아이콘의 이미지 리소스가 저장되는 디렉터리

 

→ 값 리소스 - values 디렉터리

값으로 이용되는 리소스를 저장하는 디렉터리

문자열, 색상, 크기, 스타일, 배열 등의 값을 XML로 저장할 수 있다.

 

values 디렉터리에 저장되는 리소스는 문자열 이외에도 색상, 크기, 스타일 등이 있다.

색상 : color태그로 등록

크기 : dimen태그로 등록

 

□ 코드에서 색상과 크기 리소스 사용

binding.textView.text = getString(R.string.txt_data2)
binding.textView.setTextColor(ResourcesCompat.getColor(resources,R.color.txt_color,null))
binding.textView.setTextSize(resources.getDimension(R.dimen.txt_size))

values 디렉터리의 리소스 파일만 파일이 아닌 태그를 R 파일에 등록한다.

 

→ 색상 리소스 - color 디렉터리

특정 뷰의 상태를 표현하고 그 상태에 적용되는 생상을 등록할 때 사용한다.

 

□ 색상 리소스 등록

<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_pressed="true"
		android:color="#ffff0000"/>
</selector>

<item> 태그를 이용해 이 리소스가 적용될 뷰의 상태와 그 상태일 때의 색상을 지정

 

→  글꼴 리소스 - font 디렉터리

글꼴 리소스를 저장

TTF, OTF파일을 저장한 후 글꼴을 적용할 뷰에서 사용하면 된다.

 

  • 플랫폼 리소스 사용

앱 개발자가 res 디렉터리에 추가하는 것은 앱 리소스이다.

플랫폼 리소스 : 안드로이드 플랫폼이 제공하는 많은 리소스

안드로이드 탐색 창 -> packages -> Libraries

 

R 파일에 등록된 식별자로 이용 가능하다.

 

□ 안드로이드 플랫폼 이미지 사용 방법

android:src="android:drawable/alert_dark_Frame"

 

  • 리소스 조건 설정

어떤 리소스를 특정 환경에서만 적용되도록 설정하는 것

 

□ 기기별 실행 아이콘 크기

화면밀도 크기 화면밀도 크기
XXXHDPI 192 X 192 XXHDPI 144 X 144
XHDPI 96 X 96 HDPI 48 X 48
MDPI 36 X 36    

대부분 앱을 개발할 때 아이콘이 선명하게 출력되도록 기기 크기별로 이미지를 5개씩 준비한다.

 

→ 리소스 디렉터리 이름에서 붙임표(-) 뒤의 단어가 리소스 조건이다.

만약 아이콘의 파일명이 모두 ic_launcher.png인 경우 R파일에는 식별자 하나만 생성된다.

그런데 이렇게 되면 파일명이 중복되는 문제가 발생되는데 이런 문제를 해결하기 위해 이름이 같은 파일을 하나의 디렉터리가 아닌 mipmap-mdpi, mipmap-hdpi처럼 각각의 디렉터리에 담는다.

 

이 외에도 많은 리소스 조건이 있다 (Doit! 깡샘의 안드로이드 앱 프로그래밍 with 코틀린 247page 참조)

 

  • 화면 회전에 대응하기

화면 회전에 대응하려면 가로와 세로 방향일 때 출력할 레이아웃 XML 파일을 각각 준비해야 한다.

 

□ 세로 방향 레이아웃 XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:src="@drawable/image"/>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:src="@drawable/image2"/>
</LinearLayout>

 

□ 가로 방향 레이아웃 XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/image"/>

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/image2"/>
</LinearLayout>

두 방향의 SML파일을 만들었는데 두 파일의 이름이 같다.

세로 방향일 때의 파일을 layout디렉터리에 저장하고 가로 방향일 때의 파일을 layout-land로 저장하면 된다.

 

  • 국제 언어 제공하기

글로벌 서비스를 제공하는 앱이라면 리소스 문자열을 각국 언어로 제공해야 한다.

각국의 언어로 된 파일을 저장할 때 name값은 같아야 한다. 두 파일의 리소스 조건을 명시한 각각의 디렉터리에 만들면 된다.( 한국어 파일인 경우 values-ko-rKR 디렉터리에 저장하면 된다)

 

 

  • 폰 크기의 호환성

안드로이드 시스템에서 도와주는 부분이 있고 개발자가 직접 코드에서 해결해야 하는 부분이 있다.

 

  • 논리적인 단위
크기 설명
ldpi 저밀도 화면 ~120dpi
mdpi 중밀도 화면 ~160dpi
hdpi 고밀도 화면 ~240dpi
xhdpi 초고밀도 화면 ~320dpi
xxhdpi 초초고밀도 화면 ~480dpi
xxxhdpi 초초초고밀도 화면 ~640dpi

dpi : dots per inch , 1인치 안에 있는 도트의 개수

논리적인 단위를 사용하지 않고 물리적인 단위를 사용할 경우 시스템의 도움을 받을 수 없다.

 

□ 안드로이드 앱 개발할 때 크기 지정에 사용할 수 있는 단위

단위 설명
dp(density-independent pixels) 스크린의 물리적 밀도에 기반을 둔 단위
sp(scale-independent pixels) dp와 유사하며 글꼴 크기에 적용
pt(points) 스크린 크기의 1/72을 1pt로 함
px 픽셀
mm 밀리미터
in 인치

 

  • 화면 정보 가져오기

개발자가 크기를 직접 코드에서 조정할 수 있다.

 

DisplayMetrics : 기기의 다양한 크기 정보를 제공

widthPixels 가로 화소 수
heightPixels 세로 화소 수 
densityDpi 화면 밀도
density mdpi를 기준으로 한 배율, 스케일링할 때 곱하는 값
scaleDensity 문자열 스케일링할 때 곱하는 값
xdpi 정확한 가로 밀도
ydpi 정확한 세로 밀도

 

  • 9장 실습

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

가로 모드, 세로 모드 한글, 영어 버전으로 제작되었다.

 

□ 영어 버전 string.xml

<resources>
    <string name="app_name">Ch09_Resource</string>
    <string name="intro_main">
        Find your phone contatct on Messenger
    </string>
    <string name="intro_detail">
        Continuously uploading your contacts helps Facebook and Messenger suggest connections and provide and improve ads for your and others, and offer and better service
    </string>
    <string name="intro_more">
        Learn More
    </string>

    <string name="intro_button">
        TRUN ON
    </string>

    <string name="intro_delay">
        NOT NOW
    </string>
</resources>

□ 한글 버전 string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Ch09_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>

 

□ 세로 모드 XML 파일

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/intro"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/mainTextView"
        android:text="@string/intro_main"
        android:textSize="20dp"
        android:layout_centerHorizontal="true"
        android:textStyle="bold"
        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>

□ 가로 모드 XML 파일

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/mainTextView"
        android:text="@string/intro_main"
        android:textSize="20dp"
        android:layout_centerHorizontal="true"
        android:textStyle="bold"
        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>

실습을 따라 하다 보니 리소스를 사용해서 프로그램 만드는 것이 익숙해져 가는 것 같다.

 

12일 차 공부 끝!