iOS Swift 学习手册 首页投稿(暂停使用,暂停投稿)iOS学习

Swift之UI阶段学习总结(二)

2016-09-03  本文已影响590人  Youth丶夏夏
Swift之UI-杨夏

第一天

视图控制器

1.视图控制器的创建

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

        //!!!1.视图控制器本身不显示,但是每个视图控制器都有一个view的属性,专门用来负责视图控制器的显示。想要显示在视图控制器上的内容,需要添加到它是view属性上
        //2.在使用视图控制器的时候,一般不直接使用UIViewController这个类,而是通过继承UIViewController写一个自己的视图控制器类
        //3.在一个应用程序中,一般一个界面对应一个视图控制器
        
        
        //1.创建window对象
        self.window = UIWindow.init(frame: UIScreen.mainScreen().bounds)
        
        //2.设置根视图控制器
        //创建视图控制器对象:
        //a.创建手写的视图控制器
        let root1 = FirstViewController()
        //每个视图控制器都有一个view属性,负责显示
        root1.view.backgroundColor = UIColor.redColor()
        
        //b.通过xib去创建视图控制器
        //创建一个类继承自UIViewController,创建的时候将"also creat XIB"选上
        //直接用最简单的方法创建对应的类的对象
        let root2 = ThirdViewController()
        //通过直接通过xib创建视图控制器的方法去创建
        //参数1:xib文件名
        let root4 = ThirdViewController(nibName: "ThirdViewController", bundle: nil)
        
        //c.通过storyboard去创建视图控制器
        //拿到storyboard文件对应的对象
        //参数1:storyboard文件名
        let storyboard = UIStoryboard.init(name: "Second", bundle: nil)
        //拿到storyboard文件中箭头指向的视图控制器
        let root3 = storyboard.instantiateInitialViewController()
        
        //设置window的根视图控制器(window上默认显示的就是它的根视图控制器)
        self.window?.rootViewController = root4
        
        return true
    }
}

2.视图控制器的生命周期

import UIKit

//视图控制器的生命周期:指的是视图控制器里面的view属性从创建到消失的过程

class FirstViewController: UIViewController {
    
    //MARK: - 生命周期
    //注意:重写生命周期相关的方法的时候必须通过super去调用父类的相关方法
    //1.开始创建视图控制器的view的属性的时候会自动调用(创建一个视图控制器只会调用一次)
    override func loadView() {
        super.loadView()
        
        print("创建view")
    }
    
    //2.view属性已经加载完成之后会自动调用(创建一个视图控制器只会调用一次)
    //一般在这个方法中去搭建当前视图控制器对应的界面
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //设置背景颜色
        self.view.backgroundColor = UIColor.greenColor()
        //添加按钮
        let button = UIButton.init(frame: CGRectMake(100, 100, 100, 50))
        button.setTitle("下一页", forState: .Normal)
        button.addTarget(self, action: "buttonAction", forControlEvents: .TouchDown)
        self.view.addSubview(button)
        
        print("view加载完成")
    }
    
    //3.每次view将要出现的时候会调用(可能会被调用多次)
    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        print("view将要出现")
    }
    
    //4.每次view已经出现的时候会调用(可能会被调用多次)
    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        print("view已经出现")
    }
    
    //5.每次view将要消失的时候会调用(可能会被调用多次)
    override func viewWillDisappear(animated: Bool) {
        super.viewWillDisappear(animated)
        print("view将要消失")
    }
    
    //6.每次view已经消失的时候会调用(可能会被调用多次)
    override func viewDidDisappear(animated: Bool) {
        super.viewDidDisappear(animated)
        print("view已经消失")
    }

    //接收到内存警告的时候自动调用
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

//MARK: - 按钮点击
extension FirstViewController{

    func buttonAction() {
        //点击按钮进入下一页:
        //1.创建下一页对应的视图控制器对象
        let second = SecondViewController()
        //2.将视图控制器展示出来(模态化弹出下一个界面)
        //参数1:想要显示的视图控制器对象
        //参数2:是否有动画效果
        //参数3:界面切换完成后,想要执行的代码对应的闭包
        self.presentViewController(second, animated: true, completion: nil)
    }
}

//页面切换说明:
        //回到上一页(注意:只有通过present的形式添加的视图控制器,才能通过dismiss方法让其消失,并且销毁)
        //参数1:是否动画
        //参数2:当前界面消失后想要执行的代码对应的闭包
        //self.dismissViewControllerAnimated(true, completion: nil)


3.转场动画

