머라카노?

본래 코드의 출처 없이 사용을 하였습니다. 죄송합니다. 이 글에 나온 코드는 아래 사이트의 코드를 기초로 작성되었습니다.

How to use Multi-touch in Android 2
http://www.zdnet.com/blog/burnette/how-to-use-multi-touch-in-android-2/1747?tag=rbxccnbzd1

아직 실제 안드로이드 폰에서 테스트하지 않았습니다.

10. 8. 6. 11:00 - 확대/축소 오작동을 잡았습니다.
10. 8. 6. 20:00 - 처음 나타날 때, 이미지를 변경할 때 작은 이미지는 가운데, 큰 이미지는 크기에 맞게 축소해서 나오도록 함.
10. 8. 9. 18:00 - 소속된 화면에 변경이 생기면 크기가 리셋되는 문제 수정함.

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Matrix;
import android.graphics.PointF;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.FloatMath;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.ImageView;


public class ViewTouchImage extends ImageView implements OnTouchListener{
    // 디버깅 정보
    private static final String TAG = "ViewTouchImage";
    private static final boolean D = false;
    
    private Matrix matrix = new Matrix();
    private Matrix savedMatrix = new Matrix();
    private Matrix savedMatrix2 = new Matrix();
    
    private static final int NONE = 0;
    private static final int DRAG = 1;
    private static final int ZOOM = 2;
    private int mode = NONE;
    
    private PointF start = new PointF();
    private PointF mid = new PointF();
    private float oldDist = 1f;
    
    private static final int WIDTH = 0;
    private static final int HEIGHT = 1;
    
    private boolean isInit = false;
    
    public ViewTouchImage(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        
        setOnTouchListener(this);
        setScaleType(ScaleType.MATRIX);
    }

