Xamarin.iOS 自定义按钮选择器

最近项目中做了一个标题栏中的按钮选择器，原生的UISegmentedControl 无法达到项目效果，效果如下图:



如果只针对项目写一个不难，可是如果以后遇到了还需要针对项目再去写一个，于是我打算把他写的活一些，最终决定用Builder模式来完成它，以前做android原生的时候就用Builder模式构建了一些组合view，但是我尝试着用java的方式去Builder的时候发现行不通，这次是Xamarin的项目，语言是C#，于是我又去学习了一下C#的Builder模式（浅显的理解很简单）。

哦，差点忘了介绍，项目的框架是MvvmCross，不理解的同学去他的官网看看，很良心的！

最终计划了一下这个工作分为三步走（典型的面向过程，哈哈）。

第一步：将这些可以看见的属性，或者随时可以变的属性抽象出来。

using System;
using UIKit;

namespace RuilaiGrow.iOS
{
/// <summary>
/// 多按钮圆角view构建抽象类
/// by ge
/// </summary>
abstract class BuilderTopSelectedTitle
{
public abstract void setTitles(string[] titles);
public abstract void setTextSize(nfloat size);
public abstract void setCornerRadius(nfloat radius);
public abstract void setHeight(nfloat height);
public abstract void setWidth(nfloat width);
public abstract void setNormalTextColor(UIColor color);
public abstract void setSelectedTextColor(UIColor color);
public abstract void setViewBackground(UIColor background);
public abstract void setItemNormal(UIColor corlor);
public abstract void setItemSelected(UIColor selected);
public abstract UIView create();
}
}

项目比较紧张，可能这些属性还是不够，或者说想的不到位，以后慢慢添加和优化。



第二步：创建实现类，构建需要的控件。

经过一番研究，最外层（也就是最终创建返回给界面的）是一个UIView，中间的按钮用UIButton来代替，原因是：经过查阅资料，和尝试，发现UIButton是将UILable于UIImageView封装的结果，采用懒加载的方式，用谁初始化谁，感觉很棒不用我自己造轮子了（以前一直做android原生，对iOS不是很了解，大家见笑）。下面是实现类的代码，注视挺全的了，直接复制粘贴了（懒懒懒）。

using System;
using System.Drawing;
using RuilaiGrow.iOS.Common;
using UIKit;

