搜索栏组件

AUSearchBar 为 mPaaS 搜索栏控件,该组件提供两种显示样式:

  • AUSearchBarStyleNormal:带取消按钮的搜索栏,参考全局搜索主页搜索栏。

  • AUSearchBarStyleDetail:带取消和返回按钮的搜索栏,参考全局搜索二级页面搜索栏。

效果图

依赖

AUSearchBar 的依赖如下:

AntUI(iOS)
1.0.0.161108003457
APCommonUI(iOS)
1.2.0.161108102201

接口说明

@class AUSearchBar;

@protocol AUSearchBarDelegate <NSObject>

@optional

#pragma mark - 对应 UITextField 的代理方法
//
- (BOOL)searchBarTextShouldBeginEditing:(AUSearchBar *)searchBar;
//
- (BOOL)searchBarTextShouldEndEditing:(AUSearchBar *)searchBar;
// called when text starts editing
- (void)searchBarTextDidBeginEditing:(AUSearchBar *)searchBar;
// called when text ends editing
- (void)searchBarTextDidEndEditing:(AUSearchBar *)searchBar;
// called when text changes (including clear)
- (void)searchBar:(AUSearchBar *)searchBar textDidChange:(NSString *)searchText;
// called before text changes
- (BOOL)searchBar:(AUSearchBar *)searchBar shouldChangeTextInRange:(NSRange)range replacementText:(NSString *)text;

- (BOOL)searchBarShouldClear:(AUSearchBar *)searchBar;

#pragma mark - 其他代理方法

// 键盘搜索按钮点击后的回调
- (void)searchBarSearchButtonClicked:(AUSearchBar *)searchBar;

// 取消按钮点击后的回调
- (void)searchBarCancelButtonClicked:(AUSearchBar *) searchBar;

// 返回按钮点击后的回调(AUSearchBarStyleDetail 有效)
- (void)searchBarBackButtonClicked:(AUSearchBar *)searchBar;

// voice 按钮点击后的回调(shouldShowVoiceButton 为 YES 时有效)
- (void)searchBarOpenVoiceAssister:(AUSearchBar *)searchBar;

@end



typedef NS_ENUM(NSUInteger, AUSearchBarStyle) {
        AUSearchBarStyleNormal = 0,//normal
        AUSearchBarStyleDetail, //has back Button
};



/**
 搜索栏控件(默认宽度和屏幕宽度一致,高度 44)
 */
@interface AUSearchBar : UIView

@property (nonatomic, strong) NSString *text;                           // 搜索框文本
@property (nonatomic, assign) BOOL isSupportHanziMode;                  // 是否支持汉字边输入边搜索模式,默认为 YES
@property (nonatomic, assign) AUSearchBarStyle style;                   // 搜索框样式
@property (nonatomic, assign) BOOL shouldShowVoiceButton;               // 是否显示 voice 按钮,默认为 NO
@property (nonatomic, strong, readonly) UITextField *searchTextField;   // 搜索框
@property (nonatomic, weak) id<AUSearchBarDelegate> delegate;

/**
 初始化方法

 @param style 搜索框样式

 @return AUSearchBar 实例
 */
- (instancetype)initWithStyle:(AUSearchBarStyle)style;

@end

代码示例

  • 添加到导航栏:

      AUSearchBar *searchBar = [[AUSearchBar alloc] initWithStyle:AUSearchBarStyleNormal];
      searchBar.searchTextField.placeholder = @"搜索栏样式(AUSearchBarStyleNormal)";
      searchBar.delegate = self;
      searchBar.isSupportHanziMode = YES;
      searchBar.shouldShowVoiceButton = YES;
      self.navigationItem.titleView = searchBar;
      self.navigationItem.leftBarButtonItem = nil;   // 需要将左边导航按钮置空
      self.navigationItem.rightBarButtonItem = nil;  // 需要将右边导航按钮置空
      self.navigationItem.hidesBackButton = YES;     // 需要隐藏返回按钮
  • 添加到普通视图:

      searchBar = [[AUSearchBar alloc] initWithStyle:AUSearchBarStyleDetail];
      searchBar.searchTextField.placeholder = @"搜索栏样式(AUSearchBarStyleDetail)";
      searchBar.delegate = self;
      searchBar.isSupportHanziMode = YES;
      searchBar.shouldShowVoiceButton = YES;
      [self.view addSubview:searchBar];
阿里云首页 移动开发平台 mPaaS 相关技术圈