    public ViewTouchImage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ViewTouchImage(Context context) {
        this(context, null);
    }

    
    
    

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        if (D) Log.i(TAG, "onLayout");
        super.onLayout(changed, left, top, right, bottom);
        if (isInit == false){
            init();
            isInit = true;
        }
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        if (D) Log.i(TAG, "setImageBitmap");
        super.setImageBitmap(bm);
        isInit = false;
        init();
    }

    @Override
    public void setImageDrawable(Drawable drawable) {
        if (D) Log.i(TAG, "setImageDrawable");
        super.setImageDrawable(drawable);
        isInit = false;
        init();
    }

    @Override
    public void setImageResource(int resId) {
        if (D) Log.i(TAG, "setImageResource");
        super.setImageResource(resId);
        isInit = false;
        init();
    }

    protected void init() {
        matrixTurning(matrix, this);
        setImageMatrix(matrix);
        setImagePit();
    }

    /**
     * 이미지 핏
     */
    public void setImagePit(){
        
        // 매트릭스 값
        float[] value = new float[9];
        this.matrix.getValues(value);
        
        // 뷰 크기
        int width = this.getWidth();
        int height = this.getHeight();
        
        
        // 이미지 크기
        Drawable d = this.getDrawable();
        if (d == null)  return;
       int imageWidth = d.getIntrinsicWidth();
        int imageHeight = d.getIntrinsicHeight();
        int scaleWidth = (int) (imageWidth * value[0]);
        int scaleHeight = (int) (imageHeight * value[4]);
        
       // 이미지가 바깥으로 나가지 않도록.

        value[2] = 0;
        value[5] = 0;
        
        if (imageWidth > width || imageHeight > height){
            int target = WIDTH;
            if (imageWidth < imageHeight) target = HEIGHT;
            
            if (target == WIDTH) value[0] = value[4] = (float)width / imageWidth;
            if (target == HEIGHT) value[0] = value[4] = (float)height / imageHeight;
            
            scaleWidth = (int) (imageWidth * value[0]);
            scaleHeight = (int) (imageHeight * value[4]);
            
            if (scaleWidth > width) value[0] = value[4] = (float)width / imageWidth;
            if (scaleHeight > height) value[0] = value[4] = (float)height / imageHeight;
        }
        
        // 그리고 가운데 위치하도록 한다.
        scaleWidth = (int) (imageWidth * value[0]);
        scaleHeight = (int) (imageHeight * value[4]);
        if (scaleWidth < width){
            value[2] = (float) width / 2 - (float)scaleWidth / 2;
        }
        if (scaleHeight < height){
            value[5] = (float) height / 2 - (float)scaleHeight / 2;
        }
        
        matrix.setValues(value);
        
        setImageMatrix(matrix);
    }
    
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        ImageView view = (ImageView) v;

        switch (event.getAction() & MotionEvent.ACTION_MASK) {
        case MotionEvent.ACTION_DOWN:
           savedMatrix.set(matrix);
           start.set(event.getX(), event.getY());
           mode = DRAG;
           break;
        case MotionEvent.ACTION_POINTER_DOWN:
           oldDist = spacing(event);
           if (oldDist > 10f) {
              savedMatrix.set(matrix);
              midPoint(mid, event);
              mode = ZOOM;
           }
           break;
       case MotionEvent.ACTION_UP:

        case MotionEvent.ACTION_POINTER_UP:
           mode = NONE;
           break;
        case MotionEvent.ACTION_MOVE:
           if (mode == DRAG) {
              matrix.set(savedMatrix);
             matrix.postTranslate(event.getX() - start.x, event.getY() - start.y);

           }
           else if (mode == ZOOM) {
              float newDist = spacing(event);
              if (newDist > 10f) {
                 matrix.set(savedMatrix);
                 float scale = newDist / oldDist;
                 matrix.postScale(scale, scale, mid.x, mid.y);
              }
           }
           break;
        }

        // 매트릭스 값 튜닝.
        matrixTurning(matrix, view);
        
        view.setImageMatrix(matrix);
        
        return true;
    }
    
    private float spacing(MotionEvent event) {
       float x = event.getX(0) - event.getX(1);
       float y = event.getY(0) - event.getY(1);
       return FloatMath.sqrt(x * x + y * y);
    }

    private void midPoint(PointF point, MotionEvent event) {
       float x = event.getX(0) + event.getX(1);
       float y = event.getY(0) + event.getY(1);
       point.set(x / 2, y / 2);
    }
    
    private void matrixTurning(Matrix matrix, ImageView view){
        // 매트릭스 값
        float[] value = new float[9];
        matrix.getValues(value);
        float[] savedValue = new float[9];
        savedMatrix2.getValues(savedValue);

        // 뷰 크기
        int width = view.getWidth();
        int height = view.getHeight();
        
        // 이미지 크기
        Drawable d = view.getDrawable();
        if (d == null)  return;
        int imageWidth = d.getIntrinsicWidth();
        int imageHeight = d.getIntrinsicHeight();
        int scaleWidth = (int) (imageWidth * value[0]);
        int scaleHeight = (int) (imageHeight * value[4]);
        
        // 이미지가 바깥으로 나가지 않도록.
        if (value[2] < width - scaleWidth)   value[2] = width - scaleWidth;
        if (value[5] < height - scaleHeight)   value[5] = height - scaleHeight;
        if (value[2] > 0)   value[2] = 0;
        if (value[5] > 0)   value[5] = 0;
        
        // 10배 이상 확대 하지 않도록
        if (value[0] > 10 || value[4] > 10){
            value[0] = savedValue[0];
            value[4] = savedValue[4];
            value[2] = savedValue[2];
            value[5] = savedValue[5];
        }
        
        // 화면보다 작게 축소 하지 않도록
        if (imageWidth > width || imageHeight > height){
            if (scaleWidth < width && scaleHeight < height){
                int target = WIDTH;
                if (imageWidth < imageHeight) target = HEIGHT;
                
                if (target == WIDTH) value[0] = value[4] = (float)width / imageWidth;
                if (target == HEIGHT) value[0] = value[4] = (float)height / imageHeight;
                
                scaleWidth = (int) (imageWidth * value[0]);
                scaleHeight = (int) (imageHeight * value[4]);
                
                if (scaleWidth > width) value[0] = value[4] = (float)width / imageWidth;
                if (scaleHeight > height) value[0] = value[4] = (float)height / imageHeight;
            }
        }
        
        // 원래부터 작은 얘들은 본래 크기보다 작게 하지 않도록
        else{
            if (value[0] < 1)   value[0] = 1;
            if (value[4] < 1)   value[4] = 1;
        }
        
        // 그리고 가운데 위치하도록 한다.
        scaleWidth = (int) (imageWidth * value[0]);
        scaleHeight = (int) (imageHeight * value[4]);
        if (scaleWidth < width){
            value[2] = (float) width / 2 - (float)scaleWidth / 2;
        }
        if (scaleHeight < height){
            value[5] = (float) height / 2 - (float)scaleHeight / 2;
        }
        
        matrix.setValues(value);
        savedMatrix2.set(matrix);
    }
}

