DataPicker for iOS & Android


DataPicker for iOS & Android

Xamarin.Forms


Xamarin.Forms 的 Picker 控件是通过点击一个文本框,然后打开一个弹出框, 把"简单"数据列出来. 注意只限制于简单数据!! 无法绑定高级数据源,无法修改控件的文本颜色/大小 !

XFControls 为了解决这个问题, 自定义了一个控件: DataPicker, 该控件的优点

  • 直接展示到界面上的!!
  • 支持复杂数据源
  • 可以更改文本大小/颜色,甚至分隔线的颜色!
  • 天生的联动(省市县选择等)

先看一下效果图:
3436768-d1df1328bbe65ef9.jpg-8.4kB
3436768-cc0026080da437f7.png-23.2kB

原理其实很简单

iOS 下就是一个 UIPickerView, 外加一个 UIPickerViewModel 做为数据源承载.
Android 下是一个 NumberPicker.

麻烦 1 Android

Android 下的文本颜色/大小的处理有点蛋疼, 本来是从 NumberPicker 派生了一个 ColorNumberPicker , 然后重载 AddView 方法, 在 AddView 方法里判断传入的 view 参数是否是 EditText, 如果是,则更新文本颜色及大小, 但是这个 NumberPicker 居然有一个坑,一个坑:

AddView 优先于构造函数运行!!! 通过构造函数初始化的颜色根本无法应用于子 view 上!
不知道这是 Xamarin 的坑,还是 Android API 的坑!!
这个解决方法是 Android 界的普遍做法, 但是这条路在 Xamarin 上行不通!

还好, 找到了另外一个途径:
通过反射 Child view 来更改

  1. private void UpdateApperance(
  2. Android.Graphics.Color txtColor,
  3. float textSize
  4. ) {
  5. int count = this.Control.ChildCount;
  6. for (int i = 0; i < count; i++) {
  7. var child = this.Control.GetChildAt(i);
  8. if (child is EditText) {
  9. try {
  10. var fld = this.Control.Class.GetDeclaredField("mSelectorWheelPaint");
  11. fld.Accessible = true;
  12. var edt = (EditText)child;
  13. edt.SetTextSize(ComplexUnitType.Px, textSize);
  14. edt.SetTypeface(edt.Typeface, TypefaceStyle.Normal);
  15. edt.SetTextColor(txtColor);
  16. var paint = (Paint)fld.Get(this.Control);
  17. paint.TextSize = TypedValue.ApplyDimension(ComplexUnitType.Px, textSize, this.Control.Resources.DisplayMetrics);
  18. paint.Color = txtColor;
  19. paint.SetTypeface(edt.Typeface);
  20. } catch {
  21. }
  22. }
  23. }
  24. this.Control.Invalidate();
  25. }

修改分隔线的颜色:

  1. private void UpdateDividerColor(Android.Graphics.Color color) {
  2. try {
  3. var fld = this.Control.Class.GetDeclaredField("mSelectionDivider");
  4. fld.Accessible = true;
  5. var d = (Drawable)fld.Get(this.Control);
  6. d.SetColorFilter(color, PorterDuff.Mode.SrcAtop);
  7. d.InvalidateSelf();
  8. this.Control.PostInvalidate(); // Drawable is dirty
  9. } catch (Exception e) {
  10. }
  11. }

麻烦2 iOS

相对 Android 来说,这根本就不是问题
ios 下只需要修改上面所说的 UIPickerViewModel, 重载 GetView 方法( GetView 其实就是 ios API 里的 pickerView:viewForRow:forComponent:reusingView: 方法)

  1. public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
  2. {
  3. //var lbl = base.GetView(pickerView, row, component, view);
  4. var size = pickerView.RowSizeForComponent(component);
  5. var lbl = new UILabel() {
  6. Frame = new CoreGraphics.CGRect(0, 0, size.Width, size.Height),
  7. TextAlignment = UITextAlignment.Center
  8. };
  9. lbl.Text = Values[(int)row];
  10. lbl.TextColor = this.TextColor;// this.Element.TextColor.ToUIColor();
  11. lbl.Font = UIFont.SystemFontOfSize(this.FontSize);
  12. return lbl;
  13. }

