ItemDecoration de RecyclerView rompt la disposition des éléments construite avec ConstraintLayout

Question

J'essaye de construire cette mise en page - juste une grille de deux colonnes avec des images et du texte sous les images.

Je veux construire ce en utilisant RecyclerView, GridLayoutManager et ItemDecoration pour l'espacement entre les éléments. Voici ce que je reçois comme résultat, comme vous pouvez voir le texte ci-dessous les images de droite est déplacé vers le bas.

MainActivity

public class MainActivity extends AppCompatActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

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

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

     recyclerView.addItemDecoration(new SpacesItemDecoration()); 

     Adapter adapter = new Adapter(); 
     recyclerView.setAdapter(adapter); 
    } 
} 

SpacesItemDecoration

public class SpacesItemDecoration extends RecyclerView.ItemDecoration { 

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

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

item.xml

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:background="#DDDDDD" 
    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:layout_marginTop="8dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginBottom="8dp" 
     android:textStyle="bold" 
     android:gravity="center" 
     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> 

Vous pouvez également projet clone de GitHub

Answer 1

De la capture d'écran que vous avez posté, il semble que les images à droite sont plus grandes que les images à gauche et qui est ce qui pousse le texte sur le droit . Cela peut être dû à la façon dont SpacesItemDecoration définit les encarts. Essayez de changer les encarts gauche/droite pour équilibrer les vues.

SpacesItemDecoration

public class SpacesItemDecoration extends RecyclerView.ItemDecoration { 

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

     if (parent.getChildLayoutPosition(view) % 2 == 0) { 
      outRect.right = 10; // Pad on the right for left-hand side 
     } else { 
      outRect.left = 10; // Pad on the left for right-hand side 
     } 
    } 
}