01.Swift 新浪微博项目框架搭建,访客视图

@(〓〓 iOS-Swift项目实战)[Swift 项目实战]


目录

  • 01.Swift 新浪微博项目框架搭建,访客视图
  • 1.项目部署
    • 微博项目部署
    • 项目结构
  • 2.功能模块
    • 添加UITabBarController的子控制器
    • 自定义TabBarController
  • 3.使用Storyboard References引用技术搭建项目框架
    • 使用storyboard搭建项目框架
    • Storyboard References创建子控制器
    • Storyboard References搭建框架图解
  • 4.设置加号按钮
  • 5.TabBarItem显示图片问题
    • 获取TabBarItem
    • 抽取UIButton的分类
  • 6.访客视图
    • 访客视图的目标
      -抽取现有框架各子控制器的父类BaseViewController
    • 使用xib布局访客视图
    • 转盘旋转动画
    • 监听注册和登录点击
  • 7.首页导航栏左右侧按钮,titleView的设置
    • 设置主页导航栏左右侧按钮
    • 设置导航栏titleView
  • 补充
    • 在原项目添加git仓库
    • storyboard冲突问题
    • Swift中事件监听
    • Swift函数修饰

1.项目部署


微博项目部署

Swift2.0 很多新功能只能在iOS9.0(Xcode 7)以后才能使用.所以项目必须部署在iOS9.0以上.

  • 1.项目Deployment Info部署环境配置
  • 2.设置App图标,启动图片
  • 3.设置Main Interface 设置启动时是否要加载Main.storyboard.本项目刚开始使用纯代码搭建框架,所以无需从Main.storyboard加载,后面使用Storyboard References需要配置从Main.storyboard文件加载
01.Swift 新浪微博项目框架搭建,访客视图_第1张图片
01.微博项目部署.png
  • 4.Info.plist配置
    • Bundle display name: 展示的应用名称(设置应用名称一般都是设置该属性),需手动添加.
    • Xcode7需添加App Transport Security Settings
01.Swift 新浪微博项目框架搭建,访客视图_第2张图片
02.Info.plist配置.png

项目结构

  • 1.项目目录结构划分

  • 使用模块划分

    • Main (主要)
    • Home (首页)
    • Message (消息)
    • Discover (发现)
    • Profile (我)
  • 2.清理原项目没用的文件ViewController.swift

  • 3.在storyboard创建UITabBarController


2.功能模块


添加UITabBarController的子控制器

  • 1.创建首页,消息,发现,我对应的控制器

  • 2.纯代码搭建

    • 在工程配置需取消Main.storyboard启动
  • 在AppDelegate中创建window

    // 1.创建window
    window = UIWindow(frame: UIScreen.mainScreen().bounds)
    window?.backgroundColor = UIColor.redColor()
    // 2.设置根控制器
    window?.rootViewController = MainViewController()
    // 3.设置keyWindow并显示
    window?.makeKeyAndVisible()

自定义TabBarController

  • 1.创建继承自UITarBarController的控制器MainViewController

  • 2.添加子控制器(抽取添加子控制器的方法)

    • 1.创建子控制器,子控制器是导航控制器
    • 2.设置子控制器的属性,设置titletabBarItem的普通图片选中图片.
  • 三个设置标题的区别

    // 设置导航条和底部TabBar标题
    childVc.title = title   
    // 设置导航条的标题
    childVc.navigationItem.title = title   
    // 设置TabBar的标题
    childVc.tabBarItem.title = title    
  • 3.添加到子控制器TabBarController中
// 1.添加首页控制器
        addChildViewController(HomeViewController(), title: "首页", imageName: "tabbar_home")
        addChildViewController(MessageViewController(), title: "消息", imageName: "tabbar_message_center")
        addChildViewController(DiscoverViewController(), title: "发现", imageName: "tabbar_discover")
        addChildViewController(ProfileViewController(), title: "我", imageName: "tabbar_profile")
  • 4.统一设置TabBarItem的主题颜色
    • 在AppDelegate中统一设置TabBarItem的主题颜色
