根据屏幕宽度和列数Xamarin.iOS设置UICollectionViewCell的大小

时间:2016-04-25 22:56:17

标签: c# xamarin xamarin.ios uicollectionview uicollectionviewcell

我正在使用Xamarin.iOS构建应用程序。应用程序的第一个屏幕我使用UICollectionView来显示多个类别。我希望类别显示在两列中,但这里有一个问题。我在storyBoard.In小屏幕上手动设置了单元格的大小,例如iPhone 3.5英寸,只显示了一列,同时在iPhone 66Plus这样的较大屏幕中显示了两列列之间有很多空格。

表格视图有一个我们可以在TableViewSourceGetRowHeight中覆盖的方法。有没有办法根据屏幕宽度和列数设置collectionViewCell的大小。

这是我在My App中实现CollectionView的方式:

SectionViewSource.cs

public class SectionViewSource: UICollectionViewSource
    {
        public List<SectionCategory> rows { get; set; }
        public ViewController owner { get; set;}

        public SectionViewSource (List<SectionCategory> _rows, ViewController _owner)
        {
            rows = _rows;
            owner = _owner;

        }

        public override nint NumberOfSections (UICollectionView collectionView)
        {
            return 1;
        }

        public override nint GetItemsCount (UICollectionView collectionView, nint section)
        {
            return rows.Count;
        }

        public override bool ShouldHighlightItem (UICollectionView collectionView, NSIndexPath indexPath)
        {
            return true;
        }

        public override void ItemHighlighted (UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cell = (SectionViewCell)collectionView.CellForItem (indexPath);
            cell.mainLabel.Alpha = 0.5f;



        }

        public override bool CanPerformAction (UICollectionView collectionView, Selector action, NSIndexPath indexPath, NSObject sender)
        {

                return true;
        }

        public override void PerformAction (UICollectionView collectionView, Selector action, NSIndexPath indexPath, NSObject sender)
        {
            System.Diagnostics.Debug.WriteLine ("code to perform action");

        }

        public override void ItemUnhighlighted (UICollectionView collectionView, NSIndexPath indexPath)
        {

            var cell = (SectionViewCell)collectionView.CellForItem (indexPath);
            cell.mainLabel.Alpha = 1.0f;

        }

        public override UICollectionViewCell GetCell (UICollectionView collectionView, NSIndexPath indexPath)
        {
            var cell = (SectionViewCell)collectionView.DequeueReusableCell (SectionViewCell.CellID, indexPath);

            cell.UpdateCell (rows [indexPath.Row].sectionName,rows [indexPath.Row].sectionUrlImage);

            return cell;
        }
    }

SectionViewCell.cs

public class SectionViewCell: UICollectionViewCell
    {
        public UILabel mainLabel;
        public UIImageView _imageView;
        public static NSString CellID = new NSString("customCollectionCell");

        [Export ("initWithFrame:")]
        public SectionViewCell (CGRect frame) : base(frame)
        {
            BackgroundView = new UIView { BackgroundColor = UIColor.Orange };

            ContentView.BackgroundColor = UIColor.LightGray;

            _imageView = new UIImageView ();
            mainLabel = new UILabel ();

            mainLabel.TextColor = UIColor.White;

            ContentView.AddSubviews (new UIView[] { _imageView, mainLabel });
        }



        public void UpdateCell (string text, string url) {

            mainLabel.Text = text;
            mainLabel.LineBreakMode = UILineBreakMode.TailTruncation;
            mainLabel.Lines = 2; 
            mainLabel.Font = UIFont.FromName("Optima-Bold", 18f);

            ImageService.LoadUrl(url).Into(_imageView);
            _imageView.Frame = new CGRect (0, 0, ContentView.Bounds.Width, ContentView.Bounds.Height);
            mainLabel.Frame = new CGRect (10, 10, ContentView.Bounds.Width-20, 40);

        }

    }

ViewController.cs

sectionGrid.RegisterClassForCell(typeof(SectionViewCell), SectionViewCell.CellID);
sectionGrid.Source = new SectionViewSource (sectionCategories,this);

1 个答案:

答案 0 :(得分:0)

尝试设置CollectionViewLayout,如下所示:

ocamlc -rectypes -c A.ml 
ocamlc -rectypes -c B.ml
ocamlc -rectypes -c C.ml
ocamlc -rectypes  A.cmo B.cmo C.cmo 

创造了这样的东西:

enter image description here

<强>更新

你可以试试这个:

// Flow Layout
var flowLayout = new UICollectionViewFlowLayout (){
    ItemSize = new CGSize ((float)UIScreen.MainScreen.Bounds.Size.Width/2.0f, (float)UIScreen.MainScreen.Bounds.Size.Width/2.0f),
    HeaderReferenceSize = new CGSize (100, 100),
    SectionInset = new UIEdgeInsets (0,0,0,0),
    ScrollDirection = UICollectionViewScrollDirection.Vertical,
    MinimumInteritemSpacing = 0, // minimum spacing between cells
    MinimumLineSpacing = 0 // minimum spacing between rows if ScrollDirection is Vertical or between columns if Horizontal
};

simpleCollectionViewController = new UICollectionViewController (flowLayout);