目的
在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,并具有弹性特效,再点击一次红点按钮,菜单栏竖直回升收起。