备案控制台
探索云世界
开发者社区 安全 文章 正文

swift:用UITabBarController、UINavigationController、模态窗口简单的搭建一个QQ界面

2017-12-22 1949
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

搭建一个QQ界面其实是一个很简单的实现，需要几种切换视图的控制器组合一起使用，即导航控制器、标签栏控制器、模态窗口。其中，将标签栏控制器设置为window的rootViewController，因为QQ主界面有4个控制器，分别为消息、联系人、动态、我，那么创建这4个控制器，然后再为它们分别创建一个导航控制器。此时，将之前创建的那4个控制器分别设置为对应的导航控制的rootViewcontroller。最后，将这4个导航控制器设置为标签栏控制器的子控制器即可。除此之外，我们仍然需要再创建一个登录的控制器，添加文本框输入账号和密码，如果用户输入正确，那么就以模态窗口的方式模态出主界面的窗口即可，如果输入不正确，就弹出一个提示框，给出提示信息。

 

具体的演示实例如下：

1.创建一个swift工程，截图为：

2.删除故事板中自带的控制器，然后创建需要的所有控制器并设置一下分组，截图为：

3.在AppDelegate.swift中设置偏好,将账号和密码归档

复制代码 
    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        
        //设置偏好,将账号和密码存入沙盒
        NSUserDefaults.standardUserDefaults().setValue("admin", forKey: "accountNum")
        NSUserDefaults.standardUserDefaults().setValue("123456", forKey: "password")
    
        //对窗体初始化
        self.window = UIWindow(frame: UIScreen.mainScreen().bounds)
        
        //创建窗体的根控制器,将QQ的登录界面设置为根控制器
        var rootViewController:LoginViewController? = LoginViewController()
        self.window!.rootViewController = rootViewController!
        
        
        self.window!.makeKeyAndVisible()
        return true
    }
复制代码

4.在LoginViewController.swift中操作代码如下：

   //实现协议和声明属性

复制代码 
class LoginViewController: UIViewController,UIAlertViewDelegate {

    //声明属性(图像视图、标签、按钮、文本框)
    var imageView:UIImageView?
    var labelAccountNum:UILabel?
    var labelPassWord:UILabel?
    var loginButton:UIButton?
    var textFiledAccountNum:UITextField?
    var textFiledPassWord:UITextField?
复制代码

   //初始化控件

复制代码 
    override func viewDidLoad() {
        super.viewDidLoad()

        //初始化图像视图
        self.imageView = UIImageView(frame: CGRectMake(38, 30, 300, 300))
        self.imageView!.image = UIImage(named: "QQ.png")
        
        
        //初始化账号标签
        self.labelAccountNum = UILabel(frame: CGRectMake(50, 400, 40, 40))
        self.labelAccountNum!.text = "账号:"
        
        //初始化密码标签
        self.labelPassWord = UILabel(frame: CGRectMake(50, 450, 40, 40))
        self.labelPassWord!.text = "密码:"
        
        //初始化账号文本框
        self.textFiledAccountNum = UITextField(frame: CGRectMake(90, 400, 200, 40))
        self.textFiledAccountNum!.layer.cornerRadius = 5.0
        self.textFiledAccountNum!.backgroundColor = UIColor.grayColor()
        self.textFiledAccountNum!.placeholder = "请输入账号"
        self.textFiledAccountNum!.clearsOnBeginEditing = true
        self.textFiledAccountNum!.becomeFirstResponder()
        
        //初始化密码文本框
        self.textFiledPassWord = UITextField(frame: CGRectMake(90, 450, 200, 40))
        self.textFiledPassWord!.layer.cornerRadius = 5.0
        self.textFiledPassWord!.backgroundColor = UIColor.grayColor()
        self.textFiledPassWord!.placeholder = "请输入密码"
        self.textFiledPassWord!.clearsOnBeginEditing = true
        self.textFiledPassWord!.secureTextEntry = true

        //初始化登陆按钮
        self.loginButton = UIButton(frame: CGRectMake(90, 500, 200, 40))
        self.loginButton!.layer.cornerRadius = 8.0
        self.loginButton!.setTitle("登录", forState: .Normal)
        self.loginButton!.backgroundColor = UIColor.purpleColor()
        self.loginButton!.addTarget(self, action: "LoginButtonClicked:", forControlEvents: .TouchUpInside)

        
        //设置视图颜色
        self.view.backgroundColor = UIColor.whiteColor()
        
        //将控件都添加到子视图
        self.view.addSubview(self.imageView!)
        self.view.addSubview(self.labelAccountNum!)
        self.view.addSubview(self.labelPassWord!)
        self.view.addSubview(self.textFiledAccountNum!)
        self.view.addSubview(self.textFiledPassWord!)
        self.view.addSubview(self.loginButton!)
    }
复制代码

