IOS学习之侧边栏制作（包含tableView编写）

侧边栏的制作思路简单的来说是：

  • 第一，两个View叠加在一起，上面呈现的是主界面的view，下面被覆盖的是侧边栏的view

  • 第二，当我按下按钮或滑动屏幕（滑动没做）的时候，主界面的View的frame移动一段距离，露出了侧边栏的view

  • 效果图：看上去较为丑陋....到时候再修改下，变得好看点


    Simulator Screen Shot 2016年10月24日 下午6.46.15.png

接下去会比较啰嗦，我想通过几部分来讲，熟悉tableView可以跳过前面的第一和第二部分

  • 第一部分-->>Plist中数据读取到数据模型（针对侧边栏View Controller编写）
  • 第二部分-->>tableView的编写（针对侧边栏View Controller编写）
  • 第三部分-->>侧边栏的制作

第一部分 Plist中数据读取到数据模型（tableView数据读取）

  • 步骤1：查看plist的数据（SliderData.plist），如下图
屏幕快照 2016-10-24 下午7.17.38.png

图中得知plist是一个数组（array）包含4个字典（dictionary），每个字典中有icon和text，他们都是string类型

  • 步骤2：根据plist数据来定义一个数据模型MySliderData

数据模型.h文件（MySliderData.h）

#import <Foundation/Foundation.h>

@interface MySliderData : NSObject

//对应plist中icon数据
@property (nonatomic,strong) NSString *icon;

//对应plist中的text数据
@property (nonatomic,strong) NSString *text;

//自己定义一个构造函数，传递入字典，以便将plist的数据转化成模型数据
+(instancetype)initWithDictionary:(NSDictionary *) dict;

@end

数据模型.m文件（MySliderData.m）


#import "MySliderData.h"

@implementation MySliderData


//此函数的作用就是传递一个字典数据给我，我返回一个模型数据给你，也就是将字典模型转换为模型数据
+(instancetype)initWithDictionary:(NSDictionary *) dict{
    
    //创建一个模型
    MySliderData *slider = [[MySliderData alloc] init];
    //将dict中的icon数据传递给模型
    slider.icon = dict[@"icon"];
    //将dict中的text数据传递给模型
    slider.text = dict[@"text"];
    //随后将模型返回出去
    return slider;
}

@end
  • 步骤3：在侧边栏View Controller中读取出plist并将其转换为模型数据，以供给tableView

  //从mainBundle中获取SliderData.plist的路径file
 NSString *file = [[NSBundle mainBundle] pathForResource:@"SliderData.plist" ofType:nil];
        
 //打开plist中的数据，放入array中，array中有4组Dictionary字典数据
 NSArray *array = [NSArray arrayWithContentsOfFile:file];
        
   //新建一个可变的数组
   NSMutableArray *mularray = [NSMutableArray array];
        
  //遍历数据并转化为MySliderData模型并存入mularray中，
  //也就是把array中的4组字典数据取出来放入自己定义的构造函数中
  //返回出来的是数据模型，再存放入可变数组mularray中
    for (NSDictionary *dict in array) {
            MySliderData *slider = [MySliderData initWithDictionary:dict];
            [mularray addObject:slider];
        }

至此我们实现了plist中的数据转换为模型数据，并且存放在mularray中，mularray中有四个MySliderData，每个MySliderData存放着一个icon和一个text

第二部分 tableView的编写

首先附上侧边栏View Controller的xib


mm.png

包含一个label和一个tableView，label就不讲了，直接将tableView，首先定义一个类继承自UITableViewCell，并且自动生成xib文件，like this：

屏幕快照 2016-10-24 下午7.41.33.png

接下去针对cell编写如下程序：

  • SliderTableViewCell.h:

#import <UIKit/UIKit.h>
#import "MySliderData.h"

@interface SliderTableViewCell : UITableViewCell

//cell的构造函数
+(instancetype)SliderCellWithTableView:(UITableView *)tableView;

//模型数据参数，一个cell绑定一个模型参数
@property (nonatomic,strong) MySliderData *data;

@end
  • SliderTableViewCell.m:

注意啦：需要循环利用cell的话需要在cell的xib中设置identifier


屏幕快照 2016-10-25 上午9.12.39.png

#import "SliderTableViewCell.h"

@interface SliderTableViewCell()

//xib中定义的图片image
@property (weak, nonatomic) IBOutlet UIImageView *MyImage;

