如果写一个点击view带动画的下滑展开显示隐藏内容的控件

原理是在onMeasure中得到隐藏内容的高度,点击这个view的时候对隐藏的view startAnimation,让它的高度从0增长到onMeasure得到的这个View的measureHeight

具体这样写:

public class ExpandableLayout extends LinearLayout {

	private Context mContext;
	private LinearLayout mHandleView;
	private RelativeLayout mContentView;
	private ImageView mIconExpand;
	int mContentHeight = 0;
	int mTitleHeight = 0;
	private boolean isExpand;
	private Animation animationDown;
	private Animation animationUp;

	public ExpandableLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.mContext = context;
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		if (this.mContentHeight == 0) {
			this.mContentView.measure(widthMeasureSpec, 0);
			this.mContentHeight = this.mContentView.getMeasuredHeight();
		}
		if (this.mTitleHeight == 0) {
			this.mHandleView.measure(widthMeasureSpec, 0);
			this.mTitleHeight = this.mHandleView.getMeasuredHeight();
		}
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	protected void onFinishInflate() {
		super.onFinishInflate();
		this.mHandleView = (LinearLayout) this
				.findViewById(R.id.collapse_value);
		this.mContentView = (RelativeLayout) this.findViewById(R.id.expand_value);
		this.mIconExpand = (ImageView) this.findViewById(R.id.icon_value);

		this.mHandleView.setOnClickListener(new ExpandListener());
		this.mContentView.setOnClickListener(new ExpandListener());
		mContentView.setVisibility(View.GONE);
	}

	private class ExpandListener implements View.OnClickListener {
		@Override
		public final void onClick(View paramView) {
			//clearAnimation是view的方法
			clearAnimation();
			if (!isExpand) {
				if (animationDown == null) {
					animationDown = new DropDownAnim(mContentView,
							mContentHeight, true);
					animationDown.setDuration(200); // SUPPRESS CHECKSTYLE
				}
				startAnimation(animationDown);
				mContentView.startAnimation(AnimationUtils.loadAnimation(
						mContext, R.anim.animalpha));
				mIconExpand.setImageResource(R.drawable.update_detail_up);
				isExpand = true;
			} else {
				isExpand = false;
				if (animationUp == null) {
					animationUp = new DropDownAnim(mContentView,
							mContentHeight, false);
					animationUp.setDuration(200); // SUPPRESS CHECKSTYLE
				}
				startAnimation(animationUp);
				mIconExpand.setImageResource(R.drawable.update_detail_down);
			}
		}
	}

	class DropDownAnim extends Animation {
		/** 目标的高度 */
		private int targetHeight;
		/** 目标view */
		private View view;
		/** 是否向下展开 */
		private boolean down;

		/**
		 * 构造方法
		 *
		 * @param targetview
		 *            需要被展现的view
		 * @param vieweight
		 *            目的高
		 * @param isdown
		 *            true:向下展开,false:收起
		 */
		public DropDownAnim(View targetview, int vieweight, boolean isdown) {
			this.view = targetview;
			this.targetHeight = vieweight;
			this.down = isdown;
		}
		//down的时候,interpolatedTime从0增长到1,这样newHeight也从0增长到targetHeight
		@Override
		protected void applyTransformation(float interpolatedTime,
				Transformation t) {
			int newHeight;
			if (down) {
				newHeight = (int) (targetHeight * interpolatedTime);
			} else {
				newHeight = (int) (targetHeight * (1 - interpolatedTime));
			}
			view.getLayoutParams().height = newHeight;
			view.requestLayout();
			if (view.getVisibility() == View.GONE) {
				view.setVisibility(View.VISIBLE);
			}
		}

		@Override
		public void initialize(int width, int height, int parentWidth,
				int parentHeight) {
			super.initialize(width, height, parentWidth, parentHeight);
		}

		@Override
		public boolean willChangeBounds() {
			return true;
		}
	}
}

Layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF" >

    <com.example.view.ExpandableLayout
        android:id="@+id/app_detail_safety_info"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/collapse_value"
            android:layout_width="fill_parent"
            android:layout_height="34dip"
            android:layout_marginLeft="14dip"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:text="点击我会显示隐藏的内容"
                android:textColor="#000000"
                android:textSize="18sp" >
            </TextView>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:gravity="right|center_vertical"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/icon_value"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="22dip"
                    android:src="@drawable/update_detail_down" />
            </LinearLayout>
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/expand_value"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/app_detail_safety_info_bg"
            android:orientation="horizontal"
            android:paddingBottom="8dip"
            android:paddingTop="8dip" >

            <ImageButton
                android:id="@+id/btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="30dp"
                android:background="@null"
                android:src="@drawable/btn_icon"
                android:textColor="#0A84BD"
                android:textSize="16sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="30dp"
                android:layout_toRightOf="@id/btn"
                android:text="隐藏的内容"
                android:textColor="#000000"
                android:textSize="18sp" >
            </TextView>
        </RelativeLayout>
    </com.example.view.ExpandableLayout>

