[11-D2][UI 설계] 지역화(국제화), ImageView, RelativeLayout, 한글 Encoding

[11-D2][UI 설계] 지역화(국제화), ImageView, RelativeLayout, 한글 Encoding

[01] 지역화(국제화)
     - layout 설계시 values-en이 기본 사용됨.
     - 실행시 대상 기기의 지역에 따라 선택되어 자동 실행됨.
     - 지역 변경: menu -- setting -- Locale & Text -- Select locale -- 한국어
    
            
1. 문자열 데이터의 지역화
   - 사용 가능 값: en, fr, es, zh, ja, ko, de,fi
   - 영어권: /res/values-en/string.xml
   - 한국어: /res/values-ko/string.xml

 

2. 이미지 데이터의 지역화
   - 사용 가능 값: en, fr, es, zh, ja, ko, de,fi
   - 영어권: /res/drawable-en-ldpi, /res/drawable-en-mdpi, /res/drawable-en-hdpi
   - 한국어: /res/drawable-ko-ldpi, /res/drawable-ko-mdpi, /res/drawable-ko-hdpi

 

[02] ImageView
   - import android.widget.ImageView;
   - View --> ImageView: 이미지를 넣을 수 있는 View Class
   - View --> ImageView --> ImageButton: 이미지를 넣을 수 있는 버튼 클래스
   - jpg, png, gif 지원, png는 알파채널이 있어 투명도를 적용 할 수 있는 기능도 지원함.
   - SDK 1.5이하에서는 모든 이미지를 해상도와 상관 없이 /res/drawable폴더에 저장해야 했음.
   - SDK 1.6이상에서는 해상도별 이미지 저장 폴더가 구분되며 가상 머쉰이 자동으로 선별하여 사용함.
     drawable_ldpi: 120px의 이미지, 아이콘은 36px,
     drawable_mdpi: 160px의 이미지, 아이콘은 48px,
     drawable_hdpi: 240px의 이미지, 아이콘은 72px
   - android:src: 출력될 이미지의 경로 지정, @drawable/ID형식으로 이미지의 id 지정.
   - maxHeight, maxWidth: 이미지의 최대 크기, 종횡비가 유지됨으로 출력되는 이미지의 가로세로비가
     다르게 출력 될 수 있다.
   - adjustViewBounds: 출력되는 이미지의 종횡비 유지 여부 지정.

 

 

[03] RelativeLayout
     - 다른 콘트롤에 비례해서 콘트롤의 위치 지정.
     - 뷰를 위치를 설정하기위해 '|' 선언 가능.

1. 부모뷰를 기준으로 설정
     android:layout_marginRight="20px"      : 뷰를 부모의 오른쪽에서 일정 간격 떨어짐
     android:layout_marginTop="60px"        : 뷰를 부모의 위쪽에서 일정 간격 떨어짐
     android:layout_alignParentTop="true"   : 뷰를 부모에서 상단에 배치
     android:layout_centerHorizontal="true" : 뷰를 부모에서 수평 중앙에 배치
     android:layout_alignParentRight="true" : 뷰를 부모에서 오른쪽에 배치
     android:layout_alignParentLeft="true"  : 뷰를 부모에서 왼쪽에 배치
     android:layout_centerVertical="true"   : 뷰를 부모에서 수직 중앙에 배치
     android:layout_centerInParent="true"   : 뷰를 수직, 수평의 중앙에 배치
     android:layout_alignParentBottom="true": 뷰를 부모에서 하단에 배치

2. 주변에 배치된 뷰를 기준으로
     android:layout_toRightOf="@id/idname"    : 특정 뷰의 오른쪽에 배치
     android:layout_toLeftOf="@id/idname"     : 특정 뷰의 외쪽에 배치
     android:layout_alignBaseline="@id/idname": 뷰와 같은 라인에 배치
     android:layout_below="@id/idname"        : 뷰의 아래에 배치
     android:layout_above="@id/idname"        : 뷰의 위에 배치
     android:layout_alignRight="@id/idname"   : 뷰의 오른쪽에 배치
     android:layout_alignLeft="@id/idname"    : 뷰의 왼쪽에 배치
     android:layout_alignTop="@id/idname"     : 뷰의 위쪽에 배치

   - 예) [TEL][SMS]의 경우
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnSms"
        android:layout_marginLeft="1px"
        android:text="SMS"
        android:textSize="16px"
        android:layout_alignParentRight="true"
    />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnTel"
        android:layout_marginLeft="6px"
        android:text="TEL"
        android:textSize="16px"
        android:layout_toLeftOf="@id/btnSms"
        />

 

 

[03] 실습

1. 프로젝트 생성
   - Project Type: Android Project
     Project name: Relative_4
     Application name: Relative_4
     Package name: test.Relative
     Create Activity(Activity name): Relative
     Min SDK Version: 4

 

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

<!-- android:gravity: 자식 뷰의 정렬
      android:layout_gravity: 부모를 기준으로한 정렬   -->
<RelativeLayout android:id="@+id/RelativeLayout01" android:layout_width="fill_parent" android:gravity="center_horizontal" android:background="#FF0000" android:layout_height="200px">
<Button android:id="@+id/Button01" android:layout_height="wrap_content" android:text="SMS" android:layout_width="100px"
></Button>
<Button android:id="@+id/Button02" android:layout_height="wrap_content" android:layout_below="@+id/Button01" android:text="TEL" android:layout_width="100px"></Button>
</RelativeLayout>
<RelativeLayout android:id="@+id/RelativeLayout02" android:layout_width="fill_parent" android:layout_height="150px" android:background="#00FF00">
<Button android:id="@+id/Button03" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="SMS"></Button>

<Button android:layout_toRightOf="@+id/Button03"
android:id="@+id/Button04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TEL"></Button>

</RelativeLayout>
<RelativeLayout android:id="@+id/RelativeLayout03" android:layout_width="fill_parent" android:layout_height="150px" android:background="#0000FF">
<Button android:id="@+id/Button05" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TEL" android:layout_alignParentRight="true" android:layout_alignParentBottom="true"></Button>

<Button android:layout_toLeftOf="@+id/Button05" android:id="@+id/Button06" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="SMS" android:layout_alignParentBottom="true"></Button>
</RelativeLayout>

</LinearLayout>

 

[04] 실습

1. 프로젝트 생성
   - Project Type: Android Project
     Project name: ImageViewTest_4
     Application name: ImageViewTest_4
     Package name: test.ImageViewTest
     Create Activity(Activity name): ImageViewTest
     Min SDK Version: 4

 

2. 이미지 저장 및 변환
   - Ubuntu - GIMP Image Editor
   - Ubuntu 10.04부터는 우분투 소프트웨어 센터에서 설치해야함.

 

3. 문자열

>>>>> res/values-en/string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, ImageViewTest!</string>
    <string name="app_name">ImageViewTest</string>
<string name="txvName">Ga Gil Dong</string>
<string name="txvAddress">Seoul Korea </string>
<string name="btnCall">CALL</string>
</resources>

 

>>>>> res/values-ko/string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">ImageViewTest!</string>
    <string name="app_name">이미지뷰어 테스트</string>
<string name="txvName">가 길 동</string>
<string name="txvAddress">서울 대한민국 </string>
<string name="btnCall">전화</string>
</resources>

 

3. View 생성 및 배치
   - Layout 파일명은 영어 소문자 및 숫자, _만 가능함.

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

<RelativeLayout android:id="@+id/RelativeLayout01" android:layout_height="wrap_content" android:layout_width="fill_parent">
<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
                   android:src="@drawable/memo"
android:id="@+id/img"/>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/img" android:id="@+id/TextView01" android:text="@string/txvEtc" android:paddingTop="10px"></TextView><TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/txvName" android:text="@string/txvName" android:layout_toRightOf="@+id/img" android:paddingLeft="10px"></TextView>

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/btnCall" android:layout_alignParentRight="true" android:id="@+id/btnCall"></Button>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/txvAddress" android:text="@string/txvAddress" android:layout_toRightOf="@id/img" android:layout_below="@+id/txvTel" android:paddingLeft="10px"></TextView>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toRightOf="@id/img" android:id="@+id/txvTel" android:layout_below="@id/txvName" android:text="@string/txvTel" android:paddingLeft="10px"></TextView>

</RelativeLayout>
</LinearLayout>

 

4. Class(event)

>>>>> src/test.LinearLayoutTest.LinearLayoutTest.java
package test.ImageViewTest;

import android.app.Activity;
import android.os.Bundle;

public class ImageViewTest extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

 

[참고] Eclipse의 한글 Encoding 설정
       - Windows XP에서 작업된 한글이 깨질경우 아래의 인코딩을 지정합니다.
       - Eclipse -- Window -- Preferences -- General -- Contents Types -- Text -- Java Source File -- Default Encoding
             'euc-kr'로 지정 후 UPDATE