안드로이드 개발 정보 (글 수 1,069)

카드를 여러장 손에 쥔듯한 효과 내는 뷰

그냥가자

https://www.androidpub.com/android_dev_info/1198436

2011.01.11 13:25:37

18706

3 / 0

안녕하세요 그냥가자입니다.
제목 쓰기가 좀 그러네요...
필요할거 같아서 만든 뷰인데요... 카드를 여러장 손에쥐고 돌려가면서 고르는식의 뷰입니다.
말로는 좀 설명이 어렵고 캡쳐모양을 보시면 아실겁니다.

SpinLayout.java

package a.b.c.CardRotate;
import android.content.Context;
import android.graphics.Camera;
import android.graphics.Matrix;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.animation.Transformation;
import android.widget.RelativeLayout;
class SpinLayout extends RelativeLayout{
 private double nowRadian;
 private double subRadian;
 
 private float startX;
 private float startY;
 
 private float beforeX;
 private float beforeY;
 
 int childAxisX = 0;
 int childAxisY = 0;
 
 private double sumRadian;
 
 private VelocityTracker vTracker = null;
  
 private Context mContext;
 
 private OnItemSelectedListener mOnItemSelectedListener;
 
 double mMaxDegree = 90.0;
 
 double mUnitDegree = 30.0;
 
 double mClickDistance = 10.0;
 
 public SpinLayout(Context c) {
  // TODO Auto-generated constructor stub
  this(c,null);
 }
 public SpinLayout(Context c, AttributeSet attr){
  super(c, attr);
  setStaticTransformationsEnabled(true);
  mContext = c;
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent event) {
  float nowX;
  float nowY;
  
  // TODO Auto-generated method stub
  int action = event.getAction();
  
  if(this.vTracker == null){
   this.vTracker = VelocityTracker.obtain();
  }else{
   this.vTracker.clear();
  }
  
  switch (action){
  
  case MotionEvent.ACTION_MOVE:
   
  case MotionEvent.ACTION_DOWN:
   nowX = event.getX();
   nowY = event.getY();
   
   if(action == MotionEvent.ACTION_DOWN){
    startX = event.getX();
    startY = event.getY();
    initTouchEvent(event);
   }
   
   nowRadian = Math.toRadians(getRotatedDegree(beforeX, beforeY, nowX, nowY, childAxisX, childAxisY));
   subRadian = nowRadian;
   sumRadian += subRadian;
   
   
   if(!isValidArea(Math.toDegrees(sumRadian), -mMaxDegree, 0.0)){
    initTouchEvent(event);
    
    if(Math.toDegrees(sumRadian) > 0.0){
     subRadian = subRadian - sumRadian;
     sumRadian = 0.0;
    }else{
     subRadian = subRadian + (Math.toRadians(-mMaxDegree) - sumRadian);
     
     sumRadian = Math.toRadians(-mMaxDegree);
    }
    doBringToFront(Math.toDegrees(sumRadian), 0.5);
    this.invalidate();
    break;
   }
   doBringToFront(Math.toDegrees(sumRadian), 0.5);
   this.invalidate();
   
   beforeX = nowX;
   beforeY = nowY;
   
   break;
  
  case MotionEvent.ACTION_UP:
   double destDegree = 0.0;
   
   nowX = event.getX();
   nowY = event.getY(); 
   
   if(isClickEvent(nowX, nowY)){
    CardView selctedCardView = null;
    for(int i=0;i<getChildCount();i++){
     CardView cv = (CardView)getChildAt(i);
     double clickedDegree = getDegreeFromCartesian(nowX, nowY, childAxisX, childAxisY);
     clickedDegree = clickedDegree%360;
     if(clickedDegree > 180.0){
      clickedDegree = clickedDegree - 360.0;
     }else if(clickedDegree < -180.0){
      clickedDegree = 360.0+ clickedDegree;
     }
     
     Log.i("aaa", "degree="+clickedDegree);
     double radius = Math.sqrt((nowX-childAxisX)*(nowX-childAxisX)+(nowY-childAxisY)*(nowY-childAxisY));
     if(cv.isClicked(clickedDegree, radius, childAxisX - cv.getLeft(), childAxisY-cv.getTop())){
      selctedCardView = cv;
     }
    }
    if(selctedCardView != null){
     if(selctedCardView == pickView(Math.toDegrees(sumRadian), 0.5)){
      if(mOnItemSelectedListener!=null){
       mOnItemSelectedListener.onItemSelected(selctedCardView);
      }
     }
     
     destDegree = -selctedCardView.getInitRotateDegree();
     animateCardViews(Math.toDegrees(sumRadian), destDegree);
    }
    
    break;
   }
   
   double sumDegree = Math.toDegrees(sumRadian);
   double ceilDegree = Math.ceil(sumDegree / mUnitDegree)*mUnitDegree;
   double floorDegree = Math.floor(sumDegree / mUnitDegree)*mUnitDegree;
   
   if(sumDegree < 0){
    if(Math.signum(sumDegree-(ceilDegree+floorDegree)/2) < 0.0){
     destDegree = floorDegree;
    }else if(Math.signum(sumDegree-(ceilDegree+floorDegree)/2) > 0.0){
     destDegree = ceilDegree;
    }else{
     break;
    }
   }
   
   animateCardViews(sumDegree, destDegree);
   break;
  }
  return true;
 }
 
