adsense4


[iPhone][MonoTouch] 11번째 예제 : PlumbBob iPhone

오늘은 가속도 센서로 부터 값을 읽어 아이폰의 기울기에 따라 이미지의 추가 반응을 하는 어플리케이션을 만들어 보겠습니다. 가속도 센서는 MonoTouch.UIKit.UIAccelerometer에 Acceleration이벤트가 정의 되어 있습니다. GPS의 경우와는 다르게 델리게이션을 통해 직접 가속도 값을 받아서 처리할 수 있도록 되어 있습니다. 애니메이션은 CATransform클래스를 사용합니다.


"PlumbBob"이름으로 새 솔루션을 만듭니다. 프로젝트는 "iPhone Utility"를 지정합니다.
생성된 파일 목록입니다.
프로젝트 팝업 메뉴에서 Add - Add Files를 선택하여 이미지 파일을 프로젝트에 추가합니다.
"Icon.png"와 "PlumbBob.png"이미지입니다.
"Icon.png"이미지는 어플리케이션 이미지로서 등록합니다. 프로젝트의 Options 설정 윈도우를 실행합니다.
"iPhone Application"카테고리 화면에서 "Application icon"의 값으로 설정합니다.
"PlumbBob.png"이미지는 컴파일 된 파일과 함께 복사 되어야 합니다. 이미지를 선택하고 팝업 메뉴에서 Build Action - Content를 선택하여 설정을 해 줍니다.
MainView.xib에 대해서는 이번 예제에선 어떤 작업도 없습니다. 프로그램적으로 이미지뷰를 추가하고 가속도의 값에 따라 기울기 방향이 바뀌는 애니메이션을 구현합니다.
FlipsideView.xib를 인터페이스빌더로 열고 "Title"을 "PlumbBob"으로 화면과 같이 바꾸고 저장하여 종료합니다.
이번 예제에서는 인터페이스빌더로 하는 작업이 거의 없습니다. 이상으로 간단히 구성을 마치고 프로그램을 보며 설명합니다.

MainViewController.cs source:
using MonoTouch.UIKit;
using System.Drawing;
using MonoTouch.Foundation;
using System;
using MonoTouch.CoreAnimation; .... (1)

namespace PlumbBob
{
public partial class MainViewController : UIViewController
{
UIImageView plumbBobView; .... (2)

public MainViewController (string nibName, NSBundle bundle) : base(nibName, bundle)
{
// Custom initialization
}

partial void showInfo (UIButton sender)
{
var controller = new FlipsideViewController ("FlipsideView", null);
controller.Done += delegate { this.DismissModalViewControllerAnimated (true); };
controller.ModalTransitionStyle = UIModalTransitionStyle.FlipHorizontal;
this.PresentModalViewController (controller, true);
}

public override void DidReceiveMemoryWarning ()
{
// Releases the view if it doesn't have a superview.
base.DidReceiveMemoryWarning ();

// Release any cached data, images, etc that aren't in use.
}

public override void ViewDidLoad () .... (3)
{
//base.ViewDidLoad ();
this.View.BackgroundColor = UIColor.Black; .... (4)

UIImage image = UIImage.FromFile("PlumbBob.png"); .... (5)
plumbBobView = new UIImageView(image); .... (6)
plumbBobView.Layer.AnchorPoint = new PointF(0.5f, 0.0f); .... (7)

plumbBobView.Frame = new RectangleF(this.View.Frame.Size.Width/2-20, 0.0f, 40.0f, 450.0f); .... (8)

this.View.AddSubview(plumbBobView); .... (9)

Console.WriteLine("Start Accelerometer");
UIAccelerometer.SharedAccelerometer.UpdateInterval = 1.0f/25; .... (10)

// 1. delegate
UIAccelerometer.SharedAccelerometer.Acceleration += delegate(object sender, UIAccelerometerEventArgs e) .... (11)
{
Console.WriteLine("Delegate (accelormeter) : x={0}, y={1}"
, e.Acceleration.X.ToString()
, e.Acceleration.Y.ToString()); .... (12)
HandleUIAccelerometerSharedAccelerometerAcceleration(sender, e); .... (13)
};
// 2. event function
//UIAccelerometer.SharedAccelerometer.Acceleration += HandleUIAccelerometerSharedAccelerometerAcceleration; .... (14)
}

void HandleUIAccelerometerSharedAccelerometerAcceleration (object sender, UIAccelerometerEventArgs e) .... (15)
{
Console.WriteLine("Accelormeter : x={0}, y={1}", e.Acceleration.X.ToString(), e.Acceleration.Y.ToString());

this.plumbBobView.Layer.RemoveAllAnimations(); .... (16)

float positionInDegrees = (float)-e.Acceleration.X * 30;
float degreeToRadian = (float)(positionInDegrees * Math.PI / 180); .... (17)

CATransform3D rotationTransform = CATransform3D.Identity; .... (18)
rotationTransform = rotationTransform.Rotate(degreeToRadian, 0.0f, 0.0f, 1.0f); .... (19)

this.plumbBobView.Layer.Transform = rotationTransform; .... (20)
}

public override void ViewDidUnload ()
{
// Release any retained subviews of the main view.
// e.g. this.myOutlet = null;

}
}
}
(1) 이미지의 애니메이션 관련 클래스를 사용하기 위해 MonoTouch.CoreAnimation을 정의 합니다.

