본문 바로가기

프로그래밍/아이폰 프로그래밍

25. View 전환 효과



View Transition 효과

  

 개인 공부도 되고 다른사람도 알면 좋지 않을까 해서 계속 올릴 예정입니다

 

소스도 공개해서 파일로 다 올려드리겠습니다~:)

 

그중 가장 기본적은 뷰 전환 효과!

 

거의다 뷰 전환시 네이게이션 바를 사용해서 움직입니다.

 

그러면 뷰의 디자인이 재미없어진다. 무조건 버튼이 위로 가있다. 그리고 테이블을 사용하게 되면 여러가지 효과를 못씁니다 ㅠㅠ.

하지만 버튼을 사용해서 이미지를 입히면 훨신 앱이 유용하고 디자인 폭 또한 넓어집니다.

 

다른뷰를 가지고 오는것은 대부분 알것이라고 생각해서 뷰 전환 효과까지 넣어봤습니다.

 

윈도우 베이지로 만들고 뷰컨트롤러를 4개를 추가한다. 그리고 이미지도 따로 넣어봤습니다~

 

이왕 할거면 블로그도 홍보 할겸 간단한 이미지도 올려보았다. 그냥 하면 재미없으니깐 ㅎㅎㅎㅎ

일단 해더 파일에서 선언을 해줘야 합니다..

 


 

 

그리고 구현부분으로 가서 선언했던 변수들의 값을 넣어줘야 합니다.

아, 기본적인거지만 #import 부분에 해달 뷰들의 해더값을 추가를 해 주셔야 합니다.



코드는 제가 올린 프로그램 파일 받아서 보시면 됩니다. 간단히 보시자면

 

-(IBAction) view1bt:(id)sender;
{
 View1Controller *view1Controller = [[View1Controller alloc] initWithNibName:@"View1Controller" bundle:nil];
 
 [UIView beginAnimations:@"flipping view" context:nil];
 [UIView setAnimationDuration:0.7];
 [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
 [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];
 
 [self.view addSubview:view1Controller.view];
 [UIView commitAnimations];
}


 

View1controller를 사용하겠다고 선언을 합니다.
 View1Controller *view1Controller = [[View1Controller alloc] initWithNibName:@"View1Controller" bundle:nil];

애니메이션을 시작 하겠다고 선언하고

 [UIView beginAnimations:@"flipping view" context:nil];
트잰지션, 즉 어떤 효과를 넣어줄것인지 보여 줍니다

 [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];

여기서 중요한데 "UIViewAnimationTransitionCurlDown" 이 부분이 효과를 넣는 부분입니다.

여기서 효과를 바뀌어 줄수 있죠

뭐, 4개만 가능한데 UIViewAnimationTransitionCurlDown, UIViewAnimationTransitionCurlUp,

UIViewAnimationTransitionFlipFromLeft, UIViewAnimationTransitionFlipFromRight 이렇게 4가지 입니다.

제가 올린 소스에는 4가지 효과를 올렸습니다.

 

지금 있는 뷰에다가 아까 선언한 view1Controller를 더해 줍니다~

 [self.view addSubview:view1Controller.view];

 

그리고 애니메이션을 완료 합니다!

 [UIView commitAnimations];



그리고 버튼을 4개 올리고 오른쪽 이미지에서 잘라냈던 이미지를 덮어 씌어 줍니다.

걍 배경화면에 맞게 맞춰주시면 되구요 ~:)


 

버튼을 눌렀을때 하이라이트 효과도 같은 그림을 넣어줌으로써 버튼을 눌러도 버튼 그림이 고정적으로 하게 만들어 줍니다.





다음 아까 선언했던 부분들을 버튼과 연결해 줍니다.


 

Toutch Up Inside로 선택을 해 주시면 버튼을 눌렀을때 효과가 나오는 것입니다.


나머지 하위 뷰들도 연결을 해 주시면 되구요~


 

실행하시면 각각 뷰 전환시 트랜지션이 움직이는것을 확인할수 있을 겁니다.

상황에 맞게 설정을 해 주시면 되구요,





출처 : http://cafe.naver.com/mcbugi/104182