GridLayoutManager-列を自動調整する方法は？

Question

カードビューを表示するGridLayoutManagerを備えたRecyclerViewがあります。画面サイズに応じてカードを並べ替えたい（Google Playアプリはアプリカードでこの種のことをする）。以下に例を示します。

現在の私のアプリの外観は次のとおりです。

ご覧のように、カードは伸びるだけで、向きの変更から作られた空のスペースには収まりません。どうすればこれを行うことができますか？

コード：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Json;
using System.Threading;
using System.Threading.Tasks;
using Android.Media;
using Android.App;
using Android.Support.V4.App;
using Android.Support.V4.Content.Res;
using Android.Support.V4.Widget;
using Android.Support.V7.Widget;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;
using Android.Net;
using Android.Views.Animations;
using Android.Graphics;
using Android.Graphics.Drawables;
using Newtonsoft.Json;
using *******.Adapters;
using *******.Models;

namespace *******.Fragments {
    public class Dashboard : GridLayoutBase {
        private ISharedPreferences pref;
        private SessionManager session;
        private string cookie;
        private DeviceModel deviceModel;
        private RecyclerView recyclerView;
        private RecyclerView.Adapter adapter;
//      private RecyclerView.LayoutManager layoutManager;
        private GridLayoutManager gridLayoutManager;
        private List<ItemData> itemData;
        private Bitmap lastPhotoBitmap;
        private Drawable lastPhotoDrawable;
        private static Activity activity;
        private ProgressDialog progressDialog;
        private TextView noData;
        private const string URL_DASHBOARD = "http://192.168.1.101/appapi/getdashboard";
        private const string URL_DATA = "http://192.168.1.101/appapi/getdata";

        public override void OnCreate(Bundle bundle) {
            base.OnCreate(bundle);

            activity = Activity;
            session = new SessionManager();
            pref = activity.GetSharedPreferences("UserSession", FileCreationMode.Private);
            cookie = pref.GetString("PHPSESSID", string.Empty);
        }

        public async override void OnStart() {
            base.OnStart();

            progressDialog = ProgressDialog.Show(activity, String.Empty, GetString(Resource.String.loading_text));
            progressDialog.Window.ClearFlags(WindowManagerFlags.DimBehind);

            await GetDevicesInfo();

            if (deviceModel.Error == "true" && deviceModel.ErrorType == "noSensors") {
                recyclerView.Visibility = ViewStates.Gone;
                noData.Visibility = ViewStates.Visible;

                progressDialog.Hide();

                return;
            } else {
                recyclerView.Visibility = ViewStates.Visible;
                noData.Visibility = ViewStates.Gone;

                await PopulateSensorStates();
            }

//          DisplayLastPhoto();

            adapter = new ViewAdapter(itemData);

            new System.Threading.Thread(new System.Threading.ThreadStart(() => {
                activity.RunOnUiThread(() => {
                    recyclerView.SetAdapter(adapter);
                });
            })).Start();

            progressDialog.Hide();
        }

        public async Task GetDevicesInfo() {
            var jsonFetcher = new JsonFetcher();
            JsonValue jsonDashboard = await jsonFetcher.FetchDataWithCookieAsync(URL_DASHBOARD, cookie);
            deviceModel = new DeviceModel();
            deviceModel = JsonConvert.DeserializeObject<DeviceModel>(jsonDashboard);
        }

        // Shows sensor states
        public async Task PopulateSensorStates() {
            itemData = new List<ItemData>();
            string lastValue = String.Empty;

            foreach (var sensor in this.deviceModel.Sensors) {
                var sensorImage = ResourcesCompat.GetDrawable(Resources, Resource.Drawable.smoke_red, null);

                switch (sensor.Type) {
                case "2":
                    var jsonFetcher = new JsonFetcher();
                    JsonValue jsonData = await jsonFetcher.FetchSensorDataAsync(URL_DATA, sensor.Id, "DESC", "1", cookie);
                    var deviceModel = new DeviceModel();
                    deviceModel = JsonConvert.DeserializeObject<DeviceModel>(jsonData);
                    lastValue = deviceModel.SensorData.Last().Value;
                    break;
                case "4":
                    await RenderLastCameraPhoto();
                    sensorImage = new BitmapDrawable(Resources, lastPhotoBitmap);
                    break;
                }

                itemData.Add(new ItemData() {
                    id = sensor.Id,
                    value = lastValue,
                    type = sensor.Type,
                    image = sensorImage,
                    title = sensor.Name.First().ToString().ToUpper() + sensor.Name.Substring(1).ToLower(),
                });
            }
        }

        // Shows the last camera photo
        public async Task RenderLastCameraPhoto() {
            if (deviceModel.Error == "true" && deviceModel.ErrorType == "noPhoto") {
                //TODO: Show a "No photo" picture
            } else {
                string url = deviceModel.LastPhotoLink;
                lastPhotoBitmap = await new ImageDownloader().GetImageBitmapFromUrlAsync(url, activity, 300, 300);
            }
        }

        public async void UpdateData(bool isSwipeRefresh) {
            await GetDevicesInfo();

            if (deviceModel.Error == "true" && deviceModel.ErrorType == "noSensors") {
                recyclerView.Visibility = ViewStates.Gone;
                noData.Visibility = ViewStates.Visible;

                return;
                } else {
                recyclerView.Visibility = ViewStates.Visible;
                noData.Visibility = ViewStates.Gone;

                await PopulateSensorStates();
            }

            adapter = new ViewAdapter(itemData);

            new System.Threading.Thread(new System.Threading.ThreadStart(() => {
                activity.RunOnUiThread(() => {
                    recyclerView.SetAdapter(adapter);
                });
            })).Start();

            adapter.NotifyDataSetChanged();
        }

        public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.Inflate(Resource.Layout.Dashboard, container, false);
            noData = view.FindViewById<TextView>(Resource.Id.no_data_title);

            SwipeRefreshLayout swipeRefreshLayout = view.FindViewById<SwipeRefreshLayout>(Resource.Id.swipe_container);
            //          swipeRefreshLayout.SetColorSchemeResources(Color.LightBlue, Color.LightGreen, Color.Orange, Color.Red);

            // On refresh button press/swipe, updates the recycler view with new data
            swipeRefreshLayout.Refresh += (sender, e) => {
                UpdateData(true);

                swipeRefreshLayout.Refreshing = false;
            };

            var gridLayoutManager = new GridLayoutManager(activity, 2);

            recyclerView = view.FindViewById<RecyclerView>(Resource.Id.dashboard_recycler_view);
            recyclerView.HasFixedSize = true;
            recyclerView.SetLayoutManager(gridLayoutManager);
            recyclerView.SetItemAnimator(new DefaultItemAnimator());
            recyclerView.AddItemDecoration(new SpaceItemDecoration(15));

            return view;
        }

        public class ViewAdapter : RecyclerView.Adapter {
            private List<ItemData> itemData;
            public string sensorId;
            public string sensorType;
            private ImageView imageId;
            private TextView sensorValue;
            private TextView sensorTitle;

            public ViewAdapter(List<ItemData> itemData) {
                this.itemData = itemData;
            }

            public class ItemView : RecyclerView.ViewHolder {
                public View mainView { get; set; }

                public string id { get; set; }

                public string type { get; set; }

                public ImageView image { get; set; }

                //              public TextView value { get; set; }

                public TextView title { get; set; }

                public ItemView(View view) : base(view) {
                    mainView = view;
                }
            }

            public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType) {
                View itemLayoutView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.DashboardItems, null);
                CardView cardView = itemLayoutView.FindViewById<CardView>(Resource.Id.dashboard_card_view);
                imageId = itemLayoutView.FindViewById<ImageView>(Resource.Id.sensor_image);
//              sensorValue = itemLayoutView.FindViewById<TextView>(Resource.Id.sensor_value);
                sensorTitle = itemLayoutView.FindViewById<TextView>(Resource.Id.sensor_title);

                var viewHolder = new ItemView(itemLayoutView) {
                    id = sensorId,
                    type = sensorType,
                    image = imageId,
//                  value = sensorValue,
                    title = sensorTitle
                };

