태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

[SDK 1.0] #03. Hello, Android!로 배우는 기초 - (6) ImageView를 이용한 이미지 표시

2009.01.06 20:19

알립니다!!
현재 보시고 계신 강좌/글은 SDK 1.0을 기준으로 작성된 것입니다.
SDK 업데이트에 따라 변동사항이 있을 수 있으므로 새로운 SDK 버전을 기준으로 작성된 다른 글을 참고하시길 권합니다.


이전 글에서 XML 코드를 수정하여 HelloAndroid를 출력하는 것까지 알아보았습니다. 이 정도쯤까지 왔으면, 서서히 어떤 방식으로 코드가 돌아가는지에 대해 감이 오실것이라 믿습니다. ^^;; 하지만, 그냥 넘어가기에는 아쉬우니... 이번에는 텍스트가 아닌 이미지를 출력하는 것에 대하여 알아보도록 하겠습니다.

주의하세요!
이미지의 id가 helloworld라면, 이미지 파일명도 helloworld입니다.
(안드로이드에서 이미지 파일의 이름을 id로 그대로 사용합니다)
그러므로, 이 예제를 따라하시기 전에, 적절한 이미지를 res/drawable 폴더에 helloworld라는 이름을 가지는 이미지로 저장해 주셔야 합니다. (파일의 확장명은 상관이 없습니다.)

우선, java Code로 구현한 형태부터 알아보겠습니다. 이미지 파일의 id가 helloworld 일 때, 해당 이미지를 화면에 표시해주는 자바 코드는 다음과 같습니다.

package com.androidhuman.HelloAndroid;
import android.widget.ImageView;
import android.os.Bundle;
import android.app.Activity;

class HelloWorld extends Activity{
 public void onCreate(Bundle icicle){
  super.onCreate(icicle);
  ImageView image = new ImageView(this); // (1)
  image.setImageResource(R.drawable.helloworld);  // (2)
  setContentView(image);
 }
}

코드를 보시면, TextView를 사용할 때와 비교하여 크게 다른 곳은 음영으로 표시된 두 곳입니다. (1)번 부분은 텍스트를 표시할 수 있는 TextView 대힌 이미지를 표시할 수 있는 ImageView를 초기화주고 있습니다. (2)번에서는 TextView에서의 setText() 메소드 대신 setImageResource() 메소드가 사용됨으로써 표시할 이미지를 지정해줍니다.

이 때, 이미지의 주소는 R.java 파일의 포인터 주소를 참조하게 됩니다. drawable은 이미지가 저장되는 섹션이며, 이미지의 id는 파일명과 동일합니다. (setContentView()에서 R.layout.main을 사용했던 것과 연계해본다면 어떤 시스템인지 쉽게 이해가 가능하실겁니다.)


위 코드를 실행하게 되면, 해당 이미지의 원본 크기 그대로 출력되게 됩니다. 즉, XML Layout에서 layout_height와 layout_width 옵션을 모두 wrap_conent로 두었을 때와 동일한 결과를 나타냅니다. 위 코드와 동일한 결과를 출력하는 XML Code는 다음과 같습니다.
 
<?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"
>
<ImageView android:id="@+id/image"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:src="@drawable/helloworld"
/>
</LinearLayout>
 
위의 코드를 실행하게 되면, 다음과 같은 화면이 표시되게 됩니다.



이미지 옵션에서 wrap_content를 선택하였으므로, 원 이미지 크기 그대로 출력되게 되어 위와 같이 표시가 되게 됩니다. 반면, layout_height 옵션과 layout_width 옵션 모두를 fill_parent로 바꾸게 되면, 다음과 같이 화면에 가득차게 이미지가 표시되게 됩니다.



지금까지 HelloWorld를 통해서 가장 기본적인 텍스트를 표시하는 것에서부터 시작해서 이미지 표시, XML파일 및 소스코드를 이용한 UI 작성에 대하여 알아보았습니다. 사실, 이것들은 기초적인 것에 불과합니다. 지금까지 많은 것을 해 온 것 같아도(?), 아직은 겨우 화면에 텍스트랑 이미지를 표시하는 것 밖에 하지 못한 셈이죠.

이제, 다음 글에서부터는 본격적으로 어플리케이션이 어플리케이션다워질 수 있게 해주는 인텐트(Intent)에 대하여 알아보도록 하겠습니다. 인텐트가 있어야만 단말기의 여러 정보를 바탕으로 어떤 것을 할 지 결정할 수 있고, 한 액티비티에서 다른 액티비티를 호출하는 등의 기능을 수행할 수 있습니다. 자바로 말하자면 액션리스너(ActionListener)와 액션을 발생시키는 메소드를 추가해주는 것과 동일합니다.

인텐트에 대해서는 간단하지만은 않은 관계로 어떤 식으로 진행해야할 지 고민을 많이 해야 할 듯 싶습니다 -ㅅ-~
다음 강좌 전까지 TextView와 ImageView를 함께 사용하여 두 개 모두를 표시하는 액티비티를 만들어보는 등 이때까지 배워본 것들을 최대한 응용해보시면 다음 강좌를 들을 때 큰 도움이 될 것입니다. ^^

커니 Out-of date , , , , , ,

  1. Blog Icon
    showtech

    Jal bo go ga yo! :)

  2. gam sa hap ni da~ :-)

  3. 강의 너무너무 잘보고 가요 커니님..^^;;
    이번학기에 게임프로젝트하면서 안드로이드를 배우고 있는데,
    책만 보고 하기에는 다서 무리가 와서, 좋은 예제와 좋은 자료 감사해요..^^
    앞으로도 자주뵙도록 할께요. 좋은 하루 되세요..

  4. 도움이 되셨다니 다행입니다 :)
    앞으로 제가 아는 범위 내에선 최대한 처음 안드로이드를 접하시는 분이 필요로 하는 것들을 다룰 생각이니, 부족하다 싶은 것은 제게 알려주세요~

  5. Blog Icon
    cashdow

    감사합니다. 좋은 강의 잘보고 갑니다 ㅎㅎ

  6. Blog Icon
    꺄르릉

    어제부터 커니님 강의 보게 된 초짜입니다 ^^
    궁금한게 있는데요 그림과 글을 모두 출력하려고
    main.xml에

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:text="Hello~, Android. Nice to meet you.♡"
    android:background="#FFFF0000"
    />

    <ImageView android:id="@+id/image"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/add_new_item"
    />

    을 작성하고 .java에는

    public void onCreate(Bundle icicle) {
    super.onCreate(icicle);
    setContentView(R.layout.main);
    setContentView(R.drawable.add_new_item);
    }

    라고 적었더니 오류가 뜨더라구요.
    그래서

    setContentView(R.drawable.add_new_item);

    부분을


    ImageView image = new ImageView(this);
    image.setImageResource(R.drawable.add_new_item);
    setContentView(image);

    로 바꾸면 이미지만 나오구요.. 글자를 이미지가 덮어 씌운거 같은데
    한화면에 글자와 이미지를 모두 출력하고 싶은데 어떻게 해야되죠??
    궁금합니다. 그럼 좋은하루 되세요^^

  7. main.xml에

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ImageView android:id="@+id/image"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/helloworld"
    />
    </LinearLayout>

    이런 식으로 레이아웃 내에 View들이 들어있어야 합니다.
    그리고 setContentView()메소드는 해당 액티비티의 레이아웃으로 사용할 리소스를 넣어주는 것으로, 한번만 호출해야 합니다.

    그림과 글자가 같이 나오도록 하려면 레이아웃 안에 TextView와 ImageView를 같이 넣어주면 되겠죠??

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView android:id="@+id/text01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Text1"
    />
    <ImageView android:id="@+id/image"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/helloworld"
    />
    </LinearLayout>

  8. 이번에 처음 안드로이드를 배우려고 하는 학생인데요^^
    자바와 html은 어느정도 할수있는데,
    xml은 잘 모르거든요 ㅎㅎ xml먼저 공부를 해야할까요?

  9. Blog Icon
    joong

    안녕하세요.
    오늘 강좌에 대해서 문의드립니다.
    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"

    >
    <ImageView android:id="@+id/image"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:src="@drawable/helloworld"

    />
    </LinearLayout>

    출력이 커니님이 하신 것과 다르게 나옵니다.
    code를 이용해서 Emul로 실행시 중앙에 그림이 정렬되서 나옵니다. (넓이 높이 모두 정렬된 화면)
    xml을 이용해서 작성한 코드는 Layout탭에서 실행하면 좌측 상단에 정렬되서 출력이 됩니다.

    이런문제는 어떻게 된건지 모르겠습니다.

  10. 올려놓은 것 중 틀린게 있군요.
    layout_height도 fill_parent로 하면 위와 같이 됩니다.

  11. Blog Icon
    안드로이드몽키

    잘보고 갑니다. ^^~

  12. 한수 배우고 갑니다 ~_~

  13. Blog Icon
    안드로이드풍덩

    궁금한게 있습니다.

    이전 예제에서 TextView 를 보여준 후, main.xml 파일을 보니..
    자동적으로 LinearLayout 안에 TextView 가 생성된것 같은데..

    main.xml 에서는 TextView 라는 것은 사용자가 특별히 타이핑을 해주지 않았잖아요~
    .java 파일에서 TextView 생성(자동으로 main.xml에 TextView 가 생성) 하고 에뮬레이터에서 테스트를 했는데...

    이번에는..
    .jav 에서 ImageView 라는 것을 생성 후 main.xml 파일을 봤는데...왜 이번에는 ImageView 가 안생긴거죠??

  14. 소스 파일에서 뷰를 생성해 주는 것과 레이아웃 파일에서 뷰를 생성해 주는 것은 별개이며, 자동으로 생성되는 것이 아닙니다.

    우리가 일반적으로 프로젝트를 새로 만들면 액티비티를 자동으로 하나 만들게끔 해주는데, 이 때 main.xml 레이아웃 파일이 생성되고, 생성된 레이아웃 파일은 기본적으로 LinearLayout 내에 TextView 하나를 가지고 있습니다.

  15. Blog Icon
    꽃게장세트

    네 잘 보고 있습니다.~
    웬만한 책보다 낫네요^^

  16. Blog Icon
    후레신

    강의 덕분에 쉽고 재밋게 배웠어요! 다음 강의는 안 하시나요? ㅠㅠ