2020-09-17 新项目第一天

首页设计初稿如图，暂时没有切图自己先搭建一个框架，项目使用swift开发

image.png

界面分析

• 搭建TabBar使用第三方框架ESTabbarController
  如果我们不开发iPadOS多窗口APP，SceneDelegate窗口管理我们可以不需要直接删掉就好了删除info.plist文件中的选项

  
  image.png

    func setupTabBarStyle(delegate: UITabBarControllerDelegate?) -> ESTabBarController {
        let tabBarController = ESTabBarController()
        tabBarController.delegate = delegate
        tabBarController.title = "Irregularity"
        tabBarController.tabBar.shadowImage = UIImage(named: "TabBar_card")
        
        let home = HomeViewController()
        let train = TrainingViewController()
        let message = MessageViewController()
        let mine = MineViewController()
        
        
        home.tabBarItem = ESTabBarItem.init(LFNormalTabbarView(), title: "首页", image: UIImage(named: "home_icon"), selectedImage: UIImage(named: "home_icon_Selection"))
        train.tabBarItem = ESTabBarItem.init(LFNormalTabbarView(), title: "培训", image: UIImage(named: "news_icon"), selectedImage: UIImage(named: "news_icon_Selection"))
        message.tabBarItem = ESTabBarItem.init(LFNormalTabbarView(), title: "消息", image: UIImage(named: "msg_icon"), selectedImage: UIImage(named: "msg_icon_Selection"))
        mine.tabBarItem = ESTabBarItem.init(LFNormalTabbarView(), title: "我的", image: UIImage(named: "mine_icon"), selectedImage: UIImage(named: "mine_icon_Selection"))
        let homeNav = LFNavigationController.init(rootViewController: home)
        let trainNav = LFNavigationController.init(rootViewController: train)
        let messageNav = LFNavigationController.init(rootViewController: message)
        let mineNav = LFNavigationController.init(rootViewController: mine)
        home.title = "首页"
        train.title = "培训"
        message.title = "消息"
        mine.title = "我的"
        
        tabBarController.viewControllers = [homeNav, trainNav, messageNav, mineNav]
       
        return tabBarController
    }
  
  

• 界面部分
  自定义下拉选择框 https://www.jianshu.com/p/da2acd523305
  自定义搜索框 https://www.jianshu.com/p/c05d8a8a93b1
  自定义格子视图 https://www.jianshu.com/p/20fb682ed680
  自定义瀑布流布局https://www.jianshu.com/p/a6eb24b87124

• 图片轮播依然使用SDCycleScrollView

实现瀑布流布局

    //设置瀑布流
    func setupCollectionView() {
        let waterFallLayout =  LFWaterFallLayout.init()
        waterFallLayout.delegate = self
        let collectionView = UICollectionView.init(frame:CGRect.init(x: 0, y: 0, width: kScreenWidth, height: kScreenHeigth-tabBarHeight-navigationBarHeight-250), collectionViewLayout: waterFallLayout)
        
        collectionView.dataSource = self
        collectionView.backgroundColor = AppColor.white
        collectionView.register(nibWithCellClass: PXSWaterFallCell.self)
        
        self.tableView.tableFooterView = collectionView
        
    }

实现代理方法

extension HomeViewController {

        func numberOfSections(in collectionView: UICollectionView) -> Int {
            return 1
        }
        
        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return 10
        }
        
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell =  collectionView.dequeueReusableCell(withClass: PXSWaterFallCell.self, for: indexPath)
            return cell
        }
    
    
        func heightForItemAtIndexPath(indexPath: Int, itemWidth: CGFloat, waterFallLayout: LFWaterFallLayout) -> CGFloat {
            let y = arc4random() % UInt32(200) + UInt32(60)

            return CGFloat(y)

        }
        func rowMarginInWaterFallLayout(waterFallLayout: LFWaterFallLayout) -> CGFloat {
            return 20
        }
        
        func columnCountInWaterFallLayout(waterFallLayout: LFWaterFallLayout) -> Int {
            return 2
        }
        

}

image.png

到这首页差不多界面搭建完毕了