自定義可動畫展開收縮View的實現
阿新 • • 發佈：2019-02-14
有時候需要點選一個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)); } } }); }