(2) UIImageView의 멤버 변수를 정의 합니다. 화면의 추 모양의 이미지("PlumbBob.png")를 화면에 표시하기 위해 사용되는 이미지뷰입니다.

(3) 뷰의 로드가 끝났을 때를 지정하는 ViewDidLoad()이벤트 함수를 사용합니다. override키워드를 입력 후 이벤트 목록에서 선택 해 줍니다.

(4) 현재 뷰의 배경색(this.View.BackgroundColor)을 검정색으로 지정합니다. UIColor클래스는 기본 색상에 대해서 UIColor.Black같이 미리 정의 된 변수를 제공합니다.

(5) UIImage.FromFile("이미지파일이름")을 이용하여 "PlumbBob.png"이미지 객체를 생성합니다.

(6) (5)에서 생성한 이미지 객체를 이용하여 이미지뷰 멤버변수 plumbBobView의 객체를 생성합니다.

(7) UIImageView.Layer는 렌더링에 사용되는 애니메이션 레이어를 나타냅니다. 읽기 전용입니다.
Layer.AnchorPoint 속성은 레이어의 축이 되는 점을 지정하는 속성입니다. 이 축을 중심으로 이미지가 움직이게 됩니다.
AnchorPoint값은 노말라이즈 된 위치를 나타냅니다 (0.0f, 0.0f)는 레이어의 좌상단을 나타내며 (1.0f, 1.0f)는 우하단을 의미합니다. 따라서 (0.5f, 0.0f)는 레이어 상단의 중간 지점을 의미하게 됩니다. plumbBobView.Layer.AnchorPoint를 (0.5f, 0.0f)로 지정합니다.

(8) plumbBobView 이미지뷰의 좌표와 크기를 지정합니다. 화면의 중간 위치에 폭은 40.0f, 높이는 450.0f입니다.

(9) plumbBobView를 현재 뷰에 서브뷰로 추가합니다.

(10) 가속도 센서를 사용하기 위해 필요한 설정을 합니다. 가속도는 UIAccelerometer클래스에 정의 되어 있습니다.
시스템의 가속도 센서에 접근하기 위해서 UIAccelerometer.SharedAccelerometer 속성을 읽으면 됩니다.
가속도 센서의 값을 어느 정도 간격으로 읽을 것인지 결정하는 속성입니다.
1/25초 간격으로 읽도록 설정했습니다.

(11) 가속도 값을 얻기 위한 델리게이션 이벤트를 정의 합니다.
델리게이션은 파라미터로 UIAccelerometerEventArgs를 전달 받습니다.

(12) 가속도의 X축과 Y축의 값을 Console에 디버깅을 위해 출력하는 코드입니다.

(13) 가속도 값을 처리 하기 위한 메소드 HandleUIAccelerometerSharedAccelerometerAcceleration(sender, e)를 호출합니다.

(14) (13)처럼 delegate키워드를 사용하여 정의 할 수 있고, 직접 델리게이션에 이벤트로서 함수를 추가 할 수 있습니다.

(15) 가속도 값의 변화에 대해 애니메이션 처리를 하는 함수 입니다.

(16) 뷰의 레이어에 적용된 모든 애니메이션 작업을 삭제 합니다.

(17) X축에 대해서 움직인 만큼 각도를 구하기 위한 계산식입니다.

(18) CATransform3D는 X,Y,Z축의 회전을 구현하는 클래스입니다. Identity를 구합니다.

(19) (17)에서 구한 라디안 각도를 이용하여 회전된 정보를 구합니다.
첫번째 파라미터가 각도입니다.

(20) 회전 변환을 레이어에 적용하여 이미지가 움직이도록 합니다.

실행시 초기 화면입니다.
아이폰에서 실행된 화면입니다.

이상으로 가속도를 사용한 예제를 마칩니다.

샘플코드 : PlumbBob.zip





 

통계 위젯 (화이트)

67
50
400459

160x600스크래퍼

네이버Analysis