【Exploration of iOS_UI】iOS15新特性：UIButtonConfiguration初探

目录

• iOS15新特性：UIButtonConfiguration初探
  • 0 背景
  • 1 UIButtonConfiguration 属性概览
  • 2 简单的示例code
  • 3 一点美中不足

iOS15新特性：UIButtonConfiguration初探

0 背景

在回顾 UIButton 的 demo 时，发现在 iOS15 下出现了一条警告：

 
  'imageEdgeInsets' is deprecated: first deprecated in iOS 15.0 - This property is ignored when using UIButtonConfiguration

好奇心会害死一个程序员（当然不是）新东西出来了当然还是要去看一下的 😁

注意：

本文代码基于 Objc，有关 Swift 版本的相关资料--> UIButton Configuration Tutorial: Getting Started

1 UIButtonConfiguration 属性概览

简单查了一下官方文档，首先印象最深的就是 image & tilte 摆放位置的设定的优化，从前我们需要这样那样，现在只需要通过以下属性设定就可以了

 
  /// Defaults to Leading, only single edge values (top/leading/bottom/trailing) are supported.
  // 默认图片置于起始书写方向（即标题之前）
  @property (nonatomic, readwrite, assign) NSDirectionalRectEdge imagePlacement;
 
  /// When a button has both image and text content, this value is the padding between the image and the text.
  // 设定图片与标题之间的间距
  @property (nonatomic, readwrite, assign) CGFloat imagePadding;
 

与之类似的还有 button 中所有文字标题以及 button 中内容内边距的设定:

 
  /// When a button has both a title & subtitle, this value is the padding between those titles.
  // 设置标题与副标题之间的间距
  @property (nonatomic, readwrite, assign) CGFloat titlePadding;
 
  /// The alignment to use for relative layout between title & subtitle.
  // 设置文字对齐方式
  @property (nonatomic, readwrite, assign) UIButtonConfigurationTitleAlignment titleAlignment;
 
  /// Insets from the bounds of the button to create the content region. Defaults styles provide insets based on the button size.
  // 再见了我的 imageEdgeInsets & titleEdgeInsets
  @property (nonatomic, readwrite, assign) NSDirectionalEdgeInsets contentInsets;
 

除此之外，也可以通过 configuration 来设置文字 & 图片内容及样式

 
  @property (nonatomic, readwrite, strong, nullable) UIImage *image;
  @property (nonatomic, readwrite, copy, nullable) UIConfigurationColorTransformer imageColorTransformer;
  @property (nonatomic, readwrite, copy, nullable) UIImageSymbolConfiguration *preferredSymbolConfigurationForImage;
 
  /// Shows an activity indicator in place of an image. Its placement is controlled by the imagePlacement property.
  @property (nonatomic, readwrite, assign) BOOL showsActivityIndicator;
  @property (nonatomic, readwrite, copy, nullable) UIConfigurationColorTransformer activityIndicatorColorTransformer;
 
  @property (nonatomic, readwrite, copy, nullable) NSString *title;
  @property (nonatomic, readwrite, copy, nullable) NSAttributedString *attributedTitle;
  @property (nonatomic, readwrite, copy, nullable) UIConfigurationTextAttributesTransformer titleTextAttributesTransformer;
 
  @property (nonatomic, readwrite, copy, nullable) NSString *subtitle;
  @property (nonatomic, readwrite, copy, nullable) NSAttributedString *attributedSubtitle;
  @property (nonatomic, readwrite, copy, nullable) UIConfigurationTextAttributesTransformer subtitleTextAttributesTransformer;
 

一句没用的总结：整体而言还是很香的：）

2 简单的示例code

 
  // ButtonConfiguration的基本样式
  UIButtonConfiguration *btnConfig = [UIButtonConfiguration plainButtonConfiguration];  
 
  // 文字
  btnConfig.title = @"test";
  btnConfig,subtitle = @"test-sub";
 
  // 图片
  btnConfig.image = [UIImage imageNamed:@"img"];
  btnConfig.imagePlacement = NSDirectionalRectEdgeLeading;
  btnConfig.imagePadding = 10;
 
  // 前景颜色（= 文字颜色）
  btnConfig.baseForegroundColor = [UIColor blackColor];
  // 背景颜色
  btnConfig.baseBackgroundColor = [UIColor yellowColor];
 
  // 内边距
  btnConfig.contentInsets = NSDirectionalEdgeInsetsMake(10, 10, 10, 10);
 
  // 新的创建 button 方法
  /*
  /// Construct a new UIButton. `configuration` will be installed on the created button, and `primaryAction` added to handle the .primaryActionTriggered control event. If `primaryAction` has a title or image, they will be copied to `configuration`
  + (instancetype)buttonWithConfiguration:(UIButtonConfiguration *)configuration primaryAction:(nullable UIAction *)primaryAction API_AVAILABLE(ios(15.0), tvos(15.0)) API_UNAVAILABLE(watchos);
  */
  UIButton *btn = [UIButton buttonWithConfiguration:btnConfig primaryAction:nil];
 
  // 继续为 btn 设置 frame ，并添加到父控件中
  // ...
      
  // 失效
  //    btn.imageView.contentMode = UIViewContentModeScaleAspectFit;
 

3 一点美中不足

正如代码中最后注明的失效语句，当使用了 button.configuration 属性时，button.imageView 就会失效（此时imageView.frame 为 {0, 0, 0, 0} ），也就无法通过 contentMode 来改变图片的显示大小了

这个问题当然可以通过分类来解决，但有没有更好的办法呢？（其实就是不想写分类。。）等找到了好的解决办法再来更新！