Part2 가 시작되었습니다.

전체 강좌 목차
[강좌A01] Moteodev Studio를 이용한 안드로이드 개발 환경 구축 가이드
[강좌A02] 안드로이드 개발 참고 서적 소개
[강좌A03] Android 실전 개발 - 아이디어 / 기획 / Wireframe
[강좌A04] 안드로이드 실전 개발 - 아이콘 제작
[강좌A05] 안드로이드 실전 개발 - 레이아웃 및 리소스 : Part1
[강좌A05] 안드로이드 실전 개발 - 레이아웃 및 리소스 : Part2

 

이제부터는 버튼 관련 리소스 xml을 정의해 보도록 하겠습니다.

Info_grayed.png
info_clicked.png  

1번 이미지는 앱의 정보를 볼 수 있는 이미지 버튼 스타일의 ImageView 입니다. (디퐅트 이미지:info.png, 클릭 이미지:info_clicked.png) 클릭시 팝업 대화상자가 나타날 겁니다. 디폴트로 회색 이미지였다가 클릭시 배경색이 블루로 변경됩니다. . 이 이미지는 iconWorkshop에 있는 이미지를 32*32로 맞추고, grayscale로 변환하여 회색 배경의 이미지로 만들었습니다.

 

Android에서 클릭시 이미지를 변경되는 효과를 주기 위해서 물론 코딩으로도 처리할 수 있지만, xml로 간단히 구현할 수 있습니다. 아래 코드처럼 xml 문서를 만드신 후 drawable 디렉토리에 저장합니다.


button_info.xml


<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true"

android:state_pressed="false"

android:drawable="@drawable/info_clicked" />

    <item android:state_focused="true"

android:state_pressed="true"

android:drawable="@drawable/info_clicked" />

    <item android:state_focused="false"

android:state_pressed="true"

android:drawable="@drawable/info_clicked" />

    <item android:drawable="@drawable/info"/>

</selector>


Selector element 하위에 item element가 들어갑니다. Item element의 attribute를 보시면 다음의 4가지로 나누어져 있습니다.
android:state_focused="true" android:state_pressed="false" 포커스를 가지고 있으면서 누르지 않은 상태.(보통 클릭 후 상태)
android:state_focused="true" android:state_pressed="true" 포커스를 가지고 있으면서 누른 상태 android:state_focused="false" android:state_pressed="true" 포커스는 없으면서 누른 상태 아무런 속성 설정이 없는 것은 디폴트 상태. 입니다.

Custom EditText 같은 경우에는 위 4가지 속성에 따라서 배경이미지를 다르게 줄 수 있으나, 저희는 클릭시에만 다른 이미지를 보여 줄 것이므로, 디폴트 상태값에는 info.png를 할당하고, 나머지 클릭 상태값에는 info_clicked.png를 설정했습니다.
그림에서 4번 이미지와 5번 이미지는 clipboard copy 및 record delete를 위한 버튼(이미지)입니다. 버튼 클릭시 배경색을 주황색으로 바꿔 주도록 효과를 주기 위해서 이미지를 제작하신 후 button_info.xml과 동일한 스타일로 xml 문서를 만들어 drawable 디렉토리에 저장합니다.

button_copy_clipboard.xml


<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true"

android:state_pressed="false"

android:drawable="@drawable/copy_clipboard_clicked" />

    <item android:state_focused="true"

android:state_pressed="true"

android:drawable="@drawable/copy_clipboard_clicked" />

    <item android:state_focused="false"

android:state_pressed="true"

android:drawable="@drawable/copy_clipboard_clicked" />

    <item android:drawable="@drawable/copy_clipboard" />

</selector>


button_delete_record.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_focused="true"

android:state_pressed="false"

android:drawable="@drawable/delete_record_clicked" />

    <item android:state_focused="true"

android:state_pressed="true"

android:drawable="@drawable/delete_record_clicked" />

    <item android:state_focused="false"

android:state_pressed="true"

android:drawable="@drawable/delete_record_clicked" />

    <item android:drawable="@drawable/delete_record" />

</selector>


다음은 6번 이미지를 위한 xml을 보도록 하겠습니다. 저희 앱에 구지 필요 없는 항목이긴 하지만, UI를 좀 더 미려하게 보이게 하기 위해서 추가했습니다. 코드는 다음과 같습니다.

