Xamarin.Forms 的 Picker 控件是通過(guò)點(diǎn)擊一個(gè)文本框,然后打開(kāi)一個(gè)彈出框, 把"簡(jiǎn)單"數(shù)據(jù)列出來(lái). 注意只限制于簡(jiǎn)單數(shù)據(jù)!! 無(wú)法綁定高級(jí)數(shù)據(jù)源,無(wú)法修改控件的文本顏色/大小 !
XFControls 為了解決這個(gè)問(wèn)題, 自定義了一個(gè)控件: DataPicker, 該控件的優(yōu)點(diǎn)
- 直接展示到界面上的!!
- 支持復(fù)雜數(shù)據(jù)源
- 可以更改文本大小/顏色,甚至分隔線(xiàn)的顏色!
- 天生的聯(lián)動(dòng)(省市縣選擇等)
先看一下效果圖:
原理其實(shí)很簡(jiǎn)單
iOS 下就是一個(gè) UIPickerView, 外加一個(gè) UIPickerViewModel 做為數(shù)據(jù)源承載.
Android 下是一個(gè) NumberPicker.
麻煩 1 Android
Android 下的文本顏色/大小的處理有點(diǎn)蛋疼, 本來(lái)是從 NumberPicker 派生了一個(gè) ColorNumberPicker , 然后重載 AddView 方法, 在 AddView 方法里判斷傳入的 view 參數(shù)是否是 EditText, 如果是,則更新文本顏色及大小, 但是這個(gè) NumberPicker 居然有一個(gè)坑,一個(gè)坑:
AddView 優(yōu)先于構(gòu)造函數(shù)運(yùn)行!!! 通過(guò)構(gòu)造函數(shù)初始化的顏色根本無(wú)法應(yīng)用于子 view 上!
不知道這是 Xamarin 的坑,還是 Android API 的坑!!
這個(gè)解決方法是 Android 界的普遍做法, 但是這條路在 Xamarin 上行不通!
還好, 找到了另外一個(gè)途徑:
通過(guò)反射 Child view 來(lái)更改
private void UpdateApperance(
Android.Graphics.Color txtColor,
float textSize
) {
int count = this.Control.ChildCount;
for (int i = 0; i < count; i++) {
var child = this.Control.GetChildAt(i);
if (child is EditText) {
try {
var fld = this.Control.Class.GetDeclaredField("mSelectorWheelPaint");
fld.Accessible = true;
var edt = (EditText)child;
edt.SetTextSize(ComplexUnitType.Px, textSize);
edt.SetTypeface(edt.Typeface, TypefaceStyle.Normal);
edt.SetTextColor(txtColor);
var paint = (Paint)fld.Get(this.Control);
paint.TextSize = TypedValue.ApplyDimension(ComplexUnitType.Px, textSize, this.Control.Resources.DisplayMetrics);
paint.Color = txtColor;
paint.SetTypeface(edt.Typeface);
} catch {
}
}
}
this.Control.Invalidate();
}
修改分隔線(xiàn)的顏色:
private void UpdateDividerColor(Android.Graphics.Color color) {
try {
var fld = this.Control.Class.GetDeclaredField("mSelectionDivider");
fld.Accessible = true;
var d = (Drawable)fld.Get(this.Control);
d.SetColorFilter(color, PorterDuff.Mode.SrcAtop);
d.InvalidateSelf();
this.Control.PostInvalidate(); // Drawable is dirty
} catch (Exception e) {
}
}
麻煩2 iOS
相對(duì) Android 來(lái)說(shuō),這根本就不是問(wèn)題
ios 下只需要修改上面所說(shuō)的 UIPickerViewModel, 重載 GetView 方法( GetView 其實(shí)就是 ios API 里的 pickerView:viewForRow:forComponent:reusingView: 方法)
public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
{
//var lbl = base.GetView(pickerView, row, component, view);
var size = pickerView.RowSizeForComponent(component);
var lbl = new UILabel() {
Frame = new CoreGraphics.CGRect(0, 0, size.Width, size.Height),
TextAlignment = UITextAlignment.Center
};
lbl.Text = Values[(int)row];
lbl.TextColor = this.TextColor;// this.Element.TextColor.ToUIColor();
lbl.Font = UIFont.SystemFontOfSize(this.FontSize);
return lbl;
}
注意方法體內(nèi)的第一句, base.GetView(xxx) ,被注釋掉了, 因?yàn)檫@個(gè)方法是不能直接在代碼里使用的!!!它里面直接拋出個(gè)異常出來(lái).
加上這段代碼后, 文本的顏色/大小都可以修改了.
但是找了一圈可重載的方法,沒(méi)有一個(gè)是用于修改分隔線(xiàn)顏色的方法.
網(wǎng)上找了一段:
private void UpdateDividerColor(UIPickerView picker, UIColor color) {
foreach (var v in picker.Subviews) {
if (v.Frame.Size.Height < 1) {
v.BackgroundColor = color;
}
}
}
這個(gè)方法也有個(gè)坑:
它只能在上面說(shuō)的 GetView 方法里調(diào)用 ! 放在其它地方, picker.Subviews 無(wú)論如何都是空的!!!
如何使用
Install-Package XFControls
-
Nuget : Install-Package XFControls
- iOS Project Please insert the following code before global::Xamarin.Forms.Forms.Init(); at file AppDelegate.cs
AsNumAssemblyHelper.HoldAssembly();- Android Project also please insert the following code before Xamarin.Forms.Forms.Init(this, bundle) at file MainActivity.cs;
AsNumAssemblyHelper.HoldAssembly();
* xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Example.DataPickerExample"
xmlns:ctrls="clr-namespace:AsNum.XFControls;assembly=AsNum.XFControls"
>
<Grid ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ctrls:DataPicker Grid.Column="0"
ItemsSource="{Binding Datas}"
DisplayPath="Name"
TextColor="Green"
DividerColor="Green"
x:Name="d1"
/>
<ctrls:DataPicker Grid.Column="1"
ItemsSource="{Binding Path=SelectedItem.Children, Source={x:Reference d1}}"
DisplayPath="Name"
TextColor="Blue"
DividerColor="Blue"
/>
</Grid>
</ContentPage>
* cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace Example {
public partial class DataPickerExample : ContentPage {
public IEnumerable<DataPickerItem> Datas { get; }
= new List<DataPickerItem>() {
new DataPickerItem() { ID = 1, Name= "Asia", Children=new List<DataPickerItem>() { new DataPickerItem() { Name = "China" }, new DataPickerItem() { Name="Japan"}, new DataPickerItem() { Name= "Singapore" } } },
new DataPickerItem() { ID = 1, Name= "America", Children=new List<DataPickerItem>() { new DataPickerItem() { Name = "USA" }, new DataPickerItem() { Name="Brazil"}, new DataPickerItem() { Name="Canda" } } },
new DataPickerItem() { ID = 1, Name= "Europe", Children=new List<DataPickerItem>() { new DataPickerItem() { Name = "English" }, new DataPickerItem() { Name="Franch"} , new DataPickerItem() { Name="Germany"} } },
};
public DataPickerExample() {
InitializeComponent();
this.BindingContext = this;
}
public class DataPickerItem {
public int ID { get; set; }
public string Name { get; set; }
public IEnumerable<DataPickerItem> Children {
get; set;
}
}
}
}
## 開(kāi)源項(xiàng)目地址
XFControls <https://github.com/gruan01/XFControls>