Centering RecyclerView Objekte in ConstraintLayout

Question

Ich habe eine Reihe von Bildern in meinem RecyclerView angezeigt und ich kann nicht ganz herausfinden, wie man sie zentriert bekommen. Die Ansicht selbst ist zentriert, aber die Bilder im Inneren sind nicht. Ich benutze Constraint Layout mit einer Reihe anderer Widgets zusammen mit dem RecyclerView. Hier ist mein Code:

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

    <ImageView 
     android:id="@+id/mainBackground" 
     android:src="@color/accent_dark_red" 
     android:layout_width="0dp" 
     android:layout_height="300dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     tools:ignore="contentDescription" /> 

    <ImageView 
     android:id="@+id/mainBackgroundImage" 
     android:background="@drawable/theatre" 
     android:alpha="0.5" 
     android:layout_width="0dp" 
     android:layout_height="300dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="@id/mainBackground" 
     app:layout_constraintBottom_toBottomOf="@id/mainBackground" 
     tools:ignore="contentDescription" /> 

    <ImageView 
     android:id="@+id/divider" 
     android:src="@color/accent_dark_red" 
     android:layout_width="0dp" 
     android:layout_height="3dp" 
     android:layout_marginTop="10dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="16dp" 
     app:layout_constraintTop_toBottomOf="@+id/mainBackground" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     tools:ignore = "ContentDescription" 
     android:layout_marginStart="16dp" 
     android:layout_marginEnd="16dp" /> 

    <ImageView 
     android:id="@+id/moviesLabel" 
     android:src="@drawable/rectangle" 
     android:layout_width="200dp" 
     android:layout_height="60dp" 
     android:layout_marginTop="20dp" 
     android:layout_marginLeft="16dp" 
     app:layout_constraintTop_toBottomOf="@+id/divider" 
     app:layout_constraintLeft_toLeftOf="parent" /> 

    <TextView 
     android:id="@+id/movieTextInLabel" 
     android:text="@string/movie_text_in_label" 
     android:textColor="@android:color/white" 
     android:textStyle="bold" 
     android:textAppearance="@style/TextAppearance.AppCompat.Display1" 
     style="@style/wrap_content" 
     app:layout_constraintLeft_toLeftOf="@+id/moviesLabel" 
     app:layout_constraintRight_toRightOf="@id/moviesLabel" 
     app:layout_constraintTop_toTopOf="@id/moviesLabel" 
     app:layout_constraintBottom_toBottomOf="@id/moviesLabel" /> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recyclerView" 
     android:background="@color/accent_dark_red" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginTop="20dp" 
     app:layout_constraintTop_toBottomOf="@id/moviesLabel" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="@id/divider" 
     app:layout_constraintRight_toRightOf="@id/divider"> 

    </android.support.v7.widget.RecyclerView> 

    <TextView 
     android:id="@+id/tv_error_message_display" 
     android:padding="16dp" 
     android:text="@string/error_message" 
     android:textSize="20sp" 
     android:layout_gravity="center_horizontal" 
     android:visibility="invisible" 
     style="@style/wrap_content" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" /> 

    <ProgressBar 
     android:id="@+id/pb_loading_indicator" 
     android:layout_height="48dp" 
     android:layout_width="48dp" 
     android:layout_gravity="center" 
     android:visibility="invisible" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" /> 

</android.support.constraint.ConstraintLayout> 

Und hier ist das, was die Bilder wie folgt aussehen:

Answer 1

Was ist das Layout Ihrer Listenelement durch die RecyclerView verwendet? Um Ihre Bilder zu zentrieren (eins pro Zeile), muss das Listenelementlayout ein ConstraintLayout sein, und ImageView darin müssen linke und rechte Constraints auf parent gesetzt haben.

Answer 2

Es spielt keine Rolle, auf welchem ​​Layout Ihr RecyclerView platziert wurde, aber es spielt eine Rolle, welches Layout Sie für Elemente in RecyclerView verwenden. Es ist offensichtlich, dass Sie GridLayoutManager für Sie RecyclerView verwenden sollten und Sie benutzerdefinierte ItemDecoration für Abstand zwischen Ihren Elementen verwenden sollten.

ITEM LAYOUT

<android.support.constraint.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="wrap_content"> 

    <ImageView 
     android:id="@+id/image_view" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:scaleType="centerCrop" 
     app:layout_constraintDimensionRatio="h,4:5" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toTopOf="@+id/text_view" 
     app:layout_constraintVertical_chainStyle="packed" /> 

    <TextView 
     android:id="@+id/text_view" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:textStyle="bold" 
     android:gravity="center" 
     android:layout_marginTop="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginBottom="8dp" 
     app:layout_constraintTop_toBottomOf="@+id/image_view" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" /> 

</android.support.constraint.ConstraintLayout> 

RECYCLER VIEW INITIALISIERUNGSFEHLER

RecyclerView recyclerView = findViewById(R.id.recycler_view); 
recyclerView.setHasFixedSize(true); 

GridLayoutManager layoutManager = new GridLayoutManager(this, 2); 
recyclerView.setLayoutManager(layoutManager); 

recyclerView.addItemDecoration(new SpacesItemDecoration()); 

ITEM DEKORATION

public class SpacesItemDecoration extends RecyclerView.ItemDecoration { 

    @Override 
    public void getItemOffsets(Rect outRect, View view, 
           RecyclerView parent, RecyclerView.State state) { 
     outRect.bottom = 40; 

     if (parent.getChildLayoutPosition(view) % 2 == 0) { 
      outRect.right = 20; 
     } else { 
      outRect.left = 20; 
     } 
    } 
} 

EDIT 2017.10.16 04.32

Statt fest codierten Pixelwerte in SpacesItemDecoration context.getResources().getDimensionPixelSize(spacingDimen) Sie können weitere Informationen finden verwenden Android Recyclerview GridLayoutManager column spacing: Als Ergebnis sind alle Einzelteile innerhalb RecyclerView zentriert