模態(tài)視圖

在導(dǎo)航過程中，有時候需要放棄主要任務(wù)而做其他次要任務(wù)，然后在返回到次要任務(wù)，這個次要任務(wù)就是在模態(tài)視圖中完成的，如注冊中主要任務(wù)是登錄后進入主界面，如果用戶沒有注冊，就要先去注冊，注冊是次要任務(wù)，當(dāng)用戶注冊完成后，它會關(guān)閉注冊視圖，回到登錄界面繼續(xù)進行主要任務(wù)。

默認(rèn)情況下，模態(tài)視圖是從屏幕下方滑出來的。

負(fù)責(zé)控制器模態(tài)視圖的控制器稱為模態(tài)視圖控制器，它并不是一個專門的類，它可以是前面提到的控制器的子類。負(fù)責(zé)主要任務(wù)視圖的控制器稱為主視圖控制器。在UICOntrollerView中，主要有如下兩個方法：

• -present():呈現(xiàn)視圖

• -dismiss()：關(guān)閉視圖

在呈現(xiàn)模態(tài)視圖時有兩種方式：一是通過使用UIViewController的present方法實現(xiàn)；二是通過故事板的“過渡”（Segue）實現(xiàn)。

下面我們通過登錄案例來介紹模態(tài)視圖

步驟

1. 創(chuàng)建一個iOS工程，將當(dāng)前控制器嵌入到一個導(dǎo)航控制器中，具體步驟是：在故事板中選擇View Controller，然后點擊Xcode菜單欄Editor-Embed In-Navigation Controller菜單就會自動創(chuàng)建一個導(dǎo)航視圖

2. 點擊導(dǎo)航欄，將導(dǎo)航欄的標(biāo)題設(shè)為登錄，然后從對象庫中拖入Lable、TextField、Button等控件

3. 接下來設(shè)計第二個界面，先從對象庫中拖入一個View Controller到設(shè)計界面中，然后參考步驟1將該視圖控制器嵌入到導(dǎo)航控制器中，修改該導(dǎo)航欄標(biāo)題為注冊，然后從對象庫中拖入兩個Bar Button Item到導(dǎo)航欄兩邊，分別設(shè)置identifier屬性為Cancel和Save

4. 接下來需要在登錄場景和注冊場景創(chuàng)建一個過渡，按住control鍵，從登錄界面的注冊按鈕拖鼠標(biāo)到注冊導(dǎo)航控制器，然后松開鼠標(biāo)，在彈出的視圖框中選擇Present Modally菜單；它是模態(tài)類型的過渡

5. 最后，添加注冊控制器類，創(chuàng)建一個類RegisterViewController集成UIViewController，然后回到故事板中將注冊視圖的Class選擇為RegisterViewController

代碼實現(xiàn)

ViewController.swift

//
//  ViewController.swift
//  ModalViewSample
//
//  Created by Michael on 2016/11/9.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var mUserName: UITextField!
    override func viewDidLoad() {
        super.viewDidLoad()
        // 注冊消息
        NotificationCenter.default.addObserver(self, selector: #selector(self.register(_ :)), name: NSNotification.Name(rawValue: "RegisterCompletion"), object: nil)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
        NotificationCenter.default.removeObserver(self, name: NSNotification.Name.init(rawValue: "RegisterCompletion"), object: nil)
    }
    
    func register(_ notification : Notification) {
        
        let text = notification.userInfo?["username"] as? String
        mUserName.text = text!
        NSLog("%@",text!)
        
    }
}

RegisterViewController.swift

//
//  RegisterViewController.swift
//  ModalViewSample
//
//  Created by Michael on 2016/11/9.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

class RegisterViewController: UIViewController {

    @IBOutlet weak var mName: UITextField!
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @IBAction func save(_ sender: Any) {
        let userInfo = ["username":self.mName.text!]
        //發(fā)送消息
        NotificationCenter.default.post(name: NSNotification.Name.init(rawValue: "RegisterCompletion"), object: nil, userInfo: userInfo)
        self.dismiss(animated: true, completion: {
        })
    }
    @IBOutlet weak var save: UIBarButtonItem!
    
    @IBAction func cancel(_ sender: Any) {
        self.dismiss(animated: true, completion: {
        })
    }

}

效果圖

分屏導(dǎo)航

基于分屏導(dǎo)航是平鋪導(dǎo)航的主要實現(xiàn)方式，涉及的主要控件有分屏控件UIPageControll和屏幕滾動視圖UIScrollView,一般不超過10屏

