标签：android style class blog code java
有时候需要点击一个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)); } } }); }
Android开发之自定义View-可动画展开收缩View的实现,布布扣,bubuko.com
Android开发之自定义View-可动画展开收缩View的实现
标签：android style class blog code java
原文地址：http://www.cnblogs.com/JczmDeveloper/p/3782586.html
