自定义ViewGroup添加布局动画

plokmju88 发布于2019-04-23 17:23 / 1866人阅读

摘要：布局动画布局动画是指在布局时产生的动画效果。由于容器中某个元素要消失，其它元素的变化需要动画显示。

声明几个属性值：

GridImageViewGroup.java 代码：

 1 public class GridImageViewGroup extends ViewGroup {
 2     private int childVerticalSpace = 0;
 3     private int childHorizontalSpace = 0;
 4     private int columnNum = 3;
 5     private int childWidth = 0;
 6     private int childHeight = 0;
 7 
 8 
 9     public GridImageViewGroup(Context context, AttributeSet attrs) {
10         super(context, attrs);
11         TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.GridImageViewGroup);
12         if (attributes != null) {
13             childVerticalSpace = attributes.getDimensionPixelSize(R.styleable.GridImageViewGroup_childVerticalSpace, 0);
14             childHorizontalSpace = attributes.getDimensionPixelSize(R.styleable.GridImageViewGroup_childHorizontalSpace, 0);
15             columnNum = attributes.getInt(R.styleable.GridImageViewGroup_columnNum, 3);
16             attributes.recycle();
17         }
18     }
19 
20     @Override
21     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
22         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
23         int rw = MeasureSpec.getSize(widthMeasureSpec);
24         int rh = MeasureSpec.getSize(heightMeasureSpec);
25         int childCount = getChildCount();
26         if (childCount > 0) {
27             childWidth = (rw - (columnNum - 1) * childHorizontalSpace) / columnNum;
28 
29             childHeight = childWidth;
30 
31             int vw = rw;
32             if (childCount < columnNum) {
33                 vw = childCount * (childHeight + childVerticalSpace);
34             }
35             int rowCount = childCount / columnNum + (childCount % columnNum != 0 ? 1 : 0);
36 
37             int vh = rowCount * childHeight + (rowCount > 0 ? rowCount - 1 : 0) * childVerticalSpace;
38 
39             setMeasuredDimension(vw, vh);
40         }
41     }
42 
43     @Override
44     protected void onLayout(boolean changed, int l, int t, int r, int b) {
45         int left = 0;
46         int top = 0;
47         int count = getChildCount();
48         for (int i = 0; i < count; i++) {
49             View child = getChildAt(i);
50             left = (i % columnNum) * (childWidth + childHorizontalSpace);
51             top = (i / columnNum) * (childHeight + childVerticalSpace);
52             child.layout(left, top, left + childWidth, top + childHeight);
53         }
54     }

在xml中引用：

在Activity中调用：

 1 private void initViews() {
 2         mImageViewGroup = (GridImageViewGroup) findViewById(R.id.image_layout);
 3         ImageView imageView = new ImageView(this);
 4         imageView.setImageResource(R.mipmap.add_image);
 5         imageView.setOnClickListener(new View.OnClickListener() {
 6             @Override
 7             public void onClick(View v) {
 8                 addImageView();
 9             }
10         });
11         mImageViewGroup.addView(imageView);
12     }
13 
14     public void addImageView() {
15         final ImageView imageView = new ImageView(MainActivity4.this);
16         imageView.setImageResource(R.mipmap.lottery);
17         imageView.setOnClickListener(new View.OnClickListener() {
18             @Override
19             public void onClick(View v) {
20                 mImageViewGroup.removeView(imageView);
21             }
22         });
23         mImageViewGroup.addView(imageView, 0);
24     }

实现效果如下：

布局动画产生的背景：

凡事总要问个明白，为何要引入布局动画呢？其实通过上面的实现效果可以看出，在添加和删除图片时都显得很突兀，不知道该用什么语言形容了，总之就是感觉不舒服。其实我平时在开发中调用View.setVisibility()方法时也会有这种感受，这也是布局动画产生的一个背景吧。

布局动画：

布局动画是指ViewGroup在布局时产生的动画效果。实现布局动画有如下几种方式

第一种方式：在xml中，对ViewGrope设置android:animateLayoutChanges="true"属性：

就这么简单的一句话实现的效果就可以实现了，看看效果如何

这种方式虽然简单但是实现的布局动画比较单一，下面看第二种方式。

第二种方式：LayoutTransition实现

 1 LayoutTransition mLayoutTransition = new LayoutTransition();
 2 
 3         //设置每个动画持续的时间
 4         mLayoutTransition.setStagger(LayoutTransition.CHANGE_APPEARING, 50);
 5         mLayoutTransition.setStagger(LayoutTransition.CHANGE_DISAPPEARING, 50);
 6         mLayoutTransition.setStagger(LayoutTransition.APPEARING, 50);
 7         mLayoutTransition.setStagger(LayoutTransition.DISAPPEARING, 50);
 8 
 9         PropertyValuesHolder appearingScaleX = PropertyValuesHolder.ofFloat("scaleX", 0.5f, 1.0f);
10         PropertyValuesHolder appearingScaleY = PropertyValuesHolder.ofFloat("scaleY", 0.5f, 1.0f);
11         PropertyValuesHolder appearingAlpha = PropertyValuesHolder.ofFloat("alpha", 0f, 1f);
12         ObjectAnimator mAnimatorAppearing = ObjectAnimator.ofPropertyValuesHolder(this, appearingAlpha, appearingScaleX, appearingScaleY);
13         //为LayoutTransition设置动画及动画类型
14         mLayoutTransition.setAnimator(LayoutTransition.APPEARING, mAnimatorAppearing);
15 
16 
17         PropertyValuesHolder disappearingAlpha = PropertyValuesHolder.ofFloat("alpha", 1f, 0f);
18         PropertyValuesHolder disappearingRotationY = PropertyValuesHolder.ofFloat("rotationY", 0.0f, 90.0f);
19         ObjectAnimator mAnimatorDisappearing = ObjectAnimator.ofPropertyValuesHolder(this, disappearingAlpha, disappearingRotationY);
20         //为LayoutTransition设置动画及动画类型
21         mLayoutTransition.setAnimator(LayoutTransition.DISAPPEARING, mAnimatorDisappearing);
22 
23 
24         ObjectAnimator mAnimatorChangeDisappearing = ObjectAnimator.ofFloat(null, "alpha", 1f, 0f);
25         //为LayoutTransition设置动画及动画类型
26         mLayoutTransition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, mAnimatorChangeDisappearing);
27 
28         ObjectAnimator mAnimatorChangeAppearing = ObjectAnimator.ofFloat(null, "alpha", 1f, 0f);
29         //为LayoutTransition设置动画及动画类型
30         mLayoutTransition.setAnimator(LayoutTransition.CHANGE_APPEARING, mAnimatorChangeAppearing);
31 
32         //为mImageViewGroup设置mLayoutTransition对象
33         mImageViewGroup.setLayoutTransition(mLayoutTransition);

上面通过自定义LayoutTransition 修改系统提高的默认动画效果，如果不需要自定义的动画效果的话，不调用mLayoutTransition.setAnimator(LayoutTransition.DISAPPEARING, mAnimatorDisappearing);就行了。

LayoutTransition 提供了以下几种过渡类型：

APPEARING —— 元素在容器中显现时需要动画显示。
CHANGE_APPEARING —— 由于容器中要显现一个新的元素，其它元素的变化需要动画显示。
DISAPPEARING —— 元素在容器中消失时需要动画显示。
CHANGE_DISAPPEARING —— 由于容器中某个元素要消失，其它元素的变化需要动画显示。

看下修改过的动画效果：

第三种方式：通过设置LayoutAnimation来实现布局动画

1  AlphaAnimation alphaAnimation = new AlphaAnimation(0f, 1f);
2         alphaAnimation.setDuration(200);
3         LayoutAnimationController animationController = new LayoutAnimationController(alphaAnimation, 0.5f);
4         animationController.setOrder(LayoutAnimationController.ORDER_NORMAL);
5         mImageViewGroup.setLayoutAnimation(animationController);

显示顺序有以下几种：

ORDER_NORMAL;//顺序显示
ORDER_REVERSE;//反显示
ORDER_RANDOM//随机显示

也可以通过xml实现

ViewGroup xml添加android:layoutAnimation属性

由于这种方式采用的是补间动画，个人不再推荐使用这种方式，原因很简单实现的动画效果相对单一。

总结：

本篇学习了布局动画，自此Android的动画学习也将告一段落了，接下来准备总结一下学习动画的过程中遇见的编程知识，比如链式编程，TreadLocal等。

idc机房托管专线服务自定义布局怎么实现 php添加自定义菜单布局动画 js添加加载动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/3094.html

03.Android之View原理问题

摘要：这种自定义控件在原生控件提供的方法外，可以自己添加一些方法。从顶层父到子递归调用方法，方法又回调。目录介绍 3.0.0.1 View的绘制需要经过哪些过程？有哪些常用回调方法？View的绘制流程的详细流程是怎样的？ 3.0.0.2 View绘制流程，当一个TextView的实例调用setText()方法后执行了什么？请说一下原理…… 3.0.0.3 requestLayout()、...

FrozenMap 2019-08-16 14:14 评论0 收藏0
08.Android之View事件问题

摘要：内部是调用效果是移动的内容，因此需要在的父控件中调用。和的情况相似，手机屏幕向下移动，为正值手机屏幕向上移动，为负值。目录介绍 8.0.0.1 简述Android的事件分发机制？dispatchTouchEvent方法的作用是什么？说下View和ViewGroup分发事件？ 8.0.0.2 onInterceptTouchEvent方法作用是什么？onTouchEvent的方法的作...

lavnFan 2019-08-16 15:05 评论0 收藏0
安卓开发笔记（十）：升级ListView为RecylerView的使用

摘要：的优点并不会完全替代这点从没有被标记为可以看出，两者的使用场景不一样。基本使用引用在文件中引入该类。会根据情况，将原来的放入或，从而在复用时提升效率。概述 RecyclerView是什么从Android 5.0开始，谷歌公司推出了一个用于大量数据展示的新控件RecylerView，可以用来代替传统的ListView，更加强大和灵活。RecyclerView的官方定义如下： A flexi...

番茄西红柿 2019-04-23 15:11 评论0 收藏0
Android自定义View流程（卫星菜单例子演示）

摘要：下周入职，搬，搬，搬。写个卫星菜单，后续将根据这个项目中出现的问题，然后在后续对自定义的问题和底层的一些东西进行讲解下。然后对于我们中间的进行事件的监听，还有对于分布在周围的的监听。这里的的实现是响应我们的卫星向周边弹射的核心。序言（扯）由于现在大公司放出的实习offer大多为暑期，本学期课程不多，所以找了一家公司可以立刻入职的去实习下，相比大公司，小公司多采取硬上的策略，对于解决...

wqj97 2019-06-24 19:20 评论0 收藏0
Android-自定义View

摘要：自定义简单实现凹凸优惠券效果自定义属性的简单使用，继承重写方法使用来绘制，简单实现凹凸优惠券效果图文并茂自定义之切换标签自定义实现一个简单好用的切换标签自定义滑动确认控件自定义控件，用来进行滑动确认等操作。 Android 之自定义 View 的死亡三部曲之 Measure 我还不知道你的三围呢（你要占多少屏幕），我怎么能轻易让你出场呢？ Android 自定义 View,ViewGr...

UnixAgain 2019-06-25 11:53 评论0 收藏0