美文网首页iOS 开发 iOS Developer程序员
圆弧边角的searchBar的实现

圆弧边角的searchBar的实现

作者: Jabber_YQ | 来源:发表于2016-08-19 18:17 被阅读290次

    在开发过程中,有时候系统给的searchBar和项目的风格不相同,有时候需要圆弧边角的searchBar,如图:


    屏幕快照 2016-08-19 下午6.00.18.png

    现在分享他的实现。
    方法一:用系统自带的searchBar:

        UISearchBar *searchBar = [[UISearchBar alloc] init];
        searchBar.delegate = self;
        searchBar.frame = CGRectMake(10, 28, SCREEN_WIDTH - 20, 32);
        searchBar.backgroundColor = [UIColor redColor];
        searchBar.layer.cornerRadius = 16;
        searchBar.layer.masksToBounds = YES;
        [searchBar.layer setBorderWidth:8];
        [searchBar.layer setBorderColor:[UIColor whiteColor].CGColor];  //设置边框为白色
        searchBar.placeholder = @"请输入关键词来查找房源";
        [self.view addSubview:searchBar];
    

    方法二:用UITextField改装成searchBar:

    UIView *searchView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, self.view.frame.size.width, 40*(self.view.frame.size.height/568))];
    searchView.backgroundColor = [UIColor clearColor];
    
    UIImageView *searchBg = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"citySelectbg"]];
    searchBg.frame = CGRectMake(0, 0, searchView.frame.size.width, searchView.frame.size.height);
    [searchView addSubview:searchBg];
    
    //搜索框
    _searchText = [[UITextField alloc]initWithFrame:CGRectMake(30*(self.view.frame.size.width/320), 0, self.view.frame.size.width-30, searchView.frame.size.height)];
    _searchText.backgroundColor = [UIColor greenColor];
    _searchText.font = [UIFont systemFontOfSize:13];
    _searchText.placeholder  = @"请输入城市名称或首字母查询";
    _searchText.returnKeyType = UIReturnKeySearch;
    _searchText.textColor    = [UIColor colorWithRed:58/255.0 green:58/255.0 blue:58/255.0 alpha:1];
    _searchText.delegate     = self;
    [_searchText addTarget:self action:@selector(textChange:) forControlEvents:UIControlEventEditingChanged];
    [searchView addSubview:_searchText];
    [self.view addSubview:searchView];
    

    第二个方法实现的界面如图:


    屏幕快照 2016-08-19 下午6.14.18.png

    把绿色改成clearColor后:


    屏幕快照 2016-08-19 下午6.16.11.png
    看上去就像是一个searchBar。

    @"citySelectbg":

    citySelectbg@2x.png

    相关文章

      网友评论

        本文标题:圆弧边角的searchBar的实现

        本文链接:https://www.haomeiwen.com/subject/ogibsttx.html