출처 : http://blog.flysky.kr/?mid=blog&document_srl=4547416

<html>
<head>
<!-- css -->
<style type="text/css">

img {
 margin: 0px;
 padding: 0px;
 border: none;
 vertical-align: top;
}

div, li, a {
 margin: 0px;
 padding: 0px;
}

ol, ul {
 margin: 0px;
 padding: 0px;
 list-style: none;
}
a:link, a:visited {
 font-size: 1em;
 color: #555555;
 text-decoration: none;
}
a:hover, a:active {
 font-size: 1em;
 color: #CA3703;
 text-decoration: underline;
}
#Photo-Data {
 position: relative;
 margin-top: 10px;
 width: 400px;
 height: 104px;
}
#Photo-Data #Photo-Wrapper {
 position: relative;
 left: 42px;
 top: 17px;
 width: 310px;
 height: 71px;
 overflow: hidden;
}
#Photo-Data #Photo-List {
 position: absolute;
 left:0px;
 top:0px;
 width: 525px;
}
#Photo-Data #Photo-List li {
 float: left;
 margin-right: 5px;
}
#Photo-Data #Photo-Prev {
 position: absolute;
 top: 30px;
 left: 10px;
}
#Photo-Data #Photo-Next {
 position: absolute;
 top: 30px;
 right: 10px;
}
</style>
</head>
<body>

<!-- 이미지 슬라이드 태그 영역 -->
<!-- //////////////////////////////////////////////////////////////////////////////////// -->
    <div id="Photo-Data" style="valign:top;">
     <a href="#" id="Photo-Prev" onclick="_right();return false;"><img src="/image/banner/banner_off_move01.gif" onmouseover="this.src='/image/banner/banner_on_move01.gif';" onmouseout="this.src='/image/banner/banner_off_move01.gif';"alt="이전" /></a>
     <div id="Photo-Wrapper">
      <ul id="Photo-List">
       <li><a href="#"><img src="/image/banner/banner_01.gif" alt="[사진]1" width="100" height="33" /></a></li>
       <li><a href="#"><img src="/image/banner/banner_01.gif" alt="[사진]2" width="100" height="33" /></a></li>
       <li><a href="#"><img src="/image/banner/banner_01.gif" alt="[사진]3" width="100" height="33" /></a></li>
       <li><a href="#"><img src="/image/banner/banner_01.gif" alt="[사진]4" width="100" height="33" /></a></li>
       <li><a href="#"><img src="/image/banner/banner_01.gif" alt="[사진]5" width="100" height="33" /></a></li>
      </ul>
     </div>
     <a href="#" id="Photo-Next" onclick="_left();return false;"><img src="/image/banner/banner_off_move02.gif" onmouseover="this.src='/image/banner/banner_on_move02.gif';" onmouseout="this.src='/image/banner/banner_off_move02.gif';" alt="다음" /></a>
    </div>
<!-- //////////////////////////////////////////////////////////////////////////////////// -->

<script>
 //<![CDATA[
 //******************************************************
 //DIRECTION (슬라이드 방향 설정)
 //DELAY_TIME (대기 시간 설정)
 //******************************************************
  var Direction = "LEFT";  //   LEFT | RIGHT
  var DELAY_TIME = 4000;  //  밀리세컨드 (1/1000) 
 
 //******************************************************
 //초기 세팅
 //******************************************************
  var Photo_Wrapper = document.getElementById("Photo-Wrapper");
  var Photo_List = document.getElementById("Photo-List");
 

  LIs = Photo_Wrapper.getElementsByTagName('li');
  cellWidth = LIs[0].offsetWidth+5;

 
  Photo_List.style.position ="absolute";
  Photo_List.style.top = "0px";
  Photo_List.style.left = "0px";
 
 
  //이미지의 갯수(LIs.length)가 3개 이하이면 이미지를 추가해준다.

  //이미지를 연속적으로 슬라이딩 하기 위해서는 LEFT 이동시

  //맨 앞의 이미지 두개를 맨뒤로 이동시켜야 하기 때문에 3개 이하로 셀렉트 했을경우

  //빈 공간이 보이게 된다.
 
  var i = 0;
  while(LIs.length <= 3){
   var newLI = LIs[i].cloneNode(true);
   LIs[i].parentNode.appendChild(newLI);
  }
 
 
 //******************************************************
 //초기 실행
 //******************************************************  
  if (Direction=="LEFT") {
   var final_x = -210;     
   //이미지 width : 123px 이고  margin : 5px 이므로 128px이 이미지의 간격임
   //이미지가 두개씩 움직이므로 128*2 = 256 px 이 됨
 
   var INTERVAL = setInterval("left(Photo_List)", DELAY_TIME);
  }
  else if(Direction=="RIGHT"){
   var final_x = 210;
  
   //오른쪽 슬라이드로 변경하기위한 준비단계로
   //위치를 조정하여 준다.
  
   //기준이 되는 위치는 항상 left:0px 이므로
   //오른쪽으로 슬라이드 하기 위해 left : -256 px 로 이동시켜 주어야 한다.
   Photo_List.style.top = "0px";
   Photo_List.style.left = "-210px";
   
   var INTERVAL = setInterval("right(Photo_List)", DELAY_TIME);
  }
 
  // 나머지는 js 파일에서 불러옴.
 

 //******************************************************
 //LEFT MOVE
 //******************************************************
 function _left(){
  Direction="LEFT";
  final_x = -210;
  var elem = document.getElementById("Photo-List");
 
  //슬라이드 진행중일 경우 클리어 시킴..
  if(elem.move) {
   clearTimeout(elem.move);
   left(elem);
  }
 
  left(elem);
 }
 
 function left(elem){
     var cellWidth = LIs[0].offsetWidth+5;
  moveSlideShow("Photo-List",final_x,0,10);
   }

 //******************************************************
 //RIGHT MOVE
 //******************************************************  
 function _right(){
  Direction = "RIGHT";
  final_x = 0;
  var elem = document.getElementById("Photo-List");
 
  if(elem.move) {
   clearTimeout(elem.move);
   right(elem);
  }
 
  right(elem);
 }
 
  function right(elem){
  moveSlideShow("Photo-List",final_x,0,10);
  }
  
 //******************************************************
 //SLIDE 처리 메소드
 //실제로 이미지를 애니메이션 처리하는 메서드..
 //setTimeout() 메서드로 단위px 만큼 반복적으로 이동시킨다.
 
 //지정된위치(final_X) 에 도착하면
 //반복적으로 움직이도록 하기 위하여
 //맨 앞, 또는 맨뒤의 엘리먼트를 잘라내어
 //맨 앞, 또는 맨뒤에 붙여준다.
 //******************************************************   
  var moveSlideShow = function(elementId,final_x,final_y,interval){
  var elem = document.getElementById(elementId);
  var xPos = parseInt(elem.style.left);
  var yPos = parseInt(elem.style.top);
 
  //xPos 와 final_x 같아지면 엘리먼트를 뒤로 이동시킨다.
  if(xPos == final_x){
   if(Direction=="LEFT"){
    attachLeft(elem);               //엘리먼트를 이동시킨다.
    return;
   }else if(Direction=="RIGHT"){
    attachRIGHT(elem);              //엘리먼트를 이동시킨다.
    return;
   }
  }
 
  //슬라이드를 종료한 후
  //위치를 이동시킨다.
  if(elem.move) clearTimeout(elem.move);

  // 이미지 슬라이드 무빙 가속
  // 이 부분이 없으면 이미지가 같은 속도로 움직인다.
  if((xPos == final_x) && (yPos == final_y)){
   return true;
  }
  if(xPos < final_x){
   var dist = Math.ceil((final_x - xPos)/10);
   xPos = xPos + dist;
  }
  if(xPos > final_x){
   var dist = Math.ceil((xPos - final_x)/10);
   xPos = xPos - dist ;
  }
 
 
  elem.style.left = xPos +"px";
  var repeat = "moveSlideShow('Photo-List',"+final_x+","+final_y+","+interval+")";
  elem.move = setTimeout(repeat,interval);
 }
 
 
 
 //******************************************************
 //좌측이동시 엘리먼트 제거,추가,위치설정
 //******************************************************
 var attachLeft = function(elem){
   var UL= elem;    //UL
   var LIs = UL.getElementsByTagName('li');
  
   var li_1 = LIs[0].cloneNode(true);
   LIs[0].parentNode.appendChild(li_1);
   LIs[0].parentNode.removeChild(LIs[0]);
  
   li_1 = LIs[0].cloneNode(true);
   LIs[0].parentNode.appendChild(li_1);
   LIs[0].parentNode.removeChild(LIs[0]);
  
   UL.style.left = "0px";
 }
 
 
 //******************************************************
 //우측이동시 엘리먼트 제거,추가,위치설정
 //******************************************************
 var attachRIGHT = function(elem){
   var UL= elem;    //UL
   var LIs = UL.getElementsByTagName('li');
  
   var li_1 = LIs[LIs.length-1].cloneNode(true);
   LIs[0].parentNode.insertBefore(li_1,LIs[0]);
   LIs[0].parentNode.removeChild(LIs[LIs.length-1]);
  
   li_1 = LIs[LIs.length-1].cloneNode(true);
   LIs[0].parentNode.insertBefore(li_1,LIs[0]);
   LIs[0].parentNode.removeChild(LIs[LIs.length-1]);
  
   UL.style.left = "-210px";
 }
 //]]>
