UITextFieldのクリアボタンの色合いを変更する方法
UITextfieldに自動生成されたクリアボタンがあり、デフォルトの青味がかった色になっています。色合いを白に変更できません。ストーリーボードとコードを変更せずに成功させましたが、カスタムイメージを使用したくありません。
カスタム画像を使用せずにデフォルトのクリアボタンの色合いを変更するにはどうすればよいですか？
どうぞ！
TintTextField。
カスタム画像を使用しない、またはボタンを追加するなど.
class TintTextField: UITextField {
var tintedClearImage: UIImage?
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.setupTintColor()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.setupTintColor()
}
func setupTintColor() {
self.borderStyle = UITextField.BorderStyle.roundedRect
self.layer.cornerRadius = 8.0
self.layer.masksToBounds = true
self.layer.borderColor = self.tintColor.cgColor
self.layer.borderWidth = 1.5
self.backgroundColor = .clear
self.textColor = self.tintColor
}
override func layoutSubviews() {
super.layoutSubviews()
self.tintClearImage()
}
private func tintClearImage() {
for view in subviews {
if view is UIButton {
let button = view as! UIButton
if let image = button.image(for: .highlighted) {
if self.tintedClearImage == nil {
tintedClearImage = self.tintImage(image: image, color: self.tintColor)
}
button.setImage(self.tintedClearImage, for: .normal)
button.setImage(self.tintedClearImage, for: .highlighted)
}
}
}
}
private func tintImage(image: UIImage, color: UIColor) -> UIImage {
let size = image.size
UIGraphicsBeginImageContextWithOptions(size, false, image.scale)
let context = UIGraphicsGetCurrentContext()
image.draw(at: .zero, blendMode: CGBlendMode.normal, alpha: 1.0)
context?.setFillColor(color.cgColor)
context?.setBlendMode(CGBlendMode.sourceIn)
context?.setAlpha(1.0)
let rect = CGRect(x: CGPoint.zero.x, y: CGPoint.zero.y, width: image.size.width, height: image.size.height)
UIGraphicsGetCurrentContext()?.fill(rect)
let tintedImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return tintedImage ?? UIImage()
}
}
これを実行するのに問題があるのは、クリアボタンの画像が色付けされていないためです。それらは通常の画像です。
クリアボタンは、UITextFieldの内部のボタンです。他のボタンと同様に、画像を持つことができます。特に、twoイメージがあります。1つはNormal状態用で、もう1つはHighlighted状態用です。 OPが反対している青色の画像は強調表示された画像であり、クリアボタンが存在するときにこのコードを実行することでキャプチャできます。
let tf = self.tf // the text view
for sv in tf.subviews as! [UIView] {
if sv is UIButton {
let b = sv as! UIButton
if let im = b.imageForState(.Highlighted) {
// im is the blue x
}
}
}
キャプチャすると、14x14の倍解像度のTIFF画像であることがわかります。ここにあります。
理論的には、画像を別の色に変更し、テキストビューのクリアボタンの画像として強調表示状態に割り当てることができます。しかし実際には、ボタンは常に存在するとは限らないため、これを行うのは簡単ではありません。存在しない場合は参照できません（単なる非表示ではありません。実際にはビュー階層の一部ではないため、アクセスする方法はありません）。
さらに、クリアボタンをカスタマイズするUITextField APIはありません。
したがって、最も簡単な解決策は、アドバイスされることです here ：カスタムの標準画像と強調表示画像でボタンを作成し、UITextFieldのrightViewとして提供します。次に、clearButtonModeをNever（代わりに正しいビューを使用しているため）に設定し、rightViewModeを任意の値に設定します。
もちろん、このボタンのタップを検出し、テキストフィールドのテキストをクリアして応答する必要があります。しかし、これは簡単であり、読者の演習として残されています。
@Mikael Hellmanの応答に基づいて、Objective-CのUITextFieldサブクラスの同様の実装を準備しました。唯一の違いは、標準状態と強調表示状態に別々の色を使用できることです。
.hファイル
#import <UIKit/UIKit.h>
@interface TextFieldTint : UITextField
-(void) setColorButtonClearHighlighted:(UIColor *)colorButtonClearHighlighted;
-(void) setColorButtonClearNormal:(UIColor *)colorButtonClearNormal;
@end
.mファイル
#import "TextFieldTint.h"
@interface TextFieldTint()
@property (nonatomic,strong) UIColor *colorButtonClearHighlighted;
@property (nonatomic,strong) UIColor *colorButtonClearNormal;
@property (nonatomic,strong) UIImage *imageButtonClearHighlighted;
@property (nonatomic,strong) UIImage *imageButtonClearNormal;
@end
@implementation TextFieldTint
-(void) layoutSubviews
{
[super layoutSubviews];
[self tintButtonClear];
}
-(void) setColorButtonClearHighlighted:(UIColor *)colorButtonClearHighlighted
{
_colorButtonClearHighlighted = colorButtonClearHighlighted;
}
-(void) setColorButtonClearNormal:(UIColor *)colorButtonClearNormal
{
_colorButtonClearNormal = colorButtonClearNormal;
}
-(UIButton *) buttonClear
{
for(UIView *v in self.subviews)
{
if([v isKindOfClass:[UIButton class]])
{
UIButton *buttonClear = (UIButton *) v;
return buttonClear;
}
}
return nil;
}
-(void) tintButtonClear
{
UIButton *buttonClear = [self buttonClear];
if(self.colorButtonClearNormal && self.colorButtonClearHighlighted && buttonClear)
{
if(!self.imageButtonClearHighlighted)
{
UIImage *imageHighlighted = [buttonClear imageForState:UIControlStateHighlighted];
self.imageButtonClearHighlighted = [[self class] imageWithImage:imageHighlighted
tintColor:self.colorButtonClearHighlighted];
}
if(!self.imageButtonClearNormal)
{
UIImage *imageNormal = [buttonClear imageForState:UIControlStateNormal];
self.imageButtonClearNormal = [[self class] imageWithImage:imageNormal
tintColor:self.colorButtonClearNormal];
}
if(self.imageButtonClearHighlighted && self.imageButtonClearNormal)
{
[buttonClear setImage:self.imageButtonClearHighlighted forState:UIControlStateHighlighted];
[buttonClear setImage:self.imageButtonClearNormal forState:UIControlStateNormal];
}
}
}
+ (UIImage *) imageWithImage:(UIImage *)image tintColor:(UIColor *)tintColor
{
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect rect = (CGRect){ CGPointZero, image.size };
CGContextSetBlendMode(context, kCGBlendModeNormal);
[image drawInRect:rect];
CGContextSetBlendMode(context, kCGBlendModeSourceIn);
[tintColor setFill];
CGContextFillRect(context, rect);
UIImage *imageTinted = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return imageTinted;
}
@end
Swiftでは、拡張機能を記述し、プロジェクトの任意のテキストフィールドで使用できます。
extension UITextField {
func modifyClearButton(with image : UIImage) {
let clearButton = UIButton(type: .custom)
clearButton.setImage(image, for: .normal)
clearButton.frame = CGRect(x: 0, y: 0, width: 15, height: 15)
clearButton.contentMode = .scaleAspectFit
clearButton.addTarget(self, action: #selector(UITextField.clear(_:)), for: .touchUpInside)
rightView = clearButton
rightViewMode = .whileEditing
}
func clear(_ sender : AnyObject) {
self.text = ""
sendActions(for: .editingChanged)
}
}
Swift 4の場合、これをUITextFieldのサブクラスに追加します。
import UIKit
class CustomTextField: UITextField {
override func layoutSubviews() {
super.layoutSubviews()
for view in subviews {
if let button = view as? UIButton {
button.setImage(button.image(for: .normal)?.withRenderingMode(.alwaysTemplate), for: .normal)
button.tintColor = .white
}
}
}
}
KVOを使用してクリアボタンにアクセスし、更新できます。
UIButton *clearButton = [myTextField valueForKey:@"_clearButton"]
if([clearButton respondsToSelector:@selector(setImage:forState:)]){
//ensure that the app won't crash in the future if _clearButton reference changes to a different class instance
[clearButton setImage:[UIImage imageNamed:@"MyImage.png"] forState:UIControlStateNormal];
}
注：このソリューションは将来の保証ではありません-if Apple clearボタンの実装を変更すると、正常に機能しなくなります。
Swift 3更新されたソリューション：
extension UITextField {
func modifyClearButtonWithImage(image : UIImage) {
let clearButton = UIButton(type: .custom)
clearButton.setImage(image, for: .normal)
clearButton.frame = CGRect(x: 0, y: 0, width: 15, height: 15)
clearButton.contentMode = .scaleAspectFit
clearButton.addTarget(self, action: #selector(self.clear(sender:)), for: .touchUpInside)
self.rightView = clearButton
self.rightViewMode = .whileEditing
}
func clear(sender : AnyObject) {
self.text = ""
}
}
楽しい ;）
アプリでUIAppearanceを使用する場合、実行時にクリアボタンのtintColorを設定できます。
_let textField = UITextField.appearance()
textField.tintColor = .green
_起動時に、AppDelegateでクラス関数を呼び出します。このクラス関数には、.appearance()が設定された他の多くのコントロールがあります。
アプリの外観を設定するクラスの名前がBeautyifyで、次のようなものを作成するとします。
_@objc class Beautify: NSObject {
class func applyAppearance() {
let tableViewAppearance = UITableView.appearance()
tableViewAppearance.tintColor = .blue
let textField = UITextField.appearance()
textField.tintColor = .green
}
}
_その後、AppDelegate内でdidFinishLaunchingWithOptionsを呼び出すだけです。
Beautify.applyAppearance()
これは、アプリケーション内の物の外観をすべて同時に構成するのに最適な方法です。
IOS 7以降で利用可能な最高評価の回答よりも簡単かもしれません。
@interface MyTextField
@end
@implementation MyTextField
- (void)layoutSubviews {
[super layoutSubviews];
for (UIView *subView in self.subviews) {
if ([subView isKindOfClass:[UIButton class]]) {
UIButton *button = (UIButton *)subView;
[button setImage:[[button imageForState:UIControlStateNormal] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]
forState:UIControlStateNormal];
button.tintColor = self.tintColor;
}
}
}
@end
カスタムアイコンを使用すると、iOS 11で動作します
searchBar.setImage(UIImage(named: "ic_clear"), for: .clear, state: .normal)
これは、objective-Cを使用してうまくいきました。私はこのトピックの他のスレッドから断片を引き出し、このソリューションを思い付きました：
UIButton *btnClear = [self.textFieldUserID valueForKey:@"clearButton"];
[btnClear setImage:[UIImage imageNamed:@"facebookLoginButton"] forState:UIControlStateNormal];
In Swift 3：これは私のために働いています
if let clearButton = self.textField.value(forKey: "_clearButton") as? UIButton {
// Create a template copy of the original button image
let templateImage = clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate)
// Set the template image copy as the button image
clearButton.setImage(templateImage, for: .normal)
clearButton.setImage(templateImage, for: .highlighted)
// Finally, set the image color
clearButton.tintColor = .white
}
Swift 4、これは私のために動作します（tintColorをあなた自身の色に変更します）：
_var didSetupWhiteTintColorForClearTextFieldButton = false
private func setupTintColorForTextFieldClearButtonIfNeeded() {
// Do it once only
if didSetupWhiteTintColorForClearTextFieldButton { return }
guard let button = yourTextField.value(forKey: "_clearButton") as? UIButton else { return }
guard let icon = button.image(for: .normal)?.withRenderingMode(.alwaysTemplate) else { return }
button.setImage(icon, for: .normal)
button.tintColor = .white
didSetupWhiteTintColorForClearTextFieldButton = true
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
setupTintColorForTextFieldClearButtonIfNeeded()
}
_clearButtonModeの状況（always、whileEditingなどがあるため、最終的に呼び出されるようにするには、viewDidLayoutSubviews()で呼び出す必要があります。 。）。これらのボタンは遅延して作成されると思います。したがって、viewDidLoad()で呼び出してほとんど機能しません。
Swift 4、クリーンで簡潔なサブクラス
import UIKit
class CustomTextField: UITextField {
override func layoutSubviews() {
super.layoutSubviews()
for view in subviews where view is UIButton {
(view as! UIButton).setImage(<MY_UIIMAGE>, for: .normal)
}
}
}
キーclearButtonでクリアボタンを取得し、alwaysTemplateモードでクリアイメージを再レンダリングするという考え方です。
[Swift 4.2]ここでUITextFieldの拡張を行いました：
extension UITextField {
var clearButton: UIButton? {
return value(forKey: "clearButton") as? UIButton
}
var clearButtonTintColor: UIColor? {
get {
return clearButton?.tintColor
}
set {
let image = clearButton?.imageView?.image?.withRenderingMode(.alwaysTemplate)
clearButton?.setImage(image, for: .normal)
clearButton?.tintColor = newValue
}
}
}
ただし、この解決策の問題は、色合いの設定を呼び出すときに、クリアボタンの画像がnilになることです。
したがって、すべての人がRxSwiftを使用して、クリアボタンで画像を観察しています。
import RxSwift
extension UITextField {
var clearButton: UIButton? {
return value(forKey: "clearButton") as? UIButton
}
var clearButtonTintColor: UIColor? {
get {
return clearButton?.tintColor
}
set {
_ = rx.observe(UIImage.self, "clearButton.imageView.image")
.takeUntil(rx.deallocating)
.subscribe(onNext: { [weak self] _ in
let image = self?.clearButton?.imageView?.image?.withRenderingMode(.alwaysTemplate)
self?.clearButton?.setImage(image, for: .normal)
})
clearButton?.tintColor = newValue
}
}
}
上記のマットが投稿した回答は正しいです。 UITextField内のクリアボタンは、表示されない場合は存在しません。 UITextFieldがlayoutSubviewsを実行した直後にアクセスして、ボタンの存在を確認することができます。最も簡単な方法は、UITextFieldをサブクラス化し、layoutSubviewsをオーバーライドし、ボタンが初めて表示される場合、後で使用するために元の画像を保存し、その後の表示中に色合いを適用することです。
以下に、拡張機能を使用してこれを行う方法を示します。これにより、UISearchBarなどの準備ができたクラスにネストされたUITextFieldを含む任意のUITextFieldにカスタムの色合いを適用できるためです。
あなたがそれを好めば楽しんで、親指をあきらめてください:)
Swift 3.2
主な拡張機能は次のとおりです。
import UIKit
extension UITextField {
private struct UITextField_AssociatedKeys {
static var clearButtonTint = "uitextfield_clearButtonTint"
static var originalImage = "uitextfield_originalImage"
}
private var originalImage: UIImage? {
get {
if let cl = objc_getAssociatedObject(self, &UITextField_AssociatedKeys.originalImage) as? Wrapper<UIImage> {
return cl.underlying
}
return nil
}
set {
objc_setAssociatedObject(self, &UITextField_AssociatedKeys.originalImage, Wrapper<UIImage>(newValue), .OBJC_ASSOCIATION_RETAIN)
}
}
var clearButtonTint: UIColor? {
get {
if let cl = objc_getAssociatedObject(self, &UITextField_AssociatedKeys.clearButtonTint) as? Wrapper<UIColor> {
return cl.underlying
}
return nil
}
set {
UITextField.runOnce
objc_setAssociatedObject(self, &UITextField_AssociatedKeys.clearButtonTint, Wrapper<UIColor>(newValue), .OBJC_ASSOCIATION_RETAIN)
applyClearButtonTint()
}
}
private static let runOnce: Void = {
Swizzle.for(UITextField.self, selector: #selector(UITextField.layoutSubviews), with: #selector(UITextField.uitextfield_layoutSubviews))
}()
private func applyClearButtonTint() {
if let button = UIView.find(of: UIButton.self, in: self), let color = clearButtonTint {
if originalImage == nil {
originalImage = button.image(for: .normal)
}
button.setImage(originalImage?.tinted(with: color), for: .normal)
}
}
func uitextfield_layoutSubviews() {
uitextfield_layoutSubviews()
applyClearButtonTint()
}
}
上記のコードで使用されている追加のスニペットを次に示します。
オブジェクトごとにアクセスしたいものの素敵なラッパー：
class Wrapper<T> {
var underlying: T?
init(_ underlying: T?) {
self.underlying = underlying
}
}
あらゆるタイプのネストされたサブビューを検索するためのいくつかの拡張機能：
extension UIView {
static func find<T>(of type: T.Type, in view: UIView, includeSubviews: Bool = true) -> T? where T: UIView {
if view.isKind(of: T.self) {
return view as? T
}
for subview in view.subviews {
if subview.isKind(of: T.self) {
return subview as? T
} else if includeSubviews, let control = find(of: type, in: subview) {
return control
}
}
return nil
}
}
UIImageの拡張子で色合いを適用します
extension UIImage {
func tinted(with color: UIColor) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
color.set()
self.withRenderingMode(.alwaysTemplate).draw(in: CGRect(Origin: CGPoint(x: 0, y: 0), size: self.size))
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return result
}
}
...そして最後にスウィズルのようなもの：
class Swizzle {
class func `for`(_ className: AnyClass, selector originalSelector: Selector, with newSelector: Selector) {
let method: Method = class_getInstanceMethod(className, originalSelector)
let swizzledMethod: Method = class_getInstanceMethod(className, newSelector)
if (class_addMethod(className, originalSelector, method_getImplementation(swizzledMethod), method_getTypeEncoding(swizzledMethod))) {
class_replaceMethod(className, newSelector, method_getImplementation(method), method_getTypeEncoding(method))
} else {
method_exchangeImplementations(method, swizzledMethod)
}
}
}
すべての答えと可能性を試した後、私はこのシンプルで簡単な解決策を見つけました。
-(void)updateClearButtonColor:(UIColor *)color ofTextField:(UITextField *)textField {
UIButton *btnClear = [textField valueForKey:@"_clearButton"];
UIImage * img = [btnClear imageForState:UIControlStateNormal];
if (img) {
UIImage * renderingModeImage = [img imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[btnClear setImage:renderingModeImage forState:UIControlStateNormal];
//-- Add states you want to update
[btnClear setImage:renderingModeImage forState:UIControlStateSelected];
}
[btnClear setTintColor:color];
}
[self updateClearButtonColor:[UIColor whiteColor] ofTextField:self.textField];
このメソッドを作成します。
func configureClearButtonColor() {
guard let clearButton = textField.value(forKey: "_clearButton") as? UIButton else {
return
}
let templateImage = clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate)
clearButton.setImage(templateImage, for: .normal)
clearButton.setImage(templateImage, for: .highlighted)
clearButton.tintColor = .white
}
そして、ITextFieldDelegateを実装し、textFieldDidEndEditingでメソッドを呼び出します。テキストを作成する前に画像を変更します。
func textFieldDidEndEditing(_ textField: UITextField) {
configureClearButtonColor()
}
詳細
- Xcodeバージョン10.1（10B61）
- Swift 4.2
解決
import UIKit
extension UISearchBar {
func getTextField() -> UITextField? { return value(forKey: "searchField") as? UITextField }
func setClearButton(color: UIColor) {
getTextField()?.setClearButton(color: color)
}
}
extension UITextField {
private class ClearButtonImage {
static private var _image: UIImage?
static private var semaphore = DispatchSemaphore(value: 1)
static func getImage(closure: @escaping (UIImage?)->()) {
DispatchQueue.global(qos: .userInteractive).async {
semaphore.wait()
DispatchQueue.main.async {
if let image = _image { closure(image); semaphore.signal(); return }
guard let window = UIApplication.shared.windows.first else { semaphore.signal(); return }
let searchBar = UISearchBar(frame: CGRect(x: 0, y: -200, width: UIScreen.main.bounds.width, height: 44))
window.rootViewController?.view.addSubview(searchBar)
searchBar.text = "txt"
searchBar.layoutIfNeeded()
_image = searchBar.getTextField()?.getClearButton()?.image(for: .normal)
closure(_image)
searchBar.removeFromSuperview()
semaphore.signal()
}
}
}
}
func setClearButton(color: UIColor) {
ClearButtonImage.getImage { [weak self] image in
guard let image = image,
let button = self?.getClearButton() else { return }
button.imageView?.tintColor = color
button.setImage(image.withRenderingMode(.alwaysTemplate), for: .normal)
}
}
func getClearButton() -> UIButton? { return value(forKey: "clearButton") as? UIButton }
}
完全なサンプル
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let textField = UITextField(frame: CGRect(x: 20, y: 20, width: 200, height: 44))
view.addSubview(textField)
textField.backgroundColor = .lightGray
textField.clearButtonMode = .always
textField.setClearButton(color: .red)
let searchBar = UISearchBar(frame: CGRect(x: 20, y: 80, width: 200, height: 44))
view.addSubview(searchBar)
searchBar.backgroundColor = .lightGray
searchBar.setClearButton(color: .red)
}
}
結果
私のライブラリ LSCategories を使用して、1行でそれを行うことができます。
[textField lsSetClearButtonWithColor:[UIColor redColor] mode:UITextFieldViewModeAlways];
プライベートAPIは使用せず、UITextFieldサブビュー階層内の元のUIButtonを検索しません。また、他の回答としてUITextFieldをサブクラス化する必要もありません。代わりに、システムのクリアボタンを模倣するためにrightViewプロパティを使用するため、Appleが何かを変更した場合に将来動作しなくなることを心配する必要はありません。 Swiftでも機能します。
@Mikael Hellmanソリューションに基づいてこのソリューションを見つけるまで、私は多くの答えを試しました。このソリューションはSwift 4.2を使用しています。
考え方は同じです：
カスタム画像を使用しない、またはボタンを追加するなど.
そして、UITextFieldを拡張するカスタムクラスを使用します。
class TintClearTextField: UITextField {
private var updatedClearImage = false
override func layoutSubviews() {
super.layoutSubviews()
tintClearImage()
}
private func tintClearImage() {
if updatedClearImage { return }
if let button = self.value(forKey: "clearButton") as? UIButton,
let image = button.image(for: .highlighted)?.withRenderingMode(.alwaysTemplate) {
button.setImage(image, for: .normal)
button.setImage(image, for: .highlighted)
button.tintColor = .white
updatedClearImage = true
}
}
}
updatedClearImageは必要ありませんが、文字を追加するたびにすべてのロジックを実行することに注意してください。
探していた結果を得るためにtintColorを設定する必要さえありません。色を設定する前に、その行をコメントしてみてください。
希望どおりに見えない場合は、.white希望の色で、それですべてです。
PS .:最初の画面に既に入力されているフィールドがありますが、この1つだけで、tintColorの色の変更は、「グリッチ」などのデフォルトのアイテムの色を表示してから数ミリ秒後に発生します。改善することはできませんでしたが、tintColorを使用していないので、それで問題ありません。
それが役に立てば幸い ：）