UITableView简介
UITableView是表格控件,用来显示列表数据,它是UIScrollView的子类。类似于Android中的RecyclerView控件。
UITableView的使用
上代码再分析
public partial class ViewController : UIViewController,IUITableViewDataSource { //返回一个Cell public UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) { var cell = tableView.DequeueReusableCell("abc");//从缓存池中取出一个Cell(如果没有会自动创建一个注册的Cell类型) //if (cell == null) //cell = new UITableViewCell(UITableViewCellStyle.Default, "abc"); cell.TextLabel.Text = $"第{indexPath.Section}组,第{indexPath.Row}行"; return cell; } //返回指定分组中的行数 public nint RowsInSection(UITableView tableView, nint section) { return 20; } public override void ViewDidLoad() { base.ViewDidLoad(); //1.创建表格并将表格添加到父容器中 UITableView tableView = new UITableView(this.View.Frame, UITableViewStyle.Plain); this.View.AddSubview(tableView); //2.注册可重用UITableViewCell tableView.RegisterClassForCellReuse(typeof(UITableViewCell), "abc"); //也可不注册重用单元格,在GetCell()方法中手动去创建Cell也是一样的,请看GetCell方法中注释的部分 //3.设置表格的数据源对象(必须实现IUITableViewDataSource) tableView.DataSource = this; } }
上面的代码是表格的一个简单显示。显示一个表格主要有三步:
1. 创建表格并将它添加到父容器中。
2. 注册可重用的单元格。第一个参数用来告诉表格创建新的UITableViewCell时所用的Cell的类型,因为在刚开始缓存池中还没有缓存的单元格,通过var cell = tableView.DequeueReusableCell("abc");这句代码去缓存池中是取不到单元格的,所以系统会根据注册的单元格类型来创建新的Cell同时把abc这个标识赋给这个Cell。下次取Cell时就用这个abc。
3. 设置表格的数据源对象并实现IUITableViewDataSource接口。上例中数据源对象是当前控制器,那么这个控制器就必须要实现IUITableViewDataSource接口。这个接口有两个方法必须实现,RowsInSection()用来告诉表格在每一分组对应有多少行,默认是一个分组。GetCell()用来显示每一行,当一个Cell将要进入屏幕中时,就会通过此方法得到一个要显示的Cell对象。
运行结果如下图:
再来了解下单元格类UITableViewCell,从xamarin官网拿来一张图,如下:
上面是普通模式,下面是编辑模式。
可以看出,普通模式下,默认就维护着两个View,而编辑模式有三个。在ContentView中可以添加我们的UIImageView,UILabel等来显示数据。有ContentView的好处是,将来如果左滑移动时就移动这个ContentView就够了,不必一个个移动其中的UIImageView,UILabel等子控件。
接着了解一下单元格的自带的四种风格,还是从官网拿来的图:
再结合这段代码来分析
//返回一个Cell public UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) { var cell = tableView.DequeueReusableCell("abc");//从缓存池中取出一个Cell(如果没有会自动创建一个注册的Cell类型) cell.TextLabel.Text = $"第{indexPath.Section}组,第{indexPath.Row}行"; cell.ImageView = null; cell.DetailTextLabel = null; return cell; }
在UITableViewCell中默认就维护着三个视图对象,从上面的代码可知,有ImageView, TextLabel,DetailTextLabel三个View,在上图中的Subtitle风格中分别对应图片,黑色标题,灰色子标题。其它三种风格一看就明白,就不分析了。需要注意的是,例如设置单元格的风格为Default,那么它是没有DetailTextLabel的,虽然可以点出来这个属性,但使用会报空引用错误。
实际使用中默认的风格肯定是不够用的,那么就需要自定义单元格。
代码太多就不全部贴上了,上主要代码吧//自定义的Table的单元格 public partial class BookCell : UITableViewCell { public const string ReuseID = "BookCell";//缓存用的标识 private UIImageView BookImageView { get; set; } private UILabel BookNameLabel { get; set; } private UILabel BookPriceLabel { get; set; } private UILabel BookSummaryLabel { get; set; } private Book _book; public Book Book { set { _book = value; BookImageView.Image = UIImage.FromBundle(_book.BookImageName); BookNameLabel.Text = _book.BookName; BookPriceLabel.Text = "¥" + string.Format("{0:N2}", _book.BookPrice); if (string.IsNullOrEmpty(_book.BookSummary)) { BookSummaryLabel.Text = "";//这句必须写上,否则计算不对 BookSummaryLabel.Hidden = true; } else { BookSummaryLabel.Text = _book.BookSummary; BookSummaryLabel.Hidden = false; } } } //如果注册了重用单元格类BookCell,那么从缓存中取不到而新建时,会自动调用此构造方法来创建单元格 protected internal BookCell(IntPtr handle) : base(handle) { InitCell(); } //如果不采用注册方式而采用手动创建BookCell,那么自己手动使用这个公开的构造方法即可 public BookCell() : base(UITableViewCellStyle.Default, ReuseID) { InitCell(); } //由于是使用自己添加的控件而不是默认的控件,所以此构造方法就没意义了 //public BookCell(UITableViewCellStyle style, string reuseIdentifier) : base(style, reuseIdentifier) //{ // InitCell(); //} private void InitCell()//初始化自定义的单元格的子控件 { UIImageView bookImageView = new UIImageView(); this.ContentView.AddSubview(bookImageView); BookImageView = bookImageView; UILabel bookNameLabel = new UILabel(); this.ContentView.AddSubview(bookNameLabel); bookNameLabel.Font = UIFont.SystemFontOfSize(22, UIFontWeight.Bold); bookNameLabel.BackgroundColor = UIColor.Cyan; BookNameLabel = bookNameLabel; UILabel bookPriceLabel = new UILabel(); this.ContentView.AddSubview(bookPriceLabel); bookPriceLabel.TextColor = UIColor.Red; bookPriceLabel.Font = UIFont.SystemFontOfSize(20, UIFontWeight.Bold); bookPriceLabel.BackgroundColor = UIColor.Cyan; BookPriceLabel = bookPriceLabel; UILabel bookSummaryLabel = new UILabel(); this.ContentView.AddSubview(bookSummaryLabel); bookSummaryLabel.Font = UIFont.SystemFontOfSize(19, UIFontWeight.Regular); bookSummaryLabel.BackgroundColor = UIColor.Cyan; bookSummaryLabel.Lines = 0;//记得设置自动换行 BookSummaryLabel = bookSummaryLabel; AddConstraint();//添加约束 } //添加约束 private void AddConstraint() { BookImageView.MakeConstraints((ConstraintMaker obj) => { obj.Left.EqualTo(this.ContentView.Left()).Offset(10); obj.Top.EqualTo(this.ContentView.Top()).Offset(10); obj.Width.EqualTo(new NSNumber(100)); obj.Height.EqualTo(new NSNumber(100)); }); BookNameLabel.MakeConstraints((ConstraintMaker obj) => { obj.Left.EqualTo(BookImageView.Right()).Offset(10); obj.Top.EqualTo(this.ContentView.Top()).Offset(10); //宽和高会自动计算出来 }); BookPriceLabel.MakeConstraints((ConstraintMaker obj) => { obj.Left.EqualTo(BookImageView.Right()).Offset(10); obj.Bottom.EqualTo(BookImageView.Bottom()); //宽和高会自动计算出来 }); BookSummaryLabel.MakeConstraints((ConstraintMaker obj) => { obj.Left.EqualTo(this.ContentView.Left()).Offset(10); obj.Trailing.EqualTo(this.ContentView.Trailing()).Offset(-10); obj.Top.EqualTo(BookImageView.Bottom()).Offset(5); obj.Bottom.EqualTo(this.ContentView.Bottom()).Offset(-10); }); } }
然后在ViewController中使用这个自定义的单元格,上部分代码:
//每一个行即将显示在屏幕上时此方法被调用 public UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) { BookCell cell = (BookCell)tableView.DequeueReusableCell(BookCell.ReuseID); //if(cell == null) //{ // cell = new BookCell(); //} cell.Book = book; return cell; } //控制器的视图加载完毕后被调用 public override void ViewDidLoad() { base.ViewDidLoad(); //1.创建表格并将表格添加到父容器中 var tableView = new UITableView(this.View.Frame, UITableViewStyle.Plain); this.View.AddSubview(tableView); //2.注册可重用UITableViewCell tableView.RegisterClassForCellReuse(typeof(BookCell), BookCell.ReuseID); //3.设置表格的数据源对象(必须实现IUITableViewDataSource) tableView.DataSource = this; //4.设置表格其它属性 tableView.SeparatorColor = UIColor.Red; }
最后显示结果如下图
代码和视频在我上传的CSDN资源中 http://download.csdn.net/download/junshangshui/10161426