namespace RuilaiGrow.iOS
{
/// <summary>
/// 知识库主页标题切换控制器
/// </summary>
class KnowledgeTitleControl : BuilderTopSelectedTitle
{
public KnowledgeTitleControl()
{

}

//最外层总view
UIView _thisView = null;
public UIView ThisView
{
get
{
if (_thisView == null)
{
//根据本view的宽与高来计算其实位置（目的最终添加到View的导航栏的时候可以居中显示）
nfloat startX = (UIScreen.MainScreen.Bounds.Width - _itemWid * _titles.Length) / 2;
nfloat startY = (EasyLayout.BarHeight - _viewHei) / 2;
_thisView = new UIView(new RectangleF((float)startX, (float)startY, (float(_itemWid * _titles.Length), (float)_viewHei));
_thisView.BackgroundColor = _viewBackground;
}
return _thisView;
}
}

//标题数组
private string[] _titles;

//item数组
private UIButton[] _itemBtns;

//控件的高
private nfloat _viewHei = 45;

//item的宽
private nfloat _itemWid = 70;

//item正常时的颜色
private UIColor _itemNormalBac = UIColor.Blue;

//item选中时的颜色
private UIColor _itemSeletedBac = UIColor.White;

//文字正常的颜色
private UIColor _textNormalColor = UIColor.Black;

//文字选中时的颜色
private UIColor _textSeletedColor = UIColor.Red;

//设置本view的颜色
private UIColor _viewBackground = UIColor.Blue;

//文字的大小
private nfloat _textSize = 15;

//边框与按钮的圆角
private nfloat _radius = 18;

//按钮上次点击事件 默认0
private int lastIndex = 0;

/// <summary>
/// 最终创建view
/// </summary>
public override UIView create()
{
ThisView.Layer.BorderWidth = 1;
ThisView.Layer.BorderColor = MvxTouchColor.ShallowGrayOne.CGColor;
ThisView.Layer.CornerRadius = _radius;

_itemBtns = new UIButton[_titles.Length];

//循环创建文字按钮并加入到总view中
int lenght = _titles.Length;
for (int i = 0; i < lenght; i++) {
_itemBtns[i] = new UIButton();
_itemBtns[i].Tag = i;
_itemBtns[i].SetTitle(_titles[i], UIControlState.Normal);
_itemBtns[i].SetTitleColor(_textNormalColor, UIControlState.Normal);
_itemBtns[i].Layer.CornerRadius = _radius;
_itemBtns[i].TitleLabel.Font = UIFont.SystemFontOfSize(_textSize);
//设置第一个按钮选中状态
if (i == 0)
{
_itemBtns[i].BackgroundColor = _itemSeletedBac;
_itemBtns[i].SetTitleColor(_textSeletedColor, UIControlState.Normal);
}
}

ThisView.AddSubviews(_itemBtns);

//循环设置view内部item之间约束
for (int i = 0; i < lenght; i++) {
if (i == 0)
{
ThisView.ConstrainLayout(() =>
_itemBtns[i].Frame.GetCenterY() == ThisView.Frame.GetCenterY()
&& _itemBtns[i].Frame.Width == _itemWid
&& _itemBtns[i].Frame.Height == ThisView.Frame.Height
&& _itemBtns[i].Frame.Left == ThisView.Frame.Left

&& ThisView.Frame.Bottom == _itemBtns[i].Frame.Bottom
);
}
else {
ThisView.ConstrainLayout(() =>
_itemBtns[i].Frame.GetCenterY() == ThisView.Frame.GetCenterY()
&& _itemBtns[i].Frame.Left == _itemBtns[i - 1].Frame.Right
&& _itemBtns[i].Frame.Width == _itemWid
&& _itemBtns[i].Frame.Height == ThisView.Frame.Height
);
}
}

//按钮点击事件
for (int i = 0; i < _titles.Length; i++) {
_itemBtns[i].TouchUpInside += this.TouchBtn;
}

return ThisView;
}

//按钮点击处理
private void TouchBtn(object sender, EventArgs e)
{
UIButton v = (UIKit.UIButton)sender;

//如果和上次点的一样 return
if (v.Tag == lastIndex)
return;

//清空上次点击view的状态
_itemBtns[lastIndex].BackgroundColor = _itemNormalBac;
_itemBtns[lastIndex].SetTitleColor(_textNormalColor, UIControlState.Normal);

//设置本次点击的view的状态
_itemBtns[v.Tag].BackgroundColor = _itemSeletedBac;
_itemBtns[v.Tag].SetTitleColor(_textSeletedColor, UIControlState.Normal);

//记录本次点击的位置
lastIndex = (int)v.Tag;

//回调点击位置
if (_click != null) {
_click.TitleBackIndex((int)v.Tag);
}
}

/// <summary>
/// 设置按钮正常时的状态颜色
/// </summary>
/// <param name="corlor">Corlor.</param>
public override void setItemNormal(UIColor corlor)
{
this._itemNormalBac = corlor;
}

/// <summary>
/// 设置item选中时的背景
/// </summary>
/// <param name="selected">Selected.</param>
public override void setItemSelected(UIColor selected)
{
this._itemSeletedBac = selected;
}

/// <summary>
/// 设置正常时的文字的颜色
/// </summary>
/// <param name="color">Color.</param>
public override void setNormalTextColor(UIColor color)
{
this._textNormalColor = color;
}

/// <summary>
/// 设置选中时文字的颜色
/// </summary>
/// <param name="color">Color.</param>
public override void setSelectedTextColor(UIColor color)
{
this._textSeletedColor = color;
}

/// <summary>
/// 设置item的文字
/// </summary>
/// <param name="titles">Titles.</param>
public override void setTitles(string[] titles)
{
this._titles = titles;
}

/// <summary>
/// 设置view的背景图片
/// </summary>
/// <param name="background">Background.</param>
public override void setViewBackground(UIColor background)
{
this._viewBackground = background;
}

/// <summary>
/// 设置item的宽
/// </summary>
/// <param name="width">Width.</param>
public override void setWidth(nfloat width)
{
this._itemWid = width;
}

/// <summary>
/// 设置本view的高
/// </summary>
/// <param name="height">Height.</param>
public override void setHeight(nfloat height)
{
this._viewHei = height;
}

/// <summary>
/// 设置边框的圆角与按钮的圆角
/// </summary>
/// <param name="radius">Radius.</param>
public override void setCornerRadius(nfloat radius)
{
this._radius = radius;
}

/// <summary>
/// 设置文字的大小
/// </summary>
/// <param name="size">Size.</param>
public override void setTextSize(nfloat size)
{
this._textSize = size;
}

/// <summary>
/// 点击view回调接口
/// </summary>
public interface ClickTitleControlItem {
void TitleBackIndex(int index);
}

private ClickTitleControlItem _click;

public void setClickTitleControlItem(ClickTitleControlItem click)
{
this._click = click;
}

}
}

上面就是实现类的全部内容，最后那个接口是这个view点击某个按钮时的回调，同事说我这是拿java的思想来写c#，搞得我去查了一下，打算把这个换成事件委托机制。

下面看一下第三步：使用

在Controller中直接定义一个UIView接收创建的view就可以：

       

//头部导航栏的view
UIView _topViewControl = null;
public UIView TopViewControl {
get{
if (_topViewControl == null) {
string[] s = new string[] {
"0-1岁", "1-3岁", "3-6岁"
};
KnowledgeTitleControl ctr = new KnowledgeTitleControl();
ctr.setWidth(85);
ctr.setHeight(EasyLayout.BarHeight - 10f);
ctr.setTitles(s);
ctr.setTextSize(15);
ctr.setCornerRadius(18);
ctr.setItemNormal(MvxTouchColor.DeepRed);
ctr.setViewBackground(MvxTouchColor.DeepRed);
ctr.setItemSelected(MvxTouchColor.White);
ctr.setNormalTextColor(MvxTouchColor.ShallowGrayOne);
ctr.setSelectedTextColor(MvxTouchColor.DeepRed);
ctr.setClickTitleControlItem(this);
_topViewControl = ctr.create();
}
return _topViewControl;
}
}

最后将view添加到导航栏就可以了：

在ViewDidLoad（）方法中：

//将头部控制器的uiview加入顶部导航栏
NavigationController.NavigationBar.AddSubview(TopViewControl);

按钮的个数是根据构造函数传入的数组决定的。

搞定！！