具有可滚动布局和过滤器面板的视图排列

Posted 2021-05-06

我正在努力安排我的活动观点。 我想达到一个简单的效果：

• 过滤容器，其中包含一些文本视图和无线电，可以显示/隐藏操作
• 下图：大量照片的网格视图

当然我想让我的视图可滚动，以允许用户向下滚动以显示所有照片。 此外，我想让过滤器的位置固定 - 放在最顶层。

这是所需的布局。

我试图通过以下方式实现：

 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context="..."
     android:id="@+id/allViews">

    <!-- panel with some filter controls -->
    <LinearLayout
        android:id="@+id/searchOpts"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="@dimen/search_opts_margin"
        android:visibility="gone"
        android:orientation="vertical">

         <RadioGroup
             android:id="@+id/sortOrder"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintRight_toRightOf="parent"
             android:orientation="horizontal">

             <RadioButton
                android:id="@+id/orderByTime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

             <RadioButton
                android:id="@+id/orderByRating"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
         </RadioGroup>

         <MultiAutoCompleteTextView
             android:id="@+id/tags"
             android:hint="@string/tags_label"
             android:layout_width="300dp"
             android:layout_height="wrap_content"
             android:layout_marginTop="5dp"
             android:inputType="textNoSuggestions|textCapSentences|textMultiLine"
             android:textSize="16sp"
             android:textColor="#555"
             app:layout_constraintLeft_toLeftOf="parent"
             app:layout_constraintRight_toRightOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/sortOrder" />

     </LinearLayout>

     <!-- panel with grid of big amount of images -->
     <ScrollView 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_marginBottom="5dp"
        android:id="@+id/sv"
        android:layout_width="match_parent"
        android:layout_marginTop="@dimen/items_grid_margin_under_search_opts"
        app:layout_constraintTop_toBottomOf="@+id/searchOpts"
        android:layout_height="match_parent" >

         <GridView
             android:id="@+id/PhotosGrid"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_marginLeft="5dp"
             android:layout_marginRight="5dp"
             android:columnWidth="100dp"
             android:drawSelectorOnTop="true"
             android:gravity="center"
             android:numColumns="auto_fit"
             android:verticalSpacing="5dp"
             android:horizontalSpacing="5dp"
             android:focusable="true"
             android:clickable="true"/>
     </ScrollView>
 </android.support.constraint.ConstraintLayout>

不幸的是我失败了，需要一些帮助。

答案

我认为你可以通过使用CoordinatorLayout来做到这一点，你会有：

1. CoordinatorLayout作为布局的根。
2. AppBarLayout作为协调器布局的第一个子节点。
3. 添加带有工具栏和/或布局/自定​​义视图的CollapsingToolbar，以表示布局的顶部。 CollapsingToolbarLayout将允许您定义滚动行为到工具栏和/或您的布局，当内容的底部开始滚动时将触发。
4. 添加Recyclerview以在模拟的底部显示网格，并指定布局行为，以便它可以正确滚动应用栏布局内的内容。

以下是布局外观的示例：

<android.support.design.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">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:id="@+id/collapsingToolbar"
            android:layout_height="280dp"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <CustomViewHeader
                android:id="@+id/custom_view_header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_scrollFlags="scroll"
                android:fitsSystemWindows="true"/>

            <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                android:id="@+id/toolbar"
                app:navigationIcon="@drawable/ic_arrow_back"
                app:layout_collapseParallaxMultiplier="0.7"
                app:layout_collapseMode="pin"/>

        </android.support.design.widget.CollapsingToolbarLayout>


    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout>

你可以在这里了解更多：https://antonioleiva.com/collapsing-toolbar-layout/