Anordnung von Ansichten mit einem scrollbaren Layout und einem Filterpanel

Question

Ich habe Schwierigkeiten, die Ansichten meiner Aktivitäten zu ordnen.
Ich mag einen einfachen Effekt erreichen:

• Filterbehälter mit einigen Textansichten und Radios, die Aktionen zu zeigen, wäre in der Lage/verstecken
• unten: Rasteransicht mit großer Menge an Fotos

Natürlich möchte ich meine Ansicht scrollbar machen, damit der Benutzer nach unten scrollen kann, um alle Fotos anzuzeigen.
Außerdem möchte ich die Filterposition fixieren - ganz oben platziert.

Dies ist das gewünschte Layout.

Ich habe versucht, es in folgenden Weise zu tun:

<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> 

Leider scheiterte ich und etwas Hilfe benötigen.

Answer 1

Ich glaube, Sie könnten dies tun, indem eine CoordinatorLayout verwenden und würden:

1. CoordinatorLayout als Wurzel des Layouts.
2. AppBarLayout als erstes Kind des Koordinator-Layouts.
3. Fügen Sie eine CollapsingToolbar mit einer Symbolleiste und/oder einem Layout/einer benutzerdefinierten Ansicht hinzu, um den oberen Teil Ihres Layouts darzustellen. CollapsingToolbarLayout ermöglicht es Ihnen, Scroll-Verhalten in der Symbolleiste und/oder Ihrem Layout zu definieren, das ausgelöst wird, wenn der untere Teil Ihres Inhalts scrollt.
4. Fügen Sie eine Recycleransicht hinzu, um das Raster im unteren Teil des Mockups anzuzeigen und das Layoutverhalten festzulegen, damit das Material im Layout der Appleiste ordnungsgemäß durchgeblättert werden kann. Hier

ist ein Beispiel dafür, wie das Layout aussehen würde:

<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> 

Sie könnten mehr darüber erfahren hier: https://antonioleiva.com/collapsing-toolbar-layout/