私が持っているUIButton
「アプリを探検」とテキストでのUIImage
(>)でInterface Builder
、それは次のようになります。
[ (>) Explore the app ]
しかし、私UIImage
はテキストの後にこれを配置する必要があります:
[ Explore the app (>) ]
をUIImage
右に移動するにはどうすればよいですか?
私が持っているUIButton
「アプリを探検」とテキストでのUIImage
(>)でInterface Builder
、それは次のようになります。
[ (>) Explore the app ]
しかし、私UIImage
はテキストの後にこれを配置する必要があります:
[ Explore the app (>) ]
をUIImage
右に移動するにはどうすればよいですか?
回答:
これに対する私の解決策は非常に簡単です
[button sizeToFit];
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, button.imageView.frame.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width);
上のiOS 9以降、これを達成する簡単な方法は、ビューのセマンティックを強制しているようです。
または、プログラムを使用して、以下を使用します。
button.semanticContentAttribute = .ForceRightToLeft
semanticContentAttribute
し、レイアウトロジックでsemanticContentAttribute
それ自体を変更するのではなく、レイアウトロジックでlayoutSubviewsと尊重をオーバーライドすることです。(セマンティックアプローチを変更すると、国際化ではうまく機能しません)
imageEdgeInset
およびtitleEdgeInset
を設定して、イメージ内でコンポーネントを移動します。フルサイズのグラフィックを使用してボタンを作成し、それをボタンの背景画像として使用することもできます(その後titleEdgeInsets
、タイトルを移動するために使用します)。
レイモンドWの答えはここが一番です。カスタムlayoutSubviewsを持つサブクラスUIButton。実行するのが非常に簡単です、これは私のために働いたlayoutSubviews実装です:
- (void)layoutSubviews
{
// Allow default layout, then adjust image and label positions
[super layoutSubviews];
UIImageView *imageView = [self imageView];
UILabel *label = [self titleLabel];
CGRect imageFrame = imageView.frame;
CGRect labelFrame = label.frame;
labelFrame.origin.x = imageFrame.origin.x;
imageFrame.origin.x = labelFrame.origin.x + CGRectGetWidth(labelFrame);
imageView.frame = imageFrame;
label.frame = labelFrame;
}
サブクラス化UIButton
とオーバーライドについてはどうlayoutSubviews
ですか?
次に、self.imageView
&の位置を後処理しますself.titleLabel
別の簡単な方法(iOS 9のみではない)は、UIButtonをサブクラス化してこれら2つのメソッドをオーバーライドすることです。
override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
var rect = super.titleRectForContentRect(contentRect)
rect.origin.x = 0
return rect
}
override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
var rect = super.imageRectForContentRect(contentRect)
rect.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(rect)
return rect
}
contentEdgeInsets
superを使用することで、すでに考慮されています。
アプリが「左から右」と「右から左」の両方をサポートしている場合、ボタンに「右から左」を強制するオプションはありません。
私のために働いたソリューションは、ストーリーボードのボタンに追加できるサブクラスであり、制約でうまく機能します(iOS 11でテスト済み):
class ButtonWithImageAtEnd: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
if let imageView = imageView, let titleLabel = titleLabel {
let padding: CGFloat = 15
imageEdgeInsets = UIEdgeInsets(top: 5, left: titleLabel.frame.size.width+padding, bottom: 5, right: -titleLabel.frame.size.width-padding)
titleEdgeInsets = UIEdgeInsets(top: 0, left: -imageView.frame.width, bottom: 0, right: imageView.frame.width)
}
}
}
「パディング」は、タイトルと画像の間のスペースです。
.forceRightToLeft
オプションです!場合は、反対の値(.forceLeftToRight
)を使用しますUIApplication.shared.userInterfaceLayoutDirection == .rightToLeft
。
Swiftの場合:
override func layoutSubviews(){
super.layoutSubviews()
let inset: CGFloat = 5
if var imageFrame = self.imageView?.frame,
var labelFrame = self.titleLabel?.frame {
let cumulativeWidth = imageFrame.width + labelFrame.width + inset
let excessiveWidth = self.bounds.width - cumulativeWidth
labelFrame.origin.x = excessiveWidth / 2
imageFrame.origin.x = labelFrame.origin.x + labelFrame.width + inset
self.imageView?.frame = imageFrame
self.titleLabel?.frame = labelFrame
}
}
@splitによる回答の構築...
答えは素晴らしいですが、ボタンにカスタムイメージとタイトルエッジのインセットがあらかじめ設定されている(ストーリーボードなど)場合があるという事実は無視されます。
たとえば、コンテナの上部と下部から画像にパディングを付けたいが、画像をボタンの右側に移動したい場合があります。
私はこの方法でコンセプトを拡張しました:-
- (void) moveImageToRightSide {
[self sizeToFit];
CGFloat titleWidth = self.titleLabel.frame.size.width;
CGFloat imageWidth = self.imageView.frame.size.width;
CGFloat gapWidth = self.frame.size.width - titleWidth - imageWidth;
self.titleEdgeInsets = UIEdgeInsetsMake(self.titleEdgeInsets.top,
-imageWidth + self.titleEdgeInsets.left,
self.titleEdgeInsets.bottom,
imageWidth - self.titleEdgeInsets.right);
self.imageEdgeInsets = UIEdgeInsetsMake(self.imageEdgeInsets.top,
titleWidth + self.imageEdgeInsets.left + gapWidth,
self.imageEdgeInsets.bottom,
-titleWidth + self.imageEdgeInsets.right - gapWidth);
}
// Get the size of the text and image
CGSize buttonLabelSize = [[self.button titleForState:UIControlStateNormal] sizeWithFont:self.button.titleLabel.font];
CGSize buttonImageSize = [[self.button imageForState:UIControlStateNormal] size];
// You can do this line in the xib too:
self.button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
// Adjust Edge Insets according to the above measurement. The +2 adds a little space
self.button.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, -(buttonLabelSize.width+2));
self.button.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, buttonImageSize.width+2);
これにより、次のように右揃えのボタンが作成されます。
[ button label (>)]
ボタンはコンテキストに応じて幅を調整しないため、ラベルの左側にスペースが表示されます。これを解決するには、buttonLabelSize.widthとbuttonImageSize.widthからボタンのフレーム幅を計算します。
button.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentRight;
このソリューションはiOS 7以降で動作します
UIButtonをサブクラス化するだけ
@interface UIButton (Image)
- (void)swapTextWithImage;
@end
@implementation UIButton (Image)
- (void)swapTextWithImage {
const CGFloat kDefaultPadding = 6.0f;
CGSize buttonSize = [self.titleLabel.text sizeWithAttributes:@{
NSFontAttributeName:self.titleLabel.font
}];
self.titleEdgeInsets = UIEdgeInsetsMake(0, -self.imageView.frame.size.width, 0, self.imageView.frame.size.width);
self.imageEdgeInsets = UIEdgeInsetsMake(0, buttonSize.width + kDefaultPadding, 0, -buttonSize.width);
}
@end
使用法(クラスのどこか):
[self.myButton setTitle:@"Any text" forState:UIControlStateNormal];
[self.myButton swapTextWithImage];
以前の回答に基づいて構築します。アイコンとボタンのタイトルの間にマージンが必要な場合は、コードを少し変更して、本来のサイズのボタンの境界の上にラベルとアイコンが浮かないようにする必要があります。
let margin = CGFloat(4.0)
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width, 0, button.imageView.frame.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width)
button.contentEdgeInsets = UIEdgeInsetsMake(0, margin, 0, margin)
最後のコード行は、自動レイアウトの本質的なコンテンツサイズの計算にとって重要です。
これが私のやり方です(約10年後)
class CustomButton: Button {
var didLayout: Bool = false // The code must be called only once
override func layoutSubviews() {
super.layoutSubviews()
if !didLayout, let imageView = imageView, let titleLabel = titleLabel {
didLayout = true
let stack = UIStackView(arrangedSubviews: [titleLabel, imageView])
addSubview(stack)
stack.edgesToSuperview() // I use TinyConstraints library. You could handle the constraints directly
stack.axis = .horizontal
}
}
}
Swiftの単一行ソリューション:
// iOS 9 and Onwards
button.semanticContentAttribute = .forceRightToLeft