分析个人界面,出去最上方显示个人信息的一栏,下方为各种功能的按钮,每个按钮占一个方格。因为关于订单的按钮和常用的工具按钮分为两组,所以决定使用有两个section的collectionView。
在之前的代码里都是用storyboard实现collectionView,这次是用纯代码编写,在编写的过程中发现了很多不同之处。
首先在个人界面的类中声明一个UICollectionView
var collectionView : UICollectionView! 在个人界面的类继承的类后设置要实现的三个代理,由于没有实现相应的方法,此时会报错,可以忽略这些错误,实现代理方法后错误就会消失。class PersonalViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout 接下来,在 overridefunc viewDidLoad()中进行初始化。首先初始化collectionView,设置其所在的视图的位置以及大小(宽度为获取的屏幕的宽度)。不用storyboard设置cell的identifier,就一定要注册、注册、注册!!!给collectionView注册cell,声明这个collectionView中的cell使用的是哪个cell类,并设置其identifier。collectionView的布局layout和cell都是自定义的,设置了代理和数据源,此时先声明自定义的myLayout,还可以设置collectionView的背景颜色等属性。
//下部的collectionview let layout = myLayout() collectionView = UICollectionView(frame:CGRect(x:0, y:screenheight/3, width:screenwidth, height:(screenheight*2)/3), collectionViewLayout: layout) //注册一个cell collectionView.register(DingDanCell.self, forCellWithReuseIdentifier:"cell") // //注册一个headView // //dingdancollectionView.registerClass(Home_HeadView.self, forSupplementaryViewOfKind:UICollectionElementKindSectionHeader, withReuseIdentifier: "headView") collectionView.delegate = self as? UICollectionViewDelegate collectionView.dataSource = self as? UICollectionViewDataSource collectionView.backgroundColor = UIColor.lightGray self.view.addSubview(collectionView) 然后实现代理方法,collectionView中有两个组,所以numberOfSection方法返回2。第一组中四个按钮,第二组8个,所以第二个代理方法中不同的组分别返回4和8。第三个代理方法,首先声明一个cell,用identifier将其与之前注册的联系起来,并注意要转换为自定义得到cell类型。通过indexPath的section和item属性,来确定现在在对哪一组的哪个按钮进行设置。
func numberOfSections(in collectionView: UICollectionView) -> Int { return 2 } func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { if section==0 { return 4 } else{ return 8 } } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { var cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as? DingDanCell switch indexPath.section{ case 0: switch indexPath.item { case 0: cell?.btnText = "全部订单" //cell?.btnImage = "" self.btn = cell?.btn //btn.addTarget(self, action: #selector(tapped), forControlEvents: .TouchUpInside) case 1: cell?.btnText = "待付款" self.btn = cell?.btn case 2: cell?.btnText = "处理中" self.btn = cell?.btn case 3: cell?.btnText = "已成功" self.btn = cell?.btn default: break } case 1: switch indexPath.item { case 0: cell?.btnText = "收藏商品" self.btn = cell?.btn //btn.addTarget(self, action: #selector(tapped), forControlEvents: .TouchUpInside) case 1: cell?.btnText = "我的关注" self.btn = cell?.btn case 2: cell?.btnText = "我的旅伴" self.btn = cell?.btn case 3: cell?.btnText = "想去目的地" self.btn = cell?.btn case 4: cell?.btnText = "收藏内容" self.btn = cell?.btn case 5: cell?.btnText = "曾经去过" self.btn = cell?.btn case 6: cell?.btnText = "" self.btn = cell?.btn case 7: cell?.btnText = "" self.btn = cell?.btn default: break } default:break } return cell! }
自定义的cell声明一个继承自UICollectionViewCell的类,在其中按照app的要求定义即可。在这里cell中定义了一个button,button中包含一个图片和一个标题。这里一定要注意、注意、注意awakeFromNib方法!!!
class DingDanCell: UICollectionViewCell { var btn:myButton! var btnText:String = "" { didSet { //self.btn.titleLabel?.text=btnText self.btn.setTitle(btnText, for: .normal) } } var btnImage:String = "" { didSet { //self.btn.imageView?.image = UIImage(named:btnImage) self.btn.setImage(UIImage(named:btnImage), for: .normal) } } override func awakeFromNib() { super.awakeFromNib() btn = myButton.init(frame:CGRect(x:0,y:0,width:self.frame.width,height:self.frame.height)) btn.setTitle("", for: UIControlState.normal) btn.imageView?.image = UIImage(named: "") self.addSubview(btn) } } 至此,运行一下,collectionView就可以显示了,在接下来把按钮的颜色,图标根据设计人员的设计设置好即可。