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

有时候需要点击一个view可以动画展开和收缩折叠一个View这样的效果，这样就可以直接自定义View来实现。

本例中，采用继承FrameLayout来实现自定义的ExpandView。下面将详细介绍各个部分来实现该类以及如何使用该自定义视图。

效果图如下：

未展开效果：

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

已经展开效果：

自定义展开类：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));

                }

            }

        });  

}