IOS UI第二次总结
视图
视图控制器
1.视图控制器本身不显示,但是每个试图控制器都有一个View的属性,专门用来负责视图控制器的显示。想要显示在视图控制器上的内容,需要添加到它的View属性上
2.在使用视图控制器的时候,一般不直接使用UIViewController这个类,而是通过继承UIViewController写一个自己的视图控制器类
3.在一个应用程序中,一般一个界面对应一个视图控制器
根视图控制器
点击AppDelegate.swift文件->选择方法application
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
//1创建window对象
self.window = UIWindow.init(frame:UIScreen.mainScreen)
//2设置背景色
self.window?.backgroundColor = UIColor.whiteColor()
//3设置根视图
self.window?.rootViewController = MYViewController()
}
这样就可以从默认的ViewController里出来,进入自己创建的视图控制器里了。
视图控制器的生命周期
1.overrride func loadView() {super.loadView()}
开始创建视图控制器的View的是属性的时候回自动调用(创建一个视图控制器只会调用一次)
2.override func viewDidLoad() {super.viewDidLoad()}
View属性已经加载完成之后制动调用(创建一个视图控制器只会调用一次,一般在这个方法中去搭建当前视图控制器对应的界面)
3.override func viewWillAppear(animated:Bool) {
super.viewWillAppear(animated)
}
每次View将要出现的时候调用(可被多次调用)
4.override func viewDidAppear(animated:Bool) {
super.viewDidApperar(animated)
}
每次View已经出现的时候会调用(可被多次调用)
5.override func viewWillDisAppear(animated:Bool) {
super.viewDidDisappear(animated)
}
每次VIEW将要消失的时候回调用(可被多次调用)
6.override func viewDidDisappear(animated:Bool) {
super.viewDidDisappear(animated)
}
每次View已经消失的时候会调用(可被多次调用)
7.override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
容器视图控制器
关于视图之间的切换
1.创建2个视图继承UIViewController,分别为one和two
2.在one内添加一个按钮,并为按钮添加点击事件
func btn1Action(){
//two为第二个视图控制器
let two = twoViewController()
//跳转到下一界面
self.presentViewController(two,animated:true,completion:nil)
}
3.如果希望返回第一个界面,只需要在two添加按钮及点击事件
func btn2Action() {
//让当前界面消失
self.dismissViewControllerAnimated(fasle,completion:nil)
}
例子:使用容器视图控制器制作一个手机QQ的特效
//准备工作
//1.首先在AppDelegate中将根视图设为第一个视图
//2.分别创建2个视图控制器继承UIViewController
class oneViewController:UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroudColor = UIColor.blueColor()
//1创建子视图控制器对象
let two = twoViewController()
//2将第二个视图控制器变成一般的视图
self.addChildViewController(second)
//3将two视图作为子视图添加到当前界面上
self.view.addSubview(two.view)
}
}
//编辑第二个视图
class twoViewController:UiviewController {
override func viewDidLoad() {
super.viewDidLoad
self.view.backgroundColor = UIColor.whiteColor()
let btn =UIButton(frame:CGRectMake(20,50,100,50))
btn.setTitle("头像",forState:.Normal)
btn.addTarget(self,action:"btnAction:",forControlEvents:.TouchDown)
self.view.addSubView(btn)
}
func btnAction(btn:UIButton) {
if self.view.frame.origin.x == 0{
//点击头像发生侧滑
UIVive.animateWithDuration(0.4){
self.view.frame.origin.x = 200
self.view.transform = CGAffineTransformMakeScale(0.5,0.5)}}
else {
UIView.animateWithDuration(0.4,animations:{
self.view.frame.origin.x = 93.75
self.view.transform = CGAffineTransformMakeScale(1,1)
})
}
}
}
导航控制器(从上方对界面进行选取)
准备:创建3个视图继承MYViewController,而MYViewController继承UIViewController
在AppDelegate.swift中进行根视图的创建
func application(application:UIApplication,didFinishLaunchingWithOptions launchOptions:[NSObject:AnyObject]?)->Bool{
self.Window = UIWindow.init(frame:UIScreen.mainScreen().bounds)
self.window?.backgroundColor = UIColor.whiteColor()
//1.创建导航视图控制器
let navC = UINavigationController.init(rootViewController:firstViewController)
//2.将导航控制器作为window的根视图控制器
self.window?.rootViewController = navC
return true
}
对MYViewController进行编辑
class MyViewController:ViewController {
override func viewDidLoad() {
super.viewDidLoad()
creatUI()
}
func creatUI() {
//设置背景色为随机色,方便观察视图间的切换
self.view.backgroundColor = UIColor.init(red:CGFloat(arc4random()%256)/255,green:CGFloat(arc4random()%256)/255,blue:CGFloat(arc4random()%256/255),alpha:1)
//创建按钮来切换视图
let btn =UIButton.init(frame:CGRectMake(100,100,100,50))
btn.backgroundColor = UIColor.blackColor()
btn.setTitle("下一页",forState:.Normal)
btn.addTarget(self,action:"btnAction",forControlEvents:.TouchDown)
self.view.addSubview(btn)
}
//按钮点击事件
func btnAction(){
}
}
对其他3个视图进行编辑
class firstViewController:MYViewContoller{
override func ViewDidLoad(){
super.viewDidLoad()
self.title = "1"
}
override func btnAction() {
//1.拿到当前视图控制器对应的导航控制器
let navC = self.navigationController
//2.创建需要push到导航控制器中的视图控制器对象
let second = secondViewController()
//3通过push将需要添加到视图控制器添加到导航控制器的栈结构中
navC?.pushViewController(second,animated:true)
}
}
clss secondViewController:MYViewController{
override func viewDidLoad() {
super.viewDidLoad()
self.title = "2"
}
override func btnAction(){
self.navigationController?.pushViewController(thirdViewContoller(),animated:true)
}
}
class thirdViewController:MYViewController {
override func viewDidLoad(){
super.viewDidLoad()
self.title = "3"
}
override func btnAction() {
let navC = self.navigationController
let childArray = navC?.childViewControllers
navC?.popToViewController(childArray![0])//返回第一个界面,根据数组判断在第几个界面
}
}
对导航控制器进行设置
准备:创建
MYNavigationController:UINavigationController {
override func viewDidLoad(){
super.viewDidLoad()
//在这里设置
}
}
定制导航条
1.设置是否有透明度(默认有透明度)
//true ->视图从(0,0)开始
//false->视图从(0,64)开始
self.navigationBar.translucent = false
2.设置导航条背景色
self.navigationBar.barTintColor = UIColor.orangeColor()
3.设置背景图片
self.navigationBar.setBackgroundImage(UIImage.init(name:"image"),forBarMetrics:.Default)
4.设置渲染色(默认是蓝色)
self.navigationBar.tintColor = UIColor.redColor()
5.设置导航条中间默认显示的文字的属性
//NSFontAttributeName - 对应的字体大小
//NSForegroundColorAttributeName - 对应的字体颜色
self.navigationBar.titleTextAttributes = [NSFontAttributeNmae:UIFont.systemFontOfSize(20),NSForegroundColorAttributeName:UIColor.whiteColor()]
<通过背景色的转换,我们可以清楚的看见使用导航控制器控制几个几面之间相互切换>
关于navgationController(状态栏)
1.如何将状态栏上的系统信息变为白色
方法1:
在info.plist文件中添加一个键值对 -》view controller - base Status bar - apperence
方法2.通过应用程序对象改变状态栏的样式
//a拿到当前程序独享
let app = UIApplication.sharedApplication()
//b设置状态栏的样式
//lightContent ->白色
app.statusBarStyle = .LightContent
2.定制NavgationController
a准备
创建一个MYnavigationControlller继承自UINavigationController
创建2个UIViewController,分别为one和two
b定制
1.在MYNavigationController中设置
override func viewDidLoad(){
super,viewDidLoad()
//设置背景色
self.navigationBar.barTintColor = UIColor.blackColor()
//设置填充色
self.navigationBar.tintColor = UIColor.whiteColor()
}
2.在oneViewController中设置
override func viewDidLoad(){
super.viewDidLoad()
self.navigationItemSetting()
}
//MARK:-定制rightItem
extension oneViewController{
1.定制rightItem
func navigationItemSetting(){
//1创建UIBarButtomItem
let btn = UIButton.init(frame:CGRectMake(0,0,50,40))
btn.setTitle("注册",forState:.Normal)
btn.setBackgroundImage(UIImage.init(named:"image"),forState:.Normal)
btn,setTitleColor(UIColor.blueColor(),forState:.Normal)
btn.addTarget(self,action:"btnAction",forControlEvent:.TouchDown)
//通过其他的的视图来创建一个UIBarButtonItem对象
let item1 = UIBarButtonItem.init(customView:btn)
self.navigationItem.rightBarButtonItem = item1
//b参数1图片;参数2;item风格;参数3:调用方法的对象;参数4:当前item被点击调用的方法
let item2 = UIBarButtonItem.init(iamge:UIImage.init(named:"image")?.imageWithRenderingMode(.AlwaysOriginal),style:.Plain,target:self,action:"itemAction")
self.navgationItem.rightBarButtonItem = item2
//c:通过文字去创建一个UIBarButtonItem
let item3 = UIBarButtonItem.init(title:"注册",style:.Plain,target:self,action:"itemAction")
self.navigationItem.rightBarButtonItem = item3
//d通过系统样式创建
let item4 = UIBarButtonItem.init(batButtonSystemItem:.Play,target:self,action:"itemAction")
self.navigationItem.rightBarButtonItem = item4
//2右边显示多个按钮
self.navigationItem.rightBarButtonItems = [item1,item4]
//3左边显示多个按钮
self.navigationItem.leftBarButtonItems = [item2,item3]
//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 segeent = UISegmentedControl.init(items:["界面1","界面2"])
//可以通过segment.addTarget来添加点击事件
segment.frame = CGRectMake(0,0,100,40)
segment.selectedSegmentIndex = 0
//设置中间实体self.navigationItem.titleView = segment
}
func itemAction(){
let two = twoViewController()
self.navigationController?.pushViewCOntroller(second,animated:true)
}
func btnAction(){
print("按钮被点击")
}
}
3在twoViewController中设置
override func viewDidLoad(){
super.viewDidLoad()
self.view.backgroundColor = UIColor.orangeColor()
let item = UIBarButtonItem.init(barButtonSystemItem:.Cancel,target:self,cation:"itemAction")
self.navigationItem.rightBarButtonItem = item
//1.替换系统自带的返回按钮->设置leftBarButtons属性
let item2 = UIBarButtonItem.init(barButtonSystemItem:.Done,target:self,action:"ItemAction")
self.navigationItem.leftBarButtonItem = item2
//隐藏系统自带的返回按钮
self.navigationItem.hidesBackButtton = true
}
func itemAction(){
self.navigationController?.popViewControllerAnimated(true)
}
3.定制toolbar
我们可以接着在上面的工程中写
在MYNavigationContoller中我们可以对toolbar进行定制
a.让toolBar现实出来
self.toolbarHidde = false
b.设置是否透明
self.toolbar.translucent = false
c设置背景色
self.toolbat.barTintColor = UIColor.greenColor()
d设置渲染色
self.toolbar.tinColor = UIColor.blackColor()
接下来在oneViewController中定制toolBarItem
func toolBarItemSetting(){
let item1 = UIBarButtonItem.init(barButtonSystenItem:.Camera.target:self,action)
let item2 = UIBarButtonItem.init(barButtonSystemItem:.Play,target:self,action:"toolBarAction")
let item3 = UIBarButtonItem.init(batButtonSystemItem:.Reply,target:self,action:"toolBarAction")
let item4 = UIBarButtonItem.init(barButtonSystemItem:.Save,target:self,action:"toolBarAction")
//注:flexiblespace(相当于空格,用来设置每个item之间的间距,间距是自动计算的)
let spacel = UIBarButtonItem.init(barButtonSystemItem:.FlexedSpace,target:self,action:"")
//注:fixedSpace(相当于空格,用来设置每个item之间的间距,间距是手动计算的)
let space2 = UIBarButtonItem.init(barButtonSystemItem:.FixedSpace,target:self,action:"")
//设置间距
space2.width = 40
//将item2添加到toolbar上
self.toolbatItem = [space2,item2,space2,item1,space2,item3,space3,item4,space2]
}
func toolBarAction(){
print("被点击")
}
标签栏视图控制器(在视图下方显示)
关于UITabBarController:UIViewCOntroller
UItabBarController是一个容器视图控制器,专门用来管理器其他的视图控制器,如果将视图控制器交给UITabBarController管理的话,UITabBarController会自动在他的Tabbar上创建一个对应的标签,然后每次选中这个标签的时候,界面会自动切换到这个视图控制器。
注意:标签栏控制器的标签栏上最多显示5个标签,如果超过5个,那么第五个标签和超出的视图控制器的标签会被“more”标签代替
使用方法
准备:创建MYTabBarController,MYViewController,并创建3个视图继承MYViewController,在APPDelegate中使用
//1.创建window
self.window = UIWindow.init(frame:UISreen.mainScreen().bounds)
self.window?.backgroundColor = UIColor.whiteColor()
//2.创建标签栏控制器
//a创建对象
let tabBarC = MYTabBarController()
//b将需要交个标签栏控制器管理的视图控制器对象创建出来
let one = oneViewController()
one.title = "one"
let two = twoViewController()
two.title = "two"
let three = threeViewController()
three.title = "three"
//c将视图控制器交给标签栏控制器管理
tabBarC.ViewControllers = [one,two,three]
//设置默认选中标签
tabBarC.selectedIndex = 1
//3.将标签栏控制器作为window的根视图控制器
self.window?.rootViewController = tabBarC
定制TabBar,在MYTabBarController中设置
//1设置是否透明
self.tabBar.translucent = false
//2设置背景色
self.tabBar.barTintColor = UIColor.whiteColor()
//3设置背景图片
self.tabBar.backgroundImage = UIImage.init(named:"image")
//4设置填充色
self.tabBar.tintColor = UIColor.purpleColor()
//设置tarBarItem
//a设置文字
let one = oneViewController()
one.tabBatItem.title = "123"
//b设置图片
//默认显示
one.tabBarItem.image = UIImage.init(named:"image")?.imageWithRenderingMode(.AlawaysOriginal)
//选中显示
one.tabBarItem.selectedImage = UIImage.init(named:"image")?.imageWithRenderingModel(.AlwaysOriginal)
//设置文字属性
//默认
let item = self.tabBar.item
item.setTitleTextAttributes([NSFontAttributeName:UIFont.systenFontOfSize(13),NSForeGroundColorAttributeName:UIColor.lightGrayColor()].forState:.Normol)
//选中
item.setTitleTextAttributes([NSFontAttributeName:UIFont.systemFontOfSize(13),NSForegroundColorAttributeName:UIColor.orangeColor()], forState: .Selected)
注:联合使用navigationController和TabBarController基本可以搭建大部分APP应用的框架。