最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

[已解决]swift实现等分的UI界面组建视图

Swift crifan 3246浏览 0评论

要用Swift实现类似于这样的:

效果。

之前好像知道,大概是那个:

搜:

swift画等分的视图

iOS自动布局–UIStackPanel和UIGridPanel – CocoaChina_让移动开发更简单

用autolyout实现子视图对齐等宽排列 – 简书

swift grid view

找到了,就是这个:UICollectionView

UICollectionView Tutorial Part 1: Getting Started – Ray Wenderlich

swift UIView UICollectionView

swift uicollectionview tutorial

A Swift iOS 8 Storyboard-based Collection View Tutorial – Techotopia

frame – UIView Class Reference

UICollectionView Tutorial Part 1: Getting Started – Ray Wenderlich

Start Developing iOS Apps (Swift): Implement a Custom Control

UIView Class Reference

ios – How to make a simple collection view with Swift – Stack Overflow

Collection View Controller Tutorial in iOS8 with Swift – iOScreator

ios – UICollectionView: must be initialized with a non-nil layout parameter – Stack Overflow

UICollectionView Class Reference

Example app using Photos framework

->

https://developer.apple.com/library/ios/samplecode/UsingPhotosFramework/ExampleappusingPhotosframework.zip

UICollectionViewDataSource Protocol Reference

UICollectionViewCell Class Reference

UICollectionViewLayout Class Reference

UICollectionViewFlowLayout Class Reference

UICollectionViewDelegateFlowLayout Protocol Reference

值得参考的:

UIKit User Interface Catalog: Collection Views

代码:

import UIKit

class PersonInfoViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {    
    var memberList:[ContactItem]
   
let curPersonContactItem:ContactItem
   
   
let flowLayout:UICollectionViewFlowLayout
    let collectionView:UICollectionView
   
   
init(personContactItem:ContactItem) {
       
self.curPersonContactItem = personContactItem
       
self.memberList = [ContactItem]()
       
       
self.flowLayout = UICollectionViewFlowLayout()
       
self.flowLayout.scrollDirection = UICollectionViewScrollDirection.Horizontal
       
self.flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20)
       
self.flowLayout.itemSize = CGSizeMake(41, 41)

        self.collectionView = UICollectionView(frame: CGRectZero, collectionViewLayout: flowLayout)

        
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder aDecoder: NSCoder) {
       
fatalError("init(coder:) has not been implemented")
    }
   
   
override func viewDidLoad() {
       
super.viewDidLoad()

        //person items
        memberList.append(curPersonContactItem)
       
       
let fakeAddContactItem:ContactItem = ContactItem()
        fakeAddContactItem.
headerImage = ImageDefaulHeader
        fakeAddContactItem.
type = ContactType.Person
       
memberList.append(fakeAddContactItem)

        //collection view
        self.collectionView.frame = CGRectMake(
           
0,
           
0,
           
self.view.bounds.width,
           
85)
//        self.collectionView.backgroundColor = ColorMessageTableViewBackground
        //for debug
        self.collectionView.backgroundColor = UIColor.whiteColor()
       
       
self.collectionView.delegate = self
       
self.collectionView.dataSource = self
       
self.collectionView.registerClass(UICollectionViewCell.self,
            forCellWithReuseIdentifier:
StrIdPersonContactCollectionViewCell)
       
       
self.view.addSubview(self.collectionView)

        
        self.view.backgroundColor = ColorMessageTableViewBackground
    }
   
   
func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
       
return 1
    }
   
   
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       
return memberList.count
    }
   
   
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
       
let cell:UICollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier(StrIdPersonContactCollectionViewCell, forIndexPath: indexPath)
       
        cell.
backgroundColor = UIColor.yellowColor()
       
let imageView:UIImageView = UIImageView(image: memberList[indexPath.row].headerImage)
        imageView.
center = cell.contentView.center
        cell.
contentView.addSubview(imageView)
       
       
return cell
    }

}

效果:

后来经过调整,效果是:

但是:

单个colletionview的cell的下面的带名字的视图,还没有实现:

[未解决]swift中实现UICollectionViewCell的下面的部分显示:Supplement或者footer

转载请注明:在路上 » [已解决]swift实现等分的UI界面组建视图

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
91 queries in 0.207 seconds, using 22.18MB memory