//转场动画,就是界面切换的时候的动画效果。
        //1.添加转场动画
        //a.创建转场动画对象
        let animation = CATransition.init()
        //b.设置动画时间
        animation.duration = 0.4
        //c.设置动画类型
        //"rippleEffect"
        animation.type = "oglFlip"
        //d.设置动画方向
        animation.subtype = kCATransitionFromRight
        //e.添加动画
        //可以通过任何已经显示在界面上的视图去拿到当前应用程序的window(主窗口)
        self.view.superview?.layer.addAnimation(animation, forKey: nil)

小技巧:在平时用的时候显然这种方法非常繁琐,我们可以通过继承UIView写一个关于转场动画的封装函数,在用的时候直接调用其方法,不仅大大减少了工作量,而且使动画得到了更好地扩展。

//自定义视图切换动画
//宏
 kCATransitionFade 交叉淡化过渡 

kCATransitionMoveIn 新视图移到旧视图上面
kCATransitionPush 新视图把旧视图推出去
kCATransitionReveal 将旧视图移开,显示下面的新视图

//字符串
 pageCurl 向上翻一页 

pageUnCurl 向下翻一页
rippleEffect 滴水效果
suckEffect 收缩效果,如一块布被抽走
cube 立方体效果
oglFlip 上下翻转效果
cameraIrisHollowOpen
cameraIrisHollowClose

kCATransitionFromRight;

kCATransitionFromLeft(默认值)
kCATransitionFromTop;
kCATransitionFromBottom

4.容器视图控制器

** 用法指南:**使用容器视图控制器可以实现视图的侧滑

import UIKit

class FirstViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.greenColor()

        //1.创建视图控制器对象
        let second = SecondViewController()
        
        //2.将second作为当前视图控制器的子视图控制器
        //当前视图控制器就可以将second的view属性当成一般的视图去使用
        self.addChildViewController(second)
        
        //a.将second的view作为子视图添加到当前界面上
        self.view.addSubview(second.view)
        //b.设置second的view的frame(默认坐标是(0,0),大小是屏幕的大小)
        //second.view.frame = CGRectMake(100, 0, self.view.bounds.width, self.view.bounds.height)
    }
}

第二天

传值

1.正向传值

正向传值:将上一个界面的值传到下一个界面
方法:
1.在下一个界面中声明一个要传的值的类型的属性。例:将上一个界面(First)中的文本输入框中的文字传到下一个界面(Second)。只需要在下一个界面(Second)中声明一个String类型的属性
2.上一个界面弹出下一个界面的时候,通过属性去传值
3.在下一个界面中去使用传过去的值(在生命周期的ViewDidLoad及ViewDidLoad以后调用的方法中都可以使用)

2.反向传值

2.1反向传值(闭包)

用闭包做反向传值,就是利用闭包的声明、实现和调用:
1.在下一个界面中声明闭包(将要传的值通过闭包的参数来传)
2.在上一个界面中界面跳转到下一个界面的时候去实现闭包
3.在下一个界面消失的时候去调用闭包

//1.***(闭包)属性***页面2
    var sendValue: ((String)->Void)? = nil
//2.***实现闭包***页面1
    let second = SecondViewController()
    second.sendValue = { (value)->Void in
    //使用从上一个界面传来的值
    self.textFiled.text = value
    }
//3.***调用闭包***页面2
    self.sendValue!(self.textFiled.text!)

2.2反向传值(消息中心)

消息中心:相当于生活中的广播站。1.用来发送消息;2.一个消息中心可以发送多条消息,每条消息以不同的消息名来区分
观察者:相当于收音机。1.用来接收消息;2.能接收到消息的前提:a.消息中心发送消息,并且是实时的 b.观察者观察的消息名要和消息中心发送的消息的消息名保持一致 3.同一个观察者可以接收不同的消息
消息:消息中心发出的内容/观察者接收的内容

消息中心做反向传值:在下一个界面中使用消息中心发送消息(消息的内容就是要传的值);在上一个界面注册观察者来接收消息

//1.使用消息中心发送消息(消息的内容就是要传的值)
        //a.拿到消息中心(单例对象)NSNotificationCenter.defaultCenter()
        //b.发送消息
        //参数1:消息名(相当于频段)
        //参数2:要发送的消息的内容
       NSNotificationCenter.defaultCenter().postNotificationName("nof1", object: self.textField.text)
        
        
//2.注册成为观察者
        //参数1:观察者对象
        //参数2:消息中心发送消息的时候观察者会自动调用的方法对应的selector(观察者接收到消息后会调用的方法)-->必须带一个参数,并且参数的类型是NSNotification
        //参数3:观察者要观察的消息的名字
        NSNotificationCenter.defaultCenter().addObserver(self, selector: "notificationAction:", name: "nof1", object: nil)
        func notificationAction(nof:NSNotification) {
            self.textField.text = nof.object as? String
    }
    
