美文网首页
简单的ipad 布局效果

简单的ipad 布局效果

作者: 被风吹乱的思念 | 来源:发表于2017-08-18 20:55 被阅读8次

    1.效果预览

    Untitled2.gif

    2.注意点

    相比于iphone多了个分栏控制器
    //边栏控制器(自动添加了手势 自动弹回功能)
    @property(nonatomic,strong)UISplitViewController *spiltVC;

    ipad特有的控制器
    UIPopoverController

    3.代码展示

    AppDelegate.h

    //详情界面
    @property(nonatomic,strong)SHDetailViewController *detailVC;
    //左侧边栏的表格界面
    @property(nonatomic,strong)SHRootTableViewController *rootVC;
    //边栏控制器(自动添加了手势 自动弹回功能)
    @property(nonatomic,strong)UISplitViewController *spiltVC;
    
    

    AppDelegate.m

    #import "SHRootTableViewController.h"
    #import "SHDetailViewController.h"
    
    @interface AppDelegate ()
    
    @end
    
    @implementation AppDelegate
    
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        self.rootVC = [[SHRootTableViewController alloc] initWithStyle:UITableViewStylePlain];
        self.rootVC.navigationItem.title = @"导航视图";
        UINavigationController *rootNav = [[UINavigationController alloc] initWithRootViewController:self.rootVC];
        
        
        self.detailVC = [[SHDetailViewController alloc] init];
        self.detailVC.navigationItem.title = @"详情视图";
        UINavigationController *detailNav = [[UINavigationController alloc] initWithRootViewController:self.detailVC];
        
        
        
        // 使用iPad专用控件实现分栏效果
        self.spiltVC = [[UISplitViewController alloc] init];
        //设置分栏试图 先后顺序决定了左右关系
        self.spiltVC.viewControllers = @[rootNav,detailNav];
        
    //    self.spiltVC.delegate = self.detailVC;
        
        // 设置为窗口的跟视图控制器
        self.window.rootViewController = self.spiltVC;
    
        return YES;
    }
    

    SHRootTableViewController.m
    左侧表格内容

    #import "SHDetailViewController.h"
    #import "AppDelegate.h"
    
    @interface SHRootTableViewController ()
    
    // 图片名称数组
    @property(nonatomic,strong)NSArray *imgTitleArr;
    // 图片数组
    @property(nonatomic,strong)NSArray *imgArr;
    @end
    
    @implementation SHRootTableViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        self.imgTitleArr = @[@"大众",@"法拉利",@"宝马",@"奔驰",@"JEEP",@"迈巴赫",@"兰博基尼"];
        
        //通过循环 将图片数组初始化
        NSMutableArray *arr = [[NSMutableArray alloc] init];
        for (int i = 1; i <= 7 ; i++) {
            NSString *imgName = [NSString stringWithFormat:@"car%d.jpg",i];
            UIImage *img = [UIImage imageNamed:imgName];
            [arr addObject:img];
        }
        //
        self.imgArr = [arr copy];
        
    }
    
    #pragma mark - Table view data source
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
        
        return 1;
    }
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
        
        return self.imgArr.count;
    }
    
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        
        static NSString *identifier = @"cell";
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
        //缓存池
        if (cell == nil) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier];
        }
        cell.textLabel.text = self.imgTitleArr[indexPath.row];
    
        return cell;
    }
    
    //跳转
    -(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        // 得到在�v中实例化的DetailViewController对象的内存
        AppDelegate *appDelegate = (AppDelegate *)[UIApplication sharedApplication].delegate;
        SHDetailViewController *detaiVC = appDelegate.detailVC;
        detaiVC.imgView.image = self.imgArr[indexPath.row];
    }
    

    SHDetailViewController.m
    //详情视图

    #import "AppDelegate.h"
    #import "SHRootTableViewController.h"//左侧边栏的表格界面
    
    @interface SHDetailViewController ()<UISplitViewControllerDelegate,UIPopoverControllerDelegate>
    
    @end
    
    @implementation SHDetailViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        //导航栏
        self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"主菜单" style:UIBarButtonItemStylePlain target:self action:@selector(showPopOverController:)];
        
        AppDelegate *app = (AppDelegate *)[UIApplication sharedApplication].delegate;
        app.spiltVC.displayModeButtonItem.title = @"显示导航栏";
        self.navigationItem.leftBarButtonItem =  app.spiltVC.displayModeButtonItem;
    }
    //回调方法
    -(void)showPopOverController:(UIBarButtonItem *)sender
    {
        //左侧边栏的表格界面
        SHRootTableViewController *rootVC = [[SHRootTableViewController alloc] initWithStyle:UITableViewStylePlain];
    
        // 弹出视图
        UIPopoverController *popCtl = [[UIPopoverController alloc] initWithContentViewController:rootVC];
        // 弹出视图大小
        popCtl.popoverContentSize = CGSizeMake(200, 300);
        popCtl.backgroundColor = [UIColor yellowColor];
        popCtl.delegate = self;
        
        // 弹出该视图
        [popCtl presentPopoverFromBarButtonItem:sender permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
    }
    
    
    #pragma mark - UIPopoverControllerDelegate
    - (BOOL)popoverControllerShouldDismissPopover:(UIPopoverController *)popoverController
    {
        NSLog(@"将要隐藏弹出视图");
        return YES;
    }
    
    - (void)popoverControllerDidDismissPopover:(UIPopoverController *)popoverController
    {
        NSLog(@"弹出视图已经隐藏");
    }
    #pragma mark - UISplitViewControllerDelegate
    
    // 左侧导航栏将要出现或隐藏时回调此方法
    -(void)splitViewController:(UISplitViewController *)svc willChangeToDisplayMode:(UISplitViewControllerDisplayMode)displayMode
    {
        // 左侧导航栏隐藏
        if (displayMode == UISplitViewControllerDisplayModePrimaryHidden)
        {
            NSLog(@"左侧导航将要隐藏");
            AppDelegate *app = (AppDelegate *)[UIApplication sharedApplication].delegate;
            app.spiltVC.displayModeButtonItem.title = @"显示导航栏";
            //
            svc.displayModeButtonItem.title = @"显示导航栏";
            
            self.navigationItem.leftBarButtonItem = app.spiltVC.displayModeButtonItem;
            
        }
        else if (displayMode == UISplitViewControllerDisplayModePrimaryOverlay)
        {
            NSLog(@"左侧导航覆盖到详情视图上");
        }
        else if (displayMode == UISplitViewControllerDisplayModeAllVisible)
        {
            NSLog(@"左侧导航全部显示");
            self.navigationItem.leftBarButtonItem = nil;
        }
        else
        {
            NSLog(@"自动显示");
        }
    }
    
    

    4.请大家多多指导

    相关文章

      网友评论

          本文标题:简单的ipad 布局效果

          本文链接:https://www.haomeiwen.com/subject/rnqzrxtx.html