使用多列自定义布局在 android 中显示产品列表答案

【问题标题】：show products list in android with multicolumn custom layout使用多列自定义布局在 android 中显示产品列表
【发布时间】：2014-10-31 13:13:07
【问题描述】：

我想在我的 android 应用程序中展示一些产品，我需要它是动态的，

我需要以下要求：

以网格视图显示产品（2、3 或 4 列，具体取决于手机、平板电脑、纵向、横向模式）
每个产品都有 onclick 事件（在另一个活动/片段中显示产品的详细信息）
网格上的每个产品都应来自 xml 布局（包含缩略图、标题、价格等）
滚动加载更多产品（滚动加载）
使用 json 从网络上的 sqlserver 数据库加载产品（可以使用适配器完成...）

我应该提到我已经搜索了 android 库并且我找到了 cardslib ，但是我不明白如何将这些要求与这个库结合起来！我知道有些要求很容易处理，但我不知道如何将它们全部放在一起！

为了澄清情况，我从一个类似的应用程序上传了一些图片：

提前感谢任何解决方案。

【问题讨论】：

标签： android android-layout android-custom-view android-gridview android-json

【解决方案1】：

这是单个网格视图。

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

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e6e6e6"
android:orientation="vertical"
android:padding="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:orientation="vertical"
        android:padding="1.5dp">

        <ImageView
            android:id="@+id/picture"
            android:layout_width="150dp"
            android:layout_height="250dp"
            android:layout_gravity="top|center"
            android:padding="5dp"
            android:src="@drawable/productcimage" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1.5dp"
            android:background="#e6e6e6" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:layout_marginTop="2dp"
                android:text="New Text" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:text="New Text" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_below="@+id/textView2"
                android:text="New Text" />

            <RatingBar
                android:id="@+id/ratingBar"
                style="@style/Widget.AppCompat.RatingBar.Small"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_below="@+id/textView2"
                android:rating="3" />

        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

【讨论】：

【解决方案2】：

这里是网格视图

<GridView
    android:id="@+id/gridview2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:horizontalSpacing="10dp"
    android:numColumns="2"
    android:paddingBottom="5dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="5dp"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp" />

【讨论】：

【解决方案3】：

我认为你可以在设置布局时使用GridLayoutManager：

GridLayoutManager linearLayoutManager = new GridLayoutManager(mContext, 2);
rvCarsCat.setLayoutManager(linearLayoutManager);

【讨论】：