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

青旅半醒 2021-11-26 08:44 486阅读 0赞

有时候需要点击一个view可以动画展开和收缩折叠一个View这样的效果，这样就可以直接自定义View来实现。

本例中，采用继承FrameLayout来实现自定义的ExpandView。下面将详细介绍各个部分来实现该类以及如何使用该自定义视图。

效果图如下：

未展开效果：

![111907254838249.png][]

正在向上折叠收缩中的效果：

![111907143429887.png][]

已经展开效果：

![111907034676510.png][]

自定义展开类：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" >

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

转载于:https://www.cnblogs.com/JczmDeveloper/p/3782586.html

[111907254838249.png]: /images/20211126/a1e8c681b58342409611beb508a9459a.png
[111907143429887.png]: /images/20211126/df2b19d4e84a485db3be2ee9701e6919.png
[111907034676510.png]: /images/20211126/60bfd443a4254024ad0318430d437c8d.png