Question

我想自定义GridView布局。我希望GridView看起来像下面提供的快照： -

这是我的GridView布局： -

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

    <ImageView
        android:id="@+id/image_grid_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action_name"
        android:layout_gravity="center"/>

    <TextView
        android:id="@+id/product_id_grid_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone" />


    <TextView
        android:id="@+id/product_name_grid_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="test"
        android:paddingLeft="10dp"
        android:textSize="15dp"
        android:textColor="@color/divder_color"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/product_discount_grid_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:paddingLeft="10dp"
            android:text="1891" />

        <TextView
            android:id="@+id/product_special_grid_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/black"
            android:text="1891"
            android:paddingLeft="10dp" />

        <TextView
            android:id="@+id/products_price_grid_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="8dp"
            android:textColor="@android:color/darker_gray"
            android:paddingLeft="5dp" />

        <TextView
            android:id="@+id/products_off_grid_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="20"
            android:textSize="8dp"
            android:textColor="@android:color/holo_red_dark"
            android:paddingLeft="5dp"/>

    </LinearLayout>


    <RatingBar
        android:id="@+id/ratingBar_grid_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        style="?android:attr/ratingBarStyleSmall"
        android:rating="0" />

</LinearLayout>

这是我访问GridView的布局： -

<GridView
            android:id="@+id/list_product_grid"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            tools:listitem="@layout/products_page_grid_view"
            android:numColumns="2"
            android:horizontalSpacing="2dp"
            android:gravity="center"
            android:background="#fff"
            android:padding="10dp"
            android:visibility="visible"
            android:verticalSpacing="2dp"/>

任何人都可以帮助我如何使我的GridView看起来像上面的图像。我是Android的新手。请帮助我。谢谢。

Answer 1

创建一个类extends BaseAdapter，并为getView中的每一行扩充xml布局并设置数据。你可以参考：https://www.caveofprogramming.com/guest-posts/custom-gridview-with-imageview-and-textview-in-android.html，不是你想要的，但我想你会知道的读完之后如何按照自己的意愿制作它。

我建议您使用RecyclerView而不是GridView，它具有更高效的性能和灵活的布局管理器。

Answer 2

您可以使用GridLayoutManager跟RecyclerView关注制作链接中显示的用户界面，并且可以更灵活地执行任何相关操作，例如添加，删除项目等。RecyclerView已内置动画，无需担心重复使用视图。您可能需要使用CardView作为网格项。

按照本教程中的任何一个来实现

查找CardView along with RecyclerView的示例用法。

Answer 3

通过替换您的drawables

为您的grid_item_layout尝试此代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical"
    android:padding="15dp">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image_grid_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/"your product drawable name"/>

        <TextView
            android:id="@+id/new_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/image_grid_view"
            android:background="#666666"
            android:text="New"
            android:textColor="#000000"
            android:textSize="15sp"/>

        <ImageButton
            android:id="@+id/bookmark_text_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignRight="@id/image_grid_view"
            android:layout_alignTop="@id/image_grid_view"
            android:src="@drawable/your bookmark or favourite drawable name"
            android:textColor="#000000"
            android:textSize="15sp"/>
    </RelativeLayout>

    <TextView
        android:id="@+id/product_id_grid_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TOPSHOP"/>


    <TextView
        android:id="@+id/product_name_grid_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:text="Rs.3990"
        android:textColor="#ff0000"
        android:textSize="15dp"/>
</LinearLayout>

如何在android中自定义GridView

3 个答案: