文档章节

UISearchBar的使用以及下拉列表框的实现

开发问道
 开发问道
发布于 2013/02/22 18:47
字数 837
阅读 6878
收藏 5

在IOS混饭吃的同志们都很清楚,搜索框在移动开发应用中的地位。今天我们就结合下拉列表框的实现来聊聊UISearchBar的使用。本人新入行的菜鸟一个,不足之处请多多指教。直接上代码。

UISearchBar控件的声明:(在控制器DownListViewController中)

@property (nonatomic,retain) UISearchBar* searchBar;

控件的初始化:

_searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(0, 0, 320, 40)]; 
_searchBar.placeholder = @"test";   //设置占位符 
_searchBar.delegate = self;   //设置控件代理

当然,做完这些工作之后,我们还要在将控件添加到父视图之上,也可以把他设置成UITableView的tableHeaderView属性值,由于大家需求不一,这里就不再给出代码。

前面,我们设置了控件的代理,当然我们必须让控制器(DownListViewController)的 .h 文件实现 UISearchBarDelegate 协议,然后我们继续, 我们要在 .m 文件中实现协议方法:

#pragma mark - 
#pragma mark UISearchBarDelegate 
 
//搜索框中的内容发生改变时 回调(即要搜索的内容改变)
- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText{ 
    NSLog(@"changed"); 
    if (_searchBar.text.length == 0) { 
        [self setSearchControllerHidden:YES]; //控制下拉列表的隐现
    }else{ 
        [self setSearchControllerHidden:NO]; 
  
    } 
} 
 
- (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar { 
    searchBar.showsCancelButton = YES; 
    for(id cc in [searchBar subviews])
    {
        if([cc isKindOfClass:[UIButton class]])
        {
            UIButton *btn = (UIButton *)cc;
            [btn setTitle:@"取消"  forState:UIControlStateNormal];
        }
    }
    NSLog(@"shuould begin"); 
    return YES; 
} 
 
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar { 
    searchBar.text = @""; 
    NSLog(@"did begin"); 
} 
 
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar { 
    NSLog(@"did end"); 
    searchBar.showsCancelButton = NO; 
 
} 
 
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar { 
    NSLog(@"search clicked"); 
} 
 
//点击搜索框上的 取消按钮时 调用
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar { 
    NSLog(@"cancle clicked"); 
    _searchBar.text = @""; 
    [_searchBar resignFirstResponder]; 
    [self setSearchControllerHidden:YES]; 
}
至此,搜索框的实现就搞定了,怎么样简单吧。下面我们来讲讲下拉列表框的实现,先说说他的实现原理或者是思路吧。下拉列表框我们用一个控制器来实现,我们新建一个控制器SearchViewController.
@interface SearchViewController : UITableViewController 
 
@end
在 .m 文件中,我们实现该控制器
- (id)initWithStyle:(UITableViewStyle)style 
{ 
    self = [super initWithStyle:style]; 
    if (self) { 
        // Custom initialization 
    } 
    return self; 
} 
 
- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
 
    self.tableView.layer.borderWidth = 1; 
    self.tableView.layer.borderColor = [[UIColor blackColor] CGColor]; 
 
}
然后实现控制器的数据源,
#pragma mark - 
#pragma mark Table view data source 
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {  
    return 1; 
} 
 
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
    // 返回列表框的下拉列表的数量 
    return 3; 
} 
 
 
// Customize the appearance of table view cells. 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
     
    static NSString *CellIdentifier = @"Cell"; 
     
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
    if (cell == nil) { 
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] ; 
    } 
     
    // Configure the cell... 
    NSUInteger row = [indexPath row]; 
    cell.textLabel.text = @"down list"; 
     
    return cell; 
}
这样列表框的控制器就实现了。接下来我们就来看看怎么让出现、隐藏。这点我们利用UIView的动画效果来实现,我们在DownListViewController控制器中 增加一个方法:
- (void) setSearchControllerHidden:(BOOL)hidden { 
    NSInteger height = hidden ? 0: 180; 
    [UIView beginAnimations:nil context:nil]; 
    [UIView setAnimationDuration:0.2]; 
     
    [_searchController.view setFrame:CGRectMake(30, 36, 200, height)]; 
    [UIView commitAnimations]; 
}
我们只需调用该方法就可以了。现在我们看看DownListViewController的布局方法
- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    _searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(0, 0, 320, 40)]; 
    _searchBar.placeholder = @"test"; 
    _searchBar.delegate = self;  
     
    _tableview = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain]; 
    _tableview.dataSource = self; 
    _tableview.tableHeaderView = _searchBar; 
     
    _searchController = [[SearchViewController alloc] initWithStyle:UITableViewStylePlain]; 
    [_searchController.view setFrame:CGRectMake(30, 40, 200, 0)]; 
     
    [self.view addSubview:_tableview]; 
    [self.view addSubview:_searchController.view]; 
}
这样一切都搞定了。