</script>


</body>
</html>


사용방법 --------------------------------------------
 1.  필요이미지를 Photo-List Div에 넣고 width 값을 정해준다
 2.  그리고 하단 자바스크립트에서 간격을 정해준다 간격은 이미지 가로길이가 100px이라고 가정하면
     이미지 Width:100px Margin:5px 기 때문에 총 간격은 105px;가 된다 현재는 2개가 기본으로 나오는데
     그러면 가로 총 길이는 210px가 되겠다 스크립트에서 Width: 값을 210으로 바꿔준다(*색깔 참조*)
3. 이 스크립트는 가로 길이와 세로길이만 잘 정해주면 유용하게 사용가능하다

      

<html>
<head>

<script>
var SlideShowSpeed = 3000;
var CrossFadeDuration = 2;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false;       // don't change this

Picture.push('http://static.naver.com/newscast/2009/1222/0852501700335660.jpg');
Picture.push('http://static.naver.com/newscast/2009/1221/1835271823889298.jpg');
Picture.push('http://static.naver.com/newscast/2009/1221/213324-226167486.jpg');
Picture.push('http://static.naver.com/newscast/2009/1222/113314-599173208.jpg');
Picture.push('http://static.naver.com/newscast/2009/1222/115606-1425167123.jpg');
Picture.push('http://static.naver.com/newscast/2009/1222/0932151805408461.jpg');