// 设置全局颜色
        UITabBar.appearance().tintColor = UIColor.orangeColor()
  • 5.抽取添加子控制器的方法
    • 使用方法重载的封装添加子控制器addChildViewController方法.(参数和系统的不一样,即重载)
    // 方法的重载:方法名称相同,但是参数不同
    func addChildViewController(childVc: UIViewController, title : String, imageName : String) {
        // 1.1.创建子控制器
        let childNav = UINavigationController(rootViewController: childVc)
        
        // 1.2.设置控制器的属性
        childVc.title = title
        childVc.tabBarItem.image = UIImage(named: imageName)
        childVc.tabBarItem.selectedImage = UIImage(named: imageName + "_highlighted")
        
        // 1.3.添加到tabbarController中
        addChildViewController(childNav)
    }
  • 6.添加和设置所有子控制器
    // 1.添加首页控制器
    addChildViewController(HomeViewController(), title: "首页", imageName: "tabbar_home")
    addChildViewController(MessageViewController(), title: "消息", imageName: "tabbar_message_center")
    addChildViewController(DiscoverViewController(), title: "发现", imageName: "tabbar_discover")
    addChildViewController(ProfileViewController(), title: "我", imageName: "tabbar_profile")

3.使用Storyboard References引用技术搭建项目框架


使用storyboard搭建项目框架

  • 1.在工程配置设置从Main.storyboard启动

  • 2.在Main.storyboard中搭建项目框架

    • 添加对应子控制器
    • 设置子控制器对应的TabBarItem显示的标题和图片(正常,选中状态)
01.Swift 新浪微博项目框架搭建,访客视图_第3张图片
03.TabBarItem显示的标题和图片.png

Storyboard References创建子控制器

  • 1.按住Command同时选中导航控制器和首页控制器,选中Editor菜单中Refactor To Storyboard项,创建Home.storyboard
01.Swift 新浪微博项目框架搭建,访客视图_第4张图片
04.Refactor To Storyboard.png

  • 2.使用以上方式创建UITabBarController的所有子控制器对应的storyboard文件

  • 3.在Main.storyboard中处理最中间TabBarItem不能点击(可以在storyboard中设置,也可以通过代码设置)

    • 使用storyboard设置最中间TabBarItem不能点击
    • 设置为不能点击
01.Swift 新浪微博项目框架搭建,访客视图_第5张图片
05.中间TabBarItem不能点击.png

Storyboard References搭建框架图解

01.Swift 新浪微博项目框架搭建,访客视图_第6张图片
06.Storyboard References搭建框架图解.png

4.设置加号按钮

  • 1.在MainViewController.swift文件的viewDidLoad方法中添加发布按钮
    • 1.创建发布按钮

    • 2.设置发布按钮不同状态下的属性

    • 3.设置尺寸和位置

    • 使用sizeToFit设置尺寸

    • 设置center不能设置为tabBar.center,应设置为CGPoint(x: tabBar.center.x, y: tabBar.bounds.size.height * 0.5)

    • 4.监听加号按钮的点击事件

    • 5.将发布按钮添加到tabBar中

    • 6.在viewWillAppear方法中设置最中间的TabBarButton不能点击,让事件传递给加号按钮.

    • 7.传递按钮参数到按钮监听的方法

      • 监听的方法名加上:冒号表示有参数

5.TabBarItem显示图片问题


获取TabBarItem

  • 在viewWillAppear方法中设置加号按钮不能点击
  • 使用数组存放所有tabBarItem的图片名称.
  • 封装抽取以上设置所有tabBarItem图片方法.
// 已在storyboard中设置好TabBarButton显示的内容,所以就无需再定义该属性
    lazy var imageNames : [String] = {
        return ["tabbar_home", "tabbar_message_center", "", "tabbar_discover", "tabbar_profile"]
    }()

