Money in Mobile

세로 프로그래스바와 씨크바 예제이다. 

[xml 구성시 주의 사항]

1. Thumb 이미지 보다 크게 layout_width 폭을 지정하면 프로그래스바 폭이 두껍게 된다.

2. 프로그래바 폭을 조절하려면 android:maxWidht에 값을 넣어 준다.

        <com.tokaracamara.android.verticalslidevar.VerticalSeekBar

            android:id="@+id/SeekBar02"

            android:layout_width="56px"

            android:layout_height="fill_parent"

            android:maxWidth="10px"

            android:progressDrawable="@drawable/progress_vertical"

            android:thumb="@drawable/seek_thumb_wide" />

[샘플 소스]

아래 프로젝트에 AbsVerticalSeekBar파일의 한 곳이 오류가 잇어서 수정했다. 

썸브 바운데리 설정시 LeftBounday가 -1로 되는 것을 방지했다. gap 부분

VerticalSlidebarExample.zip

[참고 사이트]

http://code.google.com/p/trimirror-task/source/checkout

http://560b.sakura.ne.jp/android/VerticalSlidebarExample.zip

12장 애니메이션

온라인주소: http://lingostar.co.kr/wp/archives/648

Animation , Dynamic UI

에니메이션은 UI적인 접근을 위한 것이다

에니메이션 오버뷰 / 잔상 효과,  

 - NSTimer / 초창기 사용
- NSAnimation / 10.4때 만들어졌다. 거창해 보이지만 그냥 NSTimer에 이지인, 이지아웃기능을 넣은 간단한 것이다.

• CoreAnimation / 에니메이션 엔진을 만들었다.
• 
  

Dynamic UI의 정수: 타임머신, 스페이시스, 아이툰즈의 커버플로우,
 - 반복적인 움직임.. 

View Animation을 몸풀기로 만들어 보자

 - 간단히 에니메이션을 얻어오는 것이다.
 - 비깅 컴인만 해 주면 에니메이션된다.

 - 만들자 MovingMoving

 1) UIView, Button을 넣는다.

 - 아웃렛, 액션 하나가 있어야 할 것이다

헤더파일

#import <UIKit/UIKit.h>

@interface MovingMovingAppDelegate : NSObject <UIApplicationDelegate> {

UIWindow *window;

UIView *movingView;

}

- (IBAction)move:(id)sender;

@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UIView *movingView;

@end

임플리멘테이션파일

#import "MovingMovingAppDelegate.h"

@implementation MovingMovingAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

// Override point for customization after application launch

    [windowmakeKeyAndVisible];

}

- (void)dealloc {

    [window release];

    [super dealloc];

}

- (IBAction)move:(id)sender

{

movingView.center = CGPointMake(240, 400);

movingView.backgroundColor = [UIColoryellowColor];

movingView.transform = CGAffineTransformMakeRotation(90);

}

@end

이제 에니메이션 주자.

- (IBAction)move:(id)sender
{

[UIViewbeginAnimations:@"Moving"context:nil];

[UIViewsetAnimationDuration:2];

movingView.center = CGPointMake(240, 400);

movingView.backgroundColor = [UIColoryellowColor];

movingView.transform = CGAffineTransformMakeRotation(90);

[UIViewcommitAnimations];

}

블럭이 천천히 음직이려면

[UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];

여기서 보면 에니메이션의 시작과 종료의 기준은 아래 것이다.

[UIViewbeginAnimations:@"Moving"context:nil]; // 시작

[UIViewcommitAnimations];  // 종료

현재까지는 코어에니메이션을 사용한 것이다. 코어 그래픽스는 어제 한 것이다. 

코코아터치는 코어 에니메션에 떠받혀져 있다.

따라서 UIKit은 코어에니메이션을 잠간 빌려서 사용할 수 있다.
에니메이션을 동작을 잠간 고민해 보자

상기 에니메이션 불럭을 바깥으로  컬러변경코드를 옮겨 보자.

[UIViewbeginAnimations:@"Moving"context:nil];

[UIViewsetAnimationDuration:2];

[UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];

