如何监听CollapsingToolbarLayout的展开与折叠

使用官方提供的 AppBarLayout.OnOffsetChangedListener就能实现了,不过要封装一下才好用。

自定义一个继承了 AppBarLayout.OnOffsetChangedListener的类,这里命名为AppBarStateChangeListener:


public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
    public enum State {
        EXPANDED, COLLAPSED, IDLE
    }

    private State mCurrentState = State.IDLE;

    @Override
    public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (i == 0) {
            if (mCurrentState != State.EXPANDED) {
                onStateChanged(appBarLayout, State.EXPANDED);
            }
            mCurrentState = State.EXPANDED;
        } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
            if (mCurrentState != State.COLLAPSED) {
                onStateChanged(appBarLayout, State.COLLAPSED);
            }
            mCurrentState = State.COLLAPSED;
        } else {
            if (mCurrentState != State.IDLE) {
                onStateChanged(appBarLayout, State.IDLE);
            }
            mCurrentState = State.IDLE;
        }
    }

    public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}

然后这样使用它:

appbar.addOnOffsetChangedListener(new AppBarStateChangeListener() {
    @Override
    public void onStateChanged(AppBarLayout appBarLayout, AppBarStateChangeListener.State
            state) {
        Log.e("STATE", state.name());
        if (state == State.EXPANDED) {
            //展开状态

        } else if (state == State.COLLAPSED) {
            //折叠状态
            
        } else {
            //中间状态
             
        }
    }
});

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中实现折叠展开组件可以使用 v-if 或 v-show 指令来控制元素的显示和隐藏。 方法1:使用 v-if 指令 在模板中使用 v-if 指令来判断是否显示折叠内容。当某个状态满足需要折叠时,对应的元素会被删除或添加到 DOM 中。 ```html <template> <div> <button @click="toggleCollapse">折叠/展开</button> <div v-if="isCollapsed"> <!-- 折叠内容 --> </div> </div> </template> <script> export default { data() { return { isCollapsed: false } }, methods: { toggleCollapse() { this.isCollapsed = !this.isCollapsed; } } } </script> ``` 方法2:使用 v-show 指令 与 v-if 指令不同的是,v-show 指令不会删除或添加 DOM 元素,而是通过 CSS 控制元素的显示和隐藏。使用 v-show 时,模板中的折叠内容始终存在于 DOM 中,只是通过设置 display 属性来控制其显示和隐藏。 ```html <template> <div> <button @click="toggleCollapse">折叠/展开</button> <div v-show="isCollapsed"> <!-- 折叠内容 --> </div> </div> </template> <script> export default { data() { return { isCollapsed: false } }, methods: { toggleCollapse() { this.isCollapsed = !this.isCollapsed; } } } </script> ``` 以上两种方法都可以用于实现折叠展开组件。使用 v-if 指令可以在不需要展示的时候彻底删除 DOM 元素,适用于折叠内容较多且不经常切换状态的场景;而使用 v-show 指令则适用于折叠内容频繁切换展示状态的场景,因为元素始终存在于 DOM 中,不需要频繁创建和销毁。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值