Плиточный Android CardViews, которые всегда идеально квадратные

Question

В настоящее время я работаю на главном экране своего приложения и хочу показать мозаичные виды карточек, которые всегда в квадрате с 3 в строке, как это ...

Это было разработано в Figma, это не скриншот того, что у меня есть в настоящее время.

Итак, я хочу, чтобы это выглядело так, но я хочу, чтобы все квадраты были равны независимо от размера экрана. Я попытался сделать это с помощью GridLayout, однако я не уверен, как мне следует контролировать высоту, чтобы размер был равен ширине карты.

Answer 1

Если вы пытаетесь сделать это в своем родном приложении Xamarin.Android,

Поддержка библиотек является необходимым условием для этого решения

Как мне нравится это делать, используя библиотеку поддержки 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