编写一个浮动菜单的显示
1.创建工程，选择工程目录
图1.工程创建图
2.导入该项目所需要的图片资源
图2.图片资源导入图
图3.图片路径确认图
3.在content_main.xml文件中更改界面布局
图4.更改界面布局
4.项目之中添加资源以及界面整体布局
android:id="@+id/iv_b"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/b"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
/>
<ImageView
android:id="@+id/iv_c"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/c"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
/>
<ImageView
android:id="@+id/iv_d"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/d"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
/>
<ImageView
android:id="@+id/iv_e"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/e"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
/>
<ImageView
android:id="@+id/iv_f"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/f"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
/>
<ImageView
android:id="@+id/iv_g"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/g"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
/>
<ImageView
android:id="@+id/iv_h"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/h"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
/>
<ImageView
android:id="@+id/iv_a"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@mipmap/a"
android:layout_centerVertical="true"
android:onClick="imgClick"
/>
布局最后的效果图
图5.效果布局图
5.在菜单点击按钮添加点击事件
图6.事件添加图
6.在MainActivity.java里面写执行代码
在文件前定义变量
* 1.获取xml里面所有的图片视图
* -先用一个数组保存所有视图的id号 R.id.iv_b
* -用一个数组保存所有id号对应的视图
*/
private int[] resID = {R.id.iv_b,R.id.iv_c,R.id.iv_d,R.id.iv_e,R.id.iv_g,R.id.iv_h};
private List<ImageView> imageViews = new ArrayList<>();
/**
* 定义一个变量 用来记录按钮的状态
* isOpen
* */
private boolean isOpen = false;
菜单按钮的点击事件
public void menuButtonDidClicked(View view) {
/**
* 判断是否打开*/
if (isOpen == true){
//应该关闭 收回列表
close();
isOpen = false;
}else {
//应该打开 展开列表
open();
isOpen = true;
}
}
private void close(){
}
private void open(){
}
将图片资源的图片通过设置的id读取出来
/*
* 将id号对应的图片视图读取出来 放到ImageViews里面
*
* */
for (int i = 0;i < resID.length;i++){
int id= resID[i];
ImageView img = findViewById(id);
imageViews.add(img);
}
在菜单按钮的弹出有6个选项，应该计算不同选项弹出的距离
在打开和关闭的方法当中，用for循环来读取资源图片，并通过取出不同的值来判断距离，并添加动画
private void close(){
for (int i = 0;i < imageViews.size();i++){
//取出一个图片资源
ImageView iv = imageViews.get(i);
if (i==0){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",440f,0f);
oa.setInterpolator(new BounceInterpolator());
oa.setIntValues(1500);
oa.start();
}else if (i==1){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",340f,0f);
ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",100f,0f);
oa.setInterpolator(new BounceInterpolator());
ob.setInterpolator(new BounceInterpolator());
ob.setIntValues(1600);
oa.setIntValues(1600);
ob.start();
oa.start();
}else if (i==2){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",-150f,0f);
ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",340f,0f);
oa.setInterpolator(new BounceInterpolator());
ob.setInterpolator(new BounceInterpolator());
ob.setIntValues(1700);
oa.setIntValues(1700);
ob.start();
oa.start();
}else if (i==3){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",150f,0f);
ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",340f,0f);
oa.setInterpolator(new BounceInterpolator());
ob.setInterpolator(new BounceInterpolator());
ob.setIntValues(1800);
oa.setIntValues(1800);
ob.start();
oa.start();
}else if (i==4){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",340f,0f);
ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",200f,0f);
oa.setInterpolator(new BounceInterpolator());
ob.setInterpolator(new BounceInterpolator());
ob.setIntValues(1900);
oa.setIntValues(1900);
ob.start();
oa.start();
}else if (i==5){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",440f,0f);
oa.setInterpolator(new BounceInterpolator());
oa.setIntValues(2000);
oa.start();
}
}
}
private void open(){
for (int i = 0;i < imageViews.size();i++){
//取出一个图片资源
ImageView iv = imageViews.get(i);
if (i==0){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",0,-440f);
oa.setInterpolator(new BounceInterpolator());
oa.setIntValues(1500);
oa.start();
}else if (i==1){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",0,-340f);
ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",0,200f);
oa.setInterpolator(new BounceInterpolator());
ob.setInterpolator(new BounceInterpolator());
ob.setIntValues(1600);
oa.setIntValues(1600);
ob.start();
oa.start();
}else if (i==2){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",0,-150f);
ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",0,340f);
oa.setInterpolator(new BounceInterpolator());
ob.setInterpolator(new BounceInterpolator());
ob.setIntValues(1700);
oa.setIntValues(1700);
ob.start();
oa.start();
}else if (i==3){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",0,150f);
ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",0,340f);
oa.setInterpolator(new BounceInterpolator());
ob.setInterpolator(new BounceInterpolator());
ob.setIntValues(1800);
oa.setIntValues(1800);
ob.start();
oa.start();
}else if (i==4){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",0,340f);
ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",0,200f);
oa.setInterpolator(new BounceInterpolator());
ob.setInterpolator(new BounceInterpolator());
ob.setIntValues(1900);
oa.setIntValues(1900);
ob.start();
oa.start();
}else if (i==5){
ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",0,440f);
oa.setInterpolator(new BounceInterpolator());
oa.setIntValues(2000);
oa.start();
}
}
}
7.执行程序，得到结果
执行程序，得到最后的效果
图7.结果图
网友评论