ボタンのテキスト (titleLabel) と画像 (imageView) の上下配置を実現する#
1、最初に実現した方法：
新しい view を再定義し、label と imageView の 2 つの属性を持たせ、位置レイアウトを設定し、タップジェスチャーを追加し、デリゲートでクリックメソッドを返します。
2、2 つ目の方法：
Button をカスタマイズして Button を継承し、label と imageView の 2 つの属性を持たせ、レイアウトを設定します。これにより、タップジェスチャーを追加する必要がなくなります。
3、3 つ目の方法：
Button に備わっている titleLabel と imageView をそのまま使用し、Category を作成して label と image の配置方法を設定します。例：上下、左右
明らかに前の 2 つはあまり良くないので、ここでは 3 つ目だけを説明します：
Button には 2 つの属性があります：titleEdgeInsets と imageEdgeInsets。これら 2 つを設定することで、image が上、image が下、image が左、image が右など、必要なすべての Button スタイルを実現できます。
これら 2 つを設定する前に、Button 上の titleLabel と imageView の位置関係を理解する必要があります（Button のデフォルトの image と label の表示を想像してください）：
- titleEdgeInsets は titleLabel が上下左右に対する inset で、tableView の contentInset に似ています；
- もし title だけがある場合、titleLabel の 上下左右 は Button に対して のものです；
- もし image だけがある場合、imageView の 上下左右 は Button に対して のものです；
- もし image と label の両方がある場合、image の 上下左 は Button に対して のもので、右 は label に対して のものです；
label の 上下右 は Button に対して のもので、左 は label に対して のものです。
上記の段落は非常に重要です#
理解したら、次のコードを理解できます。
- Button の Category を作成し、.h ファイルは以下のようになります。image と label のスタイルを決定するための Enum を定義し、設定を呼び出すためのメソッドを用意します。
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
MKButtonEdgeInsetsStyleTop, // imageが上、labelが下
MKButtonEdgeInsetsStyleLeft, // imageが左、labelが右
MKButtonEdgeInsetsStyleBottom, // imageが下、labelが上
MKButtonEdgeInsetsStyleRight // imageが右、labelが左
};
@interface UIButton (ImageTitleSpacing)
/**
* buttonのtitleLabelとimageViewのレイアウトスタイルと間隔を設定します
*
* @param style titleLabelとimageViewのレイアウトスタイル
* @param space titleLabelとimageViewの間隔
*/
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space;
- .m ファイルは以下のようになります。メソッドを実装します。
#import "UIButton+ImageTitleSpacing.h"
@implementation UIButton (ImageTitleSpacing)
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space
{
// 1. imageViewとtitleLabelの幅と高さを取得
CGFloat imageWith = self.imageView.frame.size.width;
CGFloat imageHeight = self.imageView.frame.size.height;
CGFloat labelWidth = 0.0;
CGFloat labelHeight = 0.0;
if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
// iOS8ではtitleLabelのサイズが0になるため、以下のように設定
labelWidth = self.titleLabel.intrinsicContentSize.width;
labelHeight = self.titleLabel.intrinsicContentSize.height;
} else {
labelWidth = self.titleLabel.frame.size.width;
labelHeight = self.titleLabel.frame.size.height;
}
// 2. グローバルなimageEdgeInsetsとlabelEdgeInsetsを宣言
UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
// 3. styleとspaceに基づいてimageEdgeInsetsとlabelEdgeInsetsの値を取得
switch (style) {
case MKButtonEdgeInsetsStyleTop:
{
imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
}
break;
case MKButtonEdgeInsetsStyleLeft:
{
imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
}
break;
case MKButtonEdgeInsetsStyleBottom:
{
imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
}
break;
case MKButtonEdgeInsetsStyleRight:
{
imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
}
break;
default:
break;
}
// 4. 値を設定
self.titleEdgeInsets = labelEdgeInsets;
self.imageEdgeInsets = imageEdgeInsets;
}
私は GitHub にデモを作成しました。アドレス：カスタムボタン
参考#
- UIButton の titleEdgeInsets 属性と imageEdgeInsets 属性を使用して画像とテキストを要求通りに配置する。このブログでは上記の原理が紹介されており、よく読んで理解すれば明白になります。
- UIButton の imageEdgeInsets と titleEdgeInsets。このブログの末尾には GitHub のアドレスがあり、私が書いたときには原理を理解していなかったため、設定時に彼のコードを参考にしました。
- 画像とタイトルを含む UIButton のレイアウト方法。これは私が最初に参考にしたもので、コードのみで原理はありません。