                return viewHolder;
            }

            public override void OnBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
                ItemView itemHolder = viewHolder as ItemView;

                itemHolder.image.SetImageDrawable(itemData[position].image);

                if (itemData[position].type == "2") { // Temperature
                    itemHolder.title.Text = itemData[position].title + ": " + itemData[position].value;
                } else {
                    itemHolder.title.Text = itemData[position].title;
                }

                var bundle = new Bundle();
                var dualColumnList = new DualColumnList();
                var gallery = new Gallery();

                EventHandler clickUpdateViewEvent = ((sender, e) => {
                    bundle.PutString("id", itemData[position].id);
                    gallery.Arguments = bundle;
                    dualColumnList.Arguments = bundle;

                    if (itemData[position].type == "4") { // Camera
                        ((FragmentActivity)activity).ShowFragment(gallery, itemData[position].title, itemData[position].type, true);
                    } else {
                        ((FragmentActivity)activity).ShowFragment(dualColumnList, itemData[position].title, itemData[position].type, true);
                    }
                });

                itemHolder.image.Click += clickUpdateViewEvent;
//              itemHolder.value.Click += clickUpdateViewEvent;
                itemHolder.title.Click += clickUpdateViewEvent;
            }

            public override int ItemCount {
                get { return itemData.Count; }
            }
        }

        public class ItemData {
            public string id { get; set; }

            public string type { get; set; }

            public Drawable image { get; set; }

            public string value { get; set; }

            public string title { get; set; }
        }
    }
}

フラグメントレイアウト：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v4.widget.SwipeRefreshLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/swipe_container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:gravity="center_horizontal"
        Android:weightSum="1">
        <RelativeLayout
            Android:layout_width="0dp"
            Android:layout_height="match_parent"
            Android:layout_weight="0.9"
            Android:scrollbars="vertical">
            <Android.support.v7.widget.RecyclerView
                Android:id="@+id/dashboard_recycler_view"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent" />
            <TextView
                Android:text="@string/no_data_text"
                Android:id="@+id/no_data_title"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:textSize="30sp"
                Android:gravity="center"
                Android:layout_centerInParent="true" />
        </RelativeLayout>
    </LinearLayout>
</Android.support.v4.widget.SwipeRefreshLayout>

フラグメントアイテムのレイアウト：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/dashboard_card_view"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content">
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:gravity="center_horizontal"
        Android:orientation="vertical"
        Android:foreground="?android:attr/selectableItemBackground">
        <ImageView
            Android:id="@+id/sensor_image"
            Android:layout_width="120dp"
            Android:layout_height="120dp"
            Android:paddingTop="5dp"
            Android:layout_alignParentTop="true" />
    <!--        <TextView
            Android:id="@+id/sensor_value"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:textSize="30sp"
            Android:layout_below="@id/sensor_image"
            Android:gravity="center" />-->
        <TextView
            Android:id="@+id/sensor_title"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:textSize="23sp"
            Android:layout_below="@id/sensor_image"
            Android:gravity="center"
            Android:layout_alignParentBottom="true" />
    </LinearLayout>
</Android.support.v7.widget.CardView>

Answer 1

目的の列幅を指定して、使用可能な列数を計算し、計算されたとおりに画像をロードできます。次のように計算する静的関数を定義します。

public class Utility {
    public static int calculateNoOfColumns(Context context, float columnWidthDp) { // For example columnWidthdp=180
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        float screenWidthDp = displayMetrics.widthPixels / displayMetrics.density;
        int noOfColumns = (int) (screenWidthDp / columnWidthDp + 0.5); // +0.5 for correct rounding to int.
        return noOfColumns;
    }
}

そして、アクティビティまたはフラグメントで使用する場合、次のようにすることができます：

int mNoOfColumns = Utility.calculateNoOfColumns(getApplicationContext());

............
mGridLayoutManager = new GridLayoutManager(this, mNoOfColumns);

Answer 2

GridLayoutManagerの constructor には、引数spanCountがあります。

グリッド内の列の数

整数リソース 値でマネージャーを初期化し、 異なる画面 に異なる値を提供できます（つまり、values-w600、values-large、values-land ）。

Answer 3

