代码之家 › 专栏 › 技术社区 › Tolulope

带网格卡的Android回收器视图

xamarin.android xamarin

Tolulope · 技术社区 · 8 年前

我有一个回收站视图,卡片按如下线性排列:这是我当前的界面,我需要有关混合视图的帮助,如第二幅图所示。

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

**我需要帮助实现这一目标: 这是我到目前为止所尝试的 **卡.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>

我的回收视图适配器

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);


            }


        }

设置回收视图方法

 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 回复 | 直到 8 年前

Matthew Andrews 8 年前

在你的 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 bool在这里,但是你可以使用你想要的任何东西:

public override int GetItemViewType(int position)
{
    if(mValues[position].IsHeader)
         return 1;
    else
         return 2;
}

还可以通过返回一个枚举 获取项视图类型 并决定 spansizeLookup(尺寸确定) .