  //实现登陆事件（匹配账号和密码、实现界面的跳转）

复制代码 
    //实现登陆按钮事件
    func LoginButtonClicked(sender:UIButton){
        
    //取出偏好设置的账号和密码
    let accountNum:String =  NSUserDefaults.standardUserDefaults().valueForKey("accountNum")as String
    let passWord:String = NSUserDefaults.standardUserDefaults().valueForKey("password") as String
    
    //进行账号和密码的匹配
    if self.textFiledAccountNum!.text == accountNum && self.textFiledPassWord!.text == passWord{
        
        //创建标签栏控制器
        let TabViewController:UITabBarController? = UITabBarController()
        TabViewController!.tabBar.backgroundColor = UIColor.darkGrayColor()

        
        //创建4个导航栏控制器
        let NavgationVC1:UINavigationController? = UINavigationController()
        let NavgationVC2:UINavigationController? = UINavigationController()
        let NavgationVC3:UINavigationController? = UINavigationController()
        let NavgationVC4:UINavigationController? = UINavigationController()
        
        
        //创建4个子控制器
        let newsVC:NewsViewController? = NewsViewController()
        let contactVC:ContactViewController? = ContactViewController()
        let activeVC:ActiveViewController? = ActiveViewController()
        let meVC:MeViewController? = MeViewController()
        
        
        //设置子控制器导航栏按钮标题
        newsVC!.navigationItem.title = "消息"
        contactVC!.navigationItem.title = "联系人"
        activeVC!.navigationItem.title = "动态"
        meVC!.navigationItem.title = "自己"
        
        
        //设置子控制器标签栏按钮标题
        newsVC!.title = "消息"
        contactVC!.title = "联系人"
        activeVC!.title = "动态"
        meVC!.title = "自己"

        
        
        //将4个子控制器分别推入对应的导航栏控制器
        NavgationVC1!.pushViewController(newsVC!, animated: true)
        NavgationVC2!.pushViewController(contactVC!, animated: true)
        NavgationVC3!.pushViewController(activeVC!, animated: true)
        NavgationVC4!.pushViewController(meVC!, animated: true)
        
       
       //设置标签栏按钮字体大小、选中和未选中时的颜色、偏移位置
        UITabBarItem.appearance().setTitleTextAttributes(
        [NSFontAttributeName:UIFont.systemFontOfSize(15),NSForegroundColorAttributeName:UIColor.purpleColor()], forState: .Normal)
        UITabBarItem.appearance().setTitleTextAttributes(
        [NSForegroundColorAttributeName:UIColor.redColor()], forState: .Selected)
        
        UITabBarItem.appearance().setTitlePositionAdjustment(UIOffsetMake(0, -10))

        
        //往标签栏控制器添加导航栏子控制器
        TabViewController!.addChildViewController(NavgationVC1!)
        TabViewController!.addChildViewController(NavgationVC2!)
        TabViewController!.addChildViewController(NavgationVC3!)
        TabViewController!.addChildViewController(NavgationVC4!)
        
        //模态出一个窗口
        self.presentViewController(TabViewController!, animated: true, completion: nil)
    }
    //输入不正确,就弹出一个提示框
    else{
        
        var alertView:UIAlertView? = UIAlertView(title: "提示信息", message: "账号或密码输入有误", delegate: self, cancelButtonTitle: "确认")
        
        alertView!.show()
     }
  }
}
复制代码

5.在NewsViewcontroller.swift中创建表格，实现协议，选中单元格跳转到聊天界面

复制代码 
import UIKit

class NewsViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

    var tableView:UITableView?
    var arrayM:NSMutableArray?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //初始化
        self.tableView = UITableView(frame: self.view.frame)
        self.arrayM = NSMutableArray()
        for i in 0..<15{
            self.arrayM!.addObject("News--\(i)")
        }
        
        //设置数据源和代理
        self.tableView!.dataSource = self
        self.tableView!.delegate = self
        
        //设置视图背景颜色
        self.view.backgroundColor = UIColor.whiteColor()
        
        //添加到视图
        self.view.addSubview(self.tableView!)
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 15
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        //设置单元格重用标识符
        let identifier = "Cell"
        
        //首先从队列中去取
        var cell :UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(identifier) as? UITableViewCell
        
        //如果没有从队列中获取到,那么就重新创建一个
        if cell == nil{
            
            cell = UITableViewCell(style: .Subtitle, reuseIdentifier: identifier)
        }
        
        //设置单元格内容
        cell!.textLabel!.text = String(self.arrayM!.objectAtIndex(indexPath.row) as NSString)
        cell!.backgroundColor = UIColor.grayColor()
        
        //返回重用单元格
        return cell!
    }
    
    
    //代理协议的方法
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        
        //创建聊天控制器
        let ChatVC:ChatViewController? = ChatViewController()
        
        //将聊天控制器压入栈中
        self.navigationController!.pushViewController(ChatVC!, animated: true)
        
        //获取选中的单元
        var cell:UITableViewCell? = tableView.cellForRowAtIndexPath(indexPath)
        cell!.selected = false
    }
    
}
复制代码

6.在ContactViewcontroller.swift中创建表格，实现协议，选中单元格跳转到聊天界面

复制代码 
import UIKit

class ContactViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

    var tableView:UITableView?
    var arrayM:NSMutableArray?
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //初始化
        self.tableView = UITableView(frame: self.view.frame)
        self.arrayM = NSMutableArray()
        for i in 0..<15{
            self.arrayM!.addObject("Contact--\(i)")
        }
        
        //设置数据源和代理
        self.tableView!.dataSource = self
        self.tableView!.delegate = self
        
        //设置视图背景颜色
        self.view.backgroundColor = UIColor.whiteColor()
        
        //添加到视图
        self.view.addSubview(self.tableView!)
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 15
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        //设置单元格重用标识符
        let identifier = "Cell"
        
        //首先从队列中去取
        var cell :UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(identifier) as? UITableViewCell
        
        //如果没有从队列中获取到,那么就重新创建一个
        if cell == nil{
            
            cell = UITableViewCell(style: .Subtitle, reuseIdentifier: identifier)
        }
        
        //设置单元格内容
        cell!.textLabel!.text = String(self.arrayM!.objectAtIndex(indexPath.row) as NSString)
        cell!.backgroundColor = UIColor.greenColor()
        
        //返回重用单元格
        return cell!
    }
    
    
    //代理协议的方法
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        
        //创建聊天控制器
        let ChatVC:ChatViewController? = ChatViewController()
        
        //将聊天控制器压入栈中
        self.navigationController!.pushViewController(ChatVC!, animated: true)
        
        //获取选中的单元
        var cell:UITableViewCell? = tableView.cellForRowAtIndexPath(indexPath)
        cell!.selected = false
    }
}
复制代码

7.在ActiveViewcontroller.swift中创建表格，实现协议，选中单元格跳转到聊天界面

复制代码 
import UIKit

class ActiveViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

    var tableView:UITableView?
    var arrayM:NSMutableArray?
    
    override func viewDidLoad() {
        super.viewDidLoad()

        //初始化
        self.tableView = UITableView(frame: self.view.frame)
        self.arrayM = NSMutableArray()
        for i in 0..<15{
            self.arrayM!.addObject("Active--\(i)")
        }
        
        //设置数据源和代理
        self.tableView!.dataSource = self
        self.tableView!.delegate = self
        
        //设置视图背景颜色
        self.view.backgroundColor = UIColor.whiteColor()
        
        //添加到视图
        self.view.addSubview(self.tableView!)
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 15
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        //设置单元格重用标识符
        let identifier = "Cell"
        
        //首先从队列中去取
        var cell :UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(identifier) as? UITableViewCell
        
        //如果没有从队列中获取到,那么就重新创建一个
        if cell == nil{
            
            cell = UITableViewCell(style: .Subtitle, reuseIdentifier: identifier)
        }
        
        //设置单元格内容
        cell!.textLabel!.text = String(self.arrayM!.objectAtIndex(indexPath.row) as NSString)
        cell!.backgroundColor = UIColor.cyanColor()
        
        //返回重用单元格
        return cell!
    }

    
    //代理协议的方法
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        
        //创建聊天控制器
        let ChatVC:ChatViewController? = ChatViewController()
        
        //将聊天控制器压入栈中
        self.navigationController!.pushViewController(ChatVC!, animated: true)
        
        //获取选中的单元
        var cell:UITableViewCell? = tableView.cellForRowAtIndexPath(indexPath)
        cell!.selected = false
    }
}
复制代码