//移除观察者
        /*
        NSNotificationCenter.defaultCenter().removeObserver(self)
        NSNotificationCenter.defaultCenter().removeObserver(self, name: "nof2", object: nil)
         */

2.3反向传值(单例)

class ValueManager: NSObject {
    
    //1.保证当前这个类只能创建出一个对象,而且这个对象必须defalutManager去拿到
    //拿到当前这个类唯一的对象
    static let defalutManager = ValueManager()
    
    //构造方法私有化
    private override init() {
    }
    
    //2.声明一个属性的类型是需要传的值的类型
    var sendValue = ""
}

//3.拿到单例对象,并且给属性赋值
        ValueManager.defalutManager.sendValue = self.textField.text!
        
//4.通过单例对象拿到值
        self.textField.text = ValueManager.defalutManager.sendValue

第三天

导航控制器

1.导航控制器:
UINavigationController : UIViewController ->UIViewController的属性和方法UINavigationController都拥有
a.默认会显示一个导航条,还有一个隐藏的工具条;
b.是系统自带的一个封装好的容器视图控制器,专门用来管理其他的视图控制器。通过一个栈结构的容器来管理。
c.导航控制器上永远显示的是当前栈结构中的栈顶元素(最上层的视图控制器对象)。
d.可以通过将视图控制器设置为导航控制器的根视图控制器和通过导航控制器调用push方法将视图控制器添加到导航控制器的栈结构中。
e.通过导航控制器调用pop方法将栈结构中的视图控制器移除

    self.window = UIWindow.init(frame: UIScreen.mainScreen().bounds)
    self.window?.backgroundColor = UIColor.whiteColor()
    //1.创建导航控制器对象(导航控制器必须有一个根视图控制器)
    let navC = UINavigationController.init(rootViewController: FirstViewController())


    //2.将指定的控制器添加到导航控制器的栈结构中
    //push -> 入栈
    let second = SecondViewController()
    navC.pushViewController(second, animated: true)


    //3.1将导航控制器栈结构中的栈顶元素移除
    //pop -> 出栈
    navC.popViewControllerAnimated(true)

    //3.2将当前导航控制器对应的栈结构中,除了根视图以外其他的视图控制器对象全部移除
    //navC?.popToRootViewControllerAnimated(true)

    //3.3将导航控制器对应的栈结构中,指定的视图控制器对象前面的所有的视图控制器移除
    //参数1:指定的视图控制器
    //a.拿到当前导航控制器的所有的子视图控制器(拿到栈结构中的所有的对象)
    let childArray = navC?.childViewControllers
    navC?.popToViewController(childArray![1], animated: true)


    //4.将导航控制器作为window的根视图控制器
    self.window?.rootViewController = navC


** 2.导航控制器的定制:**
a.navigationBar和navigationItem
navigationBar:宽度是屏幕的宽度,高度是64的导航条(20(状态栏的高度)+44) -> 属于导航控制器
navigationItem:指的是导航条上的内容(文字、按钮、分段选择器等) -> 属于让导航控制器管理的视图控制器
b.toolBar和toolBarItem
toolBar:默认隐藏的,工具条 -> 属于导航控制器
toolBarItem:指的是工具条上的内容 -> 属于让导航控制器管理的视图控制器

