小天一如既往的給大家帶來最簡單最實用的右菜單回彈效果,希望對大家有所幫助!
首先還是講一下功能和原理:就是當你點擊右邊菜單的時候,會出現4個子菜單,當然大家也可以根據自己的需求設置子菜單的個數,然後回彈菜單的特效就是這四個菜單是從右邊彈出來的,然後又有一段回彈的效果。其實原理很簡單,就是Animation的移動效果,先向左滑一段距離然後再向右滑一段距離,多的就不多說了,當你看過之後就知道其實很簡單了。
首先看一下佈局頁面
activity_main.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="gulubaobao.com.demo.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="@android:color/holo_red_dark">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:layout_centerInParent="true"
android:text="主頁"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_marginRight="10dp"
android:text="菜單"
android:onClick="onMainClick"/>
</RelativeLayout>
<RelativeLayout
android:id="@+id/main_caidan_relative"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<LinearLayout
android:layout_width="150dp"
android:layout_height="200dp"
android:layout_alignParentRight="true"
android:layout_marginTop="50dp"
android:orientation="vertical">
<TextView
android:id="@+id/main_text_caidan_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="菜單一"
android:layout_weight="1"
android:textSize="18dp"/>
<TextView
android:id="@+id/main_text_caidan_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="菜單二"
android:layout_weight="1"
android:textSize="18dp"/>
<TextView
android:id="@+id/main_text_caidan_three"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="菜單三"
android:layout_weight="1"
android:textSize="18dp"/>
<TextView
android:id="@+id/main_text_caidan_four"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="菜單四"
android:layout_weight="1"
android:textSize="18dp"/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
接下來是主方法:
MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
public RelativeLayout relativeLayout;
public TextView one,two,three,four;
public AnimationSet animationSet,animationSet2,animationSet3,animationSet4;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
one = (TextView) findViewById(R.id.main_text_caidan_one);
two = (TextView) findViewById(R.id.main_text_caidan_two);
three = (TextView) findViewById(R.id.main_text_caidan_three);
four = (TextView) findViewById(R.id.main_text_caidan_four);
relativeLayout = (RelativeLayout) findViewById(R.id.main_caidan_relative);
addAnimation();//添加需要用到的動畫效果
//添加菜單子選項的點擊事件
one.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"one",Toast.LENGTH_SHORT).show();
}
});
two.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"two",Toast.LENGTH_SHORT).show();
}
});
three.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"three",Toast.LENGTH_SHORT).show();
}
});
four.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"four",Toast.LENGTH_SHORT).show();
}
});
}
/**
* 添加需要用到的動畫效果
*/
private void addAnimation() {
//創建動畫
animationSet = new AnimationSet(true);
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
translateAnimation.setDuration(500);
animationSet.addAnimation(translateAnimation);
TranslateAnimation translateAnimation2 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.2f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
translateAnimation2.setDuration(200);
translateAnimation2.setStartOffset(500);
animationSet.setFillAfter(true);
animationSet.addAnimation(translateAnimation2);
animationSet2 = new AnimationSet(true);
TranslateAnimation translateAnimation3 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
translateAnimation3.setDuration(500);
translateAnimation3.setStartOffset(100);
animationSet2.addAnimation(translateAnimation3);
TranslateAnimation translateAnimation4 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.2f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
translateAnimation4.setDuration(200);
translateAnimation4.setStartOffset(600);
animationSet2.setFillAfter(true);
animationSet2.addAnimation(translateAnimation4);
animationSet3 = new AnimationSet(true);
TranslateAnimation translateAnimation5 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
translateAnimation5.setDuration(500);
translateAnimation5.setStartOffset(200);
animationSet3.addAnimation(translateAnimation5);
TranslateAnimation translateAnimation6 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.2f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
translateAnimation6.setDuration(200);
translateAnimation6.setStartOffset(700);
animationSet3.setFillAfter(true);
animationSet3.addAnimation(translateAnimation6);
animationSet4 = new AnimationSet(true);
TranslateAnimation translateAnimation7 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 1f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
translateAnimation7.setDuration(500);
translateAnimation7.setStartOffset(300);
animationSet4.addAnimation(translateAnimation7);
TranslateAnimation translateAnimation8 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0.2f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f);
translateAnimation8.setDuration(200);
translateAnimation8.setStartOffset(800);
animationSet4.setFillAfter(true);
animationSet4.addAnimation(translateAnimation8);
}
/**
* 菜單的點擊事件
* @param v
*/
public void onMainClick(View v){
if(relativeLayout.isShown()){
relativeLayout.setVisibility(View.GONE);//如果頁面顯示將其隱藏
}else{
relativeLayout.setVisibility(View.VISIBLE);//如果頁面隱藏將其顯示
//調用動畫
one.startAnimation(animationSet);
two.startAnimation(animationSet2);
three.startAnimation(animationSet3);
four.startAnimation(animationSet4);
}
}
}
一共就這麼多,如果大家覺得好,請點個贊,謝謝!
大家如果需要源碼可以去http://download.csdn.net/detail/u012600997/9437000下載,不過需要1資源分喲,所以大家還是看代碼吧