shape_title_indicator.xml


<?xml version="1.0" encoding="UTF-8"?> 

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 

    <stroke android:width="2dip"  android:color="#19CD00" />

    <corners android:bottomRightRadius="1dip" android:bottomLeftRadius="1dip" 

             android:topLeftRadius="1dip" android:topRightRadius="1dip"/> 

    <padding android:left="1dip" android:top="1dip"

             android:right="1dip" android:bottom="1dip" />

</shape>



이 코드는 기본 도형들을 xml로 정의하는 방법입니다. Shape를 line으로 지정하여 선을 만들수도 있으며 oval 로 지정하여 타원형을 만들수도 있습니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">

   <stroke android:width="1dp" android:color="#FF000000"

           android:dashWidth="1dp" android:dashGap="2dp" />

</shape>



<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

    <solid android:color="#00000000"/>

    <stroke android:width="4dp" android:color="#99000000"

            android:dashWidth="4dp" android:dashGap="2dp" />

    <padding android:left="7dp" android:top="7dp"

             android:right="7dp" android:bottom="7dp" />

    <corners android:radius="4dp" />

</shape>


Stroke 는 테두리를 그리는 것을 말합니다. dashWidth와 dashGap은 점선을 그릴 때 사용합니다.
Solid는 단색으로 채워 넣는 것을 말하며, gradient는 단색대신 그라디언트 효과를 줄 수도 있습니다

<gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"

.        android:angle="270"/>


Corners는 가장자리를 둥글게 처리하는 것을 말합니다. Padding은 안쪽 여백을 주는 것입니다. 저희 코드가 이해가 가십니까? 저희 코드는 두께가 2dip인 둥근 사각형입니다. 여백을 주었기 때문에 ImageView 사이즈보다 약간 작게 나오게 됩니다. 그래야 우측 텍스트와 크기를 비슷하게 맞출수 있어서 패딩으로 조정했습니다. 실제 ImageView에 xml을 할당할 때 width를 4dip밖에 주지 않을 것이므로 두꺼운 모서리가 둥근 직선으로 보이게 됩니다.


다음은 문자열을 편집하도록 하겠습니다. Motodev에서 res/values/string.xml 파일을 더블 클릭하여 엽니다. 아래 그림과 같이 편집합니다.


Motodev를 사용하기 때문에 여러 언어를 표 형태의 편집창에서 바로 편집할 수 있어서 편리합니다. 문자열 입력값은 XML 문서 안에 정의되므로 XML 문법에 허용되지 않는 문자열은 입력하시면 에러가 납니다. 저희 앱의 Info 팝업창을 만들 때(뒤쪽 편에 있습니다.) 엔터가 들어간 긴 문장을 TextView에 표시하기 위해서 xml에 문자열 값을 CDATA 섹션에 넣어서 처리를 해 보려고 했으나 제대로 처리가 되지 않았습니다. 특수문자들은 CDATA 안에 넣어서 처리할 수 있습니다. 엔터가 들어간 여러줄의 텍스트를 표현하려면 아직 제가 해본 바로는 각각의 문장을 문자열로 만들어서 프로그램에서 Html.fromHtml() 메소드 처리시 문장마다 <br/>태그를 넣어주거나, 레이아웃에서 여러 개의 TextView를 만들어 사용하시는 것도 한가지 방법입니다.

그리고 label_title_main의 값처럼 <u><b>태그를 추가하여 타이틀 텍스트에 밑줄과 볼드체효과를 줄 수 있습니다. <u><b><i>태그값은 string의 value값으로 바로 정의할 수 있습니다.

