Android - Button & Image ( 버튼을 이용한 이미지출력 )

PAN 테스트 app 를 만들어야 할 때 app를 전혀 알지 못하는 나로서는 무척 힘들게 느껴졌다. 그 때 이 글을 보고 감을 잡기 시작했다.

[펌] http://androiddeveloper.tistory.com/47

글이 많이 늦었습니다.
교육 듣느라 취업준비하느라 많이 늦었습니다.

오늘은 간단하게 버튼을 이용해서 그림을 출력하는 것을 해보겠습니다.
UI구성은 버튼4개와 이미지뷰1개 텍스트뷰1개 이고
필요한 파일은 아무 이미지파일 4개를 준비하면 됩니다.

버튼에서 쓸 속성은 클릭이벤트처리
setOnClickListener
이미지뷰에 그림을 할당하는
setImageResource
텍스트뷰에 문자열을 할당하는
setText
입니다.


자 그럼 프로젝트를 생성해야겠지요.

Project name : ExamButtonImage
Build Target : Android 2.1
Package name : jsh.android.exambuttonimage
Create Activity : main
Min SDK Version : 7


프로젝트를 생성하시고 자신이 준비한 이미지파일을 먼저 넣어줍니다.
파일이름은 소문자영어로 Drawable-hdpi에 넣어줍니다.

그 다음 xml로 넘어가서 버튼4개와 이미지뷰 텍스트뷰를 생성합니다.


XML 소스

main.xml

버튼이미지XML소스.txt

<?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:id="@+id/linearLayout1"
  android:orientation="horizontal">
  <Button
   android:id="@+id/button1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Button"></Button>
  <Button
   android:id="@+id/button2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Button"></Button>
  <Button
   android:id="@+id/button3"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Button"></Button>
  <Button
   android:id="@+id/button4"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Button"></Button>
 </LinearLayout>
 <ImageView
  android:id="@+id/imageView1"
  android:layout_gravity="center"
  android:layout_width="200dp"
  android:layout_height="300dp"></ImageView>
 <TextView
  android:text="TextView"
  android:gravity="center"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:id="@+id/textView1"
  android:layout_gravity="center"></TextView>
</LinearLayout>

자바 소스

mainpage.java

버튼이미지JAVA소스.txt

package jsh.android.exambuttonimage;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class main extends Activity implements OnClickListener {

 Button bt, bt2, bt3, bt4;
 ImageView iv;
 TextView tv;

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

  // xml에 불러온 이미뷰를 bt에 넣어 속성사용 하기위한 구문
  bt = (Button) findViewById(R.id.button1);
  bt2 = (Button) findViewById(R.id.button2);
  bt3 = (Button) findViewById(R.id.button3);
  bt4 = (Button) findViewById(R.id.button4);

  // 버튼에 클릭이벤트 처리
  bt.setOnClickListener(this);
  bt2.setOnClickListener(this);
  bt3.setOnClickListener(this);
  bt4.setOnClickListener(this);

  // xml에 불러온 이미뷰를 iv에 넣어 속성사용 하기위한 구문
  iv = (ImageView) findViewById(R.id.imageView1);
  // xml에 불러온 텍스트뷰를 tv에 넣어 속성사용 하기위한 구문
  tv = (TextView) findViewById(R.id.textView1);

 }

 @Override
 public void onClick(View arg0) {
  // TODO Auto-generated method stub

  switch (arg0.getId()) {

  case R.id.button1:

   // 이미지뷰에 사진을 출력하는 구문
   iv.setImageResource(R.drawable.test1);
   // 텍스트뷰에 문자열 출력하는 구문
   tv.setText("test1 사진");

   break;

  case R.id.button2:

   iv.setImageResource(R.drawable.test2);
   tv.setText("test2 사진");

   break;

  case R.id.button3:

   iv.setImageResource(R.drawable.test3);
   tv.setText("test3 사진");

   break;

  case R.id.button4:

   iv.setImageResource(R.drawable.test4);
   tv.setText("test4 사진");

   break;

  }

 }
}


실행 결과

실행 결과는
버튼 4개에 연결된 이미지가
버튼을 누를 때 그림과 텍스트가 바뀌면 잘되는 것입니다.

수고하셨습니다.