美文网首页iOS-Tips-一些会忽略的小技巧
iOS TextField的leftView和rightView

iOS TextField的leftView和rightView

作者: 野生塔塔酱 | 来源:发表于2017-11-15 10:41 被阅读83次

    常常会遇到搜索框左边添加一个图片或是搜索样式图片或是密码图片等 如果自定义会很麻烦 直接用系统自带的textfield.leftView即可实现。 但是这里面也有个坑 就是leftView和rightView无法直接修改位置

        UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(5, 0, 12, 12)];
        imageView.image=[UIImage imageNamed:@"bar_ic_search"];
       
        _searchTextField.leftView = imageView;
        _searchTextField.leftViewMode = UITextFieldViewModeAlways;
    
    

    实现效果是这样的 并且无论你怎么修改imageView的fram它都是紧贴textField的左侧


    现在换个思路 加大imageView的控件宽高 留出空白区域 并且更改imageView的填充格式(不改填充格式会因为控件的加大图片自动填满控件导致拉伸变形)

        UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(5, 0, 24, 24)];
        imageView.image=[UIImage imageNamed:@"bar_ic_search"];
        imageView.contentMode = UIViewContentModeCenter;
    
        _searchTextField.leftView = imageView;
        _searchTextField.leftViewMode = UITextFieldViewModeAlways;
    

    如果不要求搜索图片左右间距相等,到这一步已经成功了
    但是又有个新坑 无论你怎么更改imageView的宽度 左边的空白区域总是会比右边到文本框的空白区域小

    最终解决方案

        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 35, 24)];
        
        UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(8, 0, 24, 24)];
        imageView.image=[UIImage imageNamed:@"bar_ic_search"];
        imageView.contentMode = UIViewContentModeCenter;
        
        [view addSubview:imageView];
        _searchTextField.leftView = view;
        _searchTextField.leftViewMode = UITextFieldViewModeAlways;
    

    将一个足够宽的uiview作为leftView添加给textField
    然后将imageView添加到uiview中 调整imageView在uiview上的位置即可

    如果需要搜索图片的点击效果 把imageView换成UIButton就好 textField.rightView同理
    但是textField.rightView与clearButton不能同时存在

    相关文章

      网友评论

        本文标题:iOS TextField的leftView和rightView

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