使用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);
}
}