//xib中定义的label文字
@property (weak, nonatomic) IBOutlet UILabel *MyLabel;

@end

@implementation SliderTableViewCell

//此段为cell的创建和循环利用，程序刚开始进入cell都会通过loadNibnamed创建出来，
//随后用户如果滚动，那么cell就实现循环利用
+(instancetype)SliderCellWithTableView:(UITableView *)tableView{
    
    //先从tableview中取出标记为dataPage的cell，实现cell的循环利用
    SliderTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"slider"];
    //如果cell为空，那么从新建一个cell，xib中
    if(cell == nil){
        cell = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:nil options:nil] lastObject];
    }
    return cell;
    
}

//模型数据的set方法
-(void)setData:(MySliderData *)data{
    
    self.MyLabel.text = data.text;
    self.MyImage.image = [UIImage imageNamed:data.icon];

}

@end
  • SliderTableViewCell.xib:
屏幕快照 2016-10-24 下午7.50.54.png

注意其中的class为SliderTableViewCell

最后在侧边栏View Controller中实现tableView(包含plist数据的模型化)：

SliderViewController.m


#import "SliderViewController.h"
#import "MySliderData.h"
#import "SliderTableViewCell.h"

@interface SliderViewController ()<UITableViewDataSource,UITableViewDelegate>

//SliderViewController xib中的label
@property (weak, nonatomic) IBOutlet UILabel *SliderTitle;
//SliderViewController xib中的list
@property (weak, nonatomic) IBOutlet UITableView *SliderList;
//装载模型数据的数组
@property (nonatomic,strong) NSArray *SliderDataList;

@end

@implementation SliderViewController

//懒加载
-(NSArray *) SliderDataList{

    if (!_SliderDataList) {
        
        
        //从mainBundle中获取SliderData.plist的路径file
        NSString *file = [[NSBundle mainBundle] pathForResource:@"SliderData.plist" ofType:nil];
        
        //打开plist中的数据
        NSArray *array = [NSArray arrayWithContentsOfFile:file];
        
        NSMutableArray *mularray = [NSMutableArray array];
        
        //遍历数据并转化为MySliderData模型并存入mularray中
        for (NSDictionary *dict in array) {
            MySliderData *slider = [MySliderData initWithDictionary:dict];
            [mularray addObject:slider];
        }
        
        _SliderDataList = mularray;
    }

    return _SliderDataList;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //设置表格上面的label文字
    _SliderTitle.text = @"白令海峡";
    //设置数据源
    _SliderList.dataSource = self;
    //设置代理
    _SliderList.delegate = self;
    //设置表格行高
    _SliderList.rowHeight = 58.0f;
    //设置表格的分割线style
    _SliderList.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    //分割线颜色设置
    [_SliderList setSeparatorColor:[UIColor lightGrayColor]];
    //分割线缩进设置
    _SliderList.separatorInset = UIEdgeInsetsMake(0, 10, 0, 10);
    
    
    //Slider出来的整个View的颜色
    self.view.backgroundColor = [UIColor colorWithRed:64/255.0 green:180/255.0 blue:255/255.0 alpha:1.0];
    self.view.alpha = 1.0;
    
}

//tableView的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return self.SliderDataList.count;
}

//tableView的cell创建
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    
    //新建自定义的SliderTableViewCell
    SliderTableViewCell *cell = [SliderTableViewCell SliderCellWithTableView:tableView];
    
    //调用SliderTableViewCell中的setdata函数，传入模型数据
    //_SliderDataList为装4组模型数据的数组，通过上面懒加载得到
    cell.data = _SliderDataList[indexPath.row];
    
    
    //cell点击效果
    //cell.selectionStyle = UITableViewCellSelectionStyleBlue;
    
    //cell.separatorInset =UIEdgeInsetsMake(0, 10, 0, 10);

    return cell;

}

//由于tableView点击后，焦点会一直在你点击的那一栏，我感觉很恶心，所以通过下面设置实现了点击后焦点立马消失
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    //实现点击后焦点立马消失，和按键按下效果一样
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    NSLog(@"%zd",indexPath.row);
    
}

@end

至此完成了侧边栏那个View Controller的所有程序

第三部分 侧边栏的制作

前两部分完成了侧边栏View Controller（SliderViewController）的所有程序，
接下去开始侧边栏编写，共包含三个View Controller:

  • 1、容器View Controller
