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 來改變圖片的顯示大小了
這個問題當然可以通過分類來解決,但有沒有更好的辦法呢?(其實就是不想寫分類。。)等找到了好的解決辦法再來更新!