Android自定义可动画展开收缩View的实现

Android 自定义View修炼-自定义可动画展开收缩View的实现

有时候需要点击一个view可以动画展开和收缩折叠一个View这样的效果，这样就可以直接自定义View来实现。
本例中，采用继承FrameLayout来实现自定义的ExpandView。下面将详细介绍各个部分来实现该类以及如何使用该自定义视图。
参考：http://www.cnblogs.com/JczmDeveloper/p/3782586.html
效果图如下：
未展开效果：



正在向上折叠收缩中的效果：



已经展开效果：



自定义展开类：ExpandView的实现：

package com.czm.customview;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.LinearLayout;

public class ExpandView extends FrameLayout{

private Animation mExpandAnimation;
private Animation mCollapseAnimation;
private boolean mIsExpand;

public ExpandView(Context context) {
this(context,null);
// TODO Auto-generated constructor stub
}
public ExpandView(Context context, AttributeSet attrs) {
this(context, attrs,0);
// TODO Auto-generated constructor stub
}
public ExpandView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
initExpandView();
}
private void initExpandView() {
LayoutInflater.from(getContext()).inflate(R.layout.layout_expand, this, true);

mExpandAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.expand);
mExpandAnimation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}

@Override
public void onAnimationEnd(Animation animation) {
setVisibility(View.VISIBLE);
}
});

mCollapseAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.collapse);
mCollapseAnimation.setAnimationListener(new Animation.AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}

@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}

@Override
public void onAnimationEnd(Animation animation) {
setVisibility(View.INVISIBLE);
}
});

}
public void collapse() {
if (mIsExpand) {
mIsExpand = false;
clearAnimation();
startAnimation(mCollapseAnimation);
}
}

public void expand() {
if (!mIsExpand) {
mIsExpand = true;
clearAnimation();
startAnimation(mExpandAnimation);
}
}

public boolean isExpand() {
return mIsExpand;
}

public void setContentView(){
View view = null;
view = LayoutInflater.from(getContext()).inflate(R.layout.layout_expand, null);
removeAllViews();
addView(view);
}

}

对应的ui配置文件：layout_expand.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"
android:orientation="vertical"
android:background="#63A90A"
android:gravity="center_horizontal">

<TextView
android:id="@+id/enterlesson"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="项目列表1"
android:textSize="14sp"
android:singleLine="true"
android:gravity="center"
android:textColor="#FFFFFF"
android:drawablePadding="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<TextView
android:id="@+id/enterlesson"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="项目列表2"
android:textSize="14sp"
android:singleLine="true"
android:gravity="center"
android:textColor="#FFFFFF"
android:drawablePadding="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<TextView
android:id="@+id/enterlesson"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="项目列表3"
android:textSize="14sp"
android:singleLine="true"
android:gravity="center"
android:textColor="#FFFFFF"
android:drawablePadding="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<TextView
android:id="@+id/enterlesson"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="项目列表4"
android:textSize="14sp"
android:singleLine="true"
android:gravity="center"
android:textColor="#FFFFFF"
android:drawablePadding="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>

</LinearLayout>

展开动画代码：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale

android:duration="200"

android:fromXScale="1."

android:fromYScale=".0"

android:pivotX="50%"

android:pivotY="0%"

android:toXScale="1."

android:toYScale="1." />
</set>

收缩叠起代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<scale
android:duration="120"
android:fromXScale="1."
android:fromYScale="1."
android:pivotX="50%"
android:pivotY="0%"
android:toXScale="1."
android:toYScale="0." />

</set>

如何使用上面自定义的ExpandView类呢？分为两步：
（1）在UI配置文件里引用定义 该View：

<LinearLayout

android:id="@+id/layout_title"

android:layout_width="fill_parent"

android:layout_height="50dp"

android:background="#63A90A"

android:orientation="horizontal"

android:gravity="center">

<TextView

android:id="@+id/textview_title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#FFFFFF"

android:textSize="22sp"

android:text="点击向下展开"

/>

<ImageView

android:id="@+id/imageview_state"

android:layout_width="15dp"

android:layout_height="15dp"

android:layout_marginLeft="2dp"

android:src="@drawable/expand"

/>

</LinearLayout>

<com.czm.customview.ExpandView
android:id="@+id/expandView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FF00"
android:visibility="invisible"
android:layout_below="@+id/layout_title"
android:layout_marginBottom="150dp"
android:clickable="true"/>

（1）在java类中引用ExpandView类：

private ExpandView mExpandView;
private LinearLayout mLinearLayout;
private TextView mTextView;
private ImageView mImageView;

public void initExpandView(){
　　   mLinearLayout = (LinearLayout)findViewById(R.id.layout_title);
mTextView = (TextView)findViewById(R.id.textview_title);
mImageView = (ImageView)findViewById(R.id.imageview_state);
mExpandView = (ExpandView) findViewById(R.id.expandView);
mExpandView.setContentView();
mLinearLayout.setClickable(true);
mLinearLayout.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(mExpandView.isExpand()){
mExpandView.collapse();
mTextView.setText("点击向下展开");
mImageView.setImageDrawable(getResources().getDrawable(R.drawable.expand));
}else{
mExpandView.expand();
mTextView.setText("点击向上收叠");
mImageView.setImageDrawable(getResources().getDrawable(R.drawable.collapse));
}
}
});
}