GridLayout öğelerine ofset uygulayın ve tüm öğeler arasında eşit boyutu koruyun

Question

Kılavuzdaki öğeler arasında boşluk oluşturmak istiyorum. Öğelerin hepsi eşit genişliğe/yüksekliğe sahip olmalıdır.

denedim Ne:

bir all ızgara kalemlere ofset uygulayan bir GridLayoutOffsetDecorator oluşturun:

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

bir 8dp ofset olması öğeleri arasında bir 16dp boşluk yaratır. Yani hala dış kenarlarına dolgu 8dp uygulamak zorunda:

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

sonucudur:

Sorun:

: ürün boyutu eşit değildir

Hafif bir fark dikkat edin Mavi çizgiye baktığınızda yükseklikte. Bu fark, yalnızca geri bildirim görüntüsünü doldurduktan sonra görünür. Bu dolgu bazı öğelerin birazını yeniden boyutlandırıyor gibi görünüyor. Bu problemle ilgili deneyimleriniz var mı? Bunun nasıl çözülebileceği hakkında bir fikrin var mı?

---

Görüntüyü öğelerden kaldırarak yükseklik farkı kaybolur. Bu görüntü ayarlanır nasıl:

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

Yani sorun görüntünün kendisi neden olabilir.

Answer 1

GridLayoutManager ile çalışırken aynı sorunu yaşadım. Adaptördeki görüntü için genişlik ve yükseklik ayarlayarak çözüldü. İşte benim çözümüm, umarım yardımcı olur.

Düzemde bu şekilde ImageView'u yerleştirdim.

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

Sonra uygulamak LayoutParams ebeveyn düzeni ve

//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); 

ImageView İşte GetWidth yöntemidir.

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

Ekran görüntüsüne, yer tutucu ve resim içeren bir görünüme bakın.

Answer 2

Resimde görüntünün yüksekliğini sabit olarak deneyebilir misiniz?