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的实现的更多相关文章
- Android 自定义View修炼-自定义弹幕效果View
一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...
- Android 自定义View修炼-自定义View-带百分比进度的圆形进度条(采用自定义属性)
很多的时候,系统自带的View满足不了我们功能的需求,那么我们就需要自己来自定义一个能满足我们需求的View,自定义View我们需要先继承View,添加类的构造方法,重写父类View的一些方法,例如o ...
- Android 自定义View修炼-自定义加载进度动画XCLoadingImageView
一.概述 本自定义View,是加载进度动画的自定义View,继承于ImageView来实现,主要实现蒙层加载进度的加载进度效果. 支持水平左右加载和垂直上下加载四个方向,同时也支持自定义蒙层进度颜色. ...
- Android 自定义View修炼-自定义HorizontalScrollView视图实现仿ViewPager效果
开发过程中,需要达到 HorizontalScrollView和ViewPager的效果,于是直接重写了HorizontalScrollView来达到实现ViewPager的效果. 实际效果图如下: ...
- Android 自定义View修炼-Android 实现自定义的卫星式菜单(弧形菜单)View
一.总述 Android 实现卫星式菜单也叫弧形菜单的主要要做的工作如下:1.动画的处理2.自定义ViewGroup来实现卫星式菜单View (1)自定义属性 a. 在attrs.xml中 ...
- [转]Android自定义控件三部曲系列完全解析(动画, 绘图, 自定义View)
来源:http://blog.csdn.net/harvic880925/article/details/50995268 一.自定义控件三部曲之动画篇 1.<自定义控件三部曲之动画篇(一)—— ...
- Android 自定义View修炼-打造完美的自定义侧滑菜单/侧滑View控件
一.概述 在App中,经常会出现侧滑菜单,侧滑滑出View等效果,虽然说Android有很多第三方开源库,但是实际上 咱们可以自己也写一个自定义的侧滑View控件,其实不难,主要涉及到以下几个要点: ...
- Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现
有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...
- Android中自定义View和自定义动画
Android FrameWork 层给我们提供了很多界面组件,但是在实际的商业开发中这些组件往往并不能完全满足我们的需求,这时候我们就需要自定义我们自己的视图和动画. 我们要重写系统的View就必须 ...
随机推荐
- eclipse+maven搭建cxf webservice 完整例子
开发环境是eclipse , maven. 在开发java webservice时,有两个比较流行的框架:axis2和cxf.cxf可以无缝的和spring集成,而axis2需要打包成aar文件,在t ...
- queue与topic的技术特点对比
1 queue与topic的技术特点对比 Topic Queue 概要 Publish Subscribe messaging 发布订阅消息 Point-to-Point 点对点 有无状态 to ...
- 【HDOJ】3416 Marriage Match IV
先求SPSS.然后遍历每条边,检查是否为最短路径的边,如果是(dis[v]==dis[u]+w)则加入到网络流中.最后Dinic最大流. /* 3416 */ #include <iostrea ...
- BJOI2006狼抓兔子
1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 9967 Solved: 2267[Submit][S ...
- 清理ms sql server 大日志文件数据
1.手动分离数据库: 2.手动删除日志文件: 3.重新生成日志文件: CREATE DATABASE FMIS0 ON (FILENAME = 'E:\FMIS0_DATA\FMIS0-Date') ...
- Spring之HelloWorld再起
第一步:打开File->New->Other…,选择Java Project,创建标准Java项目. 第二步:在项目下添加lib文件夹用于存放jar文件,resources用于存放xml配 ...
- ACM2035_(递归法求幂)
/* 编写一个递归算法,求解m的n次方. 我们一般求解m的n次方,一般使用n个m相乘的办法来求解. 其实我们还可以使用另外一种更有效率的办法求解这个问题. 我们知道一个数的0次方等于1,一个数的1次方 ...
- wireshark不仅仅是用来抓包分析网络的;
凡是不找借口,不排弄推诿理由,提高自我,尽量人事; AIX smit(system manager interface tool); formerly alike; derivatives dpkg ...
- Linux内核是如何创建一个新进程的?
进程描述 进程描述符(task_struct) 用来描述进程的数据结构,可以理解为进程的属性.比如进程的状态.进程的标识(PID)等,都被封装在了进程描述符这个数据结构中,该数据结构被定义为task_ ...
- js 日期插件 datepicker
点击图片出现 时间 ,增加一个点击事件 <label for="" class="width80">创建日:</label> < ...