블로그 이미지
언제나 늘 푸른 소나무처럼. 자신의 의지로 오롯이 서기
예섬수진

공지사항

최근에 받은 트랙백

글 보관함

calendar

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

Android]Gallery에 Image 추가 하기

2010.07.07 23:31 | Posted by 예섬수진
내가 Gallery에서 필요한 기능은 다음과 같다.
 Gallery 요구사항
  (1) Gallery에 내가 원하는 Image 추가하기
  (2) 사용자의 선택으로 인해, Gallery 중앙에 최정적으로 표시된 Image가 무엇인지 알기
    Ex>  Finger Flick을 하는 경우, Flick이 완료 될 때 화면에 선택된 Image 알기

이 2가지 요구사항을 만족할 수 있는 예제를 인터넷에서 찾았으니, 찾을 수가 없었다.

대신, Android Developer Guide에서 Hello, Gallery라는 예제를 찾았으나 !!

이런.. 그대로 작성하면, Error가 나거나 System이 오동작을 한다. ㅜ.ㅜ
  * Hello, Gallery url : http://developer.android.com/guide/tutorials/views/hello-gallery.html

몇 가지 시행착오 후,  요구사항을 만족할 수 있는 Android Code를 작성하였다.
 요구사항을 만족하여, 실행된 화면
 
  > Linear Layout에 Gallery와 Text View를 추가하였다.
> Gallery 상에서 Image의 위치를 표시하기 위해, Text View를 추가하였다.

(1) Layout으로 사용할 xml 파일 만들기
 파일명 : layout > my_gallery.xml
 

  1)  Gallery에 Image View를 추가하지 않아도 된다.
     * Gallery에 Image를 추가하는 것은 Code 상에서 할 예정이다.

  2) Finger Flick의 결과로 선택된 Image 위치(Position)를 알기 위해서, Text View를 추가하였다.

  3) Linear Layout의 default orientation은 horizontal이다.
     => 그러므로, 꼭 orientation을 vertical로 명시해 주자.
       -> 그렇지 않으면, Text View가 화면에 표시되지 않을 것이다.

(2) 실행화면의 각 Image에서 보이는 테두리의  속성을 설정하기 위한, value 파일 만들기
 파일명 : values > gallery_attri.xml
 

(3) Activity 클래스 작성하기
 파일명 : src > ActMyGallery.java
 

  1) android.app.Activity를 Super Class로 지정하여, Class를 생성하자.

  2) OnCreate 함수를 Override하자.
       (a) 이 Activity가 실행될 때의 Layout을 설정하기 위해, setContentView 함수를 호출한다.
       (b) Gallery에 Image 추가 및 Image에 대한 정보를 알 수 있도록, Adapter를 설정해 준다.
            - Gallery 클래스의 setAdapter 함수 이용
            * ImageAdapter는 미작성 클래스임. 그래서 setAdapter 라인을 추가하는 순간, Error가 날 것이다

(4) ImageAdapter 클래스 추가하기
 파일명 : src > ActMyGallery.java
 

  1) BaseAdapter를 Super Class로 하는 Class를 작성한다.
    => 단, Activity 클래스 내에 작성해야 한다.
     -> 따로 파일을 만들어 분리했더니, 몇몇 함수들은 정의되지 않았다고 Error가 발생하드라

  2) Gallery에 추가할 Image들을 res-drawable 폴더에 추가한다.

  3) 위 소스 코드의 핵심 함수는 getView가 되겠다.
    =>이 함수는 Gallery의 위치에 있는 Image View를 반환하는 함수이다.
      -> 이 함수에서, 각 Position에서 보여야 할 Image에 대한 설정을 해 주고 있다.
        (a) ImageView.setImageResource()
            : Image Resource ID를 설정하여, ImageView에서 표시 할 Image를 설정하고 있음

        (b) ImageView.setLayoutPrarms(new Gallery.LayoutParams(150, 100)
            : 150은 width이고, 100은 height임

        (c) ImageView.setScaleType(ImageView.ScaleType.FIT_XY)
           : Imae가 150X100에 맞도록, Scale을 조정함

       (d) ImageView.setBackgroudnResource(background)
          : 실행된 화면에서, 각각의 ImageView에 회색 테두리가 보이도록 함

  4) 생성자에 있는 아래 항목들은 이미 (2)번에서 작성한 내용들이다.
      - R.styleable.Theme
      - R.styleable.Theme_android_galleryItemBackground

  5) 수행하면, 1번째 요구사항이 만족된 것을 확인할 수 있음

(5) 2번째 요구사항을 만족하기 위해, onCreate 함수 수정
 파일명 : src > ActMyGallery.java
 onCreate 함수 안에 안의 내용을 추가하였음
  1) setOnItemSelectedListener 함수를 이용하면, 2번째 요구사항을 만족할 수 있다.
    => 정확히는 OnItemSelectedListener.onItemSelected() 이지만..
      -> 해당 함수의 3번째 인자로 들어오는 Int는 Galley 상의 Image 위치이다.
      -> 그래서 position value를 TextView에 표시되도록 설정하고 있다. [TexvView.setText() 이용]

  2) 주석 처리된 부분을 해제하면, 사용자가 Click(정확히는 Push)한 Image를 알 수 있다.
   * Hello, Gallery 예제에는 setOnItemClickListner 함수가 있음.
     => 그러나 내가 원한 것은 Press 할 때 클릭된 Image 정보가 아니다.
     => 요구사항은 Release할 때, 표시될 Image 정보이다.
      -> 그래서, 해당 소스를 주석처리하였다.

이상!!

티스토리 툴바