有时候需要点击一个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"?>
<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>
收缩叠起代码:
如何使用上面自定义的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>(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)); } } }); }