 private void doBringToFront(double degree, double rate){
  View child = pickView(degree, rate);
  if(child == null){
   return;
  }
  bringChildToFront(child);
  
 }
 
 private View pickView(double degree, double rate){
  View pickChild = null;
  double unitDegree = 30.0;
  for(int i=0;i<getChildCount(); i++){
   CardView cv = (CardView)getChildAt(i);
   if(cv.isSelected(degree, unitDegree, rate)){
    pickChild = cv;
   }
  }
  
  return pickChild;
 }
 
 private boolean isClickEvent(float nowX, float nowY){
  return Math.sqrt((nowX-startX)*(nowX-startX) + (nowY-startY)*(nowY-startY)) < mClickDistance; 
 }
 
 private boolean isValidArea(double degree, double from, double to){
  double newDegree = degree%360;
  if(newDegree > 180.0){
   newDegree = newDegree - 360.0; 
  }else if(newDegree < -180.0){
   newDegree = newDegree + 360.0;
  }
  if(from <= newDegree && to >= newDegree){
   return true;
  }
  
  return false;
 }
 
 private void initTouchEvent(MotionEvent event){
  this.vTracker.recycle();
  vTracker = null;
  
  this.vTracker = VelocityTracker.obtain();
  beforeX = event.getX();
  beforeY = event.getY();
 }
 
 private double getRotatedDegree(float x1, float y1, float x2, float y2, float cx, float cy){
  double startDegree = 0.0;
  double endDegree = 0.0;
  double rotateDegree = 0.0;
  startDegree = getDegreeFromCartesian(x1, y1, cx, cy);
  endDegree = getDegreeFromCartesian(x2, y2, cx, cy);
  rotateDegree = endDegree - startDegree;
  if(rotateDegree < -180.0){
   rotateDegree = 360 + rotateDegree ;
  }else if(rotateDegree > 180.0){
   rotateDegree = rotateDegree - 360;
  }
  
  return rotateDegree;
 }
 
 private double getDegreeFromCartesian(float nowX, float nowY, float centerX, float centerY){
  double nowRadian = 0.0;
  double nowDegree = 0.0;
  
  if(nowX - centerX > 0){
   nowRadian = Math.atan((nowY-centerY)/(nowX-centerX)) + Math.PI/2;
  }else if(nowX - centerX < 0){
   nowRadian = Math.atan((nowY-centerY)/(nowX-centerX)) + Math.PI/2*3;
  }
  nowDegree = Math.toDegrees(nowRadian);
  
  return nowDegree;
 }
 
 private void animateCardViews(final double fromDegree, final double destDegree){
  
  Thread animationThread = new Thread(new Runnable() {
   final long DURATION_TIME = 100;
   @Override
   public void run() {
    // TODO Auto-generated method stub
    long startTime = System.currentTimeMillis();
    long endTime = startTime + DURATION_TIME;
    long nowTime = System.currentTimeMillis();
    while((nowTime=System.currentTimeMillis()) <= endTime){
     long interpolatedTime = nowTime - startTime;
     final double sumDegree = fromDegree + (destDegree - fromDegree)/DURATION_TIME * interpolatedTime;
     
     sumRadian = Math.toRadians(sumDegree);
     postRedraw(sumDegree);
    }
    
    if(sumRadian != destDegree){
     sumRadian = Math.toRadians(destDegree);
     
     postRedraw(destDegree);
    }
   }
  });
  animationThread.start();
 }
  
 private void postRedraw(final double degree){
  postInvalidate();
  post(new Runnable() {
   
   @Override
   public void run() {
    // TODO Auto-generated method stub
    doBringToFront(degree, 0.5);
   }
  });
  
 }
 
