북극곰의 개발일기

beginDelayTransition을 사용한 안드로이드 전환





posted by purplebeen on Sat Feb 03 2018 23:11:24 GMT+0900 (KST) in Android


안드로이드 전환 프레임워크(Transitions Framework) 안드로이드 4.4 킷캣의 일부로 소개, 우리 애플리케이션의 화면을 구성하는뷰에 애니메이션 효과를 쉽게 추가할 수 있도록 설계되었다.

장면(Scene) : 사용자 인터페이스 화면의 레이아웃 전체 또는 일부를 나타낸다.

-> ViewGroup 객체 타입의 사용자 인터페이스 뷰들을 참조하여 생성, TransitionManager 클래스를 사용하여 전환이 수행.

인터폴레이터(Interpolator) : 안드로이드 애니메이션 프레임워크의 기능이며 사전 정의된 다양한 방법으로 애니메이션을 변경할 수 있게 해주는 것으로 전환을 Customizing 할때 사용할 수 있다.

AccelerateDecelerateInterpolator : 애니메이션을 느리게 시작한 다음 중간 정도 빠르기로 처리 속도를 높인다.

AccelerateInterpolator : 애니메이션을 느리게 시작해서 지정된 속도까지 가속하며 끝날 때까지도 감속하지 않는다.

AnticipateInterpolator : 새총과 유사한 효과, 구성된 애니메이션과 역방향으로 애니메이션 뷰가 움직였다가 정방향으로 던지듯 이동, 이때 역방향으로 젖혀지는 힘의 세기는 장력 명세로 제어된다.

AntiOvershootInterpolator : 화면의 목표 위치를 지나쳤다가 돌아오는 애니메이션 객체에 AnticipateInterpolator가 제공하는 효과를 결합한다.

BounceInterpolator : 애니메이션 처리되는 뷰가 자신의 목표 위치에 도달할 때 통통 튀게(bounce) 한다.

CycleInterpolator : 지정된 횟수만큼 애니메이션이 반복되도록 구성한다.

DecelerateInterpolator : 애니메이션이 빨리 시작한 다음 끝날 즈음에 지정된 계수에 의해 감속되도록 한다.

LinearInterpolator : 애니메이션이 일정한 속도로 수행되도록 지정하는데 사용된다.

OvershootInterpolator : 지정된 목표 지점을 지나쳤다가 복귀하도록 한다. 초과량은 장력을 지정하여 구성할 수 있다.

TransitionSet : 커스텀된 전환을 할 때 사용한다. (change bound : 변경 한도, fade : fade 효과 설정)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/myLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.ebookfrenzy.transitiondemo.TransitionDemoActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:id="@+id/myButton1"
        android:textAllCaps="false" />
</RelativeLayout>

Relative Layout에 버튼 하나를 넣어주고 연동을 위해 레이아웃과 버튼 모두 id를 넣어 준다.

	myLayout = (ViewGroup) findViewById(R.id.myLayout); 
	myLayout.setOnTouchListener(new RelativeLayout.OnTouchListener() { 
		@Override 
		public boolean onTouch(View view, MotionEvent motionEvent) { 
			handleTouch(); 
			return true; 
			} 
		});
public void handleTouch() {
        View view = findViewById(R.id.myButton1);

        Transition changeBounds = new ChangeBounds();
        changeBounds.setDuration(3000);
        changeBounds.setInterpolator(new BounceInterpolator());

        TransitionManager.beginDelayedTransition(myLayout,changeBounds);
        
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams
(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, RelativeLayout.TRUE);
        params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
        view.setLayoutParams(params);

        ViewGroup.LayoutParams lparams = view.getLayoutParams();

        lparams.width = 500;
        lparams.height = 350;
        view.setLayoutParams(lparams);
    }

myButton1에 해당되는 view 객체를 생성해주고,

변경 한도를 설정하기 위한 Transition형 changeBound 인스턴스를 생성한 뒤에

Duration(진행 시간)을 3000ms(= 3초), 통통 튀는 효과를 주기 위해

전환시 사용되는 Interpolator를 BounceInterpolator 인스턴스를 생성하여 설정시켜준다.

LayoutParams는 자바 코드에서 UI xml코드의 값들을 설정할 수 있도록 만들어 준다.

Relative Layout에서 width와 height를 wrap_content로 설정해주고

alignParentTop과 alignParentBottom을 true로 설정해 준다.

그런 다음 현재의 뷰(Button)에 이 값들을 설정 시켜 주고

현재의 뷰 그룹(여기서는 RelativeLayout)의 LayoutParam 형태로 버튼의 LayoutParam instance를 만들어 주고,

width를 500으로, height를 350으로 설정해주고 이를 현재의 뷰에 설정시켜준다.