Erzwingen GridView zum Generieren von quadratischen Zellen in Android

Question

Wie kann ich ein android GridView zwingen, quadratische Zellen (Zellenhöhe gleich der Breite der Zelle) GridView hat 10 * 9 Zellen und die App muss mehrere Bildschirme unterstützen!

ich ein Linear-Layout verwendet:

row_grid.xml

und Gridview: activity_main.xml

<RelativeLayout 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" 
    android:background="@drawable/katy" > 

    <GridView 
     android:id="@+id/gridView1" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:horizontalSpacing="0dp" 
     android:numColumns="4" 
     android:stretchMode="columnWidth" 
     android:verticalSpacing="0dp" > 
    </GridView> 
</RelativeLayout> 

Jede Zelle enthält ein Gridview-Bild, das hat die gleiche Breite und Höhe. Bilder sind größer als Zellen und müssen gedehnt werden, um in Zellen zu passen.

Answer 1

Zunächst möchten Sie eine benutzerdefinierte View-Klasse erstellen, die Sie anstelle des von Ihnen verwendeten Standard-LinearLayout verwenden können. Dann möchten Sie die Ansicht des onMeasure Anruf außer Kraft zu setzen, und zwingen sie quadratisch zu sein:

public class GridViewItem extends ImageView { 

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

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

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

    @Override 
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, widthMeasureSpec); // This is the key that will make the height equivalent to its width 
    } 
} 

Dann können Sie Ihre row_grid.xml Datei ändern:

<path.to.item.GridViewItem xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/item_image" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:scaleType="centerCrop" 
    android:src="@drawable/ic_launcher" > 
</path.to.item.GridViewItem> 

Nur sicher sein, „Pfad zu ändern. to.item "zu dem Paket, in dem sich Ihre GridViewItem.java-Klasse befindet.

Ich habe auch Ihre LinearLayout Eltern entfernt, da es nichts für Sie dort getan hat.

Edit:

auch geändert Scaletype von fitXY zu centerCrop so dass Ihr Bild nicht selbst dehnt und behält sein Seitenverhältnis. Und solange es ein quadratisches Bild ist, sollte nichts abgeschnitten werden.

Answer 2

Stellen Sie nur sicher, dass Ihre Bilder quadratisch sind. Und mache den Container wrap_content.

Answer 3

Sie Ihr lineares Layout

public class MyLinearLayout extends LinearLayout { 
    public MyLinearLayout(Context context) { 
     super(context); 
    } 

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

    public MyLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
    } 
    @Override 
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, widthMeasureSpec); // This is the key that will make the height equivalent to its width 
    } 
} 

dann im item_grid.xml

verwenden außer Kraft setzen können Sie

<?xml version="1.0" encoding="utf-8"?> 
<com.example.MyLinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/item_grid" 

    android:layout_margin="2dp" 
    android:padding="3dp" 
    android:gravity="center"> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Category Name" 
     android:textStyle="bold" 
     android:textColor="@color/colorPrimary" 
     android:id="@+id/tvCategoryName" /> 


</com.example.MyLinearLayout> 

Answer 4

gut funktioniert, danke! Eine kleine Verbesserung, die ich erforderlich wäre immer den kleineren Wert wählen, zu verhindern, dass der Bildschirm überschieß:

@Override 
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    if(heightMeasureSpec < widthMeasureSpec) { 
     super.onMeasure(heightMeasureSpec, heightMeasureSpec); 
    } else if(widthMeasureSpec < heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, widthMeasureSpec); 
    } else { 
     super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
    } 

}