 @Override
 protected boolean getChildStaticTransformation(View child,
   Transformation t) {
  // TODO Auto-generated method stub
  final int childWidth = child.getWidth();
  final int childHeight = child.getHeight();
  
  childAxisX = child.getLeft() + child.getWidth()/2;
  childAxisY = child.getTop()+ child.getHeight();
  
  float alpha = 1.0f;
  CardView cv = null;
  if(child instanceof CardView){
   cv = (CardView)child;
   cv.setDegree(Math.toDegrees(sumRadian));
   if(!cv.isSelected(Math.toDegrees(sumRadian), mUnitDegree, 0.5)){
    alpha = 1.0f;
   }else{
    alpha = 1.0f;
   }
  }
  
  Camera mCamera = new Camera();
  t.setTransformationType(Transformation.TYPE_MATRIX);
  
  mCamera.save();
  final Matrix matrix = t.getMatrix();
  t.setAlpha(alpha);
    
  mCamera.rotateZ((float)-cv.getRotatedDegree());         
  mCamera.getMatrix(matrix);    
    
  matrix.preTranslate(-(childWidth/2), -(childHeight));
  matrix.postTranslate((childWidth/2), (childHeight));  
    
  mCamera.restore();
  
  return true;
 }
 
 @Override
 protected void onAttachedToWindow() {
  // TODO Auto-generated method stub
  super.onAttachedToWindow();
  doBringToFront(Math.toDegrees(sumRadian), 0.5);
 }
 
 public double getNowRadian() {
  return nowRadian;
 }
 public void setNowRadian(double nowRadian) {
  this.nowRadian = nowRadian;
 }
 
 public interface OnItemSelectedListener{
  public void onItemSelected(View v);
 }

 public void setMaxDegree(double degree){
  mMaxDegree = degree;
  if(getChildCount()>1){
   mUnitDegree = mMaxDegree / (getChildCount()-1);
  }else{
   mUnitDegree = mMaxDegree;
  }
  
  for(int i=0; i < getChildCount() ; i++){
   double initDegree = mUnitDegree*(getChildCount()-1-i);
   CardView cv = (CardView)getChildAt(i);
   cv.setInitRotatedDegree(initDegree);
  }
  sumRadian = 0.0;
  this.invalidate();
 }
 
 public OnItemSelectedListener getmOnItemSelectedListener() {
  return mOnItemSelectedListener;
 }
 public void setmOnItemSelectedListener(
   OnItemSelectedListener mOnItemSelectedListener) {
  this.mOnItemSelectedListener = mOnItemSelectedListener;
 }
}

CardView.java

package a.b.c.CardRotate;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.ImageView;
public class CardView extends ImageView{
 private double initRotatedDegree = 0.0;
 private double degree = 0.0;
 
 
 public CardView(Context context) {
  this(context, null);
  // TODO Auto-generated constructor stub
 }
 
 public CardView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
  // TODO Auto-generated constructor stub
 }
 public CardView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  // TODO Auto-generated constructor stub
 }
 
 public double getInitRotateDegree(){
  return initRotatedDegree;
 }
 
 
 public double getRotatedDegree() {
  return initRotatedDegree + degree;
 }
 public void setInitRotatedDegree(double rotatedDegree) {
  this.initRotatedDegree = rotatedDegree;
 }
 
 public void setDegree(double degree) {
  this.degree = degree;
 }
 
 public boolean isSelected(double degree, double unitDegree, double rate){
  double fromDegree = -initRotatedDegree - (unitDegree*rate);
  double toDegree = -initRotatedDegree + (unitDegree*rate);
  
  
  return (fromDegree <= degree && toDegree > degree);
  
 }
 
 public boolean isClicked(double degree, double radius, int pivotX, int pivotY){
  double nowDegree =degree - getRotatedDegree();
  int nowX = (int)(radius*Math.cos(Math.toRadians(nowDegree-90.0)));
  int nowY = (int)(radius*Math.sin(Math.toRadians(nowDegree-90.0)));
  
  int left = -pivotX;
  int top = -pivotY;
  int right = this.getWidth() - pivotX;
  int bottom = this.getHeight() - pivotY;
  
  Rect r = new Rect(left, top, right, bottom);
  
  return r.contains(nowX, nowY);
 }
}

MainActivity.java

