首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将几个文本视图,图标放在带有回收视图的bottomsheet上,并与bottomsheet一起移动?

要将几个文本视图和图标放在带有回收视图的bottomsheet上,并与bottomsheet一起移动,可以按照以下步骤进行操作:

  1. 创建一个包含文本视图和图标的布局文件,例如bottom_sheet_content.xml,在该布局文件中添加需要展示的文本视图和图标。
  2. 在主活动(Activity)中,使用BottomSheetDialogBottomSheetDialogFragment创建一个底部对话框。
  3. 在底部对话框的布局文件中,添加一个CoordinatorLayout作为根布局,并在其中嵌套一个NestedScrollView作为底部对话框的内容容器。
  4. NestedScrollView中添加一个LinearLayout或其他适合的布局容器,用于放置文本视图和图标。
  5. 在主活动中,使用BottomSheetBehavior获取底部对话框的行为(Behavior)对象。
  6. 在主活动的onCreate()方法中,设置底部对话框的状态监听器,通过监听底部对话框的状态变化,实现文本视图和图标的移动。
  7. 在状态监听器的onStateChanged()方法中,根据底部对话框的状态,设置文本视图和图标的可见性或位置。

以下是一个示例代码:

代码语言:txt
复制
// 主活动中的代码

// 创建底部对话框
BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(this);
bottomSheetDialog.setContentView(R.layout.bottom_sheet_layout);

// 获取底部对话框的行为对象
View bottomSheet = bottomSheetDialog.findViewById(com.google.android.material.R.id.design_bottom_sheet);
BottomSheetBehavior<View> behavior = BottomSheetBehavior.from(bottomSheet);

// 设置底部对话框的状态监听器
behavior.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        // 根据底部对话框的状态设置文本视图和图标的可见性或位置
        if (newState == BottomSheetBehavior.STATE_EXPANDED) {
            // 底部对话框展开时,显示文本视图和图标
            textView.setVisibility(View.VISIBLE);
            imageView.setVisibility(View.VISIBLE);
        } else {
            // 底部对话框折叠时,隐藏文本视图和图标
            textView.setVisibility(View.GONE);
            imageView.setVisibility(View.GONE);
        }
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        // 根据底部对话框的滑动偏移量设置文本视图和图标的位置
        textView.setTranslationY(slideOffset * bottomSheet.getHeight());
        imageView.setTranslationY(slideOffset * bottomSheet.getHeight());
    }
});

// 显示底部对话框
bottomSheetDialog.show();

在上述代码中,textViewimageView分别代表文本视图和图标,根据底部对话框的状态和滑动偏移量,设置它们的可见性或位置。你可以根据实际需求进行调整和扩展。

请注意,以上示例代码中没有提及腾讯云相关产品和产品介绍链接地址,因为根据要求,不能提及云计算品牌商。如果需要了解腾讯云相关产品和产品介绍,可以访问腾讯云官方网站进行查询。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutte部件目录-Material Components 顶

底部导航栏由文本标签,图标或两者多个项目组成,并放置在一块材料顶部。 它提供了应用程序顶级视图之间快速导航。 对于更大屏幕,侧面导航可能更适合。...一个凸起按钮由一个矩形材料悬停在界面上。 ? ? FloatingActionButton 浮动操作按钮是一个圆形图标按钮,它悬停在内容以提升应用程序中主要操作。...FlatButton 平面按钮是在材料组件部件打印部分,通过填充颜色对触摸作出反应。 ? IconButton 图标按钮是一个打印在材质小部件图片,通过填充颜色(墨水)对触摸作出反应。 ?...SnackBar 带有可选操作轻量级消息,简要显示在屏幕底部。 ? 信息显示 Image 一个显示图像小部件。 ? Icon 材质设计图标。 ?...布局 ListTile 单个固定高度行,通常包含一些文本以及前导或尾随图标。 ? Stepper 材质设计步骤部件,通过一系列步骤显示进度。 ? Divider 一个逻辑像素粗横线,两边都有填充。

