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


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 來改變圖片的顯示大小了

這個問題當然可以通過分類來解決,但有沒有更好的辦法呢?(其實就是不想寫分類。。)等找到了好的解決辦法再來更新!



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM