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

来源：互联网发布：淘宝店铺图文详情编辑：程序博客网时间：2024/04/29 00:34

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：


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

0 0