UISearchBar 去边框 改背景 (蛮恶心得控件 不如UITextFile 自己封装个)

在使用那个UISearchBar的时候我个人觉得那个灰色背景框和背景很不搭。结果设置背景为无色,但是设置完了还是不行。然后我去网上看了一下,看到有两种解决的方法。

1.设置barTinColor和背景相同就看不出来那个灰色框了。因为肉眼看不出来所以这是一个障眼法。不建议大家使用哈。当然你要是觉得其他方法麻烦呢用这个还是可以的啦。

2.至于这种呢就取巧于那个subviews的方法了。这个方法跟我们的版本有关的,所以最先得判断版本了。iOS7.0以上有两层的subviews,以下有一层。刚刚好7.0呢就没有你可以直接设置背景颜色和那个barTinColor味无色就好了。接下来看代码

有两种写法。

(1)

 float version = [[[UIDevice currentDevice] systemVersion] floatValue];

    if (version == 7.0) {
        _searchBar.backgroundColor = [UIColor clearColor];
        _searchBar.barTintColor = [UIColor clearColor];

    }else{
        for(int i =  0 ;i < _searchBar.subviews.count;i++){
            UIView * backView = _searchBar.subviews[i];
            if ([backView isKindOfClass:NSClassFromString(@"UISearchBarBackground")] == YES) {
                [backView removeFromSuperview];
                 [_searchBar setBackgroundColor:[UIColor clearColor]];

                break;
            }else{
                NSArray * arr = _searchBar.subviews[i].subviews;
                for(int j = 0;j<arr.count;j++   ){
                    UIView * barView = arr[i];
                    if ([barView isKindOfClass:NSClassFromString(@"UISearchBarBackground")] == YES) {

                        [barView removeFromSuperview];
                         [_searchBar setBackgroundColor:[UIColor clearColor]];

                        break;
                    }
                }
            }
        }
    }
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
2//     去掉UISearchBar的那个灰色背景框
    float version = [[[UIDevice currentDevice] systemVersion] floatValue];
    if ([self.searchController.searchBar respondsToSelector:@selector(barTintColor)]) {
        float iosversion7_1 = 7.1;
        if (version >= iosversion7_1){

            [[[[self.searchController.searchBar.subviews objectAtIndex:0] subviews] objectAtIndex:0] removeFromSuperview];
            [self.searchController.searchBar setBackgroundColor:[UIColor clearColor]];

        }else {            //iOS7.0

            [self.searchController.searchBar setBarTintColor:[UIColor clearColor]];
            [self.searchController.searchBar setBackgroundColor:[UIColor clearColor]];
        }
    }else {
        //iOS7.0以下
        [[self.searchController.searchBar.subviews objectAtIndex:0] removeFromSuperview];

        [self.searchController.searchBar setBackgroundColor:[UIColor clearColor]];
    }

    //    禁止搜索栏上移
    self.searchController.hidesNavigationBarDuringPresentation = NO;



 
 

在模仿微博 iOS 客户端的时候,希望将首页上方的搜索框做成和它一样的整体浅灰色背景+输入框白色背景,发现直接使用IBOutlet建立连接修改bordercolor或者borderwidth没有用。所以研究了一下如何修改UIsearchBar相关的颜色。

另外:发现原来微博客户端首页上面的 search bar 大概就是一个图片按钮【白眼】。

因为微博客户端首页上面的 search bar 高度很小,自己尝试修改没成功,于是 google 了一下。

《StackOverflow: Can the height of the UISearchbar TextField be modified?》 中提到一种方案:

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)
    for subView in searchBar.subviews  {
        print(subView)
        for subsubView in subView.subviews  {
            print(subsubView)
            if let textField = subsubView as? UITextField {
                                textField.font = UIFont.systemFontOfSize(20)
            }
        }
    }

}

把这个函数放在viewDidAppear会不会有点问题?是不是放在viewWillAppear比较好?

才发现 search bar 的结构很复杂。

我加了两行打印,把子视图简单地打印出来。得到的结果:

<UIView: 0x7fb6204a09c0; frame = (390 0; 195 25); autoresize = RM+BM; gestureRecognizers = <NSArray: 0x7fb622479cf0>; layer = <CALayer: 0x7fb6204806e0>>
<UIView: 0x7fb622122760; frame = (0 0; 320 44); clipsToBounds = YES; autoresize = W+H; layer = <CALayer: 0x7fb622120180>>
<UISearchBarBackground: 0x7fb622123340; frame = (0 0; 320 44); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7fb622123800>>
<UISearchBarTextField: 0x7fb622124bf0; frame = (8 8; 304 28); text = ''; clipsToBounds = YES; opaque = NO; layer = <CALayer: 0x7fb622120290>>

不去深究,简而言之,在它的第二层子视图(subview)中至少包含了一个UIView和一个UiTextField,分别是 search bar 的背景视图和文本输入框。

Search bar 的样式就是它们定义的。所以我们对它们进行修改就能达到目的。

试验

假设: @IBOutlet weak var searchBar: UISearchBar!

  • searchBar.tintColor: 设置输入框光标颜色

  • searchBar.barTintColor: 设置外层背景颜色

我通过下面的代码,试着给各种背景、边框设置不同颜色,得到的效果如图。

override func viewWillAppear(animated: Bool) {
    for subView in searchBar.subviews  {
        for subsubView in subView.subviews  {
            if let bg = subsubView as? UIView {
                bg.backgroundColor = UIColor.whiteColor()
                bg.layer.backgroundColor = UIColor.orangeColor().CGColor
                bg.layer.borderColor = UIColor.redColor().CGColor
                bg.layer.borderWidth = 1
            }
            if let textField = subsubView as? UITextField {
                textField.backgroundColor = UIColor.blueColor()
                textField.layer.borderColor = UIColor.greenColor().CGColor
                textField.layer.borderWidth = 1
            }
        }
    }
    
    searchBar.barTintColor = UIColor.yellowColor()
    searchBar.tintColor = UIColor.blackColor()
}


可以看到,红色、蓝色、绿色、黑色和黄色产生了效果。

如何使 borderwidth 和 backgroundColor 生效

有一个问题是:

  • 必须设置borderwidth,否则自定义的bordercolorbackgroundColor都不会生效。

比如注释掉borderwidth

override func viewWillAppear(animated: Bool) {
    for subView in searchBar.subviews  {
        for subsubView in subView.subviews  {
            if let bg = subsubView as? UIView {
                bg.backgroundColor = UIColor.whiteColor()
                bg.layer.backgroundColor = UIColor.orangeColor().CGColor
                bg.layer.borderColor = UIColor.redColor().CGColor
                //bg.layer.borderWidth = 1
            }
            if let textField = subsubView as? UITextField {
                textField.backgroundColor = UIColor.blueColor()
                textField.layer.borderColor = UIColor.greenColor().CGColor
                //textField.layer.borderWidth = 1
            }
        }
    }
    
    searchBar.barTintColor = UIColor.yellowColor()
    searchBar.tintColor = UIColor.blackColor()
}


会发现红色绿色不见了。

背后的 view

仔细看
这个时候在文本输入框的角落出现了橙色。

这说明,searchBar 的子视图中,除了一个作为整体背景的UIView和文本输入框之外,还有一个和文本输入框相同大小的UIView

所以我把文本输入框的背景色设置为clearColor,然后得到下图:

这个 view 具体作用是什么,之后再来和另外几个一起一个一个弄清楚。

另一个问题:当 searchBarStyle 为 UISearchBarStyle.Minimal 时

searchBarStyle默认为Prominent,你可以自己修改为Minimal,它的样式更简洁。

但是,当我切换成Minimal之后,结果变成这样了:

可以看到,searchBar.barTintColor = UIColor.yellowColor()没有生效。

暂时不知道为什么,我猜是Apple故意设置的不允许修改。

默认的黑色边框

当我把 search bar 背景颜色设置为我想要的浅灰色之后,又一个问题出现了。

居然有默认的边框。而且我取色看了一下,在背景颜色不同时,边框颜色值还不一样……

我尝试设置borderwidth0,可是边框依旧显示。(不信你试试:D )

所以我猜这可能是,当 search bar 没有边框的时候自动添加的强制性边框,用于和其他元素区别吧。

不过刚才已经找到修改边框颜色的方法了。所以用上面的方法修改即可,记得设置borderWidth

这里也有一点要注意:

因为上面我们并没有把每个UIView单独拿出来进行操作,而是遍历子视图里的所有UIView修改边框,这就导致包含的textField边框也被修改为背景层的边框颜色。假如我们自定义的textField边框颜色和背景层边框颜色不一样,那么这就不是我们想要的。记得在if let bg = subsubView as? UIView后面再执行if let textField = subsubView as? UITextField

override func viewWillAppear(animated: Bool) {
        for subView in searchBar.subviews  {
            print(subView)
            for subsubView in subView.subviews  {
                print(subsubView)
                if let bg = subsubView as? UIView {
                    bg.layer.borderColor = UIColor(red: 242/250, green: 242/250, blue: 242/250, alpha: 1).CGColor
                    bg.layer.borderWidth = 1
                }
                if let textField = subsubView as? UITextField {
                    textField.layer.borderWidth = 0
                }
            }
        }
        searchBar.barTintColor = UIColor(red: 242/250, green: 242/250, blue: 242/250, alpha: 1)
    }

最后附一张我的截图 : D


我们要自定义原生控件的外观, 比如说要更改输入框背景颜色, 需要找到UITextField 并更改属性即可,

方法一: 

遍历查找, 

UIColor *innerColor = [UIColor redColor];

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

        if ([subview isKindOfClass:[UITextField class]]) {

            UITextField *textField = (UITextField*)subview;

            textField.backgroundColor = innerColor;

        }

    }


方法二: 

使用 UIAppearance 协议更改

     [[UITextField appearanceWhenContainedIn:[UISearchBar class], nilsetBackgroundColor:innerColor];


更改的时候遇到一个问题: 更改不生效, 遍历时, 发现只有当 UISearchBar所在的Viewcontroller的View 加载完后才能找到, 这时候需要在初始化UISearchBar后,

调用 layoutSubviews ,让UISeachBar 加载所有子VIew, 即: [searchBar layoutSubviews] .

个人理解为 UISearchBar 为懒加载.


// 去掉边框  改内部背景  添加右边清除btn

   _searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(40, self.selectTimeLa.bottom+30, SceneWidth-80, 40)];

    _searchBar.placeholder = @"输入关键字";

    _searchBar.delegate = self;

//    _searchBar.barTintColor = [UIColor colorWithWhite:0.95 alpha:1.0];

//    _searchBar.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1.0];

   [_searchBar setBackgroundImage:[[UIImage alloc] init]];

    [self.headView addSubview:_searchBar];

    _searchBar.searchBarStyle = UISearchBarStyleMinimal;

    _searchBar.enablesReturnKeyAutomatically = YES ;

    

    float version = [[[UIDevice currentDevice] systemVersion] floatValue];

    

    if (version == 7.0) {

        _searchBar.backgroundColor = [UIColor clearColor];

        _searchBar.barTintColor = [UIColor clearColor];

        

    }else{

        for(int i =  0 ;i < _searchBar.subviews.count;i++){

            UIView * backView = _searchBar.subviews[i];

            if ([backView isKindOfClass:NSClassFromString(@"UISearchBarBackground")] == YES) {

                [backView removeFromSuperview];

                [_searchBar setBackgroundColor:[UIColor clearColor]];

                

                break;

            }else{

                NSArray * arr = _searchBar.subviews[i].subviews;

                for(int j = 0;j<arr.count;j++   ){

                    UIView * barView = arr[i];

                    if ([barView isKindOfClass:NSClassFromString(@"UISearchBarBackground")] == YES) {

                        

                        [barView removeFromSuperview];

                        [_searchBar setBackgroundColor:[UIColor clearColor]];

                        

                        break;

                    }

                }

            }

        }

    }


 UIButton*  btnClear = [[UIButton alloc] initWithFrame:CGRectMake(self.searchBar.width-40, 0, 40, 40)];

    [btnClear addTarget:self action:@selector(clearTextAcion:) forControlEvents:UIControlEventTouchUpInside];

    [self.searchBar addSubview:btnClear];


- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar

{

    

    NSString *aa=@"11";

    if ([_searchBar.text stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]].length == 0 || [aa isEqualToString:[_searchBar.text stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]]]) {

        return;

    }


    [searchBar resignFirstResponder];

}





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值