步驟

1. 創(chuàng)建iOS工程，從對象庫中拖入UIPageControll和UIScrollView到故事板中，并將其放到合適的位置，UIPageControll放在靠底部，UIScrollView全屏顯示，將視圖的背景設(shè)為黑色

2. 選中UIScrollView的屬性檢查器，設(shè)置不顯示Scroll View的Indicator，同時選擇滾動Scrolling Enable和分屏Paging Enable。分屏屬性是Scroll View每次滑動時翻一屏

3. 選擇Page Controll的屬性檢查器，設(shè)置Pages中的of pages總屏數(shù)為3，Current當(dāng)前位置為0，并修改其寬度為300，它的高度是不能修改的。

4. 最后為這兩個控件定義輸出口并連接注冊到ViewController類中，為Page Controll控件定義響應(yīng)屏幕變化事件的方法。-changPage

代碼實現(xiàn)

//
//  ViewController.swift
//  PageControlNavigation
//
//  Created by Michael on 2016/11/10.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

class ViewController: UIViewController,UIScrollViewDelegate {

    @IBOutlet weak var mScrollView: UIScrollView!
    @IBOutlet weak var mPageControl: UIPageControl!
    
    var mImage1: UIImageView!
    var mImage2: UIImageView!
    var mImage3: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.mScrollView.delegate = self
        self.mScrollView.contentSize = CGSize(width: self.view.frame.size.width * 3, height: self.mScrollView.frame.size.height)
        self.mScrollView.frame = self.view.frame
        
        self.mImage1 = UIImageView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 480))
        self.mImage1.image = UIImage(named: "達芬奇-蒙娜麗莎")
        self.mScrollView.addSubview(mImage1)
        
        self.mImage2 = UIImageView(frame: CGRect(x: self.view.frame.size.width, y: 0, width: self.view.frame.size.width, height: 480))
        self.mImage2.image = UIImage(named: "羅丹-思想者")
        self.mScrollView.addSubview(mImage2)

        
        self.mImage3 = UIImageView(frame: CGRect(x: self.view.frame.size.width * 2, y: 0, width: self.view.frame.size.width, height: 480))
        self.mImage3.image = UIImage(named: "保羅克利-肖像")
        self.mScrollView.addSubview(mImage3)

        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //UIPageControll事件處理
    @IBAction func changePage(_ sender: Any) {
        UIView.animate(withDuration: 0.3, animations: {
            let whichPage = self.mPageControl.currentPage
            //設(shè)置內(nèi)容視圖坐標(biāo)原點與屏幕滾動視圖坐原點的偏移量
            self.mScrollView.contentOffset = CGPoint(x: 320 * whichPage, y: 0)
        })
    }
    
    //屏幕滾動視圖事件處理方法?
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offset = scrollView.contentOffset
        
        self.mPageControl.currentPage = Int(offset.x) / 320
    }

    

}

效果圖

分頁控制器

在iOS5以后，我們可以使用分頁控制器UIPageViewController構(gòu)建類似于電子書效果的應(yīng)用。

分頁控制器需要放置在一個父視圖控制器中，在分頁控制器下面還要有子視圖控制器，每個子視圖控制器對應(yīng)一個頁面。

UIPageViewController沒有對應(yīng)的視圖，我們需要使用代碼來實現(xiàn)；需要在UIPageViewController所在的控制器實現(xiàn)UIPageViewControllerDelegate和UIPageViewControllerDataSource協(xié)議，UIPageViewControllerDataSource數(shù)據(jù)源協(xié)議必須要實現(xiàn)的方法有以下兩個：

• func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController)

• func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController)

UIPageViewControllerDelegate委托協(xié)議中一般實現(xiàn)的方法是：

• func pageViewController(_ pageViewController: UIPageViewController, spineLocationFor orientation: UIInterfaceOrientation)

• func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool)

步驟

1. 創(chuàng)建一個iOS工程

2. 代碼實現(xiàn)UIPageViewController

代碼實現(xiàn)

//
//  ViewController.swift
//  PageNavigation
//
//  Created by Michael on 2016/11/10.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

enum DirectionFroward : Int {
    
    case Before = 1 //向前
    case After = 2 //向后
    
}

class ViewController: UIViewController,UIPageViewControllerDelegate,UIPageViewControllerDataSource {

    //當(dāng)前Page的索引
    var mPageIndex = 0
    
    var direct = DirectionFroward.After
    
