gpt4 book ai didi

android - 如何使内容绘制在非全宽工具栏后面(如新的 Gmail 或 Google App)

转载 作者:行者123 更新时间:2023-12-05 07:24:12 24 4
gpt4 key购买 nike

我要实现的是一个不是全宽的工具栏(在 16dp 的所有边上都有边距),如下所示:

Gmail - 请注意,可以看到 RecyclerView 在工具栏后面滚动 Gmail

Google 应用程序 - 同样,可以在工具栏后面看到卡片。 Google App

此外,这些工具栏在向下滚动时隐藏,在向上滚动时出现。

工具栏的内容不是我现在担心的。

我假设这是使用 Coordinator Layout 完成的,所以这是我的框架:

  • 协调器布局
    • AppBarLayout
      • 工具栏
    • 嵌套 ScrollView (appbar_scrolling_view_behavior)
      • 约束布局
<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">

...

这是滚动前的输出 output

向下滚动后 output2

如您所见,工具栏外的空间不是透明的,而是灰色背景,因为内容在它下面,看不见。

最佳答案

在工具栏后面显示内容的想法:

  1. 为 ScrollView (NestedScrollView/RecyclerView)设置一个负边距,它等于您想要的空白区域的大小,当所有内容都显示出来时向上滚动(工具栏下方的所有内容,后面什么都没有);在下面的演示中假定为 -100dp

  2. NestedScrollView 的子级(在布局中)或 RecyclerView 的第一个子级(以编程方式)上反转负边距

  3. 将 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,您无法通过布局控制其子级,因此可以通过以下方式反转边距

  • 有 2 个布局,第一个子项的上边距为 100dp,其余子项的另一个没有边距。并在适配器的 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com