滑动折叠效果简单实现

这篇具有很好参考价值的文章主要介绍了滑动折叠效果简单实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

滑动折叠效果简单实现

绿色为标题,滑动时始终不会被折叠、不会滑动。红色和黑色会在滑动的时候折叠,先折叠红色,在折叠黑色。文章来源地址https://www.toymoban.com/news/detail-513891.html

activity_shop_search.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:elevation="0dp">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:background="@color/red" />

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="44dp"
                        android:background="@color/black" />
                </LinearLayout>
                <androidx.appcompat.widget.Toolbar
                    app:layout_collapseMode="pin"
                    android:layout_width="match_parent"
                    android:layout_height="44dp"
                    android:background="@color/ugckit_color_green">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center"
                        android:textColor="@color/white"
                        android:text="aaaaaaaaaaaaaaaa" />
                </androidx.appcompat.widget.Toolbar>



            </com.google.android.material.appbar.CollapsingToolbarLayout>

        </com.google.android.material.appbar.AppBarLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>


</layout>
ShopSearchActivity.java:
package com.example.supermarket.activity;

import androidx.lifecycle.ViewModelProvider;
import com.alibaba.android.arouter.facade.annotation.Route;
import com.example.common.util.CCRouterTable;
import com.example.supermarket.R;
import com.example.supermarket.databinding.ActivityShopSearchBinding;
import com.example.supermarket.model.SearchActivityModel;
import com.example.view.base.BaseJavaActivity;

@Route(path = CCRouterTable.SUPERMARKET_SHOP_SEARCH)
public class ShopSearchActivity extends BaseJavaActivity<ActivityShopSearchBinding, SearchActivityModel> {

    @Override
    protected void initListener() {
    }

    @Override
    protected SearchActivityModel initViewModel() {
        return new ViewModelProvider(this, ViewModelProvider.AndroidViewModelFactory.getInstance(getApplication())).get(SearchActivityModel.class);
    }

    @Override
    protected boolean isARouterInject() {
        return false;
    }

    @Override
    protected boolean useEventBus() {
        return false;
    }

    @Override
    public int getLayoutId() {
        return R.layout.activity_shop_search;
    }

    @Override
    public void initData() {
    }
}

到了这里,关于滑动折叠效果简单实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 实现滑动元素删除效果

    官网地址:uni-app官网 (dcloud.net.cn) 最终效果如下图:  滑动删除需要用到 uni-ui 的 uni-swipe-action 组件和 uni-swipe-action-item 属性名 类型 可选值 默认值 是否必填 说明 left-options Array/Object - - 否 左侧选项内容及样式 right-options Array/Object - - 否 右侧选项内容及样式 配置option项、所有

    2024年02月10日
    浏览(45)
  • 使用JavaScript实现页面滑动切换效果

      使用JavaScript实现页面滑动切换效果 在现代Web页面设计中,页面滑动切换效果已经成为了一种常见的设计要求,能够提升用户体验,增加页面的交互性。本文将通过JavaScript来实现这一效果。 首先,我们需要在HTML中添加一些基础结构和样式。以下是一个简单的例子:   在

    2024年02月13日
    浏览(56)
  • vue + element 实现鼠标左右滑动效果

    我用了element中的走马灯+overflow-x: auto; html (复制后格式化一下) js this.$refs.entrance.setActiveItem(index); 手动切换当前展示的索引

    2024年02月04日
    浏览(36)
  • 微信小程序 顶部搜索框滑动伸缩效果的实现

    提示:实现搜索框跟随用户滑动页面,实现伸缩效果 微信小程序 顶部搜索框滑动伸缩动画的实现 提示:主要用到了微信小程序的view-scroll bindscroll 1:确定一个控制搜索框伸缩的范围。 2:通过bindscroll事件获取e.detail.scrollTop;即用户滑动的位置 3:计算当前位置占伸缩范围的

    2024年02月12日
    浏览(43)
  • vue中通过JavaScript实现web端鼠标横向滑动&触控板滑动效果-demo

    JavaScript实现web端鼠标横向滑动触控板滑动效果  支持鼠标拖动滑动触控板滑动效果 web端实现滑动,就是对鼠标按下、鼠标松开、鼠标移动事件进行监听 在Vue中实现鼠标横向滑动触控板滑动效果可以通过以下步骤实现: 首先在Vue中创建一个父组件,在该组件中引入子组件或者

    2024年02月15日
    浏览(37)
  • scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果,结合animation与@keyframes实现标题左右闪动更换颜色效果。

    scrollTop 是一个属性,它表示元素的滚动内容垂直滚动条的位置。对于可滚动元素, scrollTop 属性返回垂直滚动条滚动的像素数,即元素顶部被隐藏的像素数。  offsetTop 是一个属性,用于获取一个元素相对于其父元素的垂直偏移量(距离)。具体来说,返回的是一个元素的顶部

    2024年02月02日
    浏览(47)
  • unity 利用Scroll View实现滑动翻页效果

    1.在Hierarchy视图右键创建UI-Scroll View。 Scrollbar可根据自己需求选择是否删除,我这里制作的翻页日历用不上我就删除了。 connect节点挂上Grid Layout Group组件,参数属性可参考unity API。 下面是具体实现代码  onLeft和onRight绑定左右翻页按钮事件  

    2024年01月25日
    浏览(41)
  • element UI中的折叠面板(el-collapse)点击icon和标题展开

    1. 在使用element-ui的折叠面板时,点击标题栏的按钮不展开面板内容: 通过设置 @click.stop=\\\"showCollapse()\\\" ,阻止冒泡,点击按钮不再开展。 2. 想要改变折叠面板中icon位置  找到折叠面板中icon位置,css设置如下: 样式如下

    2024年02月11日
    浏览(42)
  • css实现鼠标滑动左下角弹框带动画效果

    代码 css代码 实现效果    

    2024年02月14日
    浏览(47)
  • (五)Qt 动态手势识别“左右滑动”以及实现翻页效果

    通过Qt实现手势识别控制软件操作相关系列技术方案 (一)Qt 将某控件、图案绘制在最前面的方法,通过QGraphicsScene模块实现 (二)Qt QGraphicsScene模块实现圆点绘制在所有窗体的最前方,实现圆点的“彩色拖尾”效果以及“选中方框”效果 (三)Qt 动态手势识别“握拳” (四

    2024年02月11日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包