使用属性动画以及自定义view实现图片的显示与隐藏

效果图为:点击加号按钮,加号隐藏,减号旋转显示,另外三张图片也旋转一定角度显示

点击减号按钮,减号隐藏,加号旋转显示,另外三张图片也旋转一定角度隐藏

首先放五张图片,使用RelativeLayout布局,因为可以使这五张图片重叠起来

customer.xml布局

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     >  
6.     <RelativeLayout  
7.         android:layout_marginRight="20dp"  
8.        android:gravity="right"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content">  
11.     <ImageView  
12.         android:layout_width="40dp"  
13.         android:layout_height="40dp"  
14.         android:id="@+id/image_pingbi"  
15.         android:src="@drawable/shiled"  
16.         />  
17.   
18.     <ImageView  
19.         android:layout_width="40dp"  
20.         android:layout_height="40dp"  
21.         android:id="@+id/image_copy"  
22.         android:src="@drawable/copylink"  
23.         />  
24.     <ImageView  
25.         android:layout_width="40dp"  
26.         android:layout_height="40dp"  
27.         android:id="@+id/image_report"  
28.         android:src="@drawable/report"  
29.         />  
30.     <ImageView  
31.         android:layout_width="40dp"  
32.         android:layout_height="40dp"  
33.         android:id="@+id/image_jian"  
34.         android:src="@drawable/packuphorizontal"  
35.         />  
36.     <ImageView  
37.         android:layout_width="40dp"  
38.         android:layout_height="40dp"  
39.         android:id="@+id/image_show"  
40.         android:src="@drawable/show"  
41.         />  
42.   
43. </RelativeLayout>  
44. </LinearLayout>  

使用自定义view的方式,继承RelativeLayout,引入customer.xml布局

[html] view plain copy

1. public class CustomerView extends RelativeLayout {  
2.     private ImageView image_show;  
3.     private ImageView image_jian;  
4.     private ImageView image_report;  
5.     private ImageView image_copy;  
6.     private ImageView image_pingbi;  
7.     public CustomerView(Context context) {  
8.         super(context);  
9.     }  
10.   
11.     public CustomerView(Context context, AttributeSet attrs) {  
12.         super(context, attrs);  
13.         View view = LayoutInflater.from(context).inflate(R.layout.customer, this, false);  
14.         image_show = view.findViewById(R.id.image_show);  
15.         image_jian = view.findViewById(R.id.image_jian);  
16.         image_report = view.findViewById(R.id.image_report);  
17.         image_copy = view.findViewById(R.id.image_copy);  
18.         image_pingbi = view.findViewById(R.id.image_pingbi);  
19.   
20.         //加号按钮的点击事件,展示另外三张图片  
21.         image_show.setOnClickListener(new OnClickListener() {  
22.             @Override  
23.             public void onClick(View view) {  
24.                 image_jian.setVisibility(View.VISIBLE);  
25.                 image_show.setVisibility(View.GONE);  
26.                 showMenu();  
27.             }  
28.         });  
29.   
30.         //减号的点击事件,隐藏另外三张图片  
31.         image_jian.setOnClickListener(new OnClickListener() {  
32.             @Override  
33.             public void onClick(View view) {  
34.                 image_jian.setVisibility(View.GONE);  
35.                 image_show.setVisibility(View.VISIBLE);  
36.                 hideMenu();  
37.             }  
38.         });  
39.   
40.         addView(view);  
41.     }  
42.   
43.     public CustomerView(Context context, AttributeSet attrs, int defStyleAttr) {  
44.         super(context, attrs, defStyleAttr);  
45.     }  
46.   
47.   
48.     //属性动画,,展示出来  
49.     public void showMenu(){  
50.         //三个平移动画 平移出来  
51.         ObjectAnimator firstAnimator = ObjectAnimator.ofFloat(image_pingbi  
52.                 ,"translationX",0,-65*3);  
53.         ObjectAnimator secondAnimator = ObjectAnimator.ofFloat(image_copy  
54.                 ,"translationX",0,-65*2);  
55.         ObjectAnimator thirdAnimator = ObjectAnimator.ofFloat(image_report  
56.                 ,"translationX",0,-65*1);  
57.   
58.         //旋转动画  
59.         ObjectAnimator rotation1 = ObjectAnimator.ofFloat(image_jian, "rotation", 0, 135, 0);  
60.         ObjectAnimator rotation2 = ObjectAnimator.ofFloat(image_report, "rotation", 0, 180, 0);  
61.         ObjectAnimator rotation3 = ObjectAnimator.ofFloat(image_copy, "rotation", 0, 180, 0);  
62.         ObjectAnimator rotation4 = ObjectAnimator.ofFloat(image_pingbi, "rotation", 0, 180, 0);  
63.   
64.         //组合动画  
65.         AnimatorSet animatorSet = new AnimatorSet();  
66.         animatorSet.setDuration(800);//动画时长  
67.         animatorSet.setInterpolator(new OvershootInterpolator());  
68.         //设置动画一起播放  
69.         animatorSet.playTogether(rotation1,rotation2,rotation3,rotation4,firstAnimator,secondAnimator,thirdAnimator);  
70.   
71.         animatorSet.start();  
72.   
73.     }  
74.   
75.     public void hideMenu(){  
76.         //三个平移回去  
77.         ObjectAnimator firstAnimator = ObjectAnimator.ofFloat(image_pingbi  
78.                 , "translationX", image_report.getTranslationX(), 0);  
79.         ObjectAnimator secondAnimator = ObjectAnimator.ofFloat(image_copy  
80.                 , "translationX", image_copy.getTranslationX(), 0);  
81.         ObjectAnimator thirdAnimator = ObjectAnimator.ofFloat(image_report  
82.                 , "translationX", image_pingbi.getTranslationX(), 0);  
83.         ObjectAnimator rotation1 = ObjectAnimator.ofFloat(image_show, "rotation", 0, 135, 0);  
84.         ObjectAnimator rotation2 = ObjectAnimator.ofFloat(image_copy, "rotation", 0, 180, 0);  
85.         ObjectAnimator rotation3 = ObjectAnimator.ofFloat(image_pingbi, "rotation", 0, 180, 0);  
86.         ObjectAnimator rotation4 = ObjectAnimator.ofFloat(image_report, "rotation", 0, 180, 0);  
87.   
88.         AnimatorSet animatorSet = new AnimatorSet();  
89.         animatorSet.setDuration(800);  
90.         animatorSet.setInterpolator(new OvershootInterpolator());  
91.         animatorSet.playTogether(rotation1,rotation2,rotation3,rotation4,firstAnimator,secondAnimator,thirdAnimator);  
92.   
93.         animatorSet.start();  
94.     }  
95.   
96. }