新项目第一天

526 阅读1分钟

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

界面分析

  • 搭建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
      }
    
    
  • 界面部分 自定义下拉选择框 www.jianshu.com/p/da2acd523… 自定义搜索框 www.jianshu.com/p/c05d8a8a9… 自定义格子视图 www.jianshu.com/p/20fb682ed… 自定义瀑布流布局www.jianshu.com/p/a6eb24b87…

  • 图片轮播依然使用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

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