var PictureUrl = new Array();
PictureUrl.push('http://www.etnews.co.kr/news/detail.html?portal=001_00001&id=200912210316');
PictureUrl.push('http://www.newdaily.co.kr/html/article/2009/12/21/ARTnhn37976.html');
PictureUrl.push('http://news.kbs.co.kr/special/digital/vod/walwal/2009/12/21/2014525.html');
PictureUrl.push('http://www.segye.com/Articles/SPN/ENTERTAINMENTS/Article.asp?aid=20091222001380&subctg1=&subctg2=');
PictureUrl.push('http://www.ohmynews.com/NWS_Web/View/at_pg.aspx?CNTN_CD=A0001286211&CMPT_CD=P0000');
PictureUrl.push('http://economy.hankooki.com/lpage/entv/200912/e2009122209310794220.htm');

var tss;
var iss;
var jss = 0;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 0; iss<pss+1; iss++)
{
    preLoad[iss] = new Image();
    preLoad[iss].src = Picture[iss];
}

function control(how)
{
    if (showHot)
    {
        if (how=='F') jss = jss + 1;
        if (how=='B') jss = jss - 1;
        if (jss > (pss)) jss = 0;
        if (jss < 0) jss = pss;

        setPos(jss);
    }
}

function setPos(pos)
{
    try
    {
        with(document)
        {
            if (all)
            {
                images.PictureBox.style.cursor = 'pointer';
                images.PictureBox.style.filter = 'blendTrans(duration=2)';
                images.PictureBox.style.filter = 'blendTrans(duration=CrossFadeDuration)';
                images.PictureBox.filters.blendTrans.Apply();
            }

            images.PictureBox.src = preLoad[pos].src;

            for(var i=0; i<Picture.length; i++)
            {
                var cig = document.getElementById('CaptionBox'+i);
                if(i==jss)
                {
                    cig.innerHTML = '<strong style="color:blue">'+(i+1)+'</strong>';
                }
                else
                {
                    cig.innerHTML = (i+1);
                }
                setEvent(cig, i);
            }

            if (all) images.PictureBox.filters.blendTrans.Play();

            images.PictureBox.onclick= function()
            {
                location = PictureUrl[pos];
            }
        }
    }
    catch (e)
    {
        alert(e);
    }
}

function setEvent(obj, pos)
{
    obj.onclick = function()
    {
        imgLoopContext.imgLoopStop();
        jss = pos;
        setPos(pos);
        imgLoopContext.imgLooping();
    }
}

var setTimer = null;
var imgLoopContext = {
    imgLooping : function()
    {
        setTimer = setInterval('control("F")', 1500);
    },
    imgLoopStop : function()
    {
        clearInterval(setTimer);
    }
}

window.onload = function()
{
    jss = parseInt(Math.random()*100)%Picture.length;
    setPos(jss);

    showHot = true;
    self.focus();
    imgLoopContext.imgLooping();
    document.images.PictureBox.onmouseover = imgLoopContext.imgLoopStop;
    document.images.PictureBox.onmouseout  = imgLoopContext.imgLooping;
}

</script>
    </head>
    <body>

        <table border='0' cellpadding='5' cellspacing='0'>
            <tr>
                <td colspan='3'>
                    <img src='http://static.naver.com/newscast/2009/1222/0852501700335660.jpg' name='PictureBox' width='100' height='60'>
                </td>
            </tr>
            <tr>
                <td id='CaptionBox' style='font-family:돋움; font-size:9pt; color:#FF3300;' align='center' colspan='3'>
                    <span id='CaptionBox0'>1</span>
                    <span id='CaptionBox1'>2</span>
                    <span id='CaptionBox2'>3</span>
                    <span id='CaptionBox3'>4</span>
                    <span id='CaptionBox4'>5</span>
                    <span id='CaptionBox5'>6</span>
                </td>
            </tr>
            <tr>
                <td align='center'><a href='#' onClick='javascript_:control("B");'>◀</a></td>
                <td align='center'></td>
                <td align='center'><a href='#' onClick='javascript_:control("F");'><b>▶</b></a></td>
            </tr>
        </table>

    </body>

</html>