7 차시이미지처리 1 학습목표 이미지뷰를사용하는방법을배운다. 비트맵을사용하는방법을배운다. 2 확인해볼까? 3 이미지뷰와이미지버튼 1) 학습하기
[ 그림 7-1] 프로젝트 res 폴더 이미지뷰 [ 예제 7-1] 이미지뷰 1 <LinearLayout 2 ~~~~ 중간생략 ~~~~ 3 android:orientation="vertical" > 4 <ImageView 5 6 7 android:src="@drawable/ic_launcher" /> 8 <ImageView - 2 -
9 android:layout_width="200dp" 10 android:layout_height="100dp" 11 android:src="@drawable/ic_launcher" /> 12 <ImageView 13 android:layout_width="200dp" 14 android:layout_height="100dp" 15 android:scaletype="fitxy" 16 android:src="@drawable/ic_launcher" /> 17 <ImageView 18 android:layout_width="200dp" 19 android:layout_height="100dp" 20 android:scaletype="fitcenter" 21 android:src="@drawable/ic_launcher" /> 22 <ImageView 23 android:layout_width="200dp" 24 android:layout_height="100dp" 25 android:scaletype="fitstart" 26 android:src="@drawable/ic_launcher" /> 27 </LinearLayout> 7행 [res]-[drawable] 의이미지 id를설정한다. 9~10행이미지의크기를가로 200dp, 세로 100pd 로확장한다. 15, 20, 25행 scaletype 속성을사용하여이미지뷰의확장, 축소하는방식을설정하였다. fitxy는이미지뷰의좌우에맞게이미지를확장하고, fitcenter는중앙에맞춰서확장하며, fitstart는왼쪽에맞춰서확장한다. 이미지버튼 2) 활동하기 활동개요 - 3 -
[ 그림 7-2] 실행화면 활동과정 - 4 -
[ 그림 7-3] 그림파일복사 [ 예제 7-2]main.xml 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" - 5 -
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 32 33 34 35 36 37 38 39 40 41 42 43 android:layout_height="match_parent" android:orientation="vertical" android:padding="10dp" tools:context=".imageactivity" > <TextView android:text=" 보고싶은동물을선택하세요 " /> <RadioGroup android:id="@+id/rgroup" > <RadioButton android:id="@+id/rbhorse" android:text=" 말 " /> <RadioButton android:id="@+id/rbrabbit" android:text=" 토끼 " /> <RadioButton android:id="@+id/rbcat" android:text=" 고양이 " /> <RadioButton android:id="@+id/rbdog" android:text=" 강아지 " /> </RadioGroup> <TextView android:layout_margintop="10dp" android:text=" 선택한동물을보려면아래버튼을클릭릭하세요 " /> <ImageButton android:id="@+id/ibtnshow" - 6 -
44 45 46 android:src="@drawable/ic_launcher" 47 android:onclick="onclick" /> 48 <ImageView 49 android:id="@+id/ivani" 50 51 52 android:layout_margintop="10dp" /> 53 </LinearLayout> 40, 52행 layout_margintop 설정하여 10dp 만큼바로위의위젯간의간격을벌린다. 47행이미지버튼에 onclick 속성을설정한다. 이벤트리스너가등록되어이미지버튼을클릭하면 onclick() 메소드가수행되도록설정한다. [ 예제 7-3]Image.java 1 package com.example.image; 2 3 import android.app.activity; 4 import android.os.bundle; 5 import android.view.view; 6 import android.widget.imageview; 7 import android.widget.radiogroup; 8 import android.widget.toast; 9 10 public class ImageActivity extends Activity { 11 12 RadioGroup rgroup; 13 ImageView ivani; 14 15 @Override 16 protected void oncreate(bundle savedinstancestate) { 17 super.oncreate(savedinstancestate); 18 setcontentview(r.layout.main); 19 settitle(" 동물그림보기 "); 20-7 -
21 rgroup = (RadioGroup) findviewbyid(r.id.rgroup); 22 ivani = (ImageView) findviewbyid(r.id.ivani); 23 24 25 public void onclick(view v) { 26 switch (v.getid()) { 27 case R.id.ibtnShow: 28 switch (rgroup.getcheckedradiobuttonid()) { 29 case R.id.rbHorse: 30 ivani.setimageresource(r.drawable.horse); 31 break; 32 case R.id.rbRabbit: 33 ivani.setimageresource(r.drawable.rabbit); 34 break; 35 case R.id.rbCat: 36 ivani.setimageresource(r.drawable.cat); 37 break; 38 case R.id.rbDog: 39 ivani.setimageresource(r.drawable.dog); 40 break; 41 default: 42 Toast.makeText(getApplicationContext(), " 보고싶은동물을먼저선택하세요 ", 0) 43.show(); 44 45 break; 46 47 48 25~46행이미지버튼을클릭했을때의이벤트처리 30행 setimageresource() 메소드를사용하여이미지뷰에그림파일을출력한다. 42행라디오그룹에서아무것도선택하지않고이미지버튼을클릭했을경우, 토스트메시지를띄운다. 4 비트맵 1) 학습하기 - 8 -
protected void ondraw(canvas canvas { super.ondraw(canvs); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable. 그림id); canvas.drawbitmap(bitmap, 시작점X좌표, 시작점Y좌표, null); bitmap.recycle(); 시작점 X 좌표 : ( 화면폭 - 그림폭 ) / 2 시작점 Y 좌표 : ( 화면높이 - 그림높이 ) / 2 [ 예제 7-4] 비트맵 1 package com.example. 프로젝트명 ; 2-9 -
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 32 33 34 35 36 37 38 39 40 41 42 import android.app.activity; import android.content.context; import android.graphics.bitmap; import android.graphics.bitmapfactory; import android.graphics.canvas; import android.os.bundle; import android.view.view; public class 프로젝트명 Activity extends Activity { @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); MyView myview = new MyView(this); setcontentview(myview); public class MyView extends View { public MyView(Context context) { super(context); // TODO Auto-generated constructor stub @Override protected void ondraw(canvas canvas) { // TODO Auto-generated method stub super.ondraw(canvas); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); int startx = (this.getwidth() - bitmap.getwidth()) / 2; int starty = (this.getheight() - bitmap.getheight()) / 2; canvas.drawbitmap(bitmap, startx, starty, null); bitmap.recycle(); - 10 -
43 33~34 행리소스에서그림파일을로드하여비트맵으로만든다. 36~37 행비트맵을그리기시작할위치를설정한다. 이렇게설정하면비트맵이화면중앙에위 치하게된다. 39 행캔버스에비트맵을그린다. 40 행비트맵리소스를해제한다. [ 그림 7-4] 실행화면 2) 활동하기 활동개요 - 11 -
[ 그림 7-5] 간단이미지편집기 활동과정 [ 예제 7-5]main.xml 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" - 12 -
5 android:orientation="vertical" 6 tools:context=".bitmapactivity" > 7 <LinearLayout 8 android:layout_width="match_parent" 9 android:layout_height="0dp" 10 android:layout_weight="1" 11 android:orientation="horizontal" > 12 <Button 13 android:id="@+id/btnzoomout" 14 android:layout_width="0dp" 15 16 android:layout_weight="1" 17 android:onclick="onclick" 18 android:text=" 확대 " /> 19 <Button 20 android:id="@+id/btnzoomin" 21 android:layout_width="0dp" 22 23 android:layout_weight="1" 24 android:onclick="onclick" 25 android:text=" 축소 " /> 26 <Button 27 android:id="@+id/btnrotate" 28 android:layout_width="0dp" 29 30 android:layout_weight="1" 31 android:onclick="onclick" 32 android:text=" 회전 " /> 33 </LinearLayout> 34 <LinearLayout 35 android:id="@+id/canvaslayout" 36 android:layout_width="match_parent" 37 android:layout_height="0dp" 38 android:layout_weight="9" 39 android:gravity="center" > 40 </LinearLayout> 41 </LinearLayout> 10, 38행두개의내부리니어레이아웃의세로길이비율을 1:9로설정한다. 35행아래의내부리니어레이아웃을 java 코드에서뷰를다루기위해 id를설정한다. - 13 -
[ 예제 7-6]BitmapActivity.java 1 package com.example.bitmap; 2 3 import android.app.activity; 4 import android.content.context; 5 import android.graphics.bitmap; 6 import android.graphics.bitmapfactory; 7 import android.graphics.canvas; 8 import android.os.bundle; 9 import android.view.view; 10 import android.widget.button; 11 import android.widget.linearlayout; 12 13 public class BitmapActivity extends Activity { 14 15 Button btnzoomout, btnzoomin, btnrotate; 16 MyView myview; 17 float scalex = 1, scaley = 1, angle = 0; 18 19 @Override 20 protected void oncreate(bundle savedinstancestate) { 21 super.oncreate(savedinstancestate); 22 setcontentview(r.layout.main); 23 24 settitle(" 간단그림편집기 "); 25 26 LinearLayout canvaslayout = (LinearLayout) findviewbyid(r.id.canvaslayout); 27 myview = (MyView) new MyView(this); 28 canvaslayout.addview(myview); 29 30 31 public class MyView extends View { 32 33 public MyView(Context context) { - 14 -
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 super(context); // TODO Auto-generated constructor stub @Override protected void ondraw(canvas canvas) { // TODO Auto-generated method stub super.ondraw(canvas); int cenx = this.getwidth() / 2; int ceny = this.getheight() / 2; canvas.scale(scalex, scaley, cenx, ceny); canvas.rotate(angle, cenx, ceny); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); int startx = (this.getwidth() - bitmap.getwidth()) / 2; int starty = (this.getheight() - bitmap.getheight()) / 2; canvas.drawbitmap(bitmap, startx, starty, null); bitmap.recycle(); public void onclick(view v) { switch (v.getid()) { case R.id.btnZoomOut: scalex = scalex + 0.2f; scaley = scaley + 0.2f; myview.invalidate(); break; case R.id.btnZoomIn: scalex = scalex - 0.2f; scaley = scaley - 0.2f; myview.invalidate(); break; case R.id.btnRotate: angle = angle + 20; myview.invalidate(); - 15 -
74 break; 75 76 77 16행캔버스로사용할뷰를선언한다. 17행확대 / 축소및회전의크기를정하는변수를선언한다. 26~28행 main.xml의 canvaslayout을인플레이트한후, MyView형클래스변수를추가하였다. 즉, 아래쪽레이아웃에 MyView에서설정한내용이출력된다. 31~51행 [ 예제 6-4] 와동일한내용이다. 추가로캔버스의확대 / 축소와회전을넣었다. 43~44행화면의중앙좌표를구한다. 45행캔버스의확대 / 축소를실행한다. 46행캔버스의회전을실행한다. 62~63행버튼에대한이벤트처리부분이다. 5 배운내용정리 protected void ondraw(canvas canvas { super.ondraw(canvs); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable. 그림 id); canvas.drawbitmap(bitmap, 시작점 X 좌표, 시작점 Y 좌표, null); - 16 -
bitmap.recycle(); 6 학습확인하기 Bitmap 메소드 효과 1 rotate() 2 scale() 3 translate() 4 skew() a b c / d 7 지식창고 참고문헌 참고사이트 - 17 -