【问题标题】:adding a page control to UITableView向 UITableView 添加页面控件
【发布时间】:2022-01-23 06:33:02
【问题描述】:

我有一个 UITableView,我们希望对其进行调整,以便对用户固定在顶部的表格中的项目产生类似轮播的效果。

我看到页面控件是一个视图控制器,而另一个项目只是点容器。我已经看到其他一些 SO 答案建议我将 UIScrollview 与页面控件一起使用,但在所有这些情况下,它们的数据只是图像,而在我的情况下,它是文本、按钮和图像的组合,所以我不知道什么是好的清洁解决方案将是。

【问题讨论】:

  • 一张说明您正在尝试完成的工作的图片会很有帮助
  • 通常UITableView的滚动方向是垂直的,而UIPageControl是水平的,所以我们经常在ScrollView上使用page control而不是TableView,对于复杂的UI你可以自定义一个View,其中包含那些元素并在ScrollView上一一添加,不难。
  • 我更新了我们想要做什么
  • @ColeX-MSFT 做一个视图的问题是这些单元格很复杂并且包含诸如集合视图(用于图片库)、动画 gif、按钮等的东西。这是一个非常复杂的 UI 和 iOS不像android那样容易。

标签: uitableview xamarin.ios uipagecontrol


【解决方案1】:

正如我在评论中提到的,我们不能只结合TabView + PageControl,在这种情况下还需要ScrollView

  1. 创建一个ScrollView来包装所有视图/元素,并将ScrollView放入Cell.ContentView

  2. PageControl 添加到Cell.ContentView

参考

UIScrollView and UIPageControl within UITableView

UIPageControl with UITableView

更新

你想要下面的屏幕截图吗?

示例代码

 public class User
    {
        public string icon { get; set; }
        public string name { get; set; }
        public string content { get; set; }
        public string image { get; set; }

    }

    [Register("UIViewController1")]
    public class UIViewController1 : UIViewController
    {
        public UIViewController1()
        {
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            UITableView table = new UITableView(View.Bounds); // defaults to Plain style
            List<User> tableItems = new List<User>();
            tableItems.Add(new User { icon = "dog.png", name = "Cole", content = "I'm test1", image = "bg1.PNG" });
            tableItems.Add(new User { icon = "dog.png", name = "Kevin", content = "I'm test222222222", image = "bg2.PNG" });
            tableItems.Add(new User { icon = "dog.png", name = "Tom", content = "I'm test333333_33333333", image = "bg3.PNG" });

            table.Source = new TableSource(tableItems);
            Add(table);


        }

    }

    public class TableSource : UITableViewSource
    {

        List<User> TableItems;
        string CellIdentifier = "TableCell";

        public TableSource(List<User> items)
        {
            TableItems = items;
        }

        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return TableItems.Count;
        }

        int CellHeight = 250;

        public override nfloat GetHeightForRow(UITableView tableView, NSIndexPath indexPath)
        {
            return CellHeight;
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            UITableViewCell cell = tableView.DequeueReusableCell(CellIdentifier);
            User item = TableItems[indexPath.Row];

            //if there are no cells to reuse, create a new one
            if (cell == null)
            {
                cell = new UITableViewCell(UITableViewCellStyle.Default, CellIdentifier);

                UIScrollView sc = new UIScrollView();
                sc.Frame = new CGRect(0, 0, UIScreen.MainScreen.Bounds.Width, CellHeight-10);

                for (int i = 0; i < 10; i++)
                {
                    UIImageView image = new UIImageView();
                    image.Frame = new CGRect(i* UIScreen.MainScreen.Bounds.Width + 20, 10, 50, 50);
                    image.Layer.MasksToBounds = true;
                    image.Layer.CornerRadius = 25;
                    image.Image = UIImage.FromFile(item.icon);
                    sc.Add(image);

                    UILabel label = new UILabel();
                    label.Frame = new CGRect(i * UIScreen.MainScreen.Bounds.Width+80, 10, 100, 50);
                    label.TextColor = UIColor.LightGray;
                    label.Text = item.name;
                    sc.Add(label);


                    UILabel label2 = new UILabel();
                    label2.Frame = new CGRect(i * UIScreen.MainScreen.Bounds.Width +20, 60, 300, 60);
                    label2.Text = item.content;
                    sc.Add(label2);

                    UIImageView image2 = new UIImageView();
                    image2.Frame = new CGRect(i * UIScreen.MainScreen.Bounds.Width + 100, 130, 150, 100);
                    image2.Image = UIImage.FromFile(item.image);
                    sc.Add(image2);
                }

                sc.ContentSize = new CGSize(10 * UIScreen.MainScreen.Bounds.Width, CellHeight-10);
                sc.PagingEnabled = true;
                sc.ShowsHorizontalScrollIndicator = false;

                UIPageControl page = new UIPageControl();
                page.BackgroundColor = UIColor.Red;
                page.Frame = new CGRect(0, CellHeight-10, cell.ContentView.Frame.Width, 10);
                page.Pages = 10;
                page.CurrentPage = 0;

                cell.ContentView.Add(sc);
                cell.ContentView.Add(page);


                sc.Scrolled += (object sender, EventArgs e) => {
                    var pageWidth = sc.Frame.Size.Width;
                    var fractionalPage = sc.ContentOffset.X / pageWidth;
                    var p = Math.Floor(fractionalPage);
                    page.CurrentPage = (int)p;
                };
            }

            return cell;
        }
    }

【讨论】:

  • 我的主要问题是它不仅仅是一件事情(就像外面的每个例子一样),而是很多事情,把它想象成可以水平滚动的 Facebook 帖子,我如何实现这一点? iOS没有像Android这样的片段
  • 是的,这正是我想要的
  • 我附上示例代码你可以参考一下。
  • 非常感谢 ColeX
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-07-06
  • 2010-10-17
  • 1970-01-01
  • 2013-08-21
  • 2011-07-05
  • 1970-01-01
  • 2013-11-04
相关资源
最近更新 更多