movingView.center = CGPointMake(240, 400);

movingView.transform = CGAffineTransformMakeRotation(90);

[UIViewcommitAnimations];

movingView.backgroundColor = [UIColoryellowColor];

그럼 움직이기전에 컬러값이 변경된후 움직이게 된다.

이렇게 되는 이유는 왜 그런지를 생각해 보라..

1초 딜레이를 주고 변하는 코드는 다음과 같다

[movingViewperformSelector:@selector(setBackgroundColor:) withObject:[UIColoryellowColor]afterDelay:1];

여기까지가 12-2까지 이다 

12-3 ~ 4까지 읽어 보라
12-5를 실습하자.

CoreAnimation Role을 만들어보자. (12.4.3 설명)

CABasicAnimation, CAKeyframeAnimation만 사용할 수 있고 나머지는 직접적으로 사용할 수는 없다.

CAAnimationGroup: 

패스를 갖는(반복)은 CAKeyframeAnimation으로 만들어야 한다.

아래 두개는 서로 약간다르다.

CALayer, CGLayer: 

CALayer : 코어에니메이션의 오브젝트 GPU가속이 되는 오브젝트로 하드웨어 가속이 가능하다. 

   이차원, 삼차원정의를 갖는 이차원 평명

  콘테츠로는 

   Quartz image, Quartz drawing, CoreText(Mac), OpenGL, Quarz Composer, QuickTime..(Mac)

Keyframe Animation Code

-  패스를 따라서 움직일 것이다.

새로운 프로젝터:

1.Helicopter를 만든다.

2.리소스를 넣어준다.  (Copy items into destination group's forlder를 체크해 준다)

Heli_1, 2, 3을 복사한다.

책 350페이지를 보자.

에니메이션 3가지 종류

1)UIView

 시작과 끝을 정의해서 한것.. MovingMoving

2)ImageAnimation 

    사람이 걷는 경우 걷는 이미지가 여러장이 있다. 이것은 코어에니메이션과는 전혀 상관이 없다. / 아주 많이 사용하는 방식

   Helicopter프로젝터 방식읻.

3)

4.인터페이스 빌더에서 미디어에서 이미지르 끌어다 놓는다

   버턴 두개.

5.프레임웤 추가 QuartzCore framework추가 / 임포트 하구
6. 아웃렛와 액션을 만든다. / 저장하고

#import <UIKit/UIKit.h>

#import <QuartzCore/QuartzCore.h>

@interface HelicopterAppDelegate : NSObject <UIApplicationDelegate> {

UIWindow *window;

UIImageView *helicopterImageView;

}

- (IBAction)toggleFly:(id)sender;

- (IBAction)moveThroughPath:(id)sender;

@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UIImageView *helicopterImageView;

@end

7.인터페이스빌더에서 상호 연결

8. 초기 정의와 액션을 코딩한다.

#import "HelicopterAppDelegate.h"

@implementation HelicopterAppDelegate

@synthesize window;

@synthesize helicopterImageView;

- (void)applicationDidFinishLaunching:(UIApplication *)application {

UIImage *heli1 = [UIImageimageNamed:@"Heli_1.png"];// 로컬의 이미지를 리소스를 읽어 오는 방법

UIImage *heli2 = [UIImage imageNamed:@"Heli_2.png"];

UIImage *heli3 = [UIImage imageNamed:@"Heli_3.png"];

NSArray *animationImageArray = [NSArray arrayWithObjects:heli1, heli2, heli3, nil];

helicopterImageView.animationImages = animationImageArray;

// Override point for customization after application launch

    [windowmakeKeyAndVisible];

}

- (void)dealloc {

    [window release];

    [super dealloc];

}

- (IBAction)toggleFly:(id)sender

{

if ([helicopterImageViewisAnimating]) {

[helicopterImageViewstopAnimating];

} else{

[helicopterImageViewstartAnimating];

}

}

- (IBAction)moveThroughPath:(id)sender

{

}

@end

9. KeyframAnimation을 만들어보자

- (IBAction)moveThroughPath:(id)sender