抽取UIButton的分类

  • 使用extension定义分类
  • 方法一: 提供类方法
  • 方法二: 在分类中扩充构造函数(推荐),需用convenience关键字修饰.
extension UIButton {
    
    // convenience : 便利构造函数
    // Swift中如果在类扩展中扩充构造函数,必须写便利构造函数
    // 便利构造函数:1.必须在构造函数前convenience 2.必须调用self.init()
    convenience init(imageName: String, bgImageName: String) {
        self.init()
        
        setImage(UIImage(named: imageName), forState: .Normal)
        setImage(UIImage(named: imageName + "_highlighted"), forState: .Highlighted)
        setBackgroundImage(UIImage(named: bgImageName), forState: .Normal)
        setBackgroundImage(UIImage(named: bgImageName + "_highlighted"), forState: .Highlighted)
        sizeToFit()
    }
    
}
  • Swift中如果在类扩展中扩充构造函数,必须写便利构造函数.

  • 便利构造函数:

    • 1.必须在构造函数前添加convenience
    • 2.必须在便利构造函数中调用self.init().
  • 类方法: Swift使用class修饰的方法就是类方法.相当于OC中的+开头的方法


6.访客视图


访客视图的目标

如果用户没有登录,显示访客视图.


抽取现有框架各子控制器的父类BaseViewController

  • 1.在父类控制BaseViewController定义isLogin是否登录属性

  • 2.重写父类控制器BaseViewController的loadView方法.

    • 判断是否有登录,如果有登录,则调用super.loadView();如果没有登录,则创建访客视图.
    • 注意: 需确保storyboard已经设置好对应的管理类.
/// 登录状态
    var isLogin = false
    var visitorView : VisitorView?
    
    override func loadView() {
        
        isLogin ? super.loadView() : setupVisitorView()
    }
    

使用xib布局访客视图

圆形转盘下半部分为渐变显示功能.渐变功能的实现是结合转盘图片,渐变图片和view的背景色实现

  • 设置访客视图背景颜色(238, 238, 238)

  • 访客视图xib布局

01.Swift 新浪微博项目框架搭建,访客视图_第7张图片
07.xib布局访客视图.png

  • 消息想要设置展示视图
  • 消息必须获取到访客视图
  • 父类定义属性指向访客视图,这时消息就能通过父类的属性拿到访客视图.
// 在BaseViewControllerl类中设置访客视图属性
var visitorView : VisitorView?

转盘旋转动画

  • 1.创建动画(基础动画,设置keyPath: transform.rotation.z)

  • 2.设置动画

    • 设置fromValuetoValue.
    • 设置repeatCount动画无限循环.
    • 设置周期during
  • 3.添加动画到layer上

  • 动画消失再出现,动画会停止,可以设置动画的removedOnCompletion = false这样动画消失再出现时,动画就不会停止.

// 在VisitorView中实现添加动画的方法,如果外界需要动画功能,由外界自行调用
func addRotationAnimation() {
        
        // 1.创建动画
        let rotationAnim = CABasicAnimation(keyPath: "transform.rotation.z")
        
        // 2.设置动画属性. removedOnCompletion = false: 为了让动画消失再显示时能正常继续动画
        rotationAnim.fromValue = 0
        rotationAnim.toValue = M_PI * 2
        rotationAnim.repeatCount = MAXFLOAT
        rotationAnim.duration = 10
        rotationAnim.removedOnCompletion = false
        
        // 3.添加动画到layer
        rotationView.layer.addAnimation(rotationAnim, forKey: nil)
    }

监听注册和登录点击

  • 1.设置导航条中的注册,登录按钮

    • 设置全局颜色
      UINavigationBar.appearance().tintColor = UIColor.orangeColor()
  • 2.抽取添加导航条左右侧的注册,登录按钮的方法到父类

  • 3.在父类控制器监听注册,登录按钮的点击

