IOS UI框架

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应用的框架。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,454评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,553评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,921评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,648评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,770评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,950评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,090评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,817评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,275评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,592评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,724评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,409评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,052评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,815评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,043评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,503评论 2 361
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,627评论 2 350

推荐阅读更多精彩内容