Offset auf GridLayout-Elemente anwenden und gleiche Größe unter allen Elementen beibehalten

Question

Ich möchte ein Leerzeichen zwischen Elementen im Raster erstellen. Die Gegenstände sollten alle die gleiche Breite/Höhe haben.

Was ich habe versucht:

eine GridLayoutOffsetDecorator erstellen, die für alle Rasterelemente ein Offset gilt:

class GridLayoutOffsetDecorator(var offset: Int) : RecyclerView.ItemDecoration() { 

    override fun getItemOffsets(
      outRect: Rect, 
      view: View, 
      parent: RecyclerView, 
      state: RecyclerView.State?) { 

     super.getItemOffsets(outRect, view, parent, state) 

     outRect.set(offset, offset, offset, offset) 
    } 
} 

mit einem Versatz von 8dp erzeugt einen 16dp Raum zwischen den Elementen. So haben wir noch 8dp der Polsterung an den äußeren Kanten anzuwenden:

<android.support.v7.widget.RecyclerView 
     android:id="@+id/productList" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:clipToPadding="false" 
     android:padding="8dp" /> 

Das Ergebnis ist:

Problem: die Einzelteile sind nicht gleich groß:

Sie bemerken einen kleinen Unterschied in der Höhe, wenn Sie auf die blaue Linie schauen. Dieser Unterschied wird erst nach dem Füllen der Recycler-Ansicht angezeigt. Diese Polsterung scheint einige der Elemente leicht zu verändern. Habt ihr irgendwelche Erfahrungen mit diesem Problem? Irgendeine Idee, wie das gelöst werden kann?

---

Durch Entfernen des Bildes von den Elementen verschwindet der Höhenunterschied. Dies ist, wie das Bild gesetzt:

<SquareImageView 
    android:id="@+id/image" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:scaleType="centerCrop" 
    app:imageResource="@{product.image}" /> 

SquareImageView:

class SquareImageView : ImageView { 

    constructor(context: Context) : super(context) 
    constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet) 
    constructor(context: Context, attributeSet: AttributeSet, defStyleAttr: Int) : super(context, attributeSet, defStyleAttr) 

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { 
     super.onMeasure(widthMeasureSpec, widthMeasureSpec) 
    } 
} 

So das Problem durch das Bild, verursacht werden kann, selbst.

Answer 1

Ich hatte das gleiche Problem bei der Arbeit mit GridLayoutManager. Gelöst es, indem Sie Breite und Höhe für Bild im Adapter einstellen. Hier ist meine Lösung, hoffe es hilft.

So habe ich ImageView in meinem Layout platziert.

<LinearLayout 
    android:id="@+id/layoutImageProduct" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:gravity="center" 
    tools:minHeight="100dp" 
    tools:minWidth="150dp"> 

     <ImageView 
      android:id="@+id/imageProduct" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:scaleType="fitCenter" 
      android:src="@drawable/placeholder_product"/> 
</LinearLayout> 

Und dann gelten LayoutParams auf Eltern-Layout und ImageView

//Setting View width/height 
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) holder.layoutImageProduct.getLayoutParams(); 
params.width = (int) ResourcesUtils.getColumnWidth(context); 
params.height = ((int) (ResourcesUtils.getColumnWidth(context))); 
holder.layoutImageProduct.setLayoutParams(params); 

params = (LinearLayout.LayoutParams) holder.imageProduct.getLayoutParams(); 
params.width = (int) ResourcesUtils.getColumnWidth(context); 
params.height = (int) ResourcesUtils.getColumnWidth(context); 
holder.imageProduct.setLayoutParams(params); 

Hier ist die getWidth Methode.

public static float getColumnWidth(Context context) { 
     if (GRID_COLUMN_WIDTH == -1) { 
      int screenWidth = getDisplayMetrics(context).widthPixels; 
      float horizontalPadding = getDimensInPixel(context, R.dimen.activity_horizontal_margin); 
      // NUM OF COLUMN = 2 
      GRID_COLUMN_WIDTH = screenWidth/2 - horizontalPadding * 2; 
     } 

     return GRID_COLUMN_WIDTH; 
    } 

Sehen Sie den Screenshot, einen mit Platzhalter und einen mit Bild.

Answer 2

Können Sie bitte versuchen, mit Bildhöhe als behoben.