1.需要实现的目标

• 通过点击按钮，实现下拉菜单的放出与收回
  效果如图所示：

  
  单击式下拉菜单.gif

2.实现该菜单所需要的思路

2.1 将素材导入到对应文件夹中

2.2 编写xml文件来改变app界面的外观

2.3 在.java文件中编写函数来实现xml中的响应事件

3.该菜单实现的具体步骤及其做法

3.1 将图片素材导入到对应文件夹中

图片类型的素材一般会导入到app文件夹下的res文件夹中的drawable文件夹或mipmap文件夹中

mipmap文件夹.JPG

3.2 通过编写xml文件来改变app界面的外观

3.2.1将图片素材放置到app界面中

打开res文件下的layout文件中的content_main.xml，该xml是用来设置app界面样式

xml位置.JPG

在xml文件中通过<ImageView/>标签可以将素材放置到app界面中
具体语法是：

<ImageView
android:src="@mipmap/b"/>

• 其中src=""引号中的为所引用图片的地址，@mipmap指的是选中该文件夹，后面的b表示图片的名称，写完该代码后，就已经把b.png导入到app界面上了
• 以此类推，

<ImageView
        android:src="@mipmap/b"
        />
    <ImageView
        android:src="@mipmap/c"
         />
    <ImageView
        android:src="@mipmap/d"
        />
    <ImageView
        android:src="@mipmap/e"
    />
    <ImageView
        android:src="@mipmap/f"
    />
    <ImageView
        android:src="@mipmap/g"
        />
    <ImageView
        android:src="@mipmap/h"
        />
    <ImageView
        android:src="@mipmap/a"
         />

• 这样就可以把a到h的图片全部放到了app界面中
• 要注意的是，代码中处于下面的图片，会比处在上面的图片后导入，其结果就是后导入的图片会在先导入图片的上面那层

3.2.2 编辑导入到app界面中的图片

在<ImageView/>标签中添加

android:layout_width=""
android:layout_height=""

可以改变图片的长宽

android:layout_centerHorizontal="true"

可以使得图片水平居中
因此，我们可以将代码扩展为：

<ImageView
        android:id="@+id/iv_b"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/b"
        android:layout_marginTop="5dp"
        />
    <ImageView
        android:id="@+id/iv_c"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/c"
        android:layout_marginTop="5dp"
         />
    <ImageView
        android:id="@+id/iv_d"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/d"
        android:layout_marginTop="5dp"
        />
    <ImageView
        android:id="@+id/iv_e"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/e"
        android:layout_marginTop="5dp"
    />
    <ImageView
        android:id="@+id/iv_f"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/f"
        android:layout_marginTop="5dp"
    />
    <ImageView
        android:id="@+id/iv_g"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/g"
        android:layout_marginTop="5dp"
        />
    <ImageView
        android:id="@+id/iv_h"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/h"
        android:layout_marginTop="5dp"
        />

    <ImageView
        android:id="@+id/iv_a"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerHorizontal="true"
        android:onClick="ImgClick"
        android:src="@mipmap/a"
         />

• 其中， android:id="@+id/iv_a"，表示给该图片加一个id，类似于html语言中的id，可以靠id来选中对应的图片
• android:layout_marginTop="5dp"表示图片距离最上方5dp
• 最后一个标签中有 android:onClick="ImgClick"，ImgClick是一个函数，在java文件中进行具体定义
• tips：在ImgClick还未定义的时候，光标选中它，按Alt+Enter可以快速创建函数

3.3 java文件中编写函数来实现xml中的响应事件

3.3.1在通过id找到xml文件中导入的各张图片

打开app文件中的java文件下的com.example.data1_meun_animation文件夹中的MainActivity.java
首先在MainActivity的class中添加：

private int[] resID = {R.id.iv_a,R.id.iv_b,R.id.iv_c,R.id.iv_d,R.id.iv_e,R.id.iv_f,R.id.iv_g,R.id.iv_h};
    private List<ImageView> imageViews = new ArrayList<>();
    private boolean isOpen = false;

• resID是一个数组，放的是各个图片的id（R是resource的简称）
• List数组放的是每一个图片本身
• isOpen是用来判断是否已经展开了菜单
  然后再在onCreat函数中编写：

for(int i = 0 ; i<resID.length;i++){
            int id = resID[i];
            ImageView img = findViewById(id);
            imageViews.add(img);
        }

这个for循环，通过id将对应的图片放到名为imageViews的ArrayList中

3.3.2编写ImgClick函数

public void ImgClick(View view){
        if(isOpen){
            //收回列表
            close();
        }else{
            //打开列表
            open();
        }
        isOpen = !isOpen;
    }

其中用open()函数来实现菜单展开，close()函数来实现菜单收回

private void close(){
        for(int i=0;i<imageViews.size();i++)
        {
            ImageView iv = imageViews.get(i);
            ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",i*170f,0f);
            oa.setDuration(1000);
            oa.start();
        }
    }
    private  void open(){
        for(int i=0;i<imageViews.size();i++)
        {
            ImageView iv = imageViews.get(i);
            ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",0f,i*170f);
            oa.setDuration(1000);
            oa.start();
            oa.setInterpolator(new BounceInterpolator());
        }
    }

• ObjectAnimator.ofFloat(iv,"translationY",0f,i*170f);能定义Y轴方向的移动
• oa.setDuration(1000);能设置动画播放总时间
• oa.setInterpolator(new BounceInterpolator());能实现一个弹跳效果

4.应用拓展

同理可以实现多方向的展开

单击式扇形菜单.gif

具体只需要改变图片的位置，以及需要变更open()与close()的写法

private void close(){
        double arc = 0;
        for(int i=1;i<imageViews.size();i++){
            ImageView iv = imageViews.get(i);
            ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",(float)Math.sin(arc)*250f,0f);
            oa.setDuration(1000);
            ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",(float)Math.cos(arc)*250f,0f);
            ob.setDuration(1000);
            oa.start();
            ob.start();
            arc -= Math.toRadians(45);
        }
}
private  void open(){
        double arc = 0;
        for(int i=1;i<imageViews.size();i++){
            ImageView iv = imageViews.get(i);
            ObjectAnimator oa = ObjectAnimator.ofFloat(iv,"translationY",0f,(float)Math.sin(arc)*250f);
            oa.setDuration(1000);
            ObjectAnimator ob = ObjectAnimator.ofFloat(iv,"translationX",0f,(float)Math.cos(arc)*250f);
            ob.setDuration(1000);
            oa.start();
            ob.start();
            arc -= Math.toRadians(45);
        }
}

• 其中Math.sin(arc)250f与Math.cos(arc)250f分别提供y轴方向的位移量与x轴方向的位移量
• arc -= Math.toRadians(45)意思为arc每次循环中减45度（用toRadians换算为弧度）