iOS的UI開發中Modal的使用與主流應用UI結構介紹_IOS

來源:互聯網
上載者:User

Modal簡單介紹
一、簡單介紹

除了push之外,還有另外一種控制器的切換方式,那就是Modal

任何控制器都能通過Modal的形式展⽰出來

Modal的預設效果:新控制器從螢幕的最底部往上鑽,直到蓋住之前的控制器為⽌

二、代碼說明

建立一個項目,在Application的代理中添加window和控制器。

YYAppDelegate.m檔案

複製代碼 代碼如下:

//
//  YYAppDelegate.m
//  01-modal
//
//  Created by apple on 14-6-9.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYAppDelegate.h"
#import "YYViewController.h"

@implementation YYAppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    //1.建立window,並設定window的frame
    self.window=[[UIWindow alloc]initWithFrame:[[UIScreen mainScreen] bounds]];
    //2.設定window的背景顏色為黑色
    self.window.backgroundColor=[UIColor blackColor];

   
    //建立一個導航控制器作為子控制器
    YYViewController *one=[[YYViewController alloc]init];
    self.window.rootViewController=one;
   
    //3.設定window為主視窗,並顯示
    [self.window makeKeyAndVisible];
    return YES;
}


@end


開啟modal視窗

YYViewController.m檔案

複製代碼 代碼如下:

//
//  YYViewController.m
//  01-modal
//
//  Created by apple on 14-6-9.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYtwoViewController.h"

@interface YYViewController ()
//當點擊的時候,跳轉到第二個介面
- (IBAction)jump2two:(UIButton *)sender;

@end


複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
}


- (IBAction)jump2two:(UIButton *)sender {
    //建立一個新的modal並彈出
    YYtwoViewController *two=[[YYtwoViewController alloc]init];
    //在two上用導航控制器封裝,讓彈出的模態視窗有一個導覽列可以放返回按鈕
    UINavigationController *nvc=[[UINavigationController alloc]initWithRootViewController:two
                                 ];
    [self presentViewController:nvc animated:YES completion:^{
        NSLog(@"彈出一個模態視窗");
    }];
   
}
@end


移除modal視圖

YYtwoViewController.m檔案

複製代碼 代碼如下:

//
//  YYtwoViewController.m
//  01-modal
//
//  Created by apple on 14-6-9.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYtwoViewController.h"

@interface YYtwoViewController ()

@end


複製代碼 代碼如下:

@implementation YYtwoViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //給導航條添加一個返回按鈕
    self.navigationItem.leftBarButtonItem=[[UIBarButtonItem alloc]initWithTitle:@"返回" style:UIBarButtonItemStylePlain target:self action:@selector(change)];
}

-(void)change
{
    //編寫點擊返回按鈕的點擊事件
    //點擊返回按鈕,移除當前模態視窗
//    [self.navigationController dismissViewControllerAnimated:YES completion:^{
//        NSLog(@"移除模態視窗");
//    }];
   
// 如果一個控制器是以模態的形式展現出來的, 可以調用該控制器以及該控制器的子控制器讓讓控制器消失
    [self dismissViewControllerAnimated:YES completion:^{
        NSLog(@"移除");
    }];
}

@end


三、注意點

(1)modal的特點:當modal視窗彈出(從下往上)的時候,後面的視圖不可點
(2)彈出控制器的視圖(通過這種方式只能彈出一個視圖)

複製代碼 代碼如下:

//建立一個新的modal並彈出
    YYtwoViewController *two=[[YYtwoViewController alloc]init];
    //在two上用導航控制器封裝,讓彈出的模態視窗有一個導覽列可以放返回按鈕
    UINavigationController *nvc=[[UINavigationController alloc]initWithRootViewController:two
                                 ];
    [self presentViewController:nvc animated:YES completion:^{
        NSLog(@"彈出一個模態視窗");
    }];

(3)移除控制器的視圖(兩種方式都可以)
複製代碼 代碼如下:

//編寫點擊返回按鈕的點擊事件
    //點擊返回按鈕,移除當前模態視窗
//    [self.navigationController dismissViewControllerAnimated:YES completion:^{
//        NSLog(@"移除模態視窗");
//    }];
   
// 如果一個控制器是以模態的形式展現出來的, 可以調用該控制器以及該控制器的子控制器讓讓控制器消失
    [self dismissViewControllerAnimated:YES completion:^{
        NSLog(@"移除");
    }];

