ボタンのテキスト (titleLabel) と画像 (imageView) の上下配置を実現する#
1、最初に実現した方法：
新しい view を再定義し、label と imageView の 2 つの属性を持たせ、位置を設定し、タップジェスチャーを追加し、デリゲートでクリックメソッドを返す。
2、2 番目の方法：
Button をカスタマイズして Button を継承し、label と imageView の 2 つの属性を持たせ、レイアウトを設定する。これにより、タップジェスチャーを追加する必要がなくなる。
3、3 番目の方法：
Button に付属の titleLabel と imageView を直接使用し、Category を作成して label と image の配置方法を設定する。例：上下、左右
明らかに前の 2 つはあまり良くないので、ここでは 3 つ目だけを説明します：
ボタンには 2 つの属性があります：titleEdgeInsets と imageEdgeInsets。これら 2 つを設定することで、image が上、image が下、image が左、image が右など、すべての必要なボタンのスタイルを実現できます。
これら 2 つを設定する前に、ボタン上の titleLabel と imageView の位置関係を理解する必要があります（ボタンのデフォルトの image と label の表示を想像してください）：
- titleEdgeInsets は titleLabel が上下左右に対する inset で、tableView の contentInset に似ています；
- もし title だけがある場合、titleLabel の 上下左右 は ボタンに対して です；
- もし image だけがある場合、imageView の 上下左右 は ボタンに対して です；
- もし image と label の両方がある場合、image の 上下左 は ボタンに対して で、右 は label に対して です；
label の 上下右 は ボタンに対して で、左 は label に対して です。
上記の段落は非常に重要です#
理解したら、以下のコードを理解できるようになります。
- ボタンの 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)
/**
* ボタンの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 のレイアウト方法、これは私が最初に参考にしたもので、コードのみで原理はありません。