navigationBar:整体定义
//定制导航条
func navigationItemSetting() {    
    //1.定制rightItem
    //a.通过其他视图来创建一个UIBarButtonItem对象
    let btn = UIButton.init(frame: CGRectMake(0, 0, 50, 30))
    btn.setTitle("注册", forState: .Normal)
    btn.setBackgroundImage(UIImage.init(named: "buttonbar_action.png"), forState: .Normal)
    btn.setTitleColor(UIColor.greenColor(), forState: .Normal)
    btn.addTarget(self, action: "btnAction", forControlEvents: .TouchDown)
    let item1 = UIBarButtonItem.init(customView: btn)

    //b.通过一张图片创建一个UIBarButtonItem对象
    //参数1:图片
    //参数2:item的风格
    //参数3:调用方法的对象
    //参数4:当当前item对应的按钮被点击后会调用的方法
    let item2 = UIBarButtonItem.init(image: UIImage.init(named: "itemImage")?.imageWithRenderingMode(.AlwaysOriginal), style: .Plain, target: self, action: "itemAction:")

    //c.通过文字去创建一个UIBarButtonItem对象
    let item3 = UIBarButtonItem.init(title: "注册", style: .Plain, target: self, action: "itemAction:")

    //d.通过系统样式去创建UIBarButtonItem对象
    //参数1:指定的系统样式
    let item4 = UIBarButtonItem.init(barButtonSystemItem: .Add, target: self, action: "itemAction:")


    //2.设置navigationBar右边的显示
    //a.在右边显示一个视图
    self.navigationItem.rightBarButtonItem = item4
    //b.在右边显示显示多个视图
    //self.navigationItem.rightBarButtonItems = [item4,item3]

    //3.设置navigationBar左边的显示
    self.navigationItem.leftBarButtonItem = item2
    //self.navigationItem.leftBarButtonItems = [item1, item2]

    //4.设置navigationBar中间的显示
    //a.显示纯文字
    self.title = "登录"

    //b.通过一个label显示文字
    let label = UILabel.init(frame: CGRectMake(0, 0, 100, 30))
    label.text = "登录"
    label.textColor = UIColor.yellowColor()
    label.textAlignment = .Center

    //c.创建中间显示的分段选中器
    let segement = UISegmentedControl.init(items: ["海贼","火影"])
    segement.frame = CGRectMake(0, 0, 100, 40)
    segement.selectedSegmentIndex = 0

    //设置中间视图
    self.navigationItem.titleView = segement
}
    //1.替换系统自带的返回按钮 -> 设置leftBarButtonItem属性
    let item2 = UIBarButtonItem.init(barButtonSystemItem: .Done, target: self, action: "itemAction")

    //self.navigationItem.leftBarButtonItem = item2

    //2.隐藏系统自带的返回按钮
    self.navigationItem.hidesBackButton = true

toolBar:整体定义
    //1.定制toolBar(高度是44)
    //toolBar属于导航控制器,默认是隐藏的
    //a.让toolBar显示出来
    self.toolbarHidden = false

    //b.设置是否有透明度(默认true->有透明度)
    self.toolbar.translucent = false

    //c.设置背景颜色
    self.toolbar.barTintColor = UIColor.yellowColor()
    //d.设置填充颜色
    self.toolbar.tintColor = UIColor.redColor()


    //2.定制导航条
    //a.设置背景颜色
    self.navigationBar.barTintColor = UIColor.blackColor()

    //b.设置填充颜色
    self.navigationBar.tintColor = UIColor.whiteColor()

toolBarItem
func toolBarItemSetting() {
    //创建toolBar上显示的按钮对应的item
    let item1 = UIBarButtonItem.init(barButtonSystemItem: .Camera, target: self, action: "toolBarAction")
    let item2 = UIBarButtonItem.init(barButtonSystemItem: .Add, target: self, action: "toolBarAction")
    let item3 = UIBarButtonItem.init(barButtonSystemItem: .Edit, target: self, action: "toolBarAction")
    let item4 = UIBarButtonItem.init(barButtonSystemItem: .Refresh, target: self, action: "toolBarAction")


    //a.FlexibleSpace(相当于空格,用来设置每个item之间的间距,间距是自动计算的)
    let space1 = UIBarButtonItem.init(barButtonSystemItem: .FlexibleSpace, target: nil, action: "")
    //b.FixedSpace(相当于空格,用来设置每个item之间的间距,间距需要手动设置)
    let space2 = UIBarButtonItem.init(barButtonSystemItem: .FixedSpace, target: nil, action: "")
    //设置间距
    space2.width = 20

    //将item添加到toolBar上
    self.toolbarItems = [space2,item1,space2,item2,space2,item3,space2,item4,space2]
}

心灵鸡汤:将状态栏变成白色(默认是黑色)

//1.在info.plist文件中去添加一个键值对 -> View controller-based status bar appearance:NO
//2.通过应用程序对象改变状态栏的样式
//a.拿到当前应用程序对象
let app = UIApplication.sharedApplication()
//b.设置状态栏的样式
//LightContent -> 白色
app.statusBarStyle = .LightContent

第四天

标签栏视图控制器(UITabBarController)

1.UITabBarController基础

UITabBarController:UIViewController
UITabBarController是一个容器视图控制器,专门用来管理其他的视图控制器。如果将视图控制器交给UITabBarController管理的话,UITabBarController会自动在它的tabBar上创建一个对应标签,然后每次选中这个标签的时候,界面就会自动切换到这个视图控制器

//将视图控制器交给标签栏控制器管理的方法:

    //1.创建window
    self.window = UIWindow.init(frame: UIScreen.mainScreen().bounds)
    self.window?.backgroundColor = UIColor.whiteColor()

    //2.创建标签栏控制器
    //a.创建对象
    let tabBarC = YTTabBarController()
    //b.将需要交给标签栏控制器管理的视图控制器对象创建出来
    let one = OneViewController()
    let two = TwoViewController()
    let there = ThereViewController()
    let four = FourViewController()
    //c.将视图控制器交给标签栏控制器管理
    //标签控制器会自动创建每个视图控制器对应标签
    //注意:标签栏控制器的标签栏上最多能显示5个标签。如果有超过5个子视图控制器,那么第5个和超出的视图控制器的标签会被"more"标签代替
    tabBarC.viewControllers = [one,two,there,four]
    //d.设置默认选中的标签
    tabBarC.selectedIndex = 2

    //3.将标签栏控制器作为window的根视图控制器
    self.window?.rootViewController = tabBarC

2.UITabBarController的定制

UITabBarController的定制分两个部分(整体定义即可):
1.tabBar -> 属于标签栏控制器

2.tabBarItem -> 属于标签栏控制器管理的视图控制器

//MARK: - 定制tabBar(高度:49)
func tabBarSetting() {

    //1.设置是否透明(默认true->有透明度)
    self.tabBar.translucent = true
    //2.设置背景颜色
    self.tabBar.barTintColor = UIColor.whiteColor()
    //3.设置背景图片
    //self.tabBar.backgroundImage = UIImage.init(named: "bg")
    //4.设置填充颜色
    self.tabBar.tintColor = UIColor.orangeColor()
}

//MARK: - 定制tabBarItem
func tabBarItemSetting() {

    //拿到tabBar上所有的tabBarItem对象
    let items = self.tabBar.items

    //创建所有的title和图片名对应的数组
    let titles = ["条漫","绘本","专题","我的"]
    let imageNames = ["tiaoman","huiben","zhuanti","wode"]

    //设置item
    for (i,item) in items!.enumerate() {
        //设置标题
        item.title = titles[i]
        //设置正常状态的图片
        item.image = UIImage.init(named: imageNames[i]+"_u")?.imageWithRenderingMode(.AlwaysOriginal)
        //设置选中状态的图片
        item.selectedImage = UIImage.init(named: imageNames[i]+"_d")?.imageWithRenderingMode(.AlwaysOriginal)

        //设置文字属性
        item.setTitleTextAttributes([NSFontAttributeName:UIFont.systemFontOfSize(13),NSForegroundColorAttributeName:UIColor.lightGrayColor()], forState: .Normal)
        item.setTitleTextAttributes([NSFontAttributeName:UIFont.systemFontOfSize(13),NSForegroundColorAttributeName:UIColor.orangeColor()], forState: .Selected)
    }
}

应用程序界面框架搭建

说明:结合以上所学知识我们就可以进行简单的应用程序界面搭建,图示如下:

应用程序界面框架搭建示意图

第五天

UITouch

所有继承自UIResponder的类(UIView和UIViewController)都可以去重写UITouch的相关方法,去检测视图的开始触摸、结束触摸以及移动等触摸相关事件
触摸只有在视图可以接收用户交互的时候才会有效。UILabel和UIImageView默认都是不能进行用户交互

//1 每次开始触摸的时候会自动调用
override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    print("开始触摸:\(touches)")
    //参数1:touches->在多个手指同时触摸屏幕的时候只能获取到一个触摸对象
    //拿到当前的触摸对象
    let touch = touches.first
    //拿到当前触摸点的位置
    //参数:计算坐标的相对视图
    let location = touch?.locationInView(self.view)
    print(location)

    //参数2:event -> 可以拿到多个触摸对象
    let allTouches = event?.allTouches()
    print("ALL:\(allTouches?.count)")
    //遍历拿到每个触摸对象
    for item in allTouches! {
       print(item.locationInView(self.view))
    }

    //设置球的坐标,让其出现在开始触摸的位置
    self.ball.center = location!
}

//2 每次触摸结束的时候会自动调用
override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
    print("触摸结束")
}

//3 手指在屏幕上移动的时候会实时调用
override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
    print("移动")
}

//打开label的用户交互
label.userInteractionEnabled = true

手势集合

点击手势 - UITapGestureRecognizer
长按手势 - UILongPressGestureRecognizer
滑动手势 - UISwipeGestureRecognizer
拖动手势 - UIPanGestureRecognizer
缩放手势 - UIPinchGestureRecognizer
旋转手势 - UIRotationGestureRecognizer

上一篇下一篇

猜你喜欢

热点阅读