4)提示在實際的開發中,如果控制器之間的關係緊密一般用導航控制器,如果控制器之間的關係不是很緊密就用modal
 
四、內部機制
(1)彈出之後,window上面只有一個子視圖。
(2)雖然當前介面上展示在我們眼前的時twoview,但是window的根控制器仍然是NJviewController,它並沒有切換window的根控制器,而僅僅只是換了window上面顯示的視圖。
(3)移除的視圖並沒有銷毀,因為控制器並沒有銷毀,所以控制器對應的view也沒有銷毀。
(4)在模態彈出(完全顯示後),在方法中傳入two作為參數,預設就有一個控制器強引用著它。
(5)當向下移除之後,只要調用了控制器的dismiss方法讓視窗關閉,modal就釋放了。
(6)通常彈出的模態視窗都會提供一個導航條,讓介面擁有導航條的最快的方式是給它封裝一個導航控制器。
(7)如果一個控制器是以模態的形式展現出來的。可以調用該控制器以及該控制器的子控制器,讓該控制器消失。
 
五、資料的傳遞

專案檔結構和storyboard

程式碼範例:

YYViewController.m檔案

複製代碼 代碼如下:

//
//  YYViewController.m
//  02-模態視窗的資料傳遞
//
//  Created by apple on 14-6-9.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"
#import "YYtwoViewController.h"

@interface YYViewController ()

@end


複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}


/*
 如果控制器之間的關係比較緊密一般用 UINavigationController
 如果控制器之間的關係不是很緊密可以用Modal
 */

//通過segue跳轉前,會調用這個方法,在這個方法中把資料傳遞給彈出來的模態視窗
-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    //拿到目標控制器
    UINavigationController *nav=segue.destinationViewController;
    YYtwoViewController *two=(YYtwoViewController *)nav.topViewController;
    //傳遞資料
    two.name=@"文頂頂";
}
@end


YYtwoViewController.h檔案
複製代碼 代碼如下:

//
//  YYtwoViewController.h
//  02-模態視窗的資料傳遞
//
//  Created by apple on 14-6-9.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YYtwoViewController : UIViewController
@property(nonatomic,copy)NSString *name;
@end

YYtwoViewController.m檔案

//
//  YYtwoViewController.m
//  02-模態視窗的資料傳遞
//
//  Created by apple on 14-6-9.
//  Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYtwoViewController.h"

@interface YYtwoViewController ()
@property (weak, nonatomic) IBOutlet UILabel *nametext;

@end


複製代碼 代碼如下:

@implementation YYtwoViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
    self.nametext.text=self.name;
   
    //為導覽列添加一個返回按鈕
    self.navigationItem.leftBarButtonItem=[[UIBarButtonItem alloc]initWithTitle:@"返回" style:UIBarButtonItemStylePlain target:self action:@selector(black)];
}

-(void)black
{
    //移除模態視窗
    [self dismissViewControllerAnimated:YES completion:^{
        NSLog(@"成功移除!");
    }];
}
@end


APP主流UI架構結構

一、簡單樣本

說明:使用APP主流UI架構結構完成簡單的介面搭建

搭建頁面效果:

二、搭建過程和注意點

1.建立一個項目,把原有的控制器刪除,添加UITabBarController控制器作為管理控制器

2.對照介面完成搭建

3.注意點:

(1)隱藏工具條:配置一個屬性,Hideabotton bar在push的時候隱藏底部的bar在那個介面隱藏,就在哪個介面設定。

(2).cell可以設定行高

(3)連線

(4)說明:在上面的頁面搭建中直接使用了靜態儲存格,但在實際開發中,通常不這麼做。
(5)在tableview中添加headerview(顯示一根藍線)
三、 APP主流UI架構結構

請問:UITabBarController和導航控制器的在結構中的位置能否互調?(一個導航條)

設定控制器關聯或出現問題,tableviewcontroller預設實現了資料來源的方法,兩個控制器把它反過來管理。關於導航條。導航條上顯示什麼內容由棧頂控制器來確定,下面的導航條只有一個(棧頂控制器就是tabbar控制器)。
補充說明:ios7全屏化的設計
列印ios7中控制器的階層:

列印ios6中控制器的階層:

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.