</RelativeLayout>

只要在这个activity中setContentView这个layout,点击view就可以执行展开动画

代码:http://download.csdn.net/detail/baidu_nod/7812705

时间: 2024-12-25 09:07:18

如果写一个点击view带动画的下滑展开显示隐藏内容的控件的相关文章

一个加载时带动画效果的ListBoxItem

原文:一个加载时带动画效果的ListBoxItem 今天我们来谈一下ListBoxItem这个控件,ListBoxItem是直接从ContentControl继承而来的,所以可以添加到任何具有Content属性的控件中去,常见的ListBoxItem可以放到ListBox中,也可以放到ItemsControl中去,ListBoxItem可以横向和TreeViewItem进行比较,只不过TreeViewItem是直接从HeaderedItemsControl继承过来的,然后再继承自ItemsCon

Android自定义View(RollWeekView-炫酷的星期日期选择控件)

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:[openXu的博客] 目录: 1分析 2定义控件布局 3定义CustomWeekView 4重写onMeasure 5点击后执行动画 7重置预备控件 源码下载 ??最近收到一个自定义控件的需求,需要做一个日期选择控件,实现图如下: ???? ??一次展示一个星期的5天,中间放大的为当前选中的:如果点击了其中一个日期,比如星期五,那么整体向左滑动,并将星期五慢慢放大

HTML5--》点击显示隐藏内容

<details>浏览器支持比较差,可以用JavaScript实现这种功能. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js点击显示隐藏内容</title> 6 <style type="text/css" > 7 body{font-size:12px;} 8 span{f

帮同事写了几行代码,在安装/下载程序里注册/卸载OCX控件

写了个小控制台程序,这个程序用来注册 / 卸载OCX控件,用在Inno Setup做的安装卸载程序里. #include "stdafx.h" #include <windows.h> #include <iostream> using std::cout; using std::endl; using std::cerr; int _tmain(int argc, _TCHAR* argv[]) { __try { STARTUPINFO si1 = {siz

jQuery基础(动画篇 animate,显示隐藏,淡入淡出,下拉切换)

1.jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果   $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作

Recyclerview点击事件,更新item的UI+更新Recyclerview外的控件

项目中用到了Recyclerview,在第一行代码中学到了一种相对来说简单的点击事件方法,可是这种点击事件是在adapter中写的,没有教怎么更新item的ui和更新Recyclerview之外的控件,研究了一下,写下我的方案. 需求如下图: 首先设置点击事件,在ViewHolder中添加View view变量来保存item最外层布局的实例. 然后在onCreateViewHolder()中注册点击事件,可以为item设置点击事件,也可以为item中的控件eg:TextView设置点击事件.这正

高效快捷解决一个TextView显示多种字体的控件SpannableTextView

这个控件本人强烈推荐,它会使得布局非常的简单且高效: 下面这个布局如果是你,你会用多少层?多少控件生成? 告诉你吧,一个SpannableTextView控件就搞定了! 它把TextView和Spannable封装在了一起,可以在一个TextView中显示不同的字体颜色,大小,背景色等: 它支持如下样式: * Babushka Method      Internal Span *     textSize            AbsoluteSizeSpan *     textColor 

一个字体,大小,颜色可定义的自绘静态框控件-XColorStatic 类(比较好看,一共19篇自绘文章)

翻译来源:https://www.codeproject.com/Articles/5242/XColorStatic-a-colorizing-static-control XColor Static是一个简单的基于静态框的控件,它提供字体更改,文本和背景颜色以及图标显示. 下载演示项目 - 32.2 Kb 介绍 XColor Static是一种通用控件,允许在对话框中显示漂亮的文本.该演示向您展示了可能的文本和图标显示类型: XColorstatic API 以下是完整的方法列表:CXCol

Zara带你快速入门WPF(4)---Command与功能区控件

前言:许多数据驱动的应用程序都包含菜单和工具栏或功能区控件,允许用户控制操作,在WPF中,也可以使用功能区控件,所以这里介绍菜单和功能区控件. 一.菜单控件 在WPF中,菜单很容易使用Menu和MenuItem元素创建,如下面代码,其中一个主菜单和一个次菜单,以及一个子菜单项列表. <Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen