英文:
Android: How to set view to scroll away while positioning it between two pinned views?
问题
以下是翻译好的内容:
我有一个固定的工具栏,一个具有layout_scrollFlags="scroll"属性的视图,一个用于过滤的固定视图,以及一个可滚动的RecyclerView,从上到下依次排列在CoordinatorLayout中。
到目前为止,这是我已经实现的效果:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">
<RelativeLayout
android:id="@+id/scrollAwayView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
app:layout_scrollFlags="scroll">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Scroll Away View"
android:textColor="@color/black"
android:textSize="20sp" />
</RelativeLayout>
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/fixedToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/apl_grayscale_050"
app:title="Fixed Toolbar"
app:titleTextColor="@color/black" />
<HorizontalScrollView
android:id="@+id/horizontalScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clipToPadding="false"
android:gravity="bottom"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:scrollbars="none">
<com.google.android.material.chip.ChipGroup
android:id="@+id/chipGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleLine="true" />
</HorizontalScrollView>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
问题是:位置不正确。固定的工具栏应该在顶部,而滚动视图应该在两个固定视图之间:固定的工具栏和芯片组列表。我了解到,当在此视图之前的任何兄弟视图没有此标志时,layout_scrollFlags=scroll
不起作用。有什么方法可以实现这种行为并保持位置不变?
英文:
I have a fixed toolbar, a view with layout_scrollFlags="scroll", a fixed view for filtering and a recycler view, in this respective order from top to bottom in a CoordinatorLayout.
This is what I have been able to achieve so far:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">
<RelativeLayout
android:id="@+id/scrollAwayView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
app:layout_scrollFlags="scroll">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Scroll Away View"
android:textColor="@color/black"
android:textSize="20sp" />
</RelativeLayout>
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/fixedToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/apl_grayscale_050"
app:title="Fixed Toolbar"
app:titleTextColor="@color/black" />
<HorizontalScrollView
android:id="@+id/horizontalScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clipToPadding="false"
android:gravity="bottom"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:scrollbars="none">
<com.google.android.material.chip.ChipGroup
android:id="@+id/chipGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleLine="true" />
</HorizontalScrollView>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<!-- end snippet -->
The issue is: That the positioning is incorrect. The fixed toolbar should be on top while the scroll away view should be between the two pinned views: the fixed toolbar and the chip group list.
I read that the layout_scrollFlags=scroll
has no effect when any sibling views
before this one do not have this flag. Any ideas on how I can achieve this behavior while keeping the position?
答案1
得分: 0
I was able to find a solution today, after a lot of trial and error.
The Solution
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/fixedToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#F5F5F5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:title="Fixed Toolbar"
app:titleTextColor="@color/black" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/fixedToolbar">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">
<RelativeLayout
android:id="@+id/scrollAwayView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:elevation="0dp"
app:layout_scrollFlags="scroll">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Scroll Away View"
android:textColor="@color/black"
android:textSize="20sp" />
</RelativeLayout>
<HorizontalScrollView
android:id="@+id/horizontalScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clipToPadding="false"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:scrollbars="none">
<com.google.android.material.chip.ChipGroup
android:id="@+id/chipGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleLine="true" />
</HorizontalScrollView>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The key points here:
- 将位于可滚动布局之上的视图(
fixedToolbar
)放置在父级CoordinatorLayout
之外的视图中。 - 对于此解决方案,我使用ConstraintLayout作为
fixedToolbar
的父级,以及其余视图的父级CoordinatorLayout。
How I arrived at this solution
检查layout_scrollFlags
时,我看到了关于scroll
标志的以下信息:
此视图将根据滚动事件进行滚动。需要设置此标志以使其他标志生效。如果在此之前的任何同级视图没有此标志,那么此值将不会生效。
因为我需要将一个视图放置在scrollAwayView
之上,所以我将其放在了Coordinator父视图之外。现在fixedToolbar
和scrollAwayView
不再是同级视图,同时它们也以正确的方式排列。
英文:
I was able to find a solution today, after a lot of trial and error.
The Solution
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/fixedToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#F5F5F5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:title="Fixed Toolbar"
app:titleTextColor="@color/black" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/fixedToolbar">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white">
<RelativeLayout
android:id="@+id/scrollAwayView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:elevation="0dp"
app:layout_scrollFlags="scroll">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Scroll Away View"
android:textColor="@color/black"
android:textSize="20sp" />
</RelativeLayout>
<HorizontalScrollView
android:id="@+id/horizontalScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clipToPadding="false"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:scrollbars="none">
<com.google.android.material.chip.ChipGroup
android:id="@+id/chipGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleLine="true" />
</HorizontalScrollView>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<!-- end snippet -->
The key points here:
- Place the view which is positioned on top of the scrollable layout, the
fixedToolbar
in a view that is outside of the parent Coordinator layout. - For this solution I used ConstraintLayout to be the parent of the
fixedToolbar
and the CoordinatorLayout that is the parent of the rest of the view.
How I arrived at this solution
Inspecting the layout_scrollFlags
, I saw the following information about the scroll
flag:
> The view will be scroll in direct relation to scroll events. This flag
> needs to be set for any of the other flags to take effect. If any sibling
> views before this one do not have this flag, then this value has no
> effect.
Because I needed to position a view above the scrollAwayView
I placed it in a view outside the Coordinator parent. Now that the fixedToolbar
and the scrollAwayView
are not sibling views, while being placed in the correct arrangement.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论