您的位置:首页 > 产品设计 > UI/UE

UISearchBar设置技巧(输入框,取消按钮等背景设置)

2017-07-31 18:36 1581 查看

1. 设置光标和输入框的颜色

self.searchBar.tintColor = [UIColor blueColor];

[self.mySearchBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"searchBarFieldBackground"] forState:UIControlStateNormal];


2. 修改placeHolder的文字颜色

for (UIView* subview in [[searchBar.subviews lastObject] subviews]) {

if ([subview isKindOfClass:[UITextField class]]) {
UITextField *textField = (UITextField*)subview;
//修改输入字体的颜色
textField.textColor = [UIColor redColor];
//修改输入框的颜色
[textField setBackgroundColor:[UIColor grayColor]];
//修改placeholder的颜色
[textField setValue:[UIColor whiteColor] forKeyPath:@"_placeholderLabel.textColor"];
} else if ([subview isKindOfClass:NSClassFromString(@"UISearchBarBackground")])
{
[subview removeFromSuperview];
}
}


3. 修改UISearchBar的取消按钮背景、搜索内容输入文本框背景和UISearchBar的背景

(1)、添加UISearchBar到父View

UISearchBar *searchBar = [[UISearchBar alloc]init];
searchBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 44);
searchBar.autoresizingMask = UIViewAutoresizingFlexibleWidth;
searchBar.delegate = self;
searchBar.placeholder = @"请输入搜索内容";
[self.view addSubview:searchBar];


(2)、修改搜索框背景

UIImage *img = [UIImage resizedImage:@"find_bg.png"];
[_searchBar setBackgroundImage:img];


(3)、修改搜索输入框内左侧的指示图标

[_searchBar setImage:[UIImage resizedImage:@"ic_search.png"] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];


(4)、修改搜索输入文本的背景

[_searchBar setSearchFieldBackgroundImage:[UIImage imageNamed:@"login_btn_input_side.png"] forState:UIControlStateNormal];


注:对于设计人员提供的搜索输入文本的背景,若提供的是一个圆角的小方块,按常理我们会使用拉伸图片的中间部分的方法,经测试显示效果如下:

若让设计人员重新提供一张固定高度的图片(比如高是60),当做搜索输入文本的背景,效果图如下:

(5)、修改UISearchBar右侧的取消按钮文字颜色及背景图片

-(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
{
[searchBar setShowsCancelButton:YES animated:YES];

// 修改UISearchBar右侧的取消按钮文字颜色及背景图片
for (UIView *searchbuttons in [searchBar subviews]){
if ([searchbuttons isKindOfClass:[UIButton class]]) {
UIButton *cancelButton = (UIButton*)searchbuttons;
// 修改文字颜色
[cancelButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[cancelButton setTitleColor:[UIColor whiteColor] forState:UIControlStateHighlighted];

// 修改按钮背景
[cancelButton setBackgroundImage:[UIImage resizedImage:@"login_btn_login.png"] forState:UIControlStateNormal];
[cancelButton setBackgroundImage:nil forState:UIControlStateHighlighted];
}
}
}
注:修改取消按钮文字颜色及背景图片的代码片段,一定要放到取消按钮会显示代理方法中修改,否则遍历找不着呀,那就修改不了了。


4. 将UISearchBar放入导航栏的方法:

(1).通过navigationItem.titleView

UISearchBar *searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(5.0f,20.0f,WCScreenW -10.0f,44.0f)];
searchBar.delegate = self;
[searchBar setPlaceholder:@"搜索"];

//将搜索条放在一个UIView上
UIView *searchView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, WCScreenW, 64)];
searchView.backgroundColor = [UIColor clearColor];
[searchView addSubview:searchBar];

self.navigationItem.titleView = searchView;


(2).自己再添加一个NavigationBar

self.navigationController.navigationBar.hidden = YES;
UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0,      self.view.bounds.size.width, 64)] ;
navigationBar.barTintColor = [LYCCUISetting getInstance].colorTopView;
[self.view addSubview:navigationBar];
[navigationBar addSubview:self.searchBar];
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息