IOS UI第二次总结

bluecat 发布于1年前 阅读12224次
0 条评论

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

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。