    var mPageViewController : UIPageViewController!
    var mViewControllers : [UIViewController]!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let pageViewController1 = UIViewController()
        let pageViewController2 = UIViewController()
        let pageViewController3 = UIViewController()
        
        self.mViewControllers = [pageViewController1,pageViewController2,pageViewController3]
        
        let mImage1 = UIImageView(frame: self.view.frame)
        mImage1.image = UIImage(named: "達芬奇-蒙娜麗莎")
        pageViewController1.view.addSubview(mImage1)
        
        let mImage2 = UIImageView(frame: self.view.frame)
        mImage2.image = UIImage(named: "羅丹-思想者")
        pageViewController2.view.addSubview(mImage2)
        
        
        let mImage3 = UIImageView(frame: self.view.frame)
        mImage3.image = UIImage(named: "保羅克利-肖像")
        pageViewController3.view.addSubview(mImage3)
        
        //transitionStyle: pageCurl表示翻書效果樣式 scroll 滑屏效果樣式
        //navigationOrientation 水平和垂直方向
        self.mPageViewController = UIPageViewController(transitionStyle: .pageCurl, navigationOrientation: .horizontal, options: nil)

        self.mPageViewController.delegate = self
        self.mPageViewController.dataSource = self
        
        //設(shè)置首頁
        //direction forward向前 reverse向后
        self.mPageViewController.setViewControllers([pageViewController1], direction: .forward, animated: true, completion: nil)
        
        self.view.addSubview(self.mPageViewController.view)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    //DataSource協(xié)議
    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
        NSLog("向前翻")
        mPageIndex -= 1
        
        if mPageIndex < 0 {
            mPageIndex = 0;
            return nil
        }
        
        direct = .Before
        return self.mViewControllers[mPageIndex]
        
    }

    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        NSLog("向后翻")

        mPageIndex += 1
        
        if mPageIndex > 2 {
            mPageIndex = 2
            return nil
        }
        
        direct = .After
        return self.mViewControllers[mPageIndex]
        
    }
    
    //Delegate協(xié)議
    func pageViewController(_ pageViewController: UIPageViewController, spineLocationFor orientation: UIInterfaceOrientation) -> UIPageViewControllerSpineLocation {
        self.mPageViewController.isDoubleSided = false
        //min和max 首頁顯示一個視圖  mid首頁顯示兩個視圖
        return .min
    }


    func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
        
        //翻頁未成功
        if completed == false {
            if direct == .After {
                mPageIndex -= 1
            }
            
            if direct == .Before {
                mPageIndex += 1
            }
        }
    }
}

效果圖

標(biāo)簽導(dǎo)航

使用標(biāo)簽欄時有一定的指導(dǎo)原則：標(biāo)簽欄位于屏幕下方，占有49個像素屏幕空間，有時可以隱藏起來；標(biāo)簽欄中的標(biāo)簽不能超過5個，如果超過5個則最后一個顯示為更多，點擊更多標(biāo)簽會出現(xiàn)更多的列表。

步驟

在開發(fā)具體應(yīng)用的時候，標(biāo)簽導(dǎo)航的各個標(biāo)簽分別代表一個功能模塊，各功能模塊之間相對獨立。

1. 創(chuàng)建一個iOS工程模板Tabbed Application應(yīng)用，默認(rèn)創(chuàng)建兩個標(biāo)簽

2. 從對象庫中拖入一個ViewController到故事板中

3. 添加ViewController和Tab Controller Scene的連線，具體操作是：按住control鍵從Tab Controller Scene拖曳鼠標(biāo)到ViewController，釋放鼠標(biāo)，從彈出窗口中選擇view controllers項即可

4. 設(shè)置三個場景的標(biāo)題

5. 分別為三個場景創(chuàng)建三個視圖類

代碼實現(xiàn)

//
//  HeiViewController.swift
//  TabNavigation
//
//  Created by Michael on 2016/11/15.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

class HeiViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

//
//  JiViewController.swift
//  TabNavigation
//
//  Created by Michael on 2016/11/15.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

class JiViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

//
//  LiaoViewController.swift
//  TabNavigation
//
//  Created by Michael on 2016/11/15.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

class LiaoViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */

}

效果圖

樹形導(dǎo)航

樹形導(dǎo)航模式是將導(dǎo)航控制器UINavigationController與表視圖結(jié)使用，主要用于構(gòu)建從屬關(guān)系的導(dǎo)航。下面我們創(chuàng)建一個三級視圖的樹形導(dǎo)航示例。

步驟

1. 創(chuàng)建iOS工程，使用UINavigationController創(chuàng)建以及表視圖

2. 創(chuàng)建二級表視圖CitiesViewController

   • 從對象庫中拖入一個Table View Controller到對象庫中作為二級視圖控制器

   • 按住control鍵，從上一個Root View Controller的單元格中拖動鼠標(biāo)到當(dāng)前添加的Table View Controller中，釋放鼠標(biāo)，在彈出窗口中選擇Show選項

   • 選擇連接線中的過渡Segue，打開其屬性檢查器，然后在Indentifier屬性中輸入ShowCities

3. 創(chuàng)建三級視圖DetailViewController

   • 從對象庫中拖入一個View Controller到對象庫中作為三級視圖控制器

   • 按住control鍵，從上一個Table View Controller的單元格中拖動鼠標(biāo)到當(dāng)前添加的View Controller中，釋放鼠標(biāo)，在彈出窗口中選擇Show選項

   • 選擇連接線中的過渡Segue，打開其屬性檢查器，然后在Indentifier屬性中輸入ShowDetail

4. 設(shè)置各級視圖的Table View Cell的屬性

代碼實現(xiàn)

一級視圖

//
//  ViewController.swift
//  TreeNavigation
//
//  Created by Michael on 2016/11/15.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

class ViewController: UITableViewController {
    
    var dictData:NSDictionary!
    var listData:NSArray!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.tableView.delegate = self
        self.tableView.dataSource = self
        
        let path = Bundle.main.path(forResource: "provinces_cities", ofType: "plist")
        
        self.dictData = NSDictionary(contentsOfFile: path!)
        self.listData = self.dictData.allKeys as NSArray
        self.title = "省份信息"
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return self.listData.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let cell:UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: "Custom", for: indexPath)
        
        let row = indexPath.row
        
        cell.textLabel?.text = self.listData[row] as? String
        
        return cell
    }
    
    //場景過渡之前的處理 點擊表視圖的單元格觸發(fā)
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "ShowCities" {
            let indexPath = self.tableView.indexPathForSelectedRow! as IndexPath
            let selectedIndex = indexPath.row
            //獲取要跳轉(zhuǎn)到的視圖控制器對象
            let controller = segue.destination as! CitiesTableViewController
            let selectName = self.listData[selectedIndex] as! String
            controller.listData = self.dictData[selectName] as! NSArray
            controller.title = selectName
            
        }
    }

}

二級視圖

//
//  CitiesTableViewController.swift
//  TreeNavigation
//
//  Created by Michael on 2016/11/15.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit

class CitiesTableViewController: UITableViewController {
    
    var listData:NSArray!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete implementation, return the number of rows
        return self.listData.count
    }

    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell:UITableViewCell! = tableView.dequeueReusableCell(withIdentifier: "CityCell", for: indexPath)
        
        let row = indexPath.row
        let dict = self.listData[row] as! NSDictionary
        cell.textLabel?.text = dict["name"] as? String

        return cell
    }

    //場景過渡之前的與處理
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "ShowDetail" {
            let indexPath = self.tableView.indexPathForSelectedRow! as IndexPath
            let selectIndex = indexPath.row
            let dict = self.listData[selectIndex] as! NSDictionary
            //獲取要跳轉(zhuǎn)到的視圖控制器對象
            let controller = segue.destination as! DetailViewController
            controller.url = dict["url"] as! String
            controller.title = dict["name"] as? String
        }
    }
}

三級視圖

//
//  DetailViewController.swift
//  TreeNavigation
//
//  Created by Michael on 2016/11/15.
//  Copyright ? 2016年 Michael. All rights reserved.
//

import UIKit
import WebKit

class DetailViewController: UIViewController,WKNavigationDelegate {
    
    var url:String!
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        NSLog(url)
        self.webView = WKWebView(frame: self.view.frame)
        view.addSubview(webView)
        webView.navigationDelegate = self
        //let nUrl = URL(string: "https://baike.baidu.com/view/2172.htm")
        let mUrl = URL(string: url)
        let request = URLRequest(url: mUrl!)
        webView.load(request)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        NSLog("開始加載")
    }
    
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        NSLog("內(nèi)容開始返回時回調(diào)")
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        NSLog("加載完成")
    }
    
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        NSLog("加載失敗")
    }
}

效果圖

 

來自：https://segmentfault.com/a/1190000007567382

 

標(biāo)簽： idc isp 代碼

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。