MvvmCross技术疑问：如何为MvxSpinner设置样式？

嘿，刚好我之前折腾过MvxSpinner的样式设置，给你分享两种靠谱的实现方式👇

MvxSpinner虽然依赖MvvmCross的绑定体系，但本质还是基于Android原生Spinner的扩展，所以我们可以通过自定义Item模板或者自定义适配器两种方式来给单个页面的MvxSpinner设置专属样式：

方式1：通过XML模板直接指定（推荐，更贴合MvvmCross绑定逻辑） #

1. 先创建两个布局文件，分别定义Spinner选中时的条目样式和下拉列表的条目样式：

   • Resources/layout/spinner_selected_item.xml（选中时显示的样式）：

     <TextView xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:textColor="@color/primary_text"
         android:textSize="16sp"
         android:padding="12dp"
         android:background="@drawable/spinner_selected_bg"/>
     

   • Resources/layout/spinner_dropdown_item.xml（下拉列表的条目样式）：

     <TextView xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:textColor="@color/black"
         android:textSize="14sp"
         android:padding="12dp"
         android:background="@drawable/spinner_dropdown_item_selector"/>
     

   （这里的@drawable资源可以自己定义，比如选中时的背景色、按下状态的样式等）

2. 在你的页面AXML中，给MvxSpinner添加MvxItemTemplate和MvxDropDownItemTemplate属性，指定刚才创建的布局：

   <Mvx.MvxSpinner
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:id="@+id/lstCategoryGroups"
       local:MvxItemTemplate="@layout/spinner_selected_item"
       local:MvxDropDownItemTemplate="@layout/spinner_dropdown_item"
       local:MvxBind="ItemsSource CategoryGroups; SelectedItem CategoryGroupdSelected" />
   

   如果你的CategoryGroups是复杂对象（不是字符串），还可以在模板布局里用local:MvxBind绑定对应属性，比如：

   <TextView ... local:MvxBind="Text GroupName"/>
   

方式2：自定义MvxAdapter（适合需要复杂逻辑的场景） #

如果需要在代码里动态控制样式逻辑，可以自定义适配器：

// 在页面的OnCreate或者ViewCreated方法中
var spinner = FindViewById<MvxSpinner>(Resource.Id.lstCategoryGroups);
// 自定义MvxArrayAdapter，指定选中和下拉布局
var adapter = new MvxArrayAdapter<YourCategoryGroupModel>(
    this, 
    Resource.Layout.spinner_selected_item, 
    ViewModel.CategoryGroups);
adapter.SetDropDownViewResource(Resource.Layout.spinner_dropdown_item);
spinner.Adapter = adapter;
// 别忘了绑定SelectedItem（如果之前XML里没绑定的话）
var set = this.CreateBindingSet<YourPage, YourViewModel>();
set.Bind(spinner).For(s => s.SelectedItem).To(vm => vm.CategoryGroupdSelected);
set.Apply();

如果希望所有页面的Spinner（包括MvxSpinner）都统一样式，可以通过Android主题来全局配置：

1. 在Resources/values/styles.xml中定义Spinner的基础样式和下拉条目样式：

   <!-- Spinner整体样式 -->
   <style name="GlobalSpinnerStyle" parent="Widget.AppCompat.Spinner">
       <item name="android:background">@drawable/global_spinner_bg</item>
       <item name="android:paddingHorizontal">12dp</item>
       <item name="android:paddingVertical">8dp</item>
       <!-- 下拉列表的弹出位置等 -->
       <item name="android:dropDownVerticalOffset">4dp</item>
   </style>
   
   <!-- 下拉列表条目样式 -->
   <style name="GlobalSpinnerDropDownItemStyle" parent="Widget.AppCompat.DropDownItem.Spinner">
       <item name="android:textColor">@color/primary_text</item>
       <item name="android:textSize">14sp</item>
       <item name="android:padding">12dp</item>
       <item name="android:background">@drawable/global_dropdown_item_selector</item>
   </style>
   

2. 将这些样式应用到你的App主题中：

   <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <!-- 其他主题属性 -->
       <item name="android:spinnerStyle">@style/GlobalSpinnerStyle</item>
       <item name="android:dropDownItemStyle">@style/GlobalSpinnerDropDownItemStyle</item>
   </style>
   

   这样所有的Spinner（包括MvxSpinner）都会自动继承这个全局样式，不需要在每个页面单独设置。

小提示 #

• 如果页面特定样式和全局样式冲突，页面特定的样式会覆盖全局样式，优先级更高。
• 自定义drawable背景时，记得用selector来处理不同状态（比如state_pressed、state_selected），提升交互体验。

内容的提问来源于stack exchange，提问作者Agat