이제 drawable에 들어갈 항목을 모두 정의했습니다. 이제부터 메인 레이아웃을 작성하도록 하겠습니다. 프로젝트 생성시 자동으로 만들어진 res/layout/main.xml 파일을 열어서 다음과 같이 편집합니다.

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"

    >

         <!-- 상단 타이틀바 -->                     

         <LinearLayout android:layout_width="fill_parent"

                       android:layout_height="wrap_content"

                       android:orientation="horizontal"

                       android:background="@drawable/layout_box_bg">

                  <ImageView android:layout_width="4dip"              

                             android:layout_height="20dip"

                             android:layout_marginLeft="3dip"

                             android:layout_gravity="center_vertical"

                             android:src="@drawable/shape_title_indicator"/>

                                                       

                  <TextView android:layout_width="fill_parent"

                           android:layout_height="wrap_content"

                           android:layout_marginLeft="6dip"

                           android:layout_gravity="center_vertical"

                           android:layout_weight="1"

                           android:paddingTop="4dip"

                           android:paddingBottom="2dip"

                           android:textColor="#FFFFFF"

                           android:textSize="16sp"

                           android:text="@string/label_title_main"/>  

                                  

                  <ImageView android:id="@+id/button_info"

                           android:layout_height="32dip"

                           android:layout_width="32dip"

                           android:layout_gravity="right|center_vertical"

                           android:background="@null"

                           android:src="@drawable/button_info"/>                                 

                                                          

         </LinearLayout>

        

         <!-- 상단 한글/영문 입력창  -->

         <LinearLayout android:layout_width="fill_parent"

                       android:layout_height="wrap_content"

                       android:orientation="vertical"

                       android:background="@drawable/layout_box_bg_large">

                       

                  <LinearLayout android:layout_width="fill_parent"

                                android:layout_height="wrap_content"

                                android:orientation="horizontal"  >

                           <TextView android:layout_width="55dip"

                                     android:layout_height="wrap_content"

                                      android:layout_gravity="center_vertical"

                                     android:layout_marginLeft="10dip"

                                     android:textColor="#FFFFFF"

                                     android:textSize="16sp"

                                     android:text="@string/label_password"/>

                           <EditText android:id="@+id/text_password"

                                     android:layout_width="wrap_content"

                                     android:layout_height="38dip"

                                     android:textSize="12sp"

                                     android:layout_weight="1"/>

                           <ImageButton android:id="@+id/button_remove"

                                   android:layout_height="38dip"

                                   android:layout_width="38dip"

                                    android:scaleType="centerCrop"

                                   android:layout_marginLeft="3dip"

                                   android:layout_gravity="right"

                                 android:src="@drawable/remove"/>                                                                  

             </LinearLayout>           

             

             <LinearLayout android:layout_width="fill_parent"

                           android:layout_height="wrap_content"

                           android:orientation="horizontal" >

                          

<TextView android:layout_width="55dip"

                                      android:layout_height="wrap_content"

                                      android:layout_gravity="center_vertical"

                                      android:layout_marginLeft="10dip"

                                      android:textColor="#FFFFFF"

                                      android:textSize="16sp"

                                      android:text="@string/label_english"/>

 

                           <EditText android:id="@+id/text_english"

                                      android:layout_width="wrap_content"

                                      android:layout_height="38dip"

                                     android:textSize="12sp"

                                     android:layout_weight="1"

                                              />

                      <ImageButton android:id="@+id/button_copy"

                                   android:layout_height="38dip"

                                   android:layout_width="38dip"

                                   android:scaleType="centerCrop"

                                   android:layout_marginLeft="3dip"

                                   android:layout_gravity="right"

                                   android:src="@drawable/copy"/>             

             </LinearLayout>                     

         </LinearLayout>

        

         <Button android:id="@+id/button_save"

                 android:layout_width="fill_parent"

                 android:layout_height="wrap_content"

                 android:layout_marginTop="4dip"

                 android:drawableLeft="@drawable/save"

                 android:gravity="center"

                 android:text="@string/save"/>       

                

         <!-- list Layout -->

         <LinearLayout android:orientation="vertical"

                  android:layout_width="fill_parent"

                  android:layout_height="fill_parent"

                  android:background="@null"

                  android:layout_weight="1">

                          

                  <ListView android:id="@+id/android:list"

                           android:layout_width="fill_parent"

                           android:layout_height="fill_parent"

                           android:drawSelectorOnTop="false"/>

        

                  <TextView android:id="@+id/list_empty"

                           android:layout_width="fill_parent"

                           android:layout_height="fill_parent"

                           android:gravity="center_horizontal|center_vertical"

                           android:textSize="20sp"

                           android:paddingTop="50dip"

                           android:text="" />

        

         </LinearLayout>           

</LinearLayout>




LinearLayout만을 사용하여 UI 요소들을 배치했습니다.

상단 타이틀바 영역을 보시면 가운데 TextView 항목만 android:layout_weight="1" 로 주어졌습니다.  화면이 커지고 작아졌을 때 가운데 TextView만 가중치를 주어 늘어나고 줄어들도록 처리했습니다. 다른 부분들도 마찬가지입니다.

 

하단의 리스트뷰 정의 부분을 보시면 <ListView android:id="@+id/android:list" 아이디를 설정하는 부분이 다른 것과 좀 다릅니다. 저희는 메인 화면에 리스트가 들어갈 것이고, 코딩을 좀 더 간단히 처리하기 위해서 ListActivity에서 상속받을 것입니다. ListActivity에서 상속을 받아서 리스트 처리를 할 때는 반드시 아이디를 위와 같이 기술하셔야 합니다.

 

나머지 레이아웃 소스는 그 동안 책을 보셨다면 대부분 아실 내용입니다. 책을 안 보셨더라도 속성명만 가지고도 대충 알 수 있을 겁니다. 저는 여기서 상세한 설정 정보에 대해서 설명하기 보다는 ImageView ImageButton의 사이즈 설정에 대해서 애기를 좀 하겠습니다.

 

먼저 레이아웃 소스 중 타이틀영역의 Info 버튼 이미지 부분 입니다.

<ImageView android:id="@+id/button_info"

           android:layout_height="32dip"

           android:layout_width="32dip"

           android:layout_gravity="right|center_vertical"

           android:background="@null"

           android:src="@drawable/button_info"/>


ImageView
사이즈가 가로, 세로 모두 32dip 입니다.
저희 이 info 이미지를 hdpi 폴더에 48*48 크기로 만들어 두었습니다. ImageView src 속성에 지정되는 이미지는 로딩시에 pre-scaling이 됩니다. hdpi 폰 에서는 저희가 만들어둔 hdpi 폴더의 이미지 사이즈 그대로 48*48 크기의 이미지가 로딩되며, mdpi에서는 48/1.5 = 32 , 32*32 크기 이미지로 축소되어서 로딩됩니다. 그리고 ImageView가 화면에 그려질 때 scaleType 속성값에 지정된 값에 따라서 다시 스케일이 조정될 수도 있지만, scaleType을 지정하지 않으면 디폴트값이 center 속성값이 지정됩니다. center는 따로 스케일 조정을 하지 않는 옵션이므로 ImageView에는 저희가 계획한대로 hdpi에서는 48*48 크기로, mdpi에서는 32*32 크기로 이미지가 화면에 그려집니다.


다음은 ImageButton 부분 최종 소스입니다.

<ImageButton android:id="@+id/button_copy"

             android:layout_height="38dip"

             android:layout_width="38dip"

             android:scaleType="centerCrop"

             android:layout_marginLeft="3dip"

             android:layout_gravity="right"

             android:src="@drawable/copy"/>


 

ImageButton 이게 골 때리는 겁니다. ImageView는 우리가 원하는 대로 정확하게 동작합니다. 하지만 이미지 버튼은 그렇지가 않습니다.

 

먼저 아래의 소스를 보겠습니다. 최종 소스와 다른 점은 ImageButton View의 가로 세로사이즈가 32dip이며 scaleType을 지정하지 않았기 때문에 center 값으로 동작합니다. , 이미지를 draw할 때 별다른 scale 작업을 하지 않습니다. 저희가 이 ImageButton에 사용할 아이콘을 Info icon과 동일하게 hdpi 폴더에 48*48 사이즈로 만들어 두었습니다.

 

32*32 size ImageButton의 레이아웃을 설정했을 때.

 <ImageButton android:id="@+id/button_copy"

             android:layout_height="32dip"

             android:layout_width="32dip"

             android:layout_marginLeft="3dip"

             android:layout_gravity="right"

             android:src="@drawable/copy"/>


ImageView
와 동일한 방식으로 쉽게 생각하여 hdpi 화면에서 48*48 사이즈로 이미지를 로딩하면

~ 이 이미지처럼 버튼 형태의 디자인보다 이미지가 더 커져 버립니다.

 

왜 이럴까요? 버튼의 경우에는 버튼처럼 보이게 하기 위해서 버튼 배경 이미지가 뒤에 깔립니다. 그래서 이런 모습으로 보입니다. 버튼을 나타내는 ImageButton View의 크기를 우리가 제작한 이미지 보다 크게 그려야 합니다. 참고로 이미지 버튼 xml 설정값에서 android:background="@null" 이라고 설정을 추가하면 ImageButton의 버튼 배경이미지가 없어지고, ImageView와 동일한 형태가 되어 버립니다.

 