package a.b.c.CardRotate;
import kr.co.softcast.CardRotate.SpinLayout.OnItemSelectedListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.spin_service);
        SpinLayout spinLayout = (SpinLayout)findViewById(R.id.spinLinear);
        spinLayout.setMaxDegree(90.0 / 4 *3.5);
        spinLayout.setmOnItemSelectedListener(new OnItemSelectedListener() {
   
   @Override
   public void onItemSelected(View v) {
    // TODO Auto-generated method stub
    int id = v.getId();
    switch(id){
    case R.id.imageView1:
     Toast.makeText(MainActivity.this, "1번 선택", 1000).show();
     break;
    case R.id.imageView2:
     Toast.makeText(MainActivity.this, "2번 선택", 1000).show();
     break;
    case R.id.imageView3:
     Toast.makeText(MainActivity.this, "3번 선택", 1000).show();
     break;
    case R.id.imageView4:
     Toast.makeText(MainActivity.this, "4번 선택", 1000).show();
     break;
    }
    
   }
  });
    }
}

spin_service.xml

<?xml version="1.0" encoding="utf-8"?>
<a.b.c.CardRotate.SpinLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/spinLinear" 
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"> 
   
   <a.b.c.CardRotate.CardView 
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/card_04"
        android:layout_centerInParent = "true"
   />
   
   <a.b.c.CardRotate.CardView 
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/card_03"
        android:layout_centerInParent = "true"
   />
   
   <a.b.c.CardRotate.CardView 
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/card_02"
        android:layout_centerInParent = "true"
   />
   
   <a.b.c.CardRotate.CardView 
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/card_01"
        android:layout_centerInParent = "true"
   />
</a.b.c.CardRotate.SpinLayout>

이 게시물을

spinCard.png (80.0KB)(206)

2011.01.11 13:31:57

그냥가자

아놔 그림..... ㅠ.ㅠ 누가 그림표시하는 방법좀 쪽지로 주세요 ㅠ.ㅠ

2011.01.11 13:33:07

컴퓨터링

개발영역을 사교계로 확장하시는 군요 . . 무섭습니다~ ㅎㅎ . . 스핀카드 이미지가 다운로드 해야만 볼수있네요. . 저만 그런가 ㅋ

2011.01.11 13:35:37

자바개발자

파일첨부후 본문삽입 버튼 클릭하심 됩니당..^^

spinCard.png (80.0KB)(208)

2011.01.11 13:39:34

그냥가자

전 안되네요

PS. 망할놈의 익스8.....

spinCard.png (80.0KB)(94)

2011.01.11 13:35:54

그냥가자

말그대로 효과라는거죠... 이미지야 그냥 잴 많이 쓸만한 걸로 한거구요 ㅋ
카드 주고받는 보드게임에 효과로 쓸수도 있겠으나 카드가 많으면 겹침이 심해서 좀 안타깝군요....
4장정도 쓰면 딱인듯하네요

되는 기능은 다음과 같습니다.

1. 드래그로 인한 회전
2. 클릭으로 인한 Animation
3. 도킹(어중간하게 돌렸을때 카드쪽으로 붙는기능)
4. 가운데 있는 카드를 클릭했을 때 선택 확정하는 이벤트 콜백

2011.01.11 16:10:46

아즈라엘

예전에 제일은행 어플 메인화면이 이런식으로 된거 같아서 찾아보긴 했었는데^^

굉장히 훌륭하네요~~

스무스하게 잘 굴러가는거 같습니다.

2011.01.11 16:29:21

그냥가자

저는 숫자노가다 하느라 힘들었습니다. ㅠ.ㅠ
결국 계산식 싸움이라서... 예전에 만들던 충돌 시뮬레이터 소스도 좀 보고 (각 구하는 식 때문에...)

겹치는 영역에 대한 클릭이라던가 이런 처리는 거의 없습니다.
그런쪽에서 어설픈 버그가 있을지도 모르겠군요.

2011.01.11 16:46:56

아즈라엘

에뮬레이터에 계속 돌려보니깡..에러는 나오긴 하는군요..

VelocityTracker <-- 요 클래스도 첨보네요

덕분에 많이 알아 가는거 같아 고맙습니다.

나중에 시간되면 찬찬히 훌터보고 버그도 잡아보고 해야겠네요 ..

2011.01.11 16:54:41

그냥가자

에러좀 어떻게 받을수 없을까요? 재현이 빡세네요 ㅡㅡㅋ

그리고 Tracker는 딴데서 쓰다가 코드를 가져와서 수정하다보니 박혀있네요....
실제로는 안씁니다. 쓸데가 없어요... 그리고 쓸수가 없구요 ㅡㅡㅋ
회전각을 재거나 각속도를 재는데 쓸수 없기 때문이죠...

2011.01.11 17:21:28

볼레로

우와 멋진데요 ^^

2011.01.12 18:07:44

커니

오오.... 필요가 작품을 만드는군요.... '_'

안드로이드 기본 UI를 허접하게 만들어 놓은건 더 멋진걸 만들라는 의미였을까요??? '_'

2011.01.12 21:14:33

그냥가자

그건 좀 안좋군요.... 소비자를 우롱하는 행태나 다름없다고 보네요 ㅋㅋ
저는 안드로이드 플랫폼 상에서 개발하는 개발자도 플랫폼의 소비자로 보고있어서...

2011.02.09 14:17:29

dhtkd23

전 완전 초보인데요.ㅋㅋㅋ 그대로 긁어서 폰에서 실행하려니 런타임에러가 나서요..ㅠㅠ 어디쪽이 문제일까요 ???ㅠㅠ

2011.02.19 13:10:05

컴바인

전 왜 이부분이 뻑날까요ㅠㅠ
제꺼에 맞춰서 바꿔줬는데도.ㅠㅠ

import

kr.co.softcast.CardRotate.SpinLayout.OnItemSelectedListener;

2011.03.10 14:10:34

스페이스양

자신의 경로에 맞게 써야죠...
내경로.SpinLayout.OnItemSelectedListener;
SpinLayout.java 있는곳

AndroidManifest.xml 역시 맞게 고쳐야합니다

2013.01.11 17:55:41

김기훈

여기에 있는대로 했는데

소스상 에러는 안뜨는데

저는 핸드폰에 넣어서 실행하니까 오류가 나네요 ㅠ.ㅠ

메니페스트 파일도 어떻게 바꿔줘야되나요??

설명에 없어서요 ㅠ.ㅠ

혹시 소스를 받아볼수는 없을까요??

가능하다면

ghkim005@naver.com

여기로 보내주세요

아니면 매니페스트 파일 수정해야되는 부분이면 설명좀요...

번호	분류	제목	글쓴이	날짜	추천	조회
공지	앱개발	[필독] 안드로이드 개발 정보 게시판 사용법 - 질문금지!	회색	01-01		290375
공지	소스	안드로이드 기반 오픈 소스 프로젝트 및 참고 사이트 모음 21	회색	01-29	1	455923
공지	앱개발	안드로이드(Android SDK) 앱 개발 강좌 모음 40	회색	01-29	5	519795
469	외부API	서울시 모바일 공공정보 Open API 6	회색	01-31		11162
468	앱개발	Honeycomb 에뮬 화면 회전 문제. 4	컨버전스	01-28		11387
467	앱개발	기본적인 안드로이드 바탕화면 드래그엔드롭 화면전환 7	visualkhh	01-27		7829
466	앱개발	Android ADT 9.0.0 발표 9	삽살도그	01-27	1	6957
465	소스	오픈소스 내비게이션 프로그램 14	매발톱	01-26		78496
464	앱개발	뷰에 표시되는 내용을 이미지로 캡쳐하려면? 12	커니	01-24		15318
463	강좌	윈도우즈 개발환경 구성 - Eclipse 3.6.1 (Helios), ADT-8.0.1 6	telnet99	01-20		44367
462	앱개발	Activity 의 내용을 작성할 때 유용한 방법 2	hbull	01-20		5792
461	앱개발	RemoteView에서 keyborad event 적용하는 방법 궁금합니다. 2	너초리	01-20		6849
460	기타	Western Union Quick Cash 수령에 관한 정보	볼레로	01-18		7266
459	기타	구글마켓과 국내 앱스토어의 장단점. 8	볼레로	01-17		8925
458	앱개발	Android NDK Debugging, Visual Studio style! 3	컨버전스	01-14	1	10515
457	소스	마켓리스트 [로딩중] 구현 샘플 29	청명공자	01-11	1	15426
	소스	카드를 여러장 손에 쥔듯한 효과 내는 뷰 16	그냥가자	01-11	3	18706
455	앱개발	SDK Version 에 관한 간단한 내용입니다.	볼레로	01-09		14096
454	앱개발	Mac OS X에서 안드로이드 개발환경(PATH) 설정하기	커니	01-09		14976
453	앱개발	단말기 화면에 표시되는 뷰의 구조 확인하기 (ADT 8.0 이상) 2	커니	01-09		10310
452	앱개발	해상도와 프로젝트 설정에 관련해서... 14	볼레로	01-09	2	19227
451	앱개발	[Android 2.3] DownloadManager 사용하기 8	커니	01-07		12308
450	강좌	android 안드로이드 종료 시키는 여러 방법 테스트 5	아나코폴라	01-07		43599

쓰기

첫 페이지 26 27 28 29 30 31 32 33 34 35 끝 페이지