2019-07-28 Day1 Android开发初体验--菜单动画

目的

在Android Studio上编写一个简单的APP程序，点击程序中的按钮能完成菜单栏在竖直方向上的展开和收缩。

技术

xml文件中的操作

1.导入素材
2.确定素材在屏幕中的位置
3.将素材用id进行编号
4.设置点击后的Java代码

java文件中的操作

1.获取xml文件中所有的图片视图（通过id）
2.将ID号对应的图片视图读取出来，放到ImageView里面
3.定义一个变量用来记录按钮的状态
4.判断按钮的状态，进行相应的动画变化

技术的使用

xml文件中的技术使用

1.将所用的图片素材全选后拖到res目录下的mipmap文件夹，即可完成图片素材的导入。
2.添加ImageView,通过在ImageView下的代码确定图片素材的文件和长宽

<ImageView
        android:id="@+id/iv_h"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:src="@mipmap/h"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="3dp"
        />

3.在每个ImageView下对对应的图片素材进行id编号

android:id="@+id/iv_e"

4.设置点击后的动画代码

android:onClick="imgClicked"

点击imgClicked用快捷键alt+enter 在代码中创建一个imgClicked的方法

java文件中的技术使用

1.先用一个数组保存所有视图的id号
再用一个数组保存所有id号对应的视图

public class MainActivity extends AppCompatActivity {
    private int[] resID = {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<>();

2.for循环读取每一个视图，将其放到ImageView中

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

3.按钮初始的状态为关闭

 private int[] resID = {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;

4.通过if语句进行判断，并编写两个动画函数，

 public void imgClicked(View view) {
        if(isOpen == true){
        close();
        }else{
            open();
        }
        isOpen = !isOpen;
    }

close和open为两个动画函数，两个函数都使图片视图在y轴上发生位置变化，同时使展开时具有弹性的特效,展开过程的时间为1s
close函数如下

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

open函数如下

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

实际使用

运行程序，点击红点按钮后，菜单栏竖直展开，展开过程为1s,并具有弹性特效，再点击一次红点按钮，菜单栏竖直回升收起。