向 UITableView 添加页面控件
adding a page control to UITableView
我有一个 UITableView,我们希望对其进行调整,以便对 table 中用户已固定到顶部的项目产生类似于轮播的效果。
我看到页面控件是一个视图控制器,而另一个项目只是点容器。我已经看到其他一些 SO 答案建议我将 UIScrollview 与页面控件一起使用,但在所有这些情况下,它们的数据只是图像,而在我的情况下,它是文本、按钮和图像的组合,所以我不知道什么是好的清洁解决方案是。
正如我在评论中提到的,我们不能只结合 TabView + PageControl
,在这种情况下还需要 ScrollView
。
创建一个ScrollView
来包裹所有的views/elements,并将ScrollView放入Cell.ContentView
.
将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;
}
}
我有一个 UITableView,我们希望对其进行调整,以便对 table 中用户已固定到顶部的项目产生类似于轮播的效果。
我看到页面控件是一个视图控制器,而另一个项目只是点容器。我已经看到其他一些 SO 答案建议我将 UIScrollview 与页面控件一起使用,但在所有这些情况下,它们的数据只是图像,而在我的情况下,它是文本、按钮和图像的组合,所以我不知道什么是好的清洁解决方案是。
正如我在评论中提到的,我们不能只结合 TabView + PageControl
,在这种情况下还需要 ScrollView
。
创建一个
ScrollView
来包裹所有的views/elements,并将ScrollView放入Cell.ContentView
.将
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;
}
}