'이미지뷰'에 해당되는 글 2건

  1. 2011.09.27 Android - Button & Image ( 버튼을 이용한 이미지출력 )
  2. 2011.09.10 Android - ImageView (이미지뷰)

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

Android 2011.09.27 15:17

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

오늘은 간단하게 버튼을 이용해서 그림을 출력하는 것을 해보겠습니다.
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 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

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개에 연결된 이미지가
버튼을 누를 때 그림과 텍스트가 바뀌면 잘되는 것입니다.

수고하셨습니다.

 

 






 

저작자 표시
신고
Trackback 0 : Comment 0

Write a comment


Android - ImageView (이미지뷰)

Android 2011.09.10 14:45


이미지뷰는 아이콘이나 비트맵을 출력하는 컨트롤입니다.
다양한 경로의 이미지를 받을 수 있는데 리소스, 파일 등은 물론이고 컨텐트 프로바이더나 웹상의 이미지도 표시할 수 있습니다.


ImageView는 다음과 같은 속성을 갖습니다.


src 
 출력할 이미지를 지정하는 가장 중요한 속성입니다.
 이미지를 출력할 수 있지만 #rrggbb 형태의 색상값을 출력할 수도 있습니다.
 리소스에 이미지를 두고 @drawable/ID 형식으로 불러와서 이미지를 표시할 수 있습니다.

maxHeight, maxWidth
 이미지가 출력될 최대 크기를 지정합니다.
 지정을 안하면 이미지의 원래크기대로 출력되지만
 스마트폰의 해상도가 충분하지 않으므로 크기를 적당히 제한해야 합니다.


adjustViewBounds
 써본적 없는 속성이지만 이미지의 종횡비를 맞추기 위해
 이미지 뷰의 크기를 적당히 조정할 것인가를 정하는 속성이라고 합니다.

 true / false 값으로 지정한다고 합니다.

cropToPadding
 true / false 값으로 지정하고 true일 경우 주어진 여백에 맞추기 위해 이미지의 일부를 잘라버립니다.
 이 속성을 사용하면 이미지 전체가 보이지 않을 수 도 있습니다.



안드로이드가 공시적으로 지원하는 이미지 포맷은 jpg, png,gif 등입니다.
많이 사용 하는 것은 png로 여러 이미지를 이쁘게 꾸밀 수 있어 실용성이 높습니다.

 

이미지를 넣을 폴더는 프로젝트를 만들면 res라는 파일안에
옆에 보듯이 hdpi, ldpi, mdpi가 있습니다.
hdpi는  240정도의 고해상도
mdpi는 160정도의 중해상도
ldpi는 120정도의 낮은 해상도를 의미합니다.


스마트폰 단말기의 크기와 해상도에 따라 이미지의 크기가 달라서 세가지를 맞춰 넣어주지만
요즘 핸드폰들은 높은 해상도를 지원하기 때문에 icon파일빼고는 hdpi에 넣어서 사용합니다.

자 이제 실습을 해봅시다.
먼저 실습을 하기 위한 프로젝트를 만들어야겠죠.

Project name : ExamImageView
Build Target : Android 2.1
Package name : jsh.exam.imageview
Create Activity : main
Min SDK Version : 7

이미지뷰를 쓰는 목적은 이미지를 출력하기 위함이니깐
먼저 자신이 불러올 이미지나 제가 쓴 이미지를 다운받아서
res의 drawablew-hdpi 폴더에 고이 모셔둡니다.



전 이 두개의 이미지파일을 이용하였습니다. 기본적으로 사진이 있더군요.
다들 hdpi에 넣으신 후 실습을 시작해 보겠습니다.
중요한 점 하나! 사진파일에는 소문자영어와 숫자만 가능해요! 에러나신다면 이점을 살펴보세요.

이미지뷰실습은 xml소스만 수정하면서 해보실 수 있기때문에
자바파일은 건드실 필요가 없습니다.


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:layout_width="200dp"
  android:layout_height="200dp"
  android:id="@+id/imageView1"
  android:src="@drawable/koala"></ImageView>
 <ImageView
  android:id="@+id/imageView2"
  android:src="@drawable/penguins"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  ></ImageView>
</LinearLayout>


에뮬레이터 실행화면 입니다.


첫번째 이미지뷰는 크기를 할당해서
원래의 이미지크기가 아니라 할당한 크기만큼
이미지가 출력되시는 걸 볼 수 있습니다.

두번째 이미지뷰는 크기 할당을
높이나 넓이를 최대한 크게 할당해서 첫번째 이미지뷰를
제외한 화면에 꽉 차게 출력 되시는걸 볼 수 있습니다.

저는 넓이와 크기로만 실습을 해보았고
위에 몇 가지 속성을 설명한 것과 또 다른 속성들이
많습니다.
이것저것 속성을 이용해보면서 실습해 보시면
좋을 것 같습니다.

저작자 표시
신고
Trackback 0 : Comment 0

Write a comment