好了,总结一下:

我们用了两个控制器:DownListViewController(搜索框的实现 和 控制下拉列表框的出现与隐藏)和SearchViewController(下拉列表框的实现)。在DownListViewController中我们声明并初始化 UISearchBar和SearchViewController(高度开始设置为零),用动画来实现下拉列表框的出现与隐藏。


© 著作权归作者所有

共有 人打赏支持
开发问道
粉丝 8
博文 8
码字总数 4413
作品 0
海淀
程序员
私信 提问
iOS--UISearchBar 属性、方法详解及应用(自定义搜索框样式)

很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar。但实际项目中我们通常需要更改系统默认搜索框的样式。为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方法。...

遇见0620
2017/11/02
0
0
iOS中UISearchBar(搜索框)使用总结

iOS中UISearchBar(搜索框)使用总结 初始化:UISearchBar继承于UIView,我们可以像创建View那样创建searchBar ? 1 2 @property(nonatomic) UIBarStyle barStyle; 这个属性可以设置searchBar的...

04zhujunjie
2015/11/04
0
0
iOS中UISearchBar(搜索框)使用总结

iOS中UISearchBar(搜索框)使用总结 初始化:UISearchBar继承于UIView,我们可以像创建View那样创建searchBar @property(nonatomic) UIBarStyle barStyle; 这个属性可以设置searchBar的搜索框...

珲少
2015/09/22
49.3K
1
从零实现Vue的组件库(十)- Select 实现

当选项过多时,使用下拉菜单展示并选择内容。 Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显; 单选、多选的区分,以及对应处理。 1. 实例 代码 实例地址:Selec...

FatGe
01/24
0
0
360UI 界面框架 最完美的select下拉框美化

最完美的select下拉框美化 很多人为select的诸多不完善而头痛,如无法自定义样式、IE6中无法被浮动层遮住等等。下面介绍一款堪称最完美的下拉框组件:360UI即QUI下拉框( ) 特点1:美化的并...

阿东2020
2013/05/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 我都想和他们组成一个家庭了

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Sharon啊 :分享王菲的单曲《流年》有生之年狭路相逢终不能幸免,手心突然忽然长出纠缠的曲线。 《流年》- 王菲 手机党少年们想听歌,请使劲...

小小编辑
今天
176
6
CentOS7利用systemctl添加自定义系统服务

CentOS7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,需要开机不登陆就能运行的程序,存在系统服务里,即:/usr/lib/systemd/system目录下. CentOS7的每...

linuxprobe16
今天
1
0
RabbitMQ入门

RabbitMQ是一个由erlang开发的基于AMQP(Advanced Message Queue)协议的开源实现。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面都非常的优秀。是当前最主流的消息中间...

watermelon11
今天
19
0
今天的学习

自动加载:方法一 function __autoload( $className ){在这里,完成加载B这个类文件的工作。}class A{} //这是一个类$a1 = new A(); //这里没有自动加载的发生,因为A这个类...

墨冥
今天
4
0
印刷工艺步骤

印刷厂从收到订单到交付整个流程,一般涉及到以下步骤 1.设计(经过软件如cdr,psd,ai等等设计需要印刷的名片,宣传单,画册等物料); 2.排版拼版(在电脑软件这区域完成); 3.出版、出硫...

focusone
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部