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

最新推荐文章于 2024-05-26 09:59:10 发布

沉默的杰克

最新推荐文章于 2024-05-26 09:59:10 发布

阅读量3.9k

点赞数 3

文章标签：动画 ui 布局

有时候需要点击一个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：


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

沉默的杰克

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
自定义可动画展开收缩View的实现

有时候需要点击一个view可以动画展开和收缩折叠一个View这样的效果，这样就可以直接自定义View来实现。本例中，采用继承FrameLayout来实现自定义的ExpandView。下面将详细介绍各个部分来实现该类以及如何使用该自定义视图。效果图如下：未展开效果：正在向上折叠收缩中的效果：已经展开效果：自定义展开类：Expan
复制链接

扫一扫