web-dev-qa-db-ja.com

AndroidでGridViewに正方形セルを生成させる方法

Android GridViewに正方形のセル（セルの高さとセルの幅が等しい）を生成する）GridViewには10 * 9のセルがあり、アプリは複数の画面をサポートする必要があります。

私は線形レイアウトを使用しました：

row_grid.xml

<LinearLayout 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:padding="0dp" >

        <ImageView
            Android:id="@+id/item_image"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="fitXY"
            Android:src="@drawable/ic_launcher" >
        </ImageView>

    </LinearLayout>

および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>

GridViewの各セルには、同じ幅と高さの画像が含まれています。画像はセルよりも大きく、セルに収まるように拡大する必要があります。 enter image description here

androidgridviewlayout
24
Jessica

まず、使用しているデフォルトのLinearLayoutの代わりに使用できるカスタムViewクラスを作成します。次に、ビューのonMeasure呼び出しをオーバーライドし、強制的に正方形にします。

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

その後、row_grid.xmlファイルを次のように変更できます。

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

「path.to.item」を必ずGridViewItem.Javaクラスが存在するパッケージに変更してください。

また、LinearLayout親も削除しました。何もしていなかったからです。

編集：

また、scaleTypeをfitXYからcenterCropに変更し、画像が伸びずにアスペクト比が維持されるようにしました。そして、それが正方形の画像である限り、何であれ、切り取られるべきではありません。

83
Cruceo

線形レイアウトをオーバーライドできます

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

次に、item_grid.xmlで使用します

<?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>
12
Hossam Alaa

うまくいきます、ありがとう！私が必要とする小さな改善は、画面のオーバーシュートを防ぐために、常により小さい値を選択することです。

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

}
3
最白目
import Android.content.Context;
import Android.util.AttributeSet;
import Android.widget.RelativeLayout;

public class GridViewItem extends RelativeLayout {

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

グリッドアイテムに画像のみがある場合、 answer は非常に優れています。ただし、グリッドビューに複数のアイテムを追加する場合は、グリッドアイテムにしたいレイアウトを拡張するカスタムGridViewItemを作成する必要があります。たとえば、私の場合、親ビューとしてRelativeLayoutがあったため、RelativeLayoutを拡張するGridViewItemを作成しましたが、問題なく動作しました。

0
Jain