效果圖為:點選加號按鈕,加號隱藏,減號旋轉顯示,另外三張圖片也旋轉一定角度顯示

點選減號按鈕,減號隱藏,加號旋轉顯示,另外三張圖片也旋轉一定角度隱藏

首先放五張圖片,使用RelativeLayout佈局,因為可以使這五張圖片重疊起來

customer.xml佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <RelativeLayout
        android:layout_marginRight="20dp"
       android:gravity="right"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_pingbi"
        android:src="@drawable/shiled"
        />

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_copy"
        android:src="@drawable/copylink"
        />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_report"
        android:src="@drawable/report"
        />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_jian"
        android:src="@drawable/packuphorizontal"
        />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/image_show"
        android:src="@drawable/show"
        />

</RelativeLayout>
</LinearLayout>
 

使用自定義view的方式,繼承RelativeLayout,引入customer.xml佈局

public class CustomerView extends RelativeLayout {
    private ImageView image_show;
    private ImageView image_jian;
    private ImageView image_report;
    private ImageView image_copy;
    private ImageView image_pingbi;
    public CustomerView(Context context) {
        super(context);
    }

    public CustomerView(Context context, AttributeSet attrs) {
        super(context, attrs);
        View view = LayoutInflater.from(context).inflate(R.layout.customer, this, false);
        image_show = view.findViewById(R.id.image_show);
        image_jian = view.findViewById(R.id.image_jian);
        image_report = view.findViewById(R.id.image_report);
        image_copy = view.findViewById(R.id.image_copy);
        image_pingbi = view.findViewById(R.id.image_pingbi);

        //加號按鈕的點選事件,展示另外三張圖片
        image_show.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                image_jian.setVisibility(View.VISIBLE);
                image_show.setVisibility(View.GONE);
                showMenu();
            }
        });

        //減號的點選事件,隱藏另外三張圖片
        image_jian.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                image_jian.setVisibility(View.GONE);
                image_show.setVisibility(View.VISIBLE);
                hideMenu();
            }
        });

        addView(view);
    }

    public CustomerView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    //屬性動畫,,展示出來
    public void showMenu(){
        //三個平移動畫 平移出來
        ObjectAnimator firstAnimator = ObjectAnimator.ofFloat(image_pingbi
                ,"translationX",0,-65*3);
        ObjectAnimator secondAnimator = ObjectAnimator.ofFloat(image_copy
                ,"translationX",0,-65*2);
        ObjectAnimator thirdAnimator = ObjectAnimator.ofFloat(image_report
                ,"translationX",0,-65*1);

        //旋轉動畫
        ObjectAnimator rotation1 = ObjectAnimator.ofFloat(image_jian, "rotation", 0, 135, 0);
        ObjectAnimator rotation2 = ObjectAnimator.ofFloat(image_report, "rotation", 0, 180, 0);
        ObjectAnimator rotation3 = ObjectAnimator.ofFloat(image_copy, "rotation", 0, 180, 0);
        ObjectAnimator rotation4 = ObjectAnimator.ofFloat(image_pingbi, "rotation", 0, 180, 0);

        //組合動畫
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(800);//動畫時長
        animatorSet.setInterpolator(new OvershootInterpolator());
        //設定動畫一起播放
        animatorSet.playTogether(rotation1,rotation2,rotation3,rotation4,firstAnimator,secondAnimator,thirdAnimator);

        animatorSet.start();

    }

    public void hideMenu(){
        //三個平移回去
        ObjectAnimator firstAnimator = ObjectAnimator.ofFloat(image_pingbi
                , "translationX", image_report.getTranslationX(), 0);
        ObjectAnimator secondAnimator = ObjectAnimator.ofFloat(image_copy
                , "translationX", image_copy.getTranslationX(), 0);
        ObjectAnimator thirdAnimator = ObjectAnimator.ofFloat(image_report
                , "translationX", image_pingbi.getTranslationX(), 0);
        ObjectAnimator rotation1 = ObjectAnimator.ofFloat(image_show, "rotation", 0, 135, 0);
        ObjectAnimator rotation2 = ObjectAnimator.ofFloat(image_copy, "rotation", 0, 180, 0);
        ObjectAnimator rotation3 = ObjectAnimator.ofFloat(image_pingbi, "rotation", 0, 180, 0);
        ObjectAnimator rotation4 = ObjectAnimator.ofFloat(image_report, "rotation", 0, 180, 0);

        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(800);
        animatorSet.setInterpolator(new OvershootInterpolator());
        animatorSet.playTogether(rotation1,rotation2,rotation3,rotation4,firstAnimator,secondAnimator,thirdAnimator);

        animatorSet.start();
    }

}
 

 <com.example.day180131zuoye.customview.CustomerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>