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 来改变图片的显示大小了

这个问题当然可以通过分类来解决,但有没有更好的办法呢?(其实就是不想写分类。。)等找到了好的解决办法再来更新!

版权声明:本文为Z/z原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/zz123333/p/16042285.html