8.在MeViewcontroller.swift中创建表格，实现协议，选中单元格跳转到聊天界面

复制代码 
import UIKit

class MeViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

    var tableView:UITableView?
    var arrayM:NSMutableArray?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //初始化
        self.tableView = UITableView(frame: self.view.frame)
        self.arrayM = NSMutableArray()
        for i in 0..<15{
            self.arrayM!.addObject("Me--\(i)")
        }
        
        //设置数据源和代理
        self.tableView!.dataSource = self
        self.tableView!.delegate = self
        
        //设置视图背景颜色
        self.view.backgroundColor = UIColor.whiteColor()
        
        //添加到视图
        self.view.addSubview(self.tableView!)
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 15
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        
        //设置单元格重用标识符
        let identifier = "Cell"
        
        //首先从队列中去取
        var cell :UITableViewCell? = tableView.dequeueReusableCellWithIdentifier(identifier) as? UITableViewCell
        
        //如果没有从队列中获取到,那么就重新创建一个
        if cell == nil{
            
            cell = UITableViewCell(style: .Subtitle, reuseIdentifier: identifier)
        }
        
        //设置单元格内容
        cell!.textLabel!.text = String(self.arrayM!.objectAtIndex(indexPath.row) as NSString)
        cell!.backgroundColor = UIColor.orangeColor()
        
        //返回重用单元格
        return cell!
    }

    
    //代理协议的方法
    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        
        //创建聊天控制器
        let ChatVC:ChatViewController? = ChatViewController()
        
        //将聊天控制器压入栈中
        self.navigationController!.pushViewController(ChatVC!, animated: true)
        
        //获取选中的单元
        var cell:UITableViewCell? = tableView.cellForRowAtIndexPath(indexPath)
        cell!.selected = false
    }
}
复制代码

9.设置聊天界面ChatViewController.swift的背景颜色和标题

复制代码 
import UIKit

class ChatViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = "聊天"
        self.view.backgroundColor = UIColor.purpleColor()
    }
复制代码

 

演示结果截图：

开始时：                　　　　　　　　　　　　     输入错误时：

  

输入正确后显示第一个界面：                                   选择第二个界面：

   

选择第三个界面：                                                       选择第四个界面：

    

随意在一个界面,点击一个单元格,进入聊天界面：   点击自己这个按钮,返回：

     

 

程序猿神奇的手，每时每刻，这双手都在改变着世界的交互方式！
 
 
本文转自当天真遇到现实博客园博客，原文链接： http://www.cnblogs.com/XYQ-208910/p/4908706.html，如需转载请自行联系原作者
文章标签：
数据安全/隐私保护
关键词：
Swift界面
科技小毛
目录
相关文章
Swift社区
|
Swift iOS开发 容器
iOS 仿支付宝银行卡界面(支持Swift/OC)
在有支付相关的APP中，都有对应的钱包，虽然现在的支付宝，微信支付很流行，但是都是需要绑定自己的银行卡，那么这个银行卡的卡包页面该怎么实现呢？在网上找了许久也没有找到合适的，那就索性自己造轮子。
Swift社区
323 0
华章计算机
|
iOS开发
《Swift iOS应用开发实战》——2.3　创建用户界面
华章计算机
1563 0
华章计算机
|
iOS开发
《Swift iOS应用开发实战》——第2章 搭建计算器的界面
华章计算机
1174 0
season雅宁
|
XML 数据安全/隐私保护 数据格式
ios swift模仿qq登陆界面，xml布局
给大家推荐两个学习的地址： 极客学院的视频：http://www.jikexueyuan.com/path/ios/ 一个博客：http://blog.csdn.net/lizhongfu2013/article/details/29210015 主要想要实现一个模仿的登陆界面 代码： // // LoginViewController.
season雅宁
1112 0
杰克.陈
|
JSON Swift 数据格式
Swift实战-豆瓣电台（二）界面布局
原文:Swift实战-豆瓣电台（二）界面布局   观看地址 http://v.youku.com/v_show/id_XNzMwMDg4NzAw.html   这节的内容主要是storyboard的操作。
杰克.陈
828 0
众所周知
|
3月前
|
安全 编译器 Swift
IOS开发基础知识： 对比 Swift 和 Objective-C 的优缺点。
IOS开发基础知识： 对比 Swift 和 Objective-C 的优缺点。
众所周知
89 2
陌陌谣
|
2月前
|
监控 API Swift
用Swift开发iOS平台上的上网行为管理监控软件
在当今数字化时代，随着智能手机的普及，人们对于网络的依赖日益增加。然而，对于一些特定场景，如家庭、学校或者企业，对于iOS设备上的网络行为进行管理和监控显得尤为重要。为了满足这一需求，我们可以利用Swift语言开发一款iOS平台上的上网行为管理监控软件。
陌陌谣
181 2
陌陌谣
|
3月前
|
监控 Swift iOS开发
局域网计算机监控软件中利用Swift构建iOS端的移动监控应用
在局域网计算机监控软件的开发中，构建iOS端的移动监控应用是一项关键任务。本文将介绍如何利用Swift语言实现这一目标，通过多个代码示例展示关键功能的实现。
陌陌谣
223 1
众所周知
|
3月前
|
安全 JavaScript 前端开发
IOS开发基础知识：介绍一下 Swift 和 Objective-C，它们之间有什么区别？
IOS开发基础知识：介绍一下 Swift 和 Objective-C，它们之间有什么区别？
众所周知
65 0
咖啡教室
|
5月前
|
JavaScript 前端开发 PHP
用swift开发ios移动端app应用初体验
直接跟着 apple 官方的 SwiftUI 教程跑的，写惯了 javascript 奔放的代码，很多语法理解起来还是有点费劲
咖啡教室
57 1

热门文章

最新文章

  • 1
    Swift 面试题及答案整理，最新面试题
  • 2
    《从零开始学Swift》学习笔记（Day 29）——访问级别
  • 3
    Swift中FDMB的使用（增、删、改、查）
  • 4
    Object-C---&gt;Swift之(四)强大的Switch
  • 5
    Swift 柯里化(Currying)
  • 6
    《从零开始学Swift》学习笔记（Day 25）——类和结构体定义
  • 7
    Swift初体验之HelloWord+苹果Swift编程语言入门教程【中文版】
  • 8
    苹果公司揭秘首批列入 Swift 源代码兼容性开源项目清单
  • 9
    swift4.1 系统学习七
  • 10
    《从零开始学Swift》学习笔记（Day58）—— Swift编码规范之变量或常量声明规范
  • 1
    基于Swift的局域网连接状态监视器：监控局域网内电脑
    135
  • 2
    解决新版xcode下swift .infinity报Invalid frame dimension (negative or non-finite)错误
    59
  • 3
    用Swift开发iOS平台上的上网行为管理监控软件
    181
  • 4
    ITMS-90433: Invalid Swift Support
    14
  • 5
    开心档之 Swift 访问控制访问控制
    21
  • 6
    【Swift专题】聊聊Swift中的属性
    40
  • 7
    Swift 语言：什么是 Swift 的泛型（Generics）？
    35
  • 8
    Swift 语言： 什么是协议（Protocol）？如何实现和使用协议？
    41
  • 9
    Swift 语言：什么是值类型和引用类型？Swift 中有哪些值类型和引用类型？
    35
  • 10
    Swift 语言：什么是闭包（Closure）？它们与函数的区别是什么？
    32

    • 相关课程

    更多
  • Swift 速成

    • 相关电子书

    更多
  • OpenStack Swift 海量小文件优化之路
  • From Java/Android to Swift iOS
  • Swift在Airbnb的应用实践
    • 下一篇
    阿里云oss简介和使用流程