Question

如何在MvxRecycleView中设置所选项目的背景？

我想同时更改所选项目的背景。

selector_category_item.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:state_pressed="true"  android:state_enabled="true"  >
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary"/>
        </shape>
            </item>

    <item android:state_checked="false" android:state_enabled="true"  >
        <shape android:shape="rectangle">
            <solid android:color="@color/grayBackground"/>
        </shape>
    </item>
</selector>

我的MvxRecycleView

<MvxRecyclerView
            android:overScrollMode="never"
            android:scrollbars="vertical"
            android:background="#e2e2e2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            local:MvxItemTemplate="@layout/category_item"
            local:MvxBind="ItemsSource Categories; ItemClick SelectCategoryCommand; SelectedItem SelectedCategory"
            android:id="@+id/categoryRecyclerView" />

还有category_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:clickable="true"
    android:background="@drawable/selector_category_item"
    android:layout_marginBottom="1dp"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ffimageloading.cross.MvxCachedImageView
            android:id="@+id/categoryImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            local:MvxBind="DrawableName CategoryImage" />
        <ImageView
            android:id="@+id/favIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true"
            android:src="@drawable/no_fav_icon" />
    </RelativeLayout>
    <TextView
        android:clickable="true"
    android:focusableInTouchMode="true"
    android:focusable="true"
        android:layout_marginTop="8dp"
        android:id="@+id/categoryText"
        style="@style/TextStyleBlack"
        android:fontFamily="@font/roboto_regular"
        android:letterSpacing="-0.04"
        android:lineSpacingExtra="0sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        local:MvxBind="Text Name"
        android:textSize="14sp" />
</LinearLayout>

我需要在选定项目时将选定的项目背景更改为其他背景。我该如何解决呢？

Answer 1

您可以制作一个自定义的MvxRecyclerView适配器来处理选择：

public class MyRecyclerAdapter : MvvmCross.Droid.Support.V7.RecyclerView.MvxRecyclerAdapter
{
    public MyRecyclerAdapter(IMvxAndroidBindingContext bindingContext) : base(bindingContext)
    {
    }

    public MyRecyclerAdapter(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
    {
    }

    public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
    {
        base.OnBindViewHolder(holder, position);
        holder.ItemView.Selected = _selectedPosition == position;
        holder.ItemView.Click += (s, e) => SelectIndex(holder.AdapterPosition);
    }

    private void SelectIndex(int index)
    {
        NotifyItemChanged(_selectedPosition);
        _selectedPosition = index;
        NotifyItemChanged(_selectedPosition);
    }

    private int _selectedPosition = RecyclerView.NoPosition;
}

然后，您想要在视图中的某个位置设置MvxRecyclerView.Adapter属性。理想的位置通常是OnCreate（对于某个活动）或OnCreateView（对于某个片段）：

recyclerView.Adapter = new MyRecyclerAdapter((IMvxAndroidBindingContext)BindingContext);

这时，您将拥有一个RecyclerView，该视图可将您单击的项目设置为选中状态。现在，您可以使用ColorStateList根据选择状态更改颜色。将文件添加到Resources \ drawable \ selector_category_item.xml：

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item 
    android:drawable="@color/colorAccent"
    android:state_pressed="true" />
  <item 
    android:drawable="@color/colorPrimary"
    android:state_selected="true" />
</selector>

最后将category_item.xml LinearLayout的背景设置为：

android:background="@drawable/selector_category_item"

值得指出的是，您还可以根据选择状态使用其他ColorStateList根据需要更改android:textColor。您只需要将这些ColorStateList XML文件放在Resources \ color文件夹中，而不是Resources \ drawable中即可。

我在GitHub上发布了一个工作示例。

Answer 2

设置布尔值标志以为Category model上的每个类别项目保存所选状态。
在适配器viewHolder上，为回收站项目根视图mBackground创建实例。

在onBindViewHolder上更新mBackground的选择状态。

class MyDataHolder extends RecyclerView.ViewHolder
    implements View
    .OnClickListener {
LinearLayout mBackground;
MyDataHolder(View itemView) {
    super(itemView);
    mBackground = (LinearLayout) itemView.findViewById(R.id.my_item_root_view);
    itemView.setOnClickListener(this);
}



@Override
public void onBindViewHolder(MyCategoryAdapter.MyDataHolder holder, int position) {
    final Category category = getItem(position);
    holder.mBackground.setSelected(category.isSelected());
}

Answer 3

为MvxRecyclerView Itemsource中的项目创建一个ViewModel（例如，类别将是CategoryViewModel的列表）
在单项ViewModel的ctor中传递类别模型

 public CategoryItemViewModel(Category category)
 {
      Category = category;
 }

此后，在CategoryItemViewModel中声明绑定的属性并添加SelectedColor属性。声明类似IsSelected的布尔属性，并在用户单击行/项时对其进行管理。

 public class CategoryItemViewModel: MvxViewModel
   {
        //The category valorized in ctor
        public Category Category{ get; set; }
       //Use this syntax for all properties to bind
       public string Name => Category.Name
       public string CategoryImage => Category.CategoryImage;
       public bool IsSelected { get ; set; }
       public MvxColor SelectedColor=> GetSelectedColor();

       private MvxColor GetSelectedColor()
       {
            if (IsSelected)
            {
                //Rgb background color for selected row
                return new MvxColor(186, 41, 22);
            }
            else
            {
                return new MvxColor(45, 135, 0);
            }
       }

       public ICommand SelectRow
       {
            get
            {
                return new MvxCommand(() =>
                {
                    //Do Some operation when the item is clicked and after this
                    IsSelected = true;
                    RaiseAllPropertiesChanged();
                });
            }
        }

此刻，在列表容器ViewModel（如CategoryListViewModel）中，您具有一个类别列表，称为类别。在您的ctor中，或者当您收到类别（如果您致电服务部门）时，请写下该内容。

public class CategoryListViewModel : MvxViewModel<List<Category>>
    {
        public MvxObservableCollection<CategoryItemViewModel> Categories{ get; set; }

        public CategoryListViewModel()
        {
            Categories= new MvxObservableCollection<CategoryItemViewModel>();
        }

//If you do this in Prepare method (also you can do this after receive the category list from a service)
        public override void Prepare(List<Category>> categories)
        {
            foreach (var item in categories)
            {
                Categories.Add(new CategoryItemViewModel(item));
            }
        }

5最后，在您的category_axml中，像这样绑定主要的LinearLayout背景颜色

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:clickable="true"
    android:layout_marginBottom="1dp"
    local:MvxBind="BackgroundColor NativeColor(SelectedColor); Click SelectRow"
    android:orientation="vertical">

请记住：创建子视图模型是管理列表（mvxrecyclerview / mvxlistview）中的子项属性的更好解决方案。

MvxRecycleView所选项目背景

3 个答案: