RecyclerView'ın ızgara öğesinin eşit yüksekliğe ve genişliğe sahip olması nasıl yapılır?

Question

RecyclerView ürünümüzü, düzgün çalışmakta olan 3 sayısı olan GridLayoutManger ile düzenini ayarlayarak ızgara olarak tanımlarım. Ayrıca, grid öğeleri arasındaki boşluğu yönetecek olan geri dönüştürücü görünümüne bir öğe dekoratörünü de ekliyorum, bu da iyi çalışıyor.

public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration { 

    private int spanCount; 
    private int spacing; 
    private boolean includeEdge; 

    public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) { 
     this.spanCount = spanCount; 
     this.spacing = spacing; 
     this.includeEdge = includeEdge; 
    } 

    @Override 
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { 
     int position = parent.getChildAdapterPosition(view); // item position 
     int column = position % spanCount; // item column 

     if (includeEdge) { 
      outRect.left = spacing - column * spacing/spanCount; // spacing - column * ((1f/spanCount) * spacing) 
      outRect.right = (column + 1) * spacing/spanCount; // (column + 1) * ((1f/spanCount) * spacing) 

      if (position < spanCount) { // top edge 
       outRect.top = spacing; 
      } 
      outRect.bottom = spacing; // item bottom 
     } else { 
      outRect.left = column * spacing/spanCount; // column * ((1f/spanCount) * spacing) 
      outRect.right = spacing - (column + 1) * spacing/spanCount; // spacing - (column + 1) * ((1f/ spanCount) * spacing) 
      if (position >= spanCount) { 
       outRect.top = spacing; // item top 
      } 
     } 
    } 
} 

benim Recycler View madde dekorasyon eklemek için My uygulaması:

mBuddiesGrid = (RecyclerView) findViewById(R.id.buddies_grid); 
     mLayoutManager = new GridLayoutManager(getApplicationContext(), 3); 
     mBuddiesGrid.addItemDecoration(new GridSpacingItemDecoration(3, (int) dpToPx(10) , true)); 
     mBuddiesAdapter = new BuddiesGridAdapter(getApplicationContext(), new Buddies()); 
     mBuddiesGrid.setLayoutManager(mLayoutManager); 

Benim ızgara öğesi xml düzeni:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 

    <ImageView 
     android:layout_weight="1" 
     android:cropToPadding="false" 
     android:id="@+id/profile_picture" 
     android:scaleType="centerCrop" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

    <TextView 
     android:text="Theodore" 
     android:includeFontPadding="false" 
     android:textColor="@android:color/black" 
     android:id="@+id/name" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 
</LinearLayout> 

ızgara öğesinin genişliğini ayarlamak olacaktır ızgara öğesi arasında boşluk ekleyerek Bu, öğe görünümümün boyut oranını alamama neden olabilir. Benim elde etmek istediğim, ızgara öğesi yüksekliğini dinamik olarak genişliğine eşitlemek. Nasıl yapabilirim?

Answer 1

Geri dönüşüm görüntüleyicide "onBindViewHolder" işlevinde kod yazabilirsiniz. Bu şekilde, geri dönüşümcü görünümünün ağaç gözlemcisini görebilir ve genişlik veya (ve) geri dönüşümcü madde görünümünün yüksekliğini değiştirebilirsiniz.

Answer 2

Eşit genişlik/yükseklik sağlayacağından emin olmanın bir yolu, onMeasure() çağrıldığında genişliğini enine göre hesaplayan özel bir görünüm kullanmaktır. Bununla ilgili düzgün olan şey, özel görünümü oluşturmanın dışında, kodlamanın dahil edilmemesi. İşte

özel görünüm LinearLayout uzanan ediyor:

public class SquareLayout extends LinearLayout { 

    public SquareLayout(Context context) { 
     super(context); 
    } 

    public SquareLayout(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    public SquareLayout(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 
    } 

    @Override 
    protected void onMeasure(int width, int height) { 
     // note we are applying the width value as the height 
     super.onMeasure(width, width); 
    } 

} 

İşte ızgara öğesi düzeni değişmiş bir versiyonu, yukarıda özel LinearLayout kullanarak: Çok son çare ve TreeObserver kullanma

<com.yourpackage.name.views.SquareLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <ImageView 
     android:id="@+id/profile_picture" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     android:cropToPadding="false" 
     android:scaleType="centerCrop" /> 

    <TextView 
     android:id="@+id/name" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:includeFontPadding="false" 
     android:textColor="@android:color/black" 
     android:text="Theodore"/> 

</com.yourpackage.name.views.SquareLayout>