屏幕快照 2016-10-24 下午8.07.35.png
  • 2、主界面View Controller
屏幕快照 2016-10-24 下午8.07.48.png
  • 3、 侧边栏View Controller（程序详见第二部分最后的SliderViewController.m）
![Uploading 屏幕快照 2016-10-24 下午8.07.48_955745.png . . .]
  • ViewController的View视图在storyboard中，空白
  • MainViewController的View视图在xib中，空白
  • MainViewController.h文件没有编程
  • 所以以下列举ViewController的h/m文件和MainVIewController.m文件

ViewController.h

#import <UIKit/UIKit.h>

#import "MainViewController.h"
#import "SliderViewController.h"

@interface ViewController : UIViewController

//创建MainViewController对象
@property (nonatomic,strong) MainViewController *mainView;

//创建SliderViewController对象
@property (nonatomic,strong) SliderViewController *sliderView;

//将以下两个函数设置为public，在其他ViewController中也可以调用
//显示侧边栏
-(void)showSlider;
//隐藏侧边栏
-(void)hideSlider;

@end

ViewController.m：将MainViewController和SliderViewController都做为ViewController的子控制器，MainViewController叠加在SliderVIewController的上面


#import "ViewController.h" : 

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //实例化mainView，并设置为self的子控制器
//    self.mainView = [self.storyboard instantiateViewControllerWithIdentifier:@"main"];
    
    //MainView的实例化，注意设置xib中custom class中的class为MainViewController
    _mainView = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([MainViewController class]) owner:nil options:nil] lastObject];
    [self addChildViewController:_mainView];
    
    
    
//    self.sliderView = [self.storyboard instantiateViewControllerWithIdentifier:@"slider"];
    
    //sliderView的实例化，注意设置xib中custom class中的class为SliderViewController
    _sliderView = [[[NSBundle mainBundle] loadNibNamed:NSStringFromClass([SliderViewController class]) owner:nil options:nil] lastObject];
    
    [self addChildViewController:_sliderView];
    
    
    //将mainView中的view加入父控制器的view
    [self.view addSubview:self.mainView.view];
    [self.mainView.view setFrame:self.view.bounds];
    
    //将SliderView中的view加入控制器
    [self.view addSubview:self.sliderView.view];
    [self.sliderView.view setFrame:self.view.bounds];
    
    //将MainView，主界面放在上层显示
    [self.view bringSubviewToFront:self.mainView.view];
    
    
    
}

//显示侧边栏
-(void)showSlider{
    
    //动画包裹
    [UIView animateWithDuration:0.5 animations:^{
    
        [_sliderView.view setHidden:NO];
        //将mainView左移一段距离
        [_mainView.view setFrame:CGRectMake(-200, 0, _mainView.view.frame.size.width, _mainView.view.frame.size.height)];
    }];
    
}

-(void)hideSlider{
    
    //动画包裹
    [UIView animateWithDuration:0.5 animations:^{
        //将mainView移回原来的位置
        [_mainView.view setFrame:CGRectMake(0, 0, _mainView.view.frame.size.width, _mainView.view.frame.size.height)];
    } completion:^(BOOL finished) {
        [_sliderView.view setHidden:YES];
    }];

}

@end

MainViewController.m

#import "MainViewController.h"
#import "ViewController.h"

@interface MainViewController ()

//标题栏参数，详见我写的IOS学习之NavigationBar
@property (strong, nonatomic) UIBarButtonItem *leftBtn;
//标题栏参数，详见我写的IOS学习之NavigationBar
@property (strong, nonatomic) UIBarButtonItem *rightBtn2;
//标题栏参数，详见我写的IOS学习之NavigationBar
@property (strong, nonatomic) UIBarButtonItem *rightBtn;

//布尔类型标志，YES侧边栏隐藏，NO侧边栏弹出
@property (assign, nonatomic) Boolean  Hiddenenable;

@end

@implementation MainViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    //初始状态，侧边栏为隐藏
    self.Hiddenenable = YES;
    [self addNavigationBar];
}