注意方法体内的第一句, base.GetView(xxx) ,被注释掉了, 因为这个方法是不能直接在代码里使用的!!!它里面直接抛出个异常出来.

加上这段代码后, 文本的颜色/大小都可以修改了.
但是找了一圈可重载的方法,没有一个是用于修改分隔线颜色的方法.

网上找了一段:

  1. private void UpdateDividerColor(UIPickerView picker, UIColor color) {
  2. foreach (var v in picker.Subviews) {
  3. if (v.Frame.Size.Height < 1) {
  4. v.BackgroundColor = color;
  5. }
  6. }
  7. }

这个方法也有个坑:

它只能在上面说的 GetView 方法里调用 ! 放在其它地方, picker.Subviews 无论如何都是空的!!!

如何使用

Install-Package XFControls
Nuget : Install-Package XFControls

iOS Project Please insert the following code before global::Xamarin.Forms.Forms.Init(); at file AppDelegate.cs

  1. AsNumAssemblyHelper.HoldAssembly();

Android Project also please insert the following code before Xamarin.Forms.Forms.Init(this, bundle) at file MainActivity.cs;

  1. AsNumAssemblyHelper.HoldAssembly();

.xaml

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. x:Class="Example.DataPickerExample"
  5. xmlns:ctrls="clr-namespace:AsNum.XFControls;assembly=AsNum.XFControls"
  6. >
  7. <Grid ColumnSpacing="0">
  8. <Grid.RowDefinitions>
  9. <RowDefinition />
  10. <RowDefinition />
  11. </Grid.RowDefinitions>
  12. <Grid.ColumnDefinitions>
  13. <ColumnDefinition />
  14. <ColumnDefinition />
  15. </Grid.ColumnDefinitions>
  16. <ctrls:DataPicker Grid.Column="0"
  17. ItemsSource="{Binding Datas}"
  18. DisplayPath="Name"
  19. TextColor="Green"
  20. DividerColor="Green"
  21. x:Name="d1"
  22. />
  23. <ctrls:DataPicker Grid.Column="1"
  24. ItemsSource="{Binding Path=SelectedItem.Children, Source={x:Reference d1}}"
  25. DisplayPath="Name"
  26. TextColor="Blue"
  27. DividerColor="Blue"
  28. />
  29. </Grid>
  30. </ContentPage>

.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using Xamarin.Forms;
  7. namespace Example {
  8. public partial class DataPickerExample : ContentPage {
  9. public IEnumerable<DataPickerItem> Datas { get; }
  10. = new List<DataPickerItem>() {
  11. new DataPickerItem() { ID = 1, Name= "Asia", Children=new List<DataPickerItem>() { new DataPickerItem() { Name = "China" }, new DataPickerItem() { Name="Japan"}, new DataPickerItem() { Name= "Singapore" } } },
  12. new DataPickerItem() { ID = 1, Name= "America", Children=new List<DataPickerItem>() { new DataPickerItem() { Name = "USA" }, new DataPickerItem() { Name="Brazil"}, new DataPickerItem() { Name="Canda" } } },
  13. new DataPickerItem() { ID = 1, Name= "Europe", Children=new List<DataPickerItem>() { new DataPickerItem() { Name = "English" }, new DataPickerItem() { Name="Franch"} , new DataPickerItem() { Name="Germany"} } },
  14. };
  15. public DataPickerExample() {
  16. InitializeComponent();
  17. this.BindingContext = this;
  18. }
  19. public class DataPickerItem {
  20. public int ID { get; set; }
  21. public string Name { get; set; }
  22. public IEnumerable<DataPickerItem> Children {
  23. get; set;
  24. }
  25. }
  26. }
  27. }

开源项目地址

XFControls https://github.com/gruan01/XFControls

作者:gruan
原文地址:http://www.jianshu.com/p/7fe78b81b86b

分享到