美文网首页
折叠展开动画

折叠展开动画

作者: 涂涂家的小七呀 | 来源:发表于2019-08-20 16:30 被阅读0次

这篇目的一是记录下,二是将这个效果发布出来,网上虽然很多但是太模糊了。


8多说先看效果

record_20190820161240530.gif

上代码

import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

import androidx.appcompat.widget.AppCompatImageView;

/**
 * Created by TU on 2019/3/14.
 * 具有折叠展开伸缩动画
 */
public class ExpandLayout extends RelativeLayout {

    private View layoutView;
    private int viewHeight;
    private boolean isExpand;
    private long animationDuration;
    private boolean lock;

    public ExpandLayout(Context context) {
        this(context, null);
    }

    public ExpandLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ExpandLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }

    private void initView() {
        layoutView = this;
        isExpand = true;
        animationDuration = 300;
        setViewDimensions();
    }

    /**
     * @param isExpand 初始状态是否折叠
     */
    public void initExpand(boolean isExpand) {
        this.isExpand = isExpand;
        setViewDimensions();
    }

    /**
     * 设置动画时间
     *
     * @param animationDuration 动画时间
     */
    public void setAnimationDuration(long animationDuration) {
        this.animationDuration = animationDuration;
    }

    /**
     * 获取subView的总高度
     * View.post()的runnable对象中的方法会在View的measure、layout等事件后触发
     */
    private void setViewDimensions() {
        layoutView.post(new Runnable() {
            @Override
            public void run() {
                if (viewHeight <= 0) {
                    viewHeight = layoutView.getMeasuredHeight();
                }
                setViewHeight(layoutView, isExpand ? viewHeight : 0);
            }
        });
    }


    public static void setViewHeight(View view, int height) {
        final ViewGroup.LayoutParams params = view.getLayoutParams();
        params.height = height;
        view.requestLayout();
    }

    /**
     * 切换动画实现
     */
    private void animateToggle(long animationDuration) {
        ValueAnimator heightAnimation = isExpand ?
                ValueAnimator.ofFloat(0f, viewHeight) : ValueAnimator.ofFloat(viewHeight, 0f);
        heightAnimation.setDuration(animationDuration / 2);
        heightAnimation.setStartDelay(animationDuration / 2);

        heightAnimation.addUpdateListener(animation -> {
            int value = (int) (float) animation.getAnimatedValue();
            setViewHeight(layoutView, value);
            if (value == viewHeight || value == 0) {
                lock = false;
            }
        });

        heightAnimation.start();
        lock = true;
    }

    public boolean isExpand() {
        return isExpand;
    }

    /**
     * 折叠view
     */
    public void collapse() {
        isExpand = false;
        animateToggle(animationDuration);
    }

    /**
     * 展开view
     */
    public void expand() {
        isExpand = true;
        animateToggle(animationDuration);
    }

    /**
     * @param imageView 展开时旋转角标
     */
    public void toggleExpand(AppCompatImageView imageView) {
        if (lock) {
            return;
        }
        if (isExpand) {
            collapse();
            imageView.animate().rotation(0);
        } else {
            expand();
            imageView.animate().rotation(90);
        }
    }
}

调用

 @BindView(R.id.expand)
 ExpandLayout expand;
 //oncreate()初始化
 expand.initExpand(false);
 //传入被执行动画的view
 expandPopular.toggleExpand(imgae);

soeasy,拿别人的轮子来改造了下,具体根据自己需求更改view代码。

相关文章

  • 折叠展开动画

    这篇目的一是记录下,二是将这个效果发布出来,网上虽然很多但是太模糊了。 8多说先看效果 上代码 调用 soeasy...

  • TextView 相关

    TextView展开与折叠的动画 怎么用? public class MainActivity extends A...

  • 展开与折叠菜单动画

    最简单的展开与折叠菜单,一般是通过切换display属性的none和block的值来实现。但是这样会使得整个过程非...

  • el-collapse-transition实现

    element-ui中折叠面板展开动画 return h('transition', data, children...

  • UITableViewCell的一些动画

    UITableViewCell的一些动画 1、左侧插入动画 2、弹簧效果 3、折叠展开效果 4、左侧3D变幻效果 ...

  • 折叠展开

    早上阅读了最近很火的《北京折叠》,文章不长,很快读完,中间有很多的描写还是跳过的,因为不是精读,因此很多细节并不清...

  • ExpandableRecyclerView

    使用RecyclerView 实现的折叠列表 效果图 粘性头部: 最后一个条目展开动画: GridLayoutMa...

  • Flutter代码的一些快捷键

    折叠部分代码: ⌘ + -展开部分代码: ⌘ + +折叠全部代码: ⌘ + ⇧ + -展开全部代码: ⌘ + ⇧ ...

  • spacemacs常用操作

    折叠 zc 折叠当前块(函数)zm 折叠当前文件的所有函数zo 展开当前折叠zr 展开当前文件的所有折叠 函数跳转...

  • VIM使用技巧

    ★在vim的命令模式 按Shift+F5,可进入帮助文档。 ★展开折叠 展开、折叠所有代码 z + i 折叠代码 ...

网友评论

      本文标题:折叠展开动画

      本文链接:https://www.haomeiwen.com/subject/dyppsctx.html