使用Animation实现组件的折叠和展开

简单介绍

折叠效果如下图所示，在图1中为初始界面，图2为组件展开界面，图3为展开的组件的点击事件。当点击"+"按钮时将回到图1界面。

                                       

现在分别介绍xml文件、activity文件、自定义Animation类。

xml文件

首先贴出xml文件的所有内容，如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"/>
    <RelativeLayout
        android:id="@+id/composer_buttons_wrapper"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:clipChildren="false"
        android:clipToPadding="false">
        <ImageButton
            android:id="@+id/composer_button_photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="142dp"
            android:layout_marginRight="10.667dp"
            android:background="@mipmap/composer_camera"
            android:visibility="gone"/>
        <ImageButton
            android:id="@+id/composer_button_people"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="135.333dp"
            android:layout_marginRight="52dp"
            android:background="@mipmap/composer_with"
            android:visibility="gone"/>
        <ImageButton
            android:id="@+id/composer_button_place"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="116.666dp"
            android:layout_marginRight="89.33333333333333dp"
            android:background="@mipmap/composer_place"
            android:visibility="gone"/>
        <ImageButton
            android:id="@+id/composer_button_music"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="87.33333333333333dp"
            android:layout_marginRight="118.6666666666667dp"
            android:background="@mipmap/composer_music"
            android:visibility="gone"/>
        <ImageButton
            android:id="@+id/composer_button_thought"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="50dp"
            android:layout_marginRight="137.3333333333333dp"
            android:background="@mipmap/composer_thought"
            android:visibility="gone"/>
        <ImageButton
            android:id="@+id/composer_button_sleep"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="8.666666666666667dp"
            android:layout_marginRight="144dp"
            android:background="@mipmap/composer_sleep"
            android:visibility="gone"/>
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/composer_buttons_show_hide_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp"
        android:background="@mipmap/composer_button">
        <ImageView
            android:id="@+id/composer_buttons_show_hide_button_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/composer_icn_plus"/>
    </RelativeLayout>
</RelativeLayout>

在xml中定义了一个用来控制折叠和展开的控件：composer_buttons_show_hide_button_icon，和其他用来显示展开和折叠的控件，例如composer_button_photo、composer_button_place...等，每个控件都有相应的属性设置。程序就是通过点击控件composer_buttons_show_hide_button_icon来显示组件的展开和折叠。

activity文件

        通过开关控件（composer_buttons_wrapper）来控制其他组件的展开（通过自定义类MyAnimations的startAnimationsIn (rlayout_buttons, 300)）和折叠(自定义类MyAnimations的startAnimationsOut(rlayout_buttons, 300))，以及开关组件自身图标的旋转。在代码中有一个for循环语句，这个循环就是用来检查被展开的图标的单击事件。

rlayout_convert = (RelativeLayout) findViewById(R.id.composer_buttons_show_hide_button);
tvContent = (TextView) findViewById(R.id.content);
rlayout_buttons = (RelativeLayout) findViewById(R.id.composer_buttons_wrapper);
icon_convert = (ImageView) findViewById(R.id.composer_buttons_show_hide_button_icon);
rlayout_convert.setOnClickListener(new View.OnClickListener()
{
    @Override
    public void onClick(View v)
    {
        if (!areButtonsShowing)
        {
            MyAnimations.startAnimationsIn(rlayout_buttons, 300);
            icon_convert.startAnimation(MyAnimations.getRotateAnimation(0, -135, 300));
        } else
        {
            MyAnimations.startAnimationsOut(rlayout_buttons, 300);
            icon_convert.startAnimation(MyAnimations.getRotateAnimation(-135, 0, 300));
            tvContent.setText("");
        }
        areButtonsShowing = !areButtonsShowing;
    }
});
  //用于控制组件的单击事件
for (int i = 0; i < rlayout_buttons.getChildCount(); i++)
{
    rlayout_buttons.getChildAt(i).setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View arg0)
        {
            tvContent.setText(arg0.getId() + "");
            Toast.makeText(getApplicationContext(),"控件ID为：" +  arg0.getId(), Toast.LENGTH_SHORT).show();
        }
    });
}

自定义Animation类

方法：getRotateAnimation用来实现开关控件图标的旋转，表示控件按照自身沿着给定的角度旋转。

public static Animation getRotateAnimation(float fromDegrees, float toDegrees, int durationMillis)
{
    RotateAnimation rotate = new RotateAnimation(fromDegrees, toDegrees, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    rotate.setDuration(durationMillis);
    rotate.setFillAfter(true);
    return rotate;
}

方法： startAnimationsIn 用来控制组件的展开，通过遍历给定的组件容器中的个子类。并将其一一展开。

public static void startAnimationsIn(ViewGroup viewgroup, int durationMillis)
{
    for (int i = 0; i < viewgroup.getChildCount(); i++)
    {
        ImageButton inoutimagebutton = (ImageButton) viewgroup.getChildAt(i);
        inoutimagebutton.setVisibility(View.VISIBLE);
        inoutimagebutton.setClickable(true);
        inoutimagebutton.setFocusable(true);
        MarginLayoutParams mlp = (MarginLayoutParams) inoutimagebutton.getLayoutParams();
        Animation animation = new TranslateAnimation(mlp.rightMargin, 0, mlp.bottomMargin, 0);
        animation.setFillAfter(true);
        animation.setDuration(durationMillis);
        animation.setStartOffset((i * 100) / (-1 + viewgroup.getChildCount()));
        animation.setInterpolator(new OvershootInterpolator(2F));
        inoutimagebutton.startAnimation(animation);
    }
}

方法：startAnimationsIn用来控制组件的展开，通过遍历给定的组件容器中的个子类。并将其一一折叠。

public static void startAnimationsOut(ViewGroup viewgroup, int durationMillis)
{
    for (int i = 0; i < viewgroup.getChildCount(); i++)
    {
        final ImageButton inoutimagebutton = (ImageButton) viewgroup.getChildAt(i);
        MarginLayoutParams mlp = (MarginLayoutParams) inoutimagebutton.getLayoutParams();
        Animation animation = new TranslateAnimation(0f, mlp.rightMargin- 5.0f, 5.0f, mlp.bottomMargin-5.0f);
        animation.setFillAfter(true);
        animation.setDuration(durationMillis);
        animation.setStartOffset(((viewgroup.getChildCount() - i) * 100) / (-1 + viewgroup.getChildCount()));//顺序倒一下比较舒服
        animation.setInterpolator(new AnticipateInterpolator(2F));
        animation.setAnimationListener(new Animation.AnimationListener()
        {
            @Override
            public void onAnimationStart(Animation arg0)
            {

            }
            @Override
            public void onAnimationRepeat(Animation arg0)
            {

            }
            @Override
            public void onAnimationEnd(Animation arg0)
            {
                // TODO Auto-generated method stub
                inoutimagebutton.setVisibility(View.GONE);
            }
        });
        inoutimagebutton.startAnimation(animation);
    }
}