iOS - 修改 UITextField 的 clearButtton 样式

向右看齐 2022-12-04 07:49 478阅读 0赞

# 1. 问题描述 #

当输入框 UITextField 的背景比较深的时候，它自带的 clearButton 就会变得几乎不可见，但是 UIKit 框架中提供的 clearButtonMode 属性只能用于控制 clearButton 的出现时机，并不能对其样式进行更改。

![在这里插入图片描述][2020090619163487.png_pic_center]

由于那自带的样式无法让我们顺利通过 UI 走查，我们就需要获取到 UITextField 中的私有属性 clearButton，然后对其样式进行修改。

# 2. 解决方案 #

**方法一：**

我们可以利用 KVC 进行 clearButton 的获取，这是一种非常简便的方式，实现代码如下：

UIButton *cancelBtn = [_textField valueForKey:@"_clearButton"];
    // 在此处进行 clearBtn 样式的设置
    NSLog(@"%@", clearBtn);

但是，KVC 在用于获取类的私有属性的时候，是存在一定风险的，尤其是对于官方和第三库中类的私有属性，**因为当他们对属性的名称进行修改，KVC 会无法找到对应的值就会引起应用奔溃**，这一点要时刻铭记！

**方法二：**

另一个办法是通过写一个继承自 `UITextField` 的类，在 `layoutSubviews` 方法中利用递归遍历子控件的方法去获取 clearButton。相关代码如下：

@interface VGTextField : UITextField
    
    @end
    
    @implementation VGTextField
    
    - (void)layoutSubviews { 
        [super layoutSubviews];
        UIButton *clearBtn = [self _clearButtonInView:self];
        // 在此处进行 clearBtn 样式的设置
        NSLog(@"%@", clearBtn);
    }
    
    /// 递归遍历子控件，获取 clearButton
    /// @param view clearButton 对应的父 UITextField
    - (UIButton *)_clearButtonInView:(UIView *)view { 
        if ([view isKindOfClass:[UIButton class]] || [view isKindOfClass:[NSClassFromString(@"_UITextFieldClearButton") class]]) { 
            return (UIButton *)view;
        }
        for (UIView *subView in view.subviews) { 
            UIView *button = [self _clearButtonInView:subView];
            if (button) { 
                return (UIButton *)button;
            }
        }
        return nil;
    }
    
    @end

这也是我目前使用的实现方法，虽然看起来代码比较多，但是相对安全，不会引起程序崩溃。

也许有同学有疑问，为什么要重写一个类，直接在 `UITextField` 对象创建的时候直接调用递归查找子控件的方式去获取不久好了吗？

**只可惜，在 `UITextField` 对象刚创建的时候，也许是因为懒加载之类的因素，clearButton 还没有被添加到该对象中，我们无法获取**。只有当输入框中有文字输入时，clearButton 才能被获取到，这便是我们需要重写一个类的原因。

# 3. 实现效果 #

当我们获取到 clearButton 之后，给按钮更换样式什么的还不是手到擒来的事情吗？

下图便是给 clearButton 更换新图片的结果，是不是学到新招了呢？别忘了点赞哦~

![在这里插入图片描述][20200906202109248.png_pic_center]

[2020090619163487.png_pic_center]: /images/20221123/840a69ca24bd41f2b57c131fbf3a02ed.png
[20200906202109248.png_pic_center]: /images/20221123/3e83849bf1c748638fcf866a1d0ede42.png