欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

xamarin学习笔记B07(ios的UITableView)

程序员文章站 2022-06-01 11:29:06
...

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对象。

运行结果如下图:

xamarin学习笔记B07(ios的UITableView)


再来了解下单元格类UITableViewCell,从xamarin官网拿来一张图,如下:

xamarin学习笔记B07(ios的UITableView)

上面是普通模式,下面是编辑模式。

可以看出,普通模式下,默认就维护着两个View,而编辑模式有三个。在ContentView中可以添加我们的UIImageView,UILabel等来显示数据。有ContentView的好处是,将来如果左滑移动时就移动这个ContentView就够了,不必一个个移动其中的UIImageView,UILabel等子控件。

 

接着了解一下单元格的自带的四种风格,还是从官网拿来的图:

xamarin学习笔记B07(ios的UITableView)

再结合这段代码来分析

//返回一个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;
        } 

最后显示结果如下图

xamarin学习笔记B07(ios的UITableView)
代码和视频在我上传的CSDN资源中 http://download.csdn.net/download/junshangshui/10161426

相关标签: xamarin uitableview