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

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

时间： 2024-10-01 23:19:39

Android开发之自定义View-可动画展开收缩View的实现的相关文章

Android开发之自定义Spinner样式的效果实现（源代码实现）

android系统自带的Spinner样式是远远满足不了我们实际开发过程中对Spinner UI风格的要求,因此我们肯定需要为了切合整个应用的风格,修改我们的Spinner样式.系统给我们提供了两种常见的修改方式,一个是用XML方式静态,另一个就是Java代码动态来修改啦,我们这篇文章呢主要就是介绍如何动态修改Spinner的样式.我的实现方法呢,是自己构造一个SpinnerAdapter,继承来自ArrayAdapter,重写getDropDownView(),getView()这两个方法就好

Android开发之自定义TabHost文字及背景(源代码分享)

使用TabHost 可以在一个屏幕间进行不同版面的切换,而系统自带的tabhost界面较为朴素,我们应该如何进行自定义修改优化呢 MainActivity的源代码 package com.dream.ledong; import android.app.TabActivity; import android.content.Intent; import android.graphics.Color; import android.os.Bundle; import android.view.Gr

Android开发：自定义GridView/ListView数据源

http://mobile.51cto.com/android-259861.htm 在开发中,我们常常会遇到比较复杂的GridView/ListView的布局,重新实现BaseAdapter不但能帮助我们实现我们想要的布局效果,并且在绑定大数据量时也不会感觉有卡壳现象.记得以前用一个ListView直接去绑定手机内的联系人Cursor(一百多号人),滑动的时候就会有卡的感觉.今天决定写个Demo是因为在项目中可能会要实现这样的一个效果:一个GridView中绑定4个ImageButton,有些

Android开发之自定义Dialog二次打开报错问题解决

之前自定义了一个AlertDialog对话框,第一次点击时正常,但第二次调用时会出现错误:java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first. 关于这个错误纠结了我好久,在网上百度了也不少,但感觉解决效果都达不到自己想要的效果.网上的解释说是一个子视图指定了多个父视图.由此可以推断出,在第二

Android开发之自定义HorizontalScrollView视图实现仿ViewPager效果

开发过程中,需要达到 HorizontalScrollView和ViewPager的效果,于是直接重写了HorizontalScrollView来达到实现ViewPager的效果. 实际效果图如下: (1)自定义HorizontalScrollView类:AppHorizontalScrollView实现: package com.czm.ui.view; import java.util.ArrayList; import android.content.Context; import and

Android开发之自定义圆角矩形图片ImageView的实现

android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然后进行裁剪对应的圆角矩形的bitmap,然后在onDraw()进行绘制圆角矩形图片输出. 效果图如下: 自定义的圆形的ImageView类的实现代码如下: package com.xc.xcskin.view; import android.content.Context; import and

Android开发之自定义圆形的ImageView的实现

android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap,然后进行裁剪圆形的bitmap,然后在onDraw()进行绘制圆形图片输出. 效果图如下: 自定义的圆形的ImageView类的实现代码如下: package com.xc.xcskin.view; import android.content.Context; import android.grap

Android开发之自定义View专题（二）：自定义饼图

在图表里面,常用的图标一般为折线图.柱形图和饼图,上周,博主已经将柱形图分享.在博主的项目里面其实还用到了饼图,但没用到折线图.其实学会了其中一个,再去写其他的,应该都是知道该怎么写的,原理都是自己绘制图形,然后获取触摸位置判定点击事件.好了,废话不多说,直接上今天的饼图的效果图 这次也是博主从项目里面抽离出来的,这次的代码注释会比上次的柱形图更加的详细,更加便于有兴趣的朋友一起学习.图中的那个圆形指向箭头不属于饼图的部分,是在布局文件中为了美化另外添加进去的,有兴趣的朋友可以下载完整的项目下来

Android开发之自定义View专题（三）：自定义GridView

gridview作为android开发中常用的组件,其功能十分强大.但是,我们有时候有很多特殊的需求,需要在其基础上进行改造.有时候会有移动gridView中item位置的需求,这个网上已经有很多例子,博主就不在描述.今天博主讲的是移动gridView中item中的内容.博主没看过网上那些移动item位置的demo,不知道其原理是不是和博主想的一样.博主思考过,似乎博主的这种实现原理似乎也可以用作实现移动item位置.而之前博主百思不得其解的小米手机的桌面的自定义乱序排放,似乎也可以用这个原理去