1. 程式人生 > >利用ObjectAnimator實現側滑選單的效果

利用ObjectAnimator實現側滑選單的效果

objectAnimator是一種焦點可以隨著動畫移動的動畫,下面用一個簡單的平移動畫的例子,來實現側滑選單。
首先是頁面主體程式碼:

package com.example.myobjectanimation;

import android.animation.Animator;
import android.animation.Animator.AnimatorListener;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.os.Bundle;
import
android.util.DisplayMetrics; import android.view.View; import android.view.View.OnClickListener; import android.widget.LinearLayout; import android.widget.TextView; public class MainActivity extends Activity implements OnClickListener { /** * 顯示側滑選單 */ private static final int MENU_VISIBLE = 0
; /** * 隱藏側滑選單 */ private static final int MENU_GONE = 1; private LinearLayout llMain; private LinearLayout llMenu; private LinearLayout llMenuRight; private LinearLayout llMenuLeft; private TextView tvMain; @Override protected void onCreate(Bundle savedInstanceState) { super
.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); } private void init() { llMain = (LinearLayout) findViewById(R.id.ll_main); llMain.setOnClickListener(this); llMenu = (LinearLayout) findViewById(R.id.ll_menu); llMenu.setOnClickListener(this); llMenuLeft = (LinearLayout) findViewById(R.id.ll_menu_left); llMenuLeft.setOnClickListener(this); llMenuRight = (LinearLayout) findViewById(R.id.ll_menu_right); llMenuRight.setOnClickListener(this); tvMain = (TextView) findViewById(R.id.tv_main); tvMain.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.ll_menu_left: setLayoutType(MENU_GONE); break; case R.id.tv_main: setLayoutType(MENU_VISIBLE); break; default: break; } } /** * 控制顯隱狀態 * * @param type * 區分顯示隱藏 */ private void setLayoutType(int type) { switch (type) { case MENU_VISIBLE: llMenu.setVisibility(View.VISIBLE); llMain.setFocusable(false); startAnimation(MENU_VISIBLE); break; case MENU_GONE: startAnimation(MENU_GONE); break; default: break; } } /** * 設定顯示隱藏動畫 * * @param type * 區分顯示隱藏 */ private void startAnimation(int type) { switch (type) { case MENU_VISIBLE: ObjectAnimator oa = ObjectAnimator.ofFloat(llMenuRight, "translationX", 0, getWidth() / 3 * 2); oa.setDuration(0); oa.start(); oa.addListener(new AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { ObjectAnimator oa2 = ObjectAnimator.ofFloat(llMenuRight, "translationX", getWidth() / 3 * 2, 0); oa2.setDuration(200); oa2.start(); } @Override public void onAnimationCancel(Animator animation) { } }); break; case MENU_GONE: ObjectAnimator oa2 = ObjectAnimator.ofFloat(llMenuRight, "translationX", 0, getWidth() / 3 * 2); oa2.setDuration(200); oa2.start(); oa2.addListener(new AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { llMenu.setVisibility(View.GONE); llMain.setFocusable(true); } @Override public void onAnimationCancel(Animator animation) { } }); break; default: break; } } /** * 獲取螢幕寬度 * * @return 螢幕寬度 */ private int getWidth() { // 獲取螢幕的長寬畫素 DisplayMetrics dm = new DisplayMetrics(); // 此處this為一個activity this.getWindowManager().getDefaultDisplay().getMetrics(dm); return dm.widthPixels; } }

然後是佈局介面,簡單兩個介面,一個顯示一個隱藏,在程式碼中利用動畫和顯示隱藏交替實現來模擬側滑選單效果:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/ll_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/tv_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="主頁面"
            android:textSize="25sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#aa2c2c32"
        android:orientation="horizontal"
        android:visibility="gone" >

        <LinearLayout
            android:id="@+id/ll_menu_left"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#00000000"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_menu_right"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:background="#ffffff"
            android:orientation="vertical" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="側滑選單"
                android:textColor="#000000"
                android:textSize="25sp" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

利用這個小介面可以實現一些輕量級的側滑選單的應用,而且不用匯入什麼三方包,可以減少程式的臃腫度。