- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我要实现的是一个不是全宽的工具栏(在 16dp 的所有边上都有边距),如下所示:
Gmail - 请注意,可以看到 RecyclerView
在工具栏后面滚动
Google 应用程序 - 同样,可以在工具栏后面看到卡片。
此外,这些工具栏在向下滚动时隐藏,在向上滚动时出现。
工具栏的内容不是我现在担心的。
我假设这是使用 Coordinator Layout 完成的,所以这是我的框架:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
tools:context=".MainContentFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_margin="32dp"
android:background="@android:color/transparent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/holo_red_dark"
app:layout_scrollFlags="scroll|enterAlways">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
...
这是滚动前的输出
向下滚动后
如您所见,工具栏外的空间不是透明的,而是灰色背景,因为内容在它下面,看不见。
最佳答案
在工具栏后面显示内容的想法:
为 ScrollView (NestedScrollView
/RecyclerView
)设置一个负边距,它等于您想要的空白区域的大小,当所有内容都显示出来时向上滚动(工具栏下方的所有内容,后面什么都没有);在下面的演示中假定为 -100dp
在 NestedScrollView
的子级(在布局中)或 RecyclerView
的第一个子级(以编程方式)上反转负边距
将 ScrollView 放在 AppBarLayout
的顶部,这样 AppBarLayout
的背景就不会遮挡滚动内容,让它们出现在后面工具栏。
化妆品:
AppBarLayout
的高度移除为 0 以使其不存在;只有工具栏在那里。AppBarLayout
的背景颜色设置为透明,因此现在它采用根布局的背景。演示:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-100dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:text="@string/longText" />
</androidx.core.widget.NestedScrollView>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="@drawable/rounded_toolbar"
app:layout_scrollFlags="scroll|enterAlways">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
对于 RecyclerView
,您无法通过布局控制其子级,因此可以通过以下方式反转边距
onCreateViewHolder()
onBindViewHolder()
中添加边距:@Override
public void onBindViewHolder(@NonNull CustomViewHolder holder, final int position) {
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) holder.itemView.getLayoutParams();
if (position == 0) {
Resources resources = holder.itemView.getContext().getResources();
float dip = 100f;
float px = TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP,
dip,
resources.getDisplayMetrics()
);
params.topMargin = (int) px;
} else
params.topMargin = 0;
holder.itemView.setLayoutParams(params);
//...... rest of code
}
关于android - 如何使内容绘制在非全宽工具栏后面(如新的 Gmail 或 Google App),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55561770/
两者有什么区别? v7-21 工具栏中没有的所有功能都包含在工具栏中吗?使用 v7-21 工具栏代替工具栏有哪些限制? 最佳答案 如果您查看 Toolbar 的文档和 AppCompat Toolba
如何使用 jQuery 进行可拖动的 Tinymce 工具栏? 最佳答案 在你的 tinyMCE init 方法中试试这个 tinyMCE.init({ // ... handle_event_cal
是否可以有一个多行的 ExtJsToolBar?我想要第一行的几个控件和第二行的 3 个 ExtJsButtons。 工具栏是面板的顶部工具栏。 最佳答案 不确定早期版本,但从 ExtJS 4.0 开
环境: iOS 6/7、Xcode 5 中的自动布局。 我知道要调整 NavBar 以适应状态栏,我将 NavBar 的背景图像设置为 64 位高(引用:WWDC 2013 Video Lecture
有没有办法获取整个 OS X 中使用的默认 NSButton 来导航窗口的内容?我所说的按钮显示在 Finder、系统偏好设置、Safari、Mac App Store、游戏中心等中。 虽然我可以使用
我没有使用 Windows 上 gvim 中的菜单和工具栏;我可以隐藏它们吗? 这将为文本区域提供更多空间。 最佳答案 使用guioptions设置(缩写为go)。 :set guioptions -
我使用 jQuery 为tinymce 创建了一个外部 float 工具栏。 tinyMCE.init({ ... theme_advanced_toolbar_location :
使用我的 TitleAreaDialog 是否可以在按钮下方的底部添加一个区域或一个栏。当操作发生时,可以向用户显示一条消息。 这是我所指的例子 最佳答案 据我所知,这对于 JFace Dialog
我已经创建了 JToolBar (Java Swing)。我在包含 JToolBar 的框架上设置了背景图像。我希望我的 JToolBar 是透明的,以便保持在框架上的图像应该是可见的。我正在使用 s
如何检查键盘何时完全显示以及何时像这样折叠?也许我可以检查它的高度? 我暂时检查了 notification 中的 userInfo,但没有发现对解决我的问题有用。 最佳答案 只需订阅通知: Noti
我想使用 jQuery UI 创建一个带标题的工具栏。 到目前为止,我有: HTML: go to beginning Submit CSS: #toolbar
这是我的 list 文件: 这是我的 Activity 布局: 这是我
如何去掉 android View 顶部的白框?我在我的代码中看不到我调用创建工具栏的东西的任何地方,我也没有自己编写代码。它也存在于 View 之上,而不是其中。我猜 xml 文件的设计 View
有人知道怎么做吗? 最佳答案 使用带有 alignParentBottom="true"的 LinearLayout 像这样: 我没有尝试编译,您可能需要修正一些拼写错误,但这是一个
我想以编程方式更改 Android 工具栏中导航图标(屏幕截图中的黑色圆圈)的高度和宽度。有什么办法吗?这不是工具栏 Logo 。我无法在 Styles xml 中更新工具栏主题,因为我希望它是动态的
我目前正在开发一个实现 Appcompat 工具栏的应用程序。现在我的问题是,如果我选择一个 Light Actionbar 作为基础,菜单是白色的,标题是黑色的。我希望两者都是白色的。如果我更改为
是否可以在工具栏中同时显示主页图标和返回图标?1)是否可以更改后退按钮图标和主页图标的显示顺序。目前它首先显示箭头按钮,然后显示 Logo (主页按钮) 2) 第二个要求是在单击主页图标时清除 Act
我想要一个双倍高度的操作栏(如 Material 指南示例中所示),但标题中(可能)有 2 行文本。我使用的标题是动态的,取决于页面中显示的项目。如果只有一行,它应该看起来像一个普通的操作栏,如果有
目前正在努力调整我的工具栏的布局。 我有两个按钮。一个左对齐,另一个右对齐。文本(应用程序标题)需要位于两个按钮的中央。 例子:[按钮 1] [文本] [按钮 2] 我的问题。文本未居中对齐。 它需要
我有一个包含 CardView 的 RecyclerView。 我想为每个 CardView 添加一个工具栏,使其看起来和行为都像主工具栏: [图标] [标题] ......... [按钮] [按钮]
我是一名优秀的程序员,十分优秀!