// 在BaseViewController.swift中
/// 设置导航条注册,登录按钮
    func setupVisitorNavigationItems() {
        navigationItem.leftBarButtonItem = UIBarButtonItem(title: "注册", style: .Done, target: self, action: "registerClick")
        navigationItem.rightBarButtonItem = UIBarButtonItem(title: "登录", style: .Done, target: self, action: "loginClick")
    }

7.首页导航栏左右侧按钮,titleView的设置


设置主页导航栏左右侧按钮

  • 1.设置导航栏内容

    • 1.设置导航栏左侧的item
    • 2.设置导航栏右侧的item
    • 3.设置导航栏titleView
  • 2.抽取UIBarButtonItem分类

    • 在分类中创建便利构造函数.参数: 图片名称,target,action
// 在UIBarButtonItem-Extension.swift中
extension UIBarButtonItem {
    
    // 遍历构造函数
    /// 设置导航条按钮的普通,高亮图片,监听按钮的点击
    convenience init(imageName: String, target: AnyObject?, action: Selector) {
        
        let btn = UIButton(type: .Custom)
        btn.setImage(UIImage(named: imageName), forState: .Normal)
        btn.setImage(UIImage(named: imageName + "_highlighted"), forState: .Highlighted)
        btn.addTarget(target, action: action, forControlEvents: .TouchUpInside)
        
        btn.sizeToFit()
        
        self.init(customView: btn)
    }
}

设置导航栏titleView

  • 1.自定义TitleButton(titleView设置为自定义TitleButton)

  • 2.重写layoutSubviews方法

    • 重新布局按钮的标题和图片的位置
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // 如果可选类型取值:如果可选类型是nil,那么最终结果就是nil
        // 如果是设置值或者调用方法:如果可选类型为nil,则后面内容都不在执行
        titleLabel?.frame.origin.x = 0
        imageView?.frame.origin.x = (titleLabel?.frame.size.width)! + 5
    }

  • 可选类型取值规则(重要)
    • 如果可选类型取值:如果可选类型是nil,那么最终结果就是nil
    • 如果是设置值或者调用方法:如果可选类型为nil,则后面内容都不在执行
  • Swift中如果重写了控件的initWithFrame方法,必须重写init?(coder aDecoder:NSCoder)方法.

  • 微博初步运行效果
01.Swift 新浪微博项目框架搭建,访客视图_第8张图片
微博初步运行效果.gif

补充


在原项目添加git仓库

  • 1.使用cd命令,使用终端进入项目文件夹

  • 2.在终端添加git仓库

    • 使用git init命令,在原项目上添加git仓库,项目文件夹会增加一个.git的隐藏文件夹
    • 使用git status查看文件状态
    • 使用git add . 点,可以将目前所有存在的文件添加到暂缓区.
    • 使用git commit -m “首次提交”,提交到服务器
    • 添加.gitignore忽略文件
    • touch .gitignore 创建忽略文件
    • 从GitHub中搜索.gitignore,查看不同语言如何使用.gitignore文件,并写到自己创建的.gitignore文件中.
    • 使用git add .添加.gitignore文件到Git暂缓区,使用git commit -m “添加.gitignore”文件.
    • 注意: 一般是先添加忽略文件.gitignore.

storyboard冲突问题

  • 以前产生storyboard冲突时,基本无法修复.

Swift中事件监听

  • Swift中事件监听
    • 方式一: Selector(“函数名称”)
    • 方式二: 省略Selector, 直接写双引号加上函数名称,如“函数名称”

Swift函数修饰

  • 使用private修饰函数,表示私有函数,只能在同一个文件中使用私有函数.

  • 如果一个函数声明为private,那么该函数不会再对象的方法列表中.

  • 在private前加上@objc关键字,就可以将函数添加到方法列表中.

你可能感兴趣的:(01.Swift 新浪微博项目框架搭建,访客视图)