이전 세 개의 글에서는 간단한 QQ5.0 스타일 왼쪽 스와이프 효과 구현 방법을 소개했습니다. 본 글에서는 Android 3.0 이상 버전에서 제공하는 속성 애니메이션을 활용한 실제 QQ5.0 스타일 스와이프 효과 구현을 탐구합니다. 이 내용은 이전 세 개의 글과 밀접한 연관성을 가지고 있으며, 이전 글을 완전히 이해했다면 이 글도 어렵지 않을 것입니다. 본 글의 핵심은 속성 애니메이션을 통해 위의 시각 효과를 구현하는 것입니다.

시작하기 전에 사과드립니다. 이전 세 개의 글에서 코드 작성 오류로 인해 메뉴 배경 이미지가 전체 화면을 채우지 못하는 문제가 발생했습니다. 이 문제를 어떻게 해결할 수 있을까요?

left_menu.xml 파일에서 background 속성을 android:background="#0000"으로 수정하세요.

activity_main.xml 코드:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:hyman="http://schemas.android.com/apk/res/com.example.android_qq_view"
    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=".MainActivity" >

    <com.example.menu.SlidingMenu 
        android:id="@+id/slidingMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/img_frame_background"
        hyman:rightPadding="100dp" >
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            >
            
            <include layout="@layout/left_menu"/>"
            
            <LinearLayout 
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/qq"
                >
                <Button 
                    android:id="@+id/button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="전환 버튼"
                    />
            </LinearLayout>
            
        </LinearLayout>
    </com.example.menu.SlidingMenu>
    
</RelativeLayout>

배경 이미지를 청색 표시 위치에 추가하세요.

다른 부분은 변경하지 않아도 됩니다. 이제 속성 애니메이션을 통해 위의 효과를 구현하는 방법을 분석해보겠습니다:

　　/**
     * 드로어 스타일 스와이프 효과 구현
     */
    @Override
    protected void onScrollChanged(int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
        super.onScrollChanged(scrollX, scrollY, oldScrollX, oldScrollY);
        
        /**
         * 차이점1: 콘텐츠 영역 1.0~0.7 확대 효과 scale : 1.0~0.0 0.7 + 0.3 * scale
         * 
         * 차이점2: 메뉴의 이동 거리가 변경되어야 함
         * 
         * 차이점3: 메뉴 표시 시 확대 및 투명도 변화가 필요함. 확대: 0.7 ~1.0 1.0 - scale * 0.3 투명도 0.6 ~ 1.0 
         * 0.6+ 0.4 * (1- scale) ;
         * 
         */
        
        // 메뉴 표시/숨기기 애니메이션 설정
        float scrollRatio = scrollX * 1.0f /menuWidth;
        ViewHelper.setTranslationX(menuView, menuWidth*scrollRatio*0.7f);
        
        // 메뉴 투명도 변화 설정
        float menuScale = 0.6f+ 0.4f * (1- scrollRatio);
        ViewHelper.setScaleX(menuView, menuScale);
        ViewHelper.setScaleY(menuView, menuScale);
        // 메뉴 확대 비율 설정
        float menuAlpha = 1.0f - scrollRatio * 0.3f;
        ViewHelper.setAlpha(menuView, menuAlpha);
        
        // 콘텐츠 확대 중심 설정
        ViewHelper.setPivotX(contentView, 0);
        ViewHelper.setPivotY(contentView, contentView.getHeight()/2);
        // 콘텐츠 투명도 변화 설정
        float contentScale = 0.7f + 0.3f * scrollRatio;
        ViewHelper.setScaleX(contentView, contentScale);
        ViewHelper.setScaleY(contentView, contentScale);
        
    }

Android 3.0 이하 시스템은 속성 애니메이션이 지원되지 않으므로, 해당 패키지를 추가해야 합니다. 필요하신 분은 댓글로 알려주세요. 위 과정을 통해 스와이프 효과가 완전히 구현되었습니다. 효과를 확인해보세요: