搜索菜单栏侧滑效果控件SearchView
搜索菜单栏侧滑效果控件SearchView
本人视频教程系类 iOS中CALayer的使用
效果1：
效果2：
项目中用到的图片 bgImg@2x.png：
源码：
SearchView.h + SearchView.m
// // SearchView.h // SearchView // // Created by YouXianMing on 14/12/25. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> #define SearchView_ScreenWidth [[UIScreen mainScreen] bounds].size.width #define SearchView_ScreenHeight [[UIScreen mainScreen] bounds].size.height @protocol SearchViewDelegate <NSObject> @optional - (void)searchViewTapEventString:(NSString *)string; @end @interface SearchView : UIView @property (nonatomic, weak) id<SearchViewDelegate> delegate; @property (nonatomic, assign) CGRect startFrame; @property (nonatomic, assign) CGRect endFrame; @property (nonatomic, strong) NSArray *dataStringArray; // 数据源数组 - (void)expendCellAnimated:(BOOL)animated; @end
// // SearchView.m // SearchView // // Created by YouXianMing on 14/12/25. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import "SearchView.h" #import "SearchViewCell.h" static NSString *searchViewCell = @"searchViewCell"; @interface SearchView ()<UITableViewDataSource, UITableViewDelegate> @property (nonatomic, strong) UITableView *tableView; @property (nonatomic, strong) NSArray *stringArray; // 数据源 @end @implementation SearchView - (instancetype)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { // 初始化TableView self.tableView = [[UITableView alloc] initWithFrame:self.bounds style:UITableViewStylePlain]; self.tableView.delegate = self; self.tableView.dataSource = self; self.tableView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.75]; self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; [self.tableView registerClass:[SearchViewCell class] forCellReuseIdentifier:searchViewCell]; [self addSubview:self.tableView]; } return self; } #pragma mark - 代理方法 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.stringArray.count + 1; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { SearchViewCell *cell = [tableView dequeueReusableCellWithIdentifier:searchViewCell]; if (indexPath.row == 0) { cell.textLabel.text = @"search..."; cell.textLabel.textColor = [UIColor colorWithRed:0.780 green:0.800 blue:0.812 alpha:1]; cell.textLabel.font = [UIFont italicSystemFontOfSize:16.f]; cell.selectionStyle = UITableViewCellSelectionStyleNone; cell.backgroundColor = [UIColor clearColor]; cell.showLine = YES; return cell; } // 获取文本 cell.textLabel.text = self.stringArray[indexPath.row - 1]; cell.textLabel.textColor = [UIColor yellowColor]; cell.backgroundColor = [UIColor clearColor]; return cell; } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 50.f; } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { if (indexPath.row == 0) { if (_delegate && [_delegate respondsToSelector:@selector(searchViewTapEventString:)]) { [_delegate searchViewTapEventString:@"搜索"]; } } else { if (_delegate && [_delegate respondsToSelector:@selector(searchViewTapEventString:)]) { [_delegate searchViewTapEventString:self.stringArray[indexPath.row - 1]]; } } UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath]; [cell setSelected:NO animated:YES]; } - (void)expendCellAnimated:(BOOL)animated { // 如果为空，则直接返回 if (self.dataStringArray == nil) { return; } self.stringArray = [NSArray arrayWithArray:self.dataStringArray]; if (animated) { NSMutableArray *indexPathArray = [NSMutableArray array]; for (int i = 0; i < self.stringArray.count; i++) { NSIndexPath *path = [NSIndexPath indexPathForRow:i+1 inSection:0]; [indexPathArray addObject:path]; } [self.tableView insertRowsAtIndexPaths:indexPathArray withRowAnimation:UITableViewRowAnimationTop]; } else { [self.tableView reloadData]; } } #pragma mark - 重写setter，getter方法 @synthesize startFrame = _startFrame; - (void)setStartFrame:(CGRect)startFrame { _startFrame = startFrame; self.frame = startFrame; } - (CGRect)startFrame { return _startFrame; } @end
SearchViewCell.h + SearchViewCell.m
// // SearchViewCell.h // SearchView // // Created by YouXianMing on 14/12/25. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import <UIKit/UIKit.h> @interface SearchViewCell : UITableViewCell @property (nonatomic, assign) BOOL showLine; @end
// // SearchViewCell.m // SearchView // // Created by YouXianMing on 14/12/25. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import "SearchViewCell.h" @interface SearchViewCell () @property (nonatomic, strong) UIView *line; @end @implementation SearchViewCell - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { self.selectedBackgroundView = [self createSelectedBackgroundView]; // 线条view _line = [[UIView alloc] initWithFrame:CGRectMake(15, 49, 400, 1)]; _line.backgroundColor = [UIColor redColor]; _line.alpha = 0; [self addSubview:_line]; } return self; } - (UIView *)createSelectedBackgroundView { UIView *selectedView = [[UIView alloc] initWithFrame:CGRectMake(10, 0, 3, 50)]; selectedView.backgroundColor = [UIColor purpleColor]; return selectedView; } - (void)setSelected:(BOOL)selected animated:(BOOL)animated { [super setSelected:selected animated:animated]; } @synthesize showLine = _showLine; - (void)setShowLine:(BOOL)showLine { _showLine = showLine; if (showLine == YES) { _line.alpha = 1.f; } else { _line.alpha = 0.f; } } - (BOOL)showLine { return _showLine; } @end
控制器源码：
// // ViewController.m // SearchView // // Created by YouXianMing on 14/12/25. // Copyright (c) 2014年 YouXianMing. All rights reserved. // #import "ViewController.h" #import "SearchView.h" /** 枚举值 */ typedef enum : NSUInteger { UIVIEW_BackgroundView = 0x19871220, UIVIEW_SearchView, } EnumViewController; @interface ViewController ()<SearchViewDelegate> @property (nonatomic, strong) SearchView *searchView; @end #define ScreenWidth [[UIScreen mainScreen] bounds].size.width #define ScreenHeight [[UIScreen mainScreen] bounds].size.height @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // 设置背景图 self.view.layer.contents = (__bridge id)([UIImage imageNamed:@"bgImg"].CGImage); // 隐藏状态栏 [UIApplication sharedApplication].statusBarHidden = YES; // 按钮 UIButton *button = [[UIButton alloc] initWithFrame:self.view.bounds]; [self.view addSubview:button]; [button addTarget:self action:@selector(buttonEvent:) forControlEvents:UIControlEventTouchUpInside]; } /** * 代理方法 * * @param string 被点击的字符串 */ - (void)searchViewTapEventString:(NSString *)string { NSLog(@"%@", string); } /** * 创建出SearchView * * @param duration 动画执行时间 */ - (void)createSearchViewWithAnimatedDuration:(CGFloat)duration { SearchView *searchView = \ [[SearchView alloc] initWithFrame:CGRectMake(ScreenWidth, 0, ScreenWidth, ScreenHeight)]; searchView.alpha = 0.f; searchView.delegate = self; searchView.tag = UIVIEW_SearchView; searchView.dataStringArray = @[@"YouXianMing", @"Soup", @"Y.X.M.", @"Play Game", @"WaKaLiMaXiDa.", @"E.T.", @"Q.L.", @"SLG"]; [self.view addSubview:searchView]; UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 3, ScreenHeight)]; lineView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:0.5f]; [searchView addSubview:lineView]; [UIView animateWithDuration:duration delay:0.f usingSpringWithDamping:1.f initialSpringVelocity:1.f options:UIViewAnimationOptionLayoutSubviews animations:^{ searchView.alpha = 1.f; searchView.frame = CGRectMake(120, 0, ScreenWidth, ScreenHeight); } completion:^(BOOL finished) { [searchView expendCellAnimated:YES]; }]; } /** * 移除SearchView * * @param duration 动画执行时间 */ - (void)removeSearchViewWithAnimatedDuration:(CGFloat)duration { UIView *searchView = [self.view viewWithTag:UIVIEW_SearchView]; [UIView animateWithDuration:duration animations:^{ searchView.frame = CGRectMake(ScreenWidth, 0, ScreenWidth, ScreenHeight); searchView.alpha = 0.f; } completion:^(BOOL finished) { [searchView removeFromSuperview]; }]; } /** * 创建出背景View * * @param duration 动画执行时间 */ - (void)createBackgroundViewWithAnimatedDuration:(CGFloat)duration { UIView *backedgroundView = [[UIView alloc] initWithFrame:self.view.bounds]; backedgroundView.backgroundColor = [UIColor blackColor]; backedgroundView.tag = UIVIEW_BackgroundView; backedgroundView.alpha = 0.f; backedgroundView.userInteractionEnabled = NO; [self.view addSubview:backedgroundView]; [UIView animateWithDuration:duration animations:^{ backedgroundView.alpha = 0.35; }]; } /** * 移除背景View * * @param duration 动画执行时间 */ - (void)removeBackgroundViewWithAnimatedDuration:(CGFloat)duration { UIView *backedgroundView = [self.view viewWithTag:UIVIEW_BackgroundView]; [UIView animateWithDuration:duration animations:^{ backedgroundView.alpha = 0.f; } completion:^(BOOL finished) { [backedgroundView removeFromSuperview]; }]; } /** * 按钮点击事件 * * @param button 按钮 */ - (void)buttonEvent:(UIButton *)button { if (button.selected == NO) { button.selected = YES; [self createBackgroundViewWithAnimatedDuration:0.45]; [self createSearchViewWithAnimatedDuration:0.45]; } else { button.selected = NO; [self removeBackgroundViewWithAnimatedDuration:0.45]; [self removeSearchViewWithAnimatedDuration:0.45]; } } @end
以下是需要注意的一些小地方：
