带网格卡的Android Recycler视图

时间:2018-05-23 07:56:15

标签: xamarin xamarin.android

我有一个回收者视图,卡片像这样线性排列:这是我当前的界面,我需要有关混合视图的帮助,如第二张图片所示

My interface

但我需要一个带有这样的网格的混合视图:这是我的目标界面 target interface

**我需要帮助实现这一目标: 这是我到目前为止所尝试的 ** **** card.axml

 <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp">
        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:cardCornerRadius="10dp"
            android:layout_margin="6dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <ImageView
                    android:id="@+id/avatar2"
                    android:layout_width="match_parent"
                    android:layout_height="160dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/cheese_1" />
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    android:padding="16dp">
                    <TextView
                        android:id="@+id/Text11"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="8dp"
                        android:maxLines="2"
                        android:textColor="#000"
                        android:textSize="18sp" />
                    <TextView
                        android:id="@+id/Text12"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:maxLines="3"
                        android:textColor="#555" />
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="share"
                        android:theme="@style/PrimaryFlatButton" />
                    <Button
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="explore"
                        android:theme="@style/PrimaryFlatButton" />
                </LinearLayout>
            </LinearLayout>
        </android.support.v7.widget.CardView>
    </RelativeLayout>

我的Recycler视图适配器

public class SimpleStringRecyclerViewAdapter : RecyclerView.Adapter
        {

            private List<Data> mValues;


            Context context;

            public SimpleStringRecyclerViewAdapter(Context context, List<Data> items)
            {
                this.context = context;
                mValues = items;

            }

            public override int ItemCount
            {

                get
                {
                    return mValues.Count();
                }
            }

            public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
            {
                if (holder is SimpleViewHolder)
                    try
                    {
                        Data item = mValues.ElementAt(position);

                        var simpleHolder = holder as SimpleViewHolder;

                        simpleHolder.mTxtView.Text = Android.Text.Html.FromHtml(item.article.Title).ToString();
                        simpleHolder.mTxtView2.Text = item.article.Description;


                        using (var imageView = simpleHolder.mImageView)
                        {
                            string url = Android.Text.Html.FromHtml(item.article.UrlToImage).ToString();

                            //Download and display image
                            UrlImageViewHelper.SetUrlDrawable(imageView,
                                url, Resource.Drawable.cheese_1
                                );



                        }
                        //    simpleHolder.mprogressbar.Visibility = ViewStates.Gone;
                    }
                    catch (Exception e)
                    {
                        //Toast.MakeText(this.context, e.ToString(), ToastLength.Long).Show();
                    }



            }

            public override int GetItemViewType(int position)
            {

                    return Resource.Layout.ItemsList;



            }



            public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
            {
                if (viewType == Resource.Layout.ItemsList)
                {
                    View view = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.ItemsList, parent, false);
                    view.SetBackgroundColor(Color.White);


                    SimpleViewHolder holder = new SimpleViewHolder(view);
                    // holder.mprogressbar = view.FindViewById<ProgressBar>(Resource.Id.progressBar);
                    // holder.mprogressbar.Visibility = ViewStates.Visible;


                    //Showing loading progressbar

                    return holder;
                }

            }
        }

        public class SimpleViewHolder : RecyclerView.ViewHolder
        {
            public string mBoundString;
            public readonly View mView;
            public readonly ImageView mImageView;
            public readonly TextView mTxtView;
            public readonly TextView mTxtView2;
            //   public ProgressBar mprogressbar;


            public SimpleViewHolder(View view) : base(view)
            {
                mView = view;
                mImageView = view.FindViewById<ImageView>(Resource.Id.avatar2);
                mTxtView = view.FindViewById<TextView>(Resource.Id.Text11);
                mTxtView2 = view.FindViewById<TextView>(Resource.Id.Text12);
                //   mprogressbar = view.FindViewById<ProgressBar>(Resource.Id.progressBar);


            }


        }

setupRecyclerView方法

 private async void SetUpRecyclerView(RecyclerView recyclerView)
            {
      Activity.RunOnUiThread(() =>
            {

 dataUse = OfflineDeserializer.OfflineData(content, json2);

                recyclerView.SetLayoutManager(new LinearLayoutManager(recyclerView.Context));
                recyclerView.SetAdapter(new SimpleStringRecyclerViewAdapter(recyclerView.Context, dataUse));
                if (vp.IsShown)
                {
                    vp.Visibility = ViewStates.Invisible;

                }
    }

1 个答案:

答案 0 :(得分:0)

SetUpRecyclerView方法中,使用GridLayoutManager代替LinearLayoutManager,范围为2,然后在布局管理器上调用SetSpanSizeLookup。使用自定义跨度大小查找,您可以确定哪些项目将跨越整个布局。

一个简单的例子:

SimpleStringRecyclerViewAdapter myAdapter = new SimpleStringRecyclerViewAdapter(recyclerView.Context, dataUse)
GridLayoutManager layoutManager = new GridLayoutManager(recyclerView.Context, 2);
layoutManager.SetSpanSizeLookup(new SpanSizeLookup(myAdapter));
recyclerView.SetLayoutManager(layoutManager);
recyclerView.SetAdapter(myAdapter);

SpanSizeLookup类:

internal class SpanSizeLookup : GridLayoutManager.SpanSizeLookup
{
    private SimpleStringRecyclerViewAdapter _adapter;
    public SpanSizeLookup(SimpleStringRecyclerViewAdapter adapter) => _adapter = adapter;
    public override int GetSpanSize(int position)
    {
        return _adapter.GetItemViewType(position);
    }
}

在您的SimpleStringRecyclerViewAdapter类覆盖GetItemViewType中,以这种方式覆盖IsHeader,这符合您决定哪些项目跨越整个宽度;我在这里使用public override int GetItemViewType(int position) { if(mValues[position].IsHeader) return 1; else return 2; } bool,但你可以随意使用:

GetItemViewType

您还可以通过返回包含SpanSizeLookup的枚举来进一步自定义它,并决定*中的跨度计数。