아래 코드는 위의 단점을 보완하기 위해서 scaleType은 설정하지 않고 ImageButton의 크기만 키웠습니다. 어찌 될까요?

<ImageButton android:id="@+id/button_copy"

             android:layout_height="38dip"

             android:layout_width="38dip"

             android:layout_marginLeft="3dip"

             android:layout_gravity="right"

             android:src="@drawable/copy"/>

좀 낫습니다. 그래도 너무 꽉 차 보이는 군요. 제가 원하는 바는 아닙니다. 그렇다면 ImageButton의 경우 내부에 그림이 그려질 정확한 영역은 얼마일까요? 아래 그림은 WVGA800 화면의 내용을 Android SDK Tools 폴더 하위에 있는 hierarchyviewer.bat 툴로 살펴본 모습니다. 해당 ImageButton을 클릭해보니 width, height값이 57(우리가 Layout에서 38dip를 지정했고, hdpi 모드에서는 38 * 1.5 = 57이 됩니다)이며, padding 값이 mPaddingBottom=17, mPaddingTop=10, mPaddingLeft=16, mPaddingRight=17 값으로 나타납니다.

좀 알기쉽게 그림으로 나타내면 다음과 같습니다.


물론, 이것도 저희가 원하는 바는 아닙니다. 다음은 scaleType=”centerCrop” 로 설정한 소스입니다.


<ImageButton android:id="@+id/button_copy"

             android:layout_height="38dip"

             android:layout_width="38dip"

             android:scaleType="centerCrop"

             android:layout_marginLeft="3dip"

             android:layout_gravity="right"

             android:src="@drawable/copy"/>


scaleType=”centerCrop”은 이미지(아이콘)를 중앙에 그릴영역 (30 * 24) 에 맞춘 후 원 이미지의 비율에 맞게 가로(24px) 30px로 늘립니다.(minus padding). 아래 그림과 같이 57 * 57 ImageButton 30*30 아이콘이 생성됩니다. 거의 우리가 원하는 디자인이 된 것 같습니다.

이밖에 scaleType에 대한 다른 옵션에 대한 상세 내용들은 레퍼런스들을 참고하시기 바랍니다.

 

결론적으로 ImageButton에 아이콘을 올릴 경우 다음과 같은 전략을 사용하실 수 있습니다.

 

1. ImageButton View의 사이즈를 38*38 mdpi 기준 레이아웃에서 설정했을 때 res/drawable-hdpi/ 폴더에 30*30 아이콘을 제작해서 넣어둔 후, scaleType를 지정하지 않고(Default : center) 아이콘을 로드하면 pre-scaling 만으로 ImageButton을 그려 넣기 때문에 편리합니다. (32*32로 만들어서 넣어 두어도 보기에 괜챦습니다.)

 

2. 우리 소스처럼 scaleType=”centerCrop”으로 설정하여 보기 좋게 만듭니다. 이 방식은 pre-scaling 이후 draw 시점에 auto-scaling을 한 번 더 하므로 약간의 성능에서 손실을 보지만, 이미지도 몇 개 안되고..크게 무리는 없을 것 같습니다. 저희는 이미 30*30 아이콘이 아닌 48*48로 만들었기 때문에 2번 방식을 사용하도록 하겠습니다.

 

List row Layout

 

다음은 리스트 중 하나의 Item에 대한 레이아웃에 대한 이미지 입니다


위 그림에서 보듯이 list가 단 하나의 항목만 가진게 아니라 여러 항목을 가지고 있다면 별도의 layout을 만들어 adapter에서 처리하는 게 편리합니다. 위 그림을 표현하기 위해 간단하게 레이아아웃을 만들면 다음과 같습니다.

 

아래와 같이 소스를 작성하여 res/layout/ 폴더에 넣습니다.


list_item.xml

 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

           xmlns:android="http://schemas.android.com/apk/res/android"

           android:layout_width="wrap_content"

           android:layout_height="wrap_content">

         <LinearLayout android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:orientation="vertical"

                    android:gravity="left"

                    android:layout_weight="1">

                  <TextView android:id="@+id/korText"

                           android:layout_width="fill_parent"

                           android:layout_height="wrap_content"

                           android:textColor="#FFFFFF"

                           android:textSize="18sp"

                           android:gravity="center_vertical"

                           android:paddingLeft="5dip"

                           android:singleLine="true"/>

         <TextView android:id="@+id/engText"

                           android:layout_width="fill_parent"

                           android:layout_height="wrap_content"

                           android:textColor="#FFF123"

                           android:textSize="20sp"

                           android:gravity="center_vertical"

                           android:paddingLeft="5dip"

                           android:singleLine="true"/>                

                 

    </LinearLayout>

   

    <ImageView android:id="@+id/copyClipboard"

                              android:layout_width="48dip"

                              android:layout_height="48dip"

                              android:layout_marginLeft="5dip"

                              android:layout_marginRight="0dip"

                              android:background="@null"

                              android:src="@drawable/button_copy_clipboard"

                              android:gravity="center_vertical"/>

                             

    <ImageView android:id="@+id/deleteImage"

                              android:layout_width="48dip"

                              android:layout_height="48dip"

                              android:layout_marginLeft="0dip"

                              android:layout_marginRight="0dip"

                              android:background="@null"

                              android:src="@drawable/button_delete_record"

                              android:gravity="center_vertical"/>

</LinearLayout>


 

모 특별한 내용은 없는 것 같아서 소스에 대한 설명은 생략합니다.

 

끝으로 첫번째 레이아웃 이미지에서 Info(1) 버튼 클릭시 아래 그림과 같이 AlertDialog 를 띄울 예정입니다.


alertDialog 화면을 구성할 때 message(단순문자열)말고 view 자체를 add 할 수가 있습니다. Information 화면은 다른 App을 만들 때도 거의 유사한 형태로 사용될 수 있는 재사용성이 높은 UI라서 Layout 뿐만 아니라 string 정보도 별도로 xml을 구성하도록 하겠습니다. 일부 개발자 분들 중 문자열 리소스는 res/values/strings.xml 파일에만 작성해야만 되는 줄로 알고 계신 분들도 많은 것 같은데..꼭 그렇지는 않습니다. stings.xml 과 동일한 형식으로 xml 문서를 만드신 후 /res/values/폴더에 다른 이름으로 저장하시면 됩니다. 앱의 복잡도가 올라가면서 문자열 리소스에 등록한 문자열이 많은 경우에 한 파일로만 작성하시면 관리하기 힘이 듭니다. 모듈별로 만드는 것도 나쁘지 않다고 봅니다.

 

저희 앱의 Info 는 앞에서 얘기했듯이 재사용성이 높으므로 stings-info.xml 문서를 만들어 values/ 폴더와 values-ko/ 폴더에 넣습니다.

 

res/values/strings_info.xml

 <?xml version="1.0" encoding="utf-8" standalone="no"?>

<resources>

         <string name="msg_info_desc">Hangul to English is utility app for converting fro hangul keyboard to english keyboard.</string>

    <string name="msg_info_support_email_desc">Support Email </string>

    <string name="msg_info_support_email">jinook@paran.com</string>

    <string name="msg_info_thanks">Thanks.</string>

    <string name="msg_info_support_url">http://overoid.tistory.com</string>

    <string name="msg_info_support_url_desc">Support Site</string>

    <string name="msg_info_close_button">close</string>

</resources>


res/values-ko/strings_info.xml

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<resources>

         <string name="msg_info_desc">Hangul To English 프로그램(App)은 사용자가 보다 한글로 입력된 패스워드에 해당되는 영문자를 쉽게 찾아주는 앱입니다.</string>

    <string name="msg_info_support_email_desc">문의사항, 건의사항은 이메일로 보내주세요.</string>

    <string name="msg_info_support_email">jinook@paran.com</string>

    <string name="msg_info_thanks">감사합니다.</string>

    <string name="msg_info_support_url">http://overoid.tistory.com</string>

    <string name="msg_info_support_url_desc">상세 메뉴얼 및 프로그램 관련 정보는 아래 사이트를 참고해 주시기 바랍니다.</string>

    <string name="msg_info_close_button">닫기</string>

</resources>

 
그리고 AlertDialog에 넣을 View의 내용을 Layout 파일로 만들어 res/layout/ 폴더에 넣어둡니다.
코딩은 차차 하게 될 것입니다.

res/layout/info.xml


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

           xmlns:android="http://schemas.android.com/apk/res/android"

           android:layout_width="fill_parent"

           android:layout_height="fill_parent"

           android:padding="10dip"

           android:orientation="vertical">

          

           <TextView android:layout_width="fill_parent"

              android:layout_height="wrap_content" 

              android:textSize="12sp"

              android:text="@string/msg_info_desc"/>

             

          <TextView android:layout_width="fill_parent"

              android:layout_height="wrap_content" 

              android:layout_marginTop="20dip"

              android:textSize="12sp"

              android:text="@string/msg_info_support_url_desc"/>

          <TextView android:layout_width="fill_parent"

              android:layout_height="wrap_content" 

              android:textSize="12sp"

              android:linksClickable="true"

              android:autoLink="web"

              android:clickable="true"

              android:text="@string/msg_info_support_url"/>

             

          <TextView android:layout_width="fill_parent"

              android:layout_height="wrap_content" 

              android:layout_marginTop="20dip"

              android:textSize="12sp"

              android:text="@string/msg_info_support_email_desc"/>

          <TextView android:layout_width="fill_parent"

              android:layout_height="wrap_content" 

              android:textSize="12sp"

              android:linksClickable="true"

              android:autoLink="email"

              android:clickable="true"

              android:text="@string/msg_info_support_email"/> 

             

          <TextView android:layout_width="fill_parent"

              android:layout_height="wrap_content" 

              android:layout_marginTop="20dip"

              android:textSize="12sp"

              android:text="@string/msg_info_thanks"/>                  

          

</LinearLayout>


LinearLayout 하위에 TextView만 잔뜩 가지고 있는 Simple View입니다. 중간에 제 블로그 및 email 링크를 위해 몇가지 속성이 추가되었습니다. Android:autoLink email 혹은 web으로 주면 자동으로 링크가 만들어집니다. 또한, android:linksClickable=”true”로 설정하시면 앱 화면에서 링크를 클릭하면 자동으로 웹사이트로 이동하거나 이메일 어플이 실행됩니다. 별다른 코드도 필요없습니다.

 

아래 그림은 최종적으로 만든 layout을 별도의 코딩없이 애뮬에 띄운 모습입니다.
                               [HVGA , 영문 모드에서 실행한 화면]


                              [WVGA800, 한글 모드에서 실행한 화면]


드디어 장문의 레이아웃편이 끝이 났습니다. 파트2에 Syntax Highlight 적용하는데.. 이상하게 먹어서 결국은 다시 빼 버렸네요. 에구..시간만 허비했습니다. 어차피 소스 파일로 제공할 건데...왜 적용하느라 애 먹었는지 ...

리소스편까지 작업된 소스 파일입니다. 필요하신 분 다운받아 가시기 바랍니다.


 

다음번 강좌에서는 리소스 XML 을 들여다 보는 방법에 대해서 간단히 알려드린 후 DB(sqlite)로 넘어가도록 하겠습니다.


  1. 신단수 2010.08.17 17:17 신고

    안드로이드 개발에 대한 막연함만 가지고 있었는데..
    강좌 처음부터 보니 감이 잡힙니다.
    단비와 같은 자료 제공과 강좌입니다.
    좋은 정보 감사드려요...

  2. 이유식 2010.08.26 12:03

    안드로이드를 공부하고 있는 학생입니다.
    졸작으로 어플을 만들고 있는데 제가 원하는 리스트 뷰에 대한 내용이 여기에
    딱 있어서 많은 도움이 되었습니다.
    죄송하지만,, 리스트 아이템 추가 이벤트와 리스트에서 삭제 이벤트에 대한
    팁만 조금 알려주시면 안되나요?
    위에 save text에 대한 이벤트는 버튼이 있는 곳에서 이벤트 처리를 하면 될것 같고요,,
    그 밑에 리스트 아이템으로 오는 것에서 삭제 이벤트는 어떻게 지정해야 되나요?

    • 보고픈 2010.08.26 12:56 신고

      리스트의 내용을 보통 Adapter에서 처리하는데요.
      삭제 이벤트는 Adapter내의 getView() 메소드 내에서 이벤트 핸들러를 추가하시면 됩니다.
      상세한 소스 코드는 다음 다음번 포스트 정도에서 나올것 같습니다.

  3. AnzLove 2010.09.05 03:30

    이미지버튼 때문에 골치아파하고 있는데, 도움이 많이 되네요. ^^
    감사합니다.

+ Recent posts