@Ritenの回答を試してみて、ファンタスティックに働きました!!しかし、ハードコードされた「180」には満足していなかったので、次のように変更しました。

    public class ColumnQty {
    private int width, height, remaining;
    private DisplayMetrics displayMetrics;

    public ColumnQty(Context context, int viewId) {

        View view = View.inflate(context, viewId, null);
        view.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
        width = view.getMeasuredWidth();
        height = view.getMeasuredHeight();
        displayMetrics = context.getResources().getDisplayMetrics();
    }
    public int calculateNoOfColumns() {

        int numberOfColumns = displayMetrics.widthPixels / width;
        remaining = displayMetrics.widthPixels - (numberOfColumns * width);
//        System.out.println("\nRemaining\t" + remaining + "\nNumber Of Columns\t" + numberOfColumns);
        if (remaining / (2 * numberOfColumns) < 15) {
            numberOfColumns--;
            remaining = displayMetrics.widthPixels - (numberOfColumns * width);
        }
        return numberOfColumns;
    }
    public int calculateSpacing() {

        int numberOfColumns = calculateNoOfColumns();
//        System.out.println("\nNumber Of Columns\t"+ numberOfColumns+"\nRemaining Space\t"+remaining+"\nSpacing\t"+remaining/(2*numberOfColumns)+"\nWidth\t"+width+"\nHeight\t"+height+"\nDisplay DPI\t"+displayMetrics.densityDpi+"\nDisplay Metrics Width\t"+displayMetrics.widthPixels);
        return remaining / (2 * numberOfColumns);
    }
}

「viewId」は、R.layout.item_for_recyclerのように、RecyclerViewでビューとして使用されるレイアウトです。

ただし、View.inflateの影響についてはわかりませんが、これはWidthを取得するためだけに使用しているため、他には何もありません。

次に、GridLayoutManagerで次の操作を行います。

GridLayoutManager gridLayoutManager = new GridLayoutManager(this, Utility.columnQty(this, R.layout.item_for_recycler));

UPDATE：グリッドで最小幅のスペースを取得するために使用するコードに行を追加しました。間隔を計算します。

recyclerPatternsView.addItemDecoration(new GridSpacing(columnQty.calculateSpacing()));

Answer 4

コンストラクターnew GridLayoutManager(activity, 2)は約GridLayoutManager(Context context, int spanCount)です。ここで、spanCountはグリッド内の列の数です。

最良の方法は、ウィンドウ/ビューの幅を確認し、この幅カウントに基づいて表示するスパンの数を確認することです。

Answer 5

public class AutoFitGridLayoutManager extends GridLayoutManager {

private int columnWidth;
private boolean columnWidthChanged = true;

public AutoFitGridLayoutManager(Context context, int columnWidth) {
    super(context, 1);

    setColumnWidth(columnWidth);
}


public void setColumnWidth(int newColumnWidth) {
    if (newColumnWidth > 0 && newColumnWidth != columnWidth) {
        columnWidth = newColumnWidth;
        columnWidthChanged = true;
    }
}

@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
    if (columnWidthChanged && columnWidth > 0) {
        int totalSpace;
        if (getOrientation() == VERTICAL) {
            totalSpace = getWidth() - getPaddingRight() - getPaddingLeft();
        } else {
            totalSpace = getHeight() - getPaddingTop() - getPaddingBottom();
        }
        int spanCount = Math.max(1, totalSpace / columnWidth);
        setSpanCount(spanCount);
        columnWidthChanged = false;
    }
    super.onLayoutChildren(recycler, state);
}

}

ビューをリサイクルするようにLayoutManagerを設定できるようになりました

ここで私は250pxを設定しました

 AutoFitGridLayoutManager layoutManager = new AutoFitGridLayoutManager(this, 250);
 recycleView.setLayoutManager(layoutManager)

最愛の画像を表示する

Answer 6

この関数を使用し、装飾を使用する代わりに、XMLでセルレイアウトのマージンを設定します。

public int getNumberOfColumns() {
        View view = View.inflate(this, R.layout.row_layout, null);
        view.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
        int width = view.getMeasuredWidth();
        int count = getResources().getDisplayMetrics().widthPixels / width;
        int remaining = getResources().getDisplayMetrics().widthPixels - width * count;
        if (remaining > width - 15)
            count++;
        return count;
    }