9.5K40

听说谷歌Baba更新了 Material UI ...

来瓶哇哈哈,精神抖擞来一波~ 简单回顾 Material Design,是谷歌在14年IO大会上提出一种新理念,也被称为新设计语言(也被称为“原材料设计”),称它为设计语言不为过,但是实际,这仅仅是谷歌提倡一种新设计风格...脑图呈现文本重点 前期配置 当初LZ前期配置遇了不少坑,这里我们一起回顾下: Step 1:打开工程目录下build.gradle文件,并添加maven引用 allprojects {    repositories...,具体详情可点击原文大屏观看,怎一个爽字了得~ 举几个栗子 首先放个小姐姐镇楼~  1....持久性底部页面是从屏幕底部出现视图,在主要内容上升高。他们可以垂直拖动以暴露他们内容列表。 注意:如果要使用模态(对话框)底页,请使用 BottomSheetDialogFragment。...如果已经在Activity使用CoordinatorLayout,添加底部表单很简单: 将任何视图添加为CoordinatorLayout直接子视图

3K20
  • 华为鸿蒙 HarmonyOS 开发资料全面汇总

    michaelbel_BottomSheet - BottomSheet 带有材质设计概念 ohos 对话库。 search-dialog - 带有内置搜索选项令人敬畏且可自定义搜索对话框。...TextDrawable - 一个轻量级库提供带有字母/文本图像,例如 Gmail 应用程序。 它扩展了 ShapeElement 类,因此可以与现有/自定义/网络图像类一起使用。...Badge 是带有插入数字彩色圆圈,该圆圈显示在图标的右上角,通常在 IM 应用程序中显示新消息或新功能作用。...michaelbel_BottomSheet - BottomSheet 带有材质设计概念 ohos 对话库。...material-dialogs - 它具有几乎所有带有多个测试用例 UI 组件,其中包括带有文本,图像,按钮,ListContainer 项目,调色板,自定义视图和进度栏对话框。

    3.2K40

    最新iOS设计规范十|5大拓展程序(Extensions)

    iOS是运行于iPhone、iPad和iPod touch设备、最常用移动操作系统之一。作为互联网应用开发者、产品经理、体验设计师,都应当理解并熟悉平台设计规范。...二、文件提供(Document Providers) “文件提供”扩展程序实现了一个有着自定义界面的,并且可以从系统其他APP中进行文档导入、导出以及移动扩展功能。...考虑人们可能想要共享哪些信息,以及他们如何在活跃对话背景下与您应用进行交互。 插入内容以避免裁切。应用程序内容以带有圆角消息气泡形式显示,因此请不要将重要信息放在拐角处。...设计一个带有单个中心点图标,一目了然。包括一个不会压倒其他图标的简单背景。 保持图标四角方形。系统应用一个自动将图标角变圆蒙版。提供不同大小图标。...最好扩展程序使人们仅需几个步骤即可执行任务。例如,共享扩展名可以通过单击立即将图像发布到社交媒体帐户。仅在必要时提供接口。 避免将模式视图放在扩展中。默认情况下,扩展显示在模式视图中。

    3.2K10

    Material Design —卡片(Cards)

    卡片集合内的卡片可以包含一个唯一数据组,例如带有动作清单,带有动作笔记以及带有照片笔记。 不要让卡片带有过多无用信息或操作。 内容层次 使用卡内层次结构来引导用户注意最重要信息。...一旦展开,卡片可能会超过视图最大高度。 在这种情况下,卡片将随卡片集合一起滚动。 ? ? 左:卡片可留有展开入口    右:手机端不要在卡片内放置可滚动区域,会存在两条很难分开滚动条 ?...pc端卡片可展开和内部滚动 卡片聚焦 当遍历卡片焦点时,在移动到下一张卡片之前访问所有可聚焦元素。...扩展补充文本变得可见,然后聚焦放在补充行动上 ---- 操作 卡中主要动作通常是卡本身。 在集合中,根据内容类型和预期结果不同,补充操作可能因卡片而异。 例如,播放视频相对于打开一本书。...补充操作 使用图标文本和UI控件(通常放置在卡底部)明确调出卡内补充操作。 除了溢出菜单之外,补充操作限制为两个操作。 ? ?

    4.3K100

    SwiftUI 中内容边距

    } .font(.title) .navigationTitle("项目列表") } }}如上例所示,我们将列表视图与一堆文本视图放在一起...在 iPhone 可能看起来很好,但是在 iPad ,它看起来非常奇怪,因为它将所有文本放在了前导边缘,并保持屏幕中央为空白。...200 : 0) } }}我们通过使用 horizontalSizeClass 环境值和 safeAreaPadding 视图修饰符,将内容移动到了 iPad 中心。...但是它将滚动条保留在视图后导边缘。contentMargins 视图修饰符接受几个参数,允许我们调整其行为。第一个参数是我们想要移动边缘。...根据水平尺寸类别的不同(正常或紧凑),我们使用 contentMargins 视图修饰符来管理水平方向上内容边距。在紧凑水平尺寸类别下,我们将内容移动了 200 个点,以便在大屏幕设备居中显示。

    17632

    iOS 9人机界面指南(四):UI元素() - 腾讯ISUX

    如果需要在工具栏展示3个以上项目,可以使用图标。由于文本按钮通常会比图标更占空间,所以用图标可以避免文字标题们挤在一起。 保证工具栏文字按钮之间有足够间距。...书签(Bookmarks) 展示应用书签 搜索(Search) 展示搜索字段 添加(Add) 新建一个项 回收站(Trash) 删除当前项 归档(Organize) 将某个项移动到应用内其他位置...由于集合视图布局不是一个严格线性布局,因此尤其适合用来展示一些尺寸不一致项。 集合视图支持广泛自定义,因此我们要尽量避免把心思都放在进行全新设计。...有时候用户会觉得以列表呈现信息更容易阅读和理解,例如将文本信息放在滚动列表中时候,用户阅读和处理起来会更为简单和高效。 让视图项更容易选中。...在页模式滚动视图中,可以考虑使用页面控件(page control)。当你想要展示分页、分屏或者分块内容,可以使用页面控件来让用户知道当前内容一共有多少块,以及他们当前浏览是第几个

    10.1K51

    最新iOS设计规范五|3大界面要素:控件(Controls)

    iOS是运行于iPhone、iPad和iPod touch设备、最常用移动操作系统之一。作为互联网应用开发者、产品经理、体验设计师,都应当理解并熟悉平台设计规范。...虽然子菜单可以缩短情境菜单并说明用户可以执行命令,但是如果子菜单分还几个层级的话会使得体验变得复杂,并且让用户难以导航。 将最常用放在情境菜单顶部。...“更多”按钮可以与大多数界面很好地集成在一起,用户也能够理解点击它可以访问其他功能。通常样式是三个点放在圆形按钮中来表示“更多”。或者,您可以通过在现有按钮执行特定手势来让人们显示菜单。...十二、滑杆(Sliders) 滑块是带有一个称为“拇指”控件水平轨道,你可以用手指滑动该控件以在最小值和最大值之间移动,例如屏幕亮度调节或媒体文件播放期间位置调节。...十五、文本框(Text Fields) 文本输入框是单行且固高度固定区域,通常带有圆角,当用户点击它时会自动弹出键盘。使用文本输入框来输入少量信息,例如电子邮件地址。 ?

    8.6K30

    Flutter 2.5正式版发布,带来重大更新

    以前某些图像内存在响应 Dart VM GC 执行时会延迟回收,作为早期版本中解决方法,Flutter 引擎会通过 Dart VM GC 回收暗示图像内存可以回收,这在理论可以实现了更及时内存回收...同时,在此版本中,我们添加了文本编辑键盘快捷键可覆盖功能( #85381),这是在 Flutter 2.0 及其新文本编辑功能基础进一步优化。...更容易界面分析和定位:Flutter 框架中常用 Widget 都会在左侧 Widget 树视图中显示图标,它们根据类别进一步进行颜色编码,例如布局 Widget 显示为蓝色,而内容Widget...例如,屏幕截图中“列” Widget 位于布局浏览器中蓝色背景,并且在 Widget 树视图中具有蓝色图标。...要启用图标预览,您需要告诉插件您正在使用哪些软件包,settings/preferences 中有一个新文本字段。

    4.4K50

    Win11 这 19 个新功能,你都用上了吗?

    1、开始菜单 Windows 11 带有全新开始菜单和任务栏体验,如下面的屏幕截图所示。 动态磁贴已被图标取代,类似于 Android 和 iOS。...作为重新设计一部分,您可以在多个键盘布局之间切换。取消停靠时,Windows 允许您切换到小键盘布局,可以轻松地在屏幕移动。 键盘顶部有一个新“抓手区域”。...10、文件资源管理器布局更新 经典文件资源管理器默认布局已更新,带有额外填充以改善触摸屏体验。 如果你更喜欢旧布局,微软添加了一个名为“使用紧凑模式”新选项,可以从文件夹视图选项中访问。...Microsoft 正在刷新文件夹图标和默认文件类型图标的方向。这些文件夹包括桌面、文档、下载和图片。回收图标也已更新。 我们在资源管理器中得到了一些圆角。...用于商店和开始菜单 Segoe MDL2 资产将包括带有圆角和统一外观图标设计。

    23.6K30

    Windows 11这19个新功能,你都知道吗?

    1、开始菜单 Windows 11 带有全新开始菜单和任务栏体验,如下面的屏幕截图所示。 动态磁贴已被图标取代,类似于 Android 和 iOS。...作为重新设计一部分,您可以在多个键盘布局之间切换。取消停靠时,Windows 允许您切换到小键盘布局,可以轻松地在屏幕移动。 键盘顶部有一个新“抓手区域”。...10、文件资源管理器布局更新 经典文件资源管理器默认布局已更新,带有额外填充以改善触摸屏体验。 如果你更喜欢旧布局,微软添加了一个名为“使用紧凑模式”新选项,可以从文件夹视图选项中访问。...Microsoft 正在刷新文件夹图标和默认文件类型图标的方向。这些文件夹包括桌面、文档、下载和图片。回收图标也已更新。 我们在资源管理器中得到了一些圆角。...用于商店和开始菜单 Segoe MDL2 资产将包括带有圆角和统一外观图标设计。

    3.5K20

    ARKit 配置-在您AR项目的幕后

    在本节中,我们将看看如何在后面配置提供ARKit模板。我们将发现什么是世界跟踪和AR会话。同样,我们将学习如何将一些调试选项应用于场景中指导。...它带有一个默认视图View Controller,它是运行应用程序时第一个视图,如右箭头所示。好吧,那就是你没有定义一个启动画面。...此视图反映了相机看到内容并将其显示在屏幕。把它想象成一只眼睛角膜,而相机就是眼睛,代码就是处理所有东西大脑,以便在设备投射视线。 Scene 幕后 现在让我们来看看幕后事情。...没有它,我们将无法跟踪我们设备在世界位置,将我们虚拟对象放在桌子,甚至放在房间里。...世界原点 世界原点是视图加载时摄像机起始位置。您可以使用箭头看到它,就像在场景编辑器中一样。如果您四处移动,会话会记住该位置,使其保持静止。 ? 世界起源 特征点 你看到小黄点?

    2.5K20

    18个您想了解微小但有用macOS功能

    您可以将工具栏设置为仅显示文本,或者同时显示图标文本来显示快捷方式,以使视觉清晰。右键单击工具栏以显示这些选项。 想要更好选择吗?使用自定义图标添加到工具栏文件和文件夹。...9.选择多个文本片段 如果在任何文本编辑应用程序中按住Command键,则可以选择多个文本片段进行复制。 使用单个命令将这些代码段粘贴到其他位置,它们将一起显示。...您无需调出带有重音符号键盘快捷键或从网络复制这些字符。按住E键,您将在此处看到与其关联所有变音符号。点击与您要输入标记相对应数字。 此技巧仅适用于带有重音符号字母键。...由于缩略图放大,因此在此视图中比在Finder默认图标视图中更容易识别图像细节。当您选择更多图像一次预览时,缩略图的确会变小。...18.从任何窗格查看所有系统偏好设置 如果每次要切换到其他窗格时都使用“显示全部”按钮还原到“系统偏好设置”视图,则需要此设置。无需单击该按钮,而是单击并按住以显示带有所有可用首选项窗格菜单。

    6.1K30

    【软件开发规范七】《Android UI设计规范》

    其余颜色通过纯黑#000000与纯白#ffffff透明度变化来展现(包括图标和分隔线),而且透明度限定了几个值。 ​...注意避免以下问题: 不要给彩色元素加投影 层叠不要超过两层 折角不要放在左上角 带投影元素要完整展现,不能被图标边缘裁剪 如果有折痕,放在图片中央,并且最多只有一条 带折叠效果图标...​编辑 环形进度条可以用在悬浮按钮 ​编辑 加载详细信息时,也可以使用进度条 下拉刷新动画比较特殊,列表不动,出现一张带有环形进度条纸片。 ​...不能出现一个以上Snackbars。 Snackbars在移动设备,出现在底部。在PC,应该悬浮在屏幕左下角。 ​编辑 不一定要用户响应提示,可以使用Snackbars。...它们可以是单行,带或不带滚动条,也可以是多行,并且带有一个图标。点击文本框后显示光标,并自动显示键盘。

    5.1K20

    【visionOS】从零开始创建第一个visionOS程序

    将visionOS与熟悉工具和技术一起使用,为空间计算构建沉浸式应用程序和游戏。 靓仔,如果你想为visionOS开发软件,那前提是需要一台带有苹果芯片Mac。...在任何SwiftUI应用中,你都可以使用场景将内容放到屏幕。场景包含要在屏幕显示视图和控件。场景还定义了这些视图和控件出现在屏幕外观。...系统会自动将以下类型输入映射到你SwiftUI事件处理代码: 这张照片显示是窗户角落里控件,以及一个人坐在椅子,双手放在膝盖上自上而下叠加视图。 间接输入。...将指针移动到窗口栏旁边圆圈,显示窗口关闭按钮。将光标移动到窗口一个角落,以将窗口栏变为调整大小控件。 tips:应用程序不能控制窗口在空间中位置。...例如,系统可能会移动原点以适应SharePlay活动,该活动显示带有空间角色内容。

    92840

    Flutter 2.5正式版发布,带来多项重大更新

    以前某些图像内存在响应 Dart VM GC 执行时会延迟回收,作为早期版本中解决方法,Flutter 引擎会通过 Dart VM GC 回收暗示图像内存可以回收,这在理论可以实现了更及时内存回收...同时,在此版本中,我们添加了文本编辑键盘快捷键可覆盖功能( #85381),这是在 Flutter 2.0 及其新文本编辑功能基础进一步优化。...更容易界面分析和定位:Flutter 框架中常用 Widget 都会在左侧 Widget 树视图中显示图标,它们根据类别进一步进行颜色编码,例如布局 Widget 显示为蓝色,而内容Widget...例如,屏幕截图中“列” Widget 位于布局浏览器中蓝色背景,并且在 Widget 树视图中具有蓝色图标。...[在这里插入图片描述] 要启用图标预览,您需要告诉插件您正在使用哪些软件包,settings/preferences 中有一个新文本字段。

    3.6K00
    领券