{

// Create path

CGPoint currCenter = helicopterImageView.center;  // 시작포인터가된다.

// S자곡선을 3가지콘트롤포인터가생긴다.

CGMutablePathRef aniPath = CGPathCreateMutable();

CGAffineTransform xform = CGAffineTransformIdentity;

CGPoint dest1 = CGPointMake(160, 200);

CGPoint dest2 = CGPointMake(160, 400);

// 이후패스를넣어준다. 콘트롤두개인베젤코드

CGPathMoveToPoint(aniPath, &xform, currCenter.x, currCenter.y);

CGPathAddCurveToPoint(aniPath, &xform, 0, 50, 0, 50, dest1.x, dest1.y);

CGPathAddCurveToPoint(aniPath, &xform, 310, 350, 310, 350, dest2.x, dest2.y);

// Create Animation Object 에니메이션을 설계하는 것이다.

CAKeyframeAnimation *keyAni = [CAKeyframeAnimationanimation];

keyAni.duration = 4.0;

keyAni.path = aniPath;

// Apply Animation  ㅊCALayer에 패스를 넘기겨 주는 것이다

// 뷰뒤에레이어가다숨어있다고보면이해가편해진다.

[helicopterImageView.layeraddAnimation:keyAni forKey:@"position"];//이순간 GPU에올라간다.

}

베젤 곡선을 코드 한줄로 변경해 보자.

//CGPathAddCurveToPoint(aniPath, &xform, 0, 50, 0, 50, dest1.x, dest1.y);

//CGPathAddCurveToPoint(aniPath, &xform, 310, 350, 310, 350, dest2.x, dest2.y);

CGPathAddCurveToPoint(aniPath, &xform, -200, 50, 500, 350, dest2.x, dest2.y);

결과는 다음과 같다.

에니메이션의 설계......음직임의 설계는 동일하며 내용만 달라진다... 애플도 이런 효고를 많이 사용한다.

추가로 하자.

버턴도 패스에 따라서 에니메이션 된다.

215페이지에 보면 UIView의 하부 것들은 모두 에니메이션 처리가 가능하다.

뷰에니메이션을 쌓주면 가능하다. 모든 프로퍼티가 다 에니메이션이 되는 것은 아니다. 

뷰의 프로퍼티가 되는 것은 에니메이션이된다.

모델과 프린젠테이션이 나누어져 있다.
에니메이션되는 것은 프리젠테이션이 되는 것이고 모델은 그대로 있다.

그래서 버턴이 움직일때 모델은 그대로 그 위치에 있어서 터치시 이벤트를 받고

움직이는 버턴을 클릭했을때는 반응이 없는 것이다

12.5.7
게임을 위한 확장

 중간에 장애물이 있을때에 대한 처리.. NSTimer를 사용해서 충돌 체크해 주는 것이다.
 360페이지 CGRectIntersectsRect이 중요한 함수 일 것이다

12.6.0 

코어에니메이션에 대해서 조금더 볼 것이다.

코아슬라이드라는 맥용 어플리케이션이 있다.

큰이미지는 UIView로는 할 수 없구. 타일드해야 해야 하는데 CALayer의 타일링 레이어를 사용해야 하다.

      큰PDF 파일을 헨들링

불꽃예제.. 2개의 큐뷰가 돌면서 전체를 큐뷰로해서 다시 돌리는 것 등이 가능하다.
레이어를 여러개 두어서.. 움직이게 된다. 

레이어로 모든 뷰를 바꿀수 있다.
단지 에니메이션되는 것이 아니라 GPU를 사용해서 콤포지트하기 위해서 가장 좋다.

모든 시작적인 미디어들을 레이어를 사용하는 것이 확장성과 빠르게 동작한다.

레이어를 서브클래서해서 사용할 수 있는 것은 더욱 많이 있다.
예제와 함께 어드벤스드하게 강의을 준비할 것이다. 

코어 에니메이션 책이 있다. 그런데 좀 부실하다. 애플의 가이드를 보고 하는 것이 좋다.

12.6 예제는 심화.. 뷰 트렌지션이다. 17.게임킷은 심화에서 하자.

Save - 아카이빙.. 

큰개념만 설명하고 18장으로 넘어가자..

380
과제 1.  <<  시도해 봐라..  헬리곱터가 심플스케치에서 손가락으로 움직인 경로로 헬리곱터가 움직이면 제미 있을 것이다.
과제2

http://d.hatena.ne.jp/thorikawa/20101130/p1

Android 응용 프로그램에서 사용할 수있는 편리한 UI 라이브러리

android

Android 애플 리케이션 말하면 UI 생명! 라는 것으로 괴짜 분들이 만들어지는 편리한 UI 라이브러리를 찾아낸 한 스크린 샷과 함께 정리해 있습니다 .

여러분 모두 소스와 일부 샘플 응용 프로그램을 게시되어 있으므로 당장이라도 시도 할 수 있습니다.

(작가 분들, 싣기로 문제가있는 것 같다면 수고 스럽겠지만 연락해주십시오)

Quick Action

• 공식 Twitter 어플 바람에 터치 한 부분에 풍선을 볼 수
• 레이아웃도 지정 가능

YAM의 잡기장 : Android Quick Action의 Android 라이브러리 프로​​젝트를 만들어 보았다

Drag and Drop ListView

• 드래그 앤 드롭으로 정렬 가능한 목록 보기
• 비슷한 같은 것은 여러가지 있지만 이것이 가장 사용하기 쉬웠다!

사용자가 정렬 가능한 ListView를 조금 리치에 해 보았다 - 내일의 열쇠

Calendar

• 뷰에서 공휴일 을 판별 표시 가능한 달력 보기
• 상하 좌우 톡에서 월을 전환 할 수도 있으므로, 제스처 조작을 실현하고 싶은 사람은 그 부분 만이라도 참고가 될지도

CalendarView 공개했습니다 - Kazzz의 일기

3D ListView

• 3D 로 회전하면서 스크롤 하는 목록 보기
• 개인적으로 좋아 합니다만, 사용 장소가 떠오르지 않는다 w

Android Tutorial : Making your own 3D list - Part 3 (final part) | Developer World

CoverFlow

• iPod 바람 커버 플로우
• 심플 하고 사용하기 쉬운입니다

Interfuser : Android Coverflow Widget V2

ChartLibrary

• 차트 라이브러리
• JFreeChart 를 Android 용으로 확장 한 것
• 막대 그래프 · 선 그래프 · 원 그래프 등 필요한 것 같은 것은 대략 구비되어있어 꽤 고기능
• LGPL 라이센스

afreechart - Project Hosting on Google Code

Zoomable ImageView

• 길게 누르면 터치로 확대 · 축소 할 수있게된다 ImageView
• 이미지 가 화면보다 클 것으로 표시 위치를 이동할 수있게된다
• 이동시 후치까지 가면 바운드 애니메이션 된

Android one finger zoom tutorial - Part 4 | Developer World

Drag and Drop ImageView

• 이미지 를 드래그 앤 드롭하여 버튼 을 두드리는
• 아래의 스크린 샷이라고 분 에서 아니지만, 이미지 를 드롭 할 때 회전하는 것입니다. 그 애니메이션이 멋진

Android에서 드래그 앤 드롭 - hidecheck의 일기

NumberPicker

• 증가 · 감소의 간격을 조정 가능한 수치 피커

사용자 NumberPicker 만들기 - 냐ン다후루 일기

Color Picker

• 색상 선택기
• 이쪽은 구형

Android에서 색상 선택기를 만들자 - 내일의 열쇠

Color Picker ( 11 / 30 추가)

• 또 한번 더 색상 선택기
• 이쪽은 링 계
• @ yanzm 씨가 가르쳐 주셨습니다!

YAM의 잡기장 : Android ColorPickerDialog을 만든

Vertical Slider ( 11 / 30 추가)

• 세로 슬라이더
• @ yyaammaa 씨가 가르쳐 주셨습니다!

Vertical Seekbar - Android Developers | Google 그룹

그 밖에도

이런 편리한있어! 라고하는 것이 있으면 가르쳐주세요