最近项目需要在底部按钮点击弹出菜单,再点击菜单隐藏,如下图:
先上代码:XML文件
直接将图片叠在一起,点击图片在最上面:
<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"
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="cn.my.popmenudemo.MainActivity">
<ImageView
android:id="@+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@mipmap/logo_sinaweibo" />
<ImageView
android:id="@+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@mipmap/logo_wechat" />
<ImageView
android:id="@+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@mipmap/logo_wechatmoments" />
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@mipmap/logo_start2" />
</RelativeLayout>
动画:
插补器可根据自己需要进行替换
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.animation.BounceInterpolator;
import android.widget.ImageView;
import android.widget.Toast;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
/**
* Created by wk on 2016/11/14.
*/
public class MainActivity extends Activity {
@BindView(R.id.iv1)
ImageView iv1;
@BindView(R.id.iv2)
ImageView iv2;
@BindView(R.id.iv3)
ImageView iv3;
@BindView(R.id.iv)
ImageView iv;
/**
* 动画时间
*/
private static final int ANIM_DURATION = 500;
/**
* 菜单是否展示
*/
private boolean IS_SHOW = false;
private ObjectAnimator anim1;
private ObjectAnimator anim2;
private ObjectAnimator anim3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
}
@OnClick({R.id.iv1, R.id.iv2, R.id.iv3, R.id.iv})
public void onClick(View view) {
switch (view.getId()) {
case R.id.iv1:
Toast.makeText(this, "iv1", Toast.LENGTH_SHORT).show();
break;
case R.id.iv2:
Toast.makeText(this, "iv2", Toast.LENGTH_SHORT).show();
break;
case R.id.iv3:
Toast.makeText(this, "iv3", Toast.LENGTH_SHORT).show();
break;
case R.id.iv:
if (!IS_SHOW) {
showMenu();
IS_SHOW = true;
} else {
hideMenu();
IS_SHOW = false;
}
break;
}
}
/**
* 隐藏菜单
*/
private void hideMenu() {
anim1.reverse();
anim2.reverse();
anim3.reverse();
}
/**
* 竖屏时获取屏幕宽度
*
* @return
*/
public int getScreenWidth() {
DisplayMetrics outMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
int x = outMetrics.widthPixels;
return x;
}
/**
* 弹出菜单动画
*/
private void showMenu() {
//图标移动屏幕宽度的40%,每一个的距离可以不同
float distance = getScreenWidth() * 0.4f;
//相邻ImageView运动角度式45度,Math.PI记录的圆周率
float degree1 = (float) (45f * Math.PI / 180);
float degree2 = (float) (90f * Math.PI / 180);
float degree3 = (float) (135f * Math.PI / 180);
//创建偏移属性持有者对象
PropertyValuesHolder pvh11 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance * Math.cos(degree1)));
PropertyValuesHolder pvh12 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance * Math.sin(degree1)));
PropertyValuesHolder pvh21 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance * Math.cos(degree2)));
PropertyValuesHolder pvh22 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance * Math.sin(degree2)));
PropertyValuesHolder pvh31 = PropertyValuesHolder.ofFloat("TranslationX", 0f, (float) (distance * Math.cos(degree3)));
PropertyValuesHolder pvh32 = PropertyValuesHolder.ofFloat("TranslationY", 0f, -(float) (distance * Math.sin(degree3)));
//创建动画对象
anim1 = ObjectAnimator.ofPropertyValuesHolder(iv1, pvh11, pvh12).setDuration(ANIM_DURATION);
anim2 = ObjectAnimator.ofPropertyValuesHolder(iv2, pvh21, pvh22).setDuration(ANIM_DURATION);
anim3 = ObjectAnimator.ofPropertyValuesHolder(iv3, pvh31, pvh32).setDuration(ANIM_DURATION);
//添加反弹效果插值器
//OvershootInterpolator 超出插补器
//OvershootInterpolator 超出插补器
//AnticipateInterpolator 向前插补器
//DecelerateInterpolator 减速插补器
//AccelerateDecelerateInterpolator 加速减速插补器
anim1.setInterpolator(new BounceInterpolator());
anim2.setInterpolator(new BounceInterpolator());
anim3.setInterpolator(new BounceInterpolator());
//启动动画
anim1.start();
anim2.start();
anim3.start();
}
}