-(void)addNavigationBar{
    //创建一个导航栏
    UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44+20)];
    
    navigationBar.alpha = 1.0;
    //标题栏的整个背景色改为蓝色
    [navigationBar setBarTintColor:[UIColor colorWithRed:64/255.0 green:180/255.0 blue:255/255.0 alpha:1.0]];
    
    //将标题栏中间的主title的文字颜色设置为白色
    [navigationBar setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],NSForegroundColorAttributeName, nil]];
    
    //此段设置整个标题栏的背景图片
    //    [navigationBar setBackgroundImage:[UIImage imageNamed:@"xx"] forBarMetrics:UIBarMetricsDefault];
    
    //设置左右两边的图片和文字均为白色
    [navigationBar setTintColor:[UIColor whiteColor]];
   
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 1)];
    
    view.backgroundColor = [UIColor grayColor];
    
    //将导航栏添加入view中
    [self.view addSubview:navigationBar];
    
    [self.view addSubview:view];
    
    //新建一个navigationItem
    UINavigationItem *navigationItem = [[UINavigationItem alloc] init];
    
    //title为中间的显示，可以是view，可以是文字等等
    //    navigationItem.titleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 80, 40)];
    //    navigationItem.titleView.backgroundColor = [UIColor yellowColor];
    
    //标题栏中间的文字
    navigationItem.title = @"Autcomp";
    
    //标题栏左侧一个按钮+文字
    
    //UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];
    
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeInfoLight];
    
    //btn.backgroundColor=[UIColor clearColor];
    btn.frame = CGRectMake(0, 0, 20, 20);
    
    [btn setImage:[UIImage imageNamed:@"formPage2"] forState:UIControlStateNormal];
    //[btn setTitle:@"返回" forState:UIControlStateNormal];
    
    [btn addTarget:self action:@selector(backBtnClick) forControlEvents:UIControlEventTouchUpInside];
    
    //[view addSubview:btn];
    
    _leftBtn = [[UIBarButtonItem alloc]initWithCustomView:btn];
    
    navigationItem.leftBarButtonItem = _leftBtn;
    
    //标题栏右侧，两个按钮
    
    UIButton *btnR1 = [UIButton buttonWithType:UIButtonTypeInfoLight];
    //UIButton *btnR2 = [UIButton buttonWithType:UIButtonTypeInfoLight];
    
    btnR1.frame = CGRectMake(0, 0, 20, 20);
    //btnR2.frame = CGRectMake(0, 0, 20, 20);
    
    [btnR1 setImage:[UIImage imageNamed:@"details"] forState:UIControlStateNormal];
    //[btnR2 setImage:[UIImage imageNamed:@"collect"] forState:UIControlStateNormal];
    
    _rightBtn = [[UIBarButtonItem alloc] initWithCustomView:btnR1];
    //_rightBtn2 = [[UIBarButtonItem alloc] initWithCustomView:btnR2];
    
    
    [btnR1 addTarget:self action:@selector(getRightList) forControlEvents:UIControlEventTouchUpInside];
    
    navigationItem.rightBarButtonItem=_rightBtn;
    
    [navigationBar pushNavigationItem:navigationItem animated:YES];
}

//这段由标题栏右边按钮响应
-(void)getRightList{
    ViewController *viewController = (ViewController *)self.parentViewController;
    _Hiddenenable = !_Hiddenenable;
    if(_Hiddenenable){ //需要隐藏
        [viewController hideSlider];
    }else{  //无需隐藏
        [viewController showSlider];
    }
}
//标题栏左边栏按钮响应
-(void)backBtnClick{
    
}

@end
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342

推荐阅读更多精彩内容

  • iOS WebSocket长链接（Swift）
    WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,686评论 8赞 183
  • iOS开发系列--UITableView全面解析
    概述在iOS开发中UITableView可以说是使用最广泛的控件，我们平时使用的软件中到处都可以看到它的影子，类似...
    liudhkk阅读 8,978评论 3赞 38
  • 2017.10.26
    今天复习了信息论与最大熵那一块，信息熵作为一个信息的度量，表示事件的不确定性；人类在生产实践的时候就是不断地降低目...
    科长呀阅读 229评论 0赞 0
  • 传统行业在互联网上的崛起
    互联网其实代表了70、80、90年代那些年青人的梦想。在国企和传统行业令人窒息的裙带关系网中，互联网给了很多年青人...
    朱晨阅读 751评论 0赞 4
  • 旧物杂货铺
    嗯又要到新年了，我又开始收拾以前那些零零碎碎的东西了。旧东西不扔难道要留着过年吗。可是有些东西真的舍不得扔，要留起...
    澎澍阅读 442评论 4赞 7