利用ObjectAnimator實現側滑選單的效果
阿新 • • 發佈:2019-01-30
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>
利用這個小介面可以實現一些輕量級的側滑選單的應用,而且不用匯入什麼三方包,可以減少程式的臃腫度。