Question

我目前正在我的应用程序的主屏幕上工作，并且想要显示平铺的卡片视图，该视图始终像这样连续显示3 ...

这是在figma中设计的，这不是我目前的屏幕截图。

因此，我希望它看起来像这样，但是无论屏幕大小如何，我都希望所有正方形都相等。我尝试使用GridLayout进行此操作，但是我不确定如何控制高度使其与卡的宽度相同。

Answer 1

假设您尝试在本机Xamarin.Android应用中执行此操作，

Support libraries是此解决方案的先决条件

我喜欢如何使用支持库GridLayout，可以从NuGet下载它

然后在您的XML或AXML中将其添加如下：

 <android.support.v7.widget.GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:stretchMode="spacingWidthUniform"
            android:useDefaultMargins="true"
            app:columnCount="2"   
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:id="@+id/BoxMainGridLayout"
            android:background="@color/colorBackgroundHomeGrey">

这里的列数是您在网格中想要的列数，因此请根据需要进行更改。

此外，将res-auto xml命名空间添加到您的布局文件中，如下所示：

xmlns:app="http://schemas.android.com/apk/res-auto"

完成此操作后，可以从代码或XML添加此布局的子级。

代码：

using Gridlayout = Android.Support.V7.Widget.GridLayout; // use namespace
private Gridlayout ParentGrid; // Global field

参考GridLayout：

ParentGrid = view.FindViewById<Gridlayout>(Resource.Id.BoxMainGridLayout);

然后在其中添加一个ViewGroup或一个View

ParentGrid.AddView(BoxLayout); // This can be any type of view

注意：孩子应该使用布局参数（如以下示例）设置列和行的权重：

        Button BoxLayout= new Button(**Activity reference**);
        Gridlayout.LayoutParams param = new Gridlayout.LayoutParams(Gridlayout.InvokeSpec(Gridlayout.Undefined, 1f), Gridlayout.InvokeSpec(Gridlayout.Undefined, 1f))
        {
            Height = 0,
            Width = 0
        };
        button.LayoutParameters = (param);

XML：

   <android.support.v7.widget.GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:stretchMode="spacingWidthUniform"
            android:useDefaultMargins="true"
            app:columnCount="2"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:id="@+id/BoxMainGridLayout"
            android:background="@color/colorBackgroundHomeGrey">
      <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/package_margin_layout"
                android:padding="@dimen/package_padding_layout"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_gravity="fill_horizontal"
                  android:background="@color/colorWhiteBackground"
                android:foreground="?attr/selectableItemBackground"
                android:orientation="vertical"
                android:id="@+id/layoutBox2">
       </LinearLayout>

      <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="@dimen/package_margin_layout"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_gravity="fill_horizontal"
                android:background="@color/colorWhiteBackground"
                android:foreground="?attr/selectableItemBackground"
                android:padding="@dimen/package_padding_layout"
                android:orientation="vertical"
                android:id="@+id/layoutBox3">
          </LinearLayout>
  </android.support.v7.widget.GridLayout>

希望这有助于恢复查询

更新

在“活动”上下文中获取显示指标：

var metrics = new DisplayMetrics();
WindowManager.DefaultDisplay.GetMetrics(metrics);
var displayWidth= metrics.WidthPixels;

一旦有了宽度，就需要确定要多少个正方形以及要添加多少边距，以便确定合适的高度：

例如：如果您想要两个正方形，则使用上面的代码获得宽度，然后将您在XML中定义的边距填充从总宽度中删除，然后将宽度除以得到高度。

var exactWidth= displayWidth - pxFromDp(this,10); //Assuming the sum of margin padding is 10

其中pxFromDp如下所示：

public static float pxFromDp(Context context, float dp)
{
   return dp * context.Resources.DisplayMetrics.Density;
}

一旦有了这个，您就可以得到正方形的高度，如下所示：

var height= exactWidth/2;  //Where 2 is the number of boxes you have in one column

平铺的Android CardView总是完美的正方形

1 个答案: