ฉันไม่ต้องการใช้มุมมองย่อยหากฉันสามารถหลีกเลี่ยงได้ ฉันต้องการUIButton
ด้วยภาพพื้นหลังข้อความและภาพในนั้น ตอนนี้เมื่อฉันทำอย่างนั้นภาพอยู่ทางด้านซ้ายของข้อความ รูปภาพพื้นหลังข้อความและรูปภาพทั้งหมดมีสถานะไฮไลต์ที่แตกต่างกัน
ฉันไม่ต้องการใช้มุมมองย่อยหากฉันสามารถหลีกเลี่ยงได้ ฉันต้องการUIButton
ด้วยภาพพื้นหลังข้อความและภาพในนั้น ตอนนี้เมื่อฉันทำอย่างนั้นภาพอยู่ทางด้านซ้ายของข้อความ รูปภาพพื้นหลังข้อความและรูปภาพทั้งหมดมีสถานะไฮไลต์ที่แตกต่างกัน
คำตอบ:
แม้คำตอบที่แนะนำจะเป็นคำตอบที่สร้างสรรค์และชาญฉลาด แต่คำตอบที่ง่ายที่สุดก็มีดังนี้:
button.semanticContentAttribute = UIApplication.shared
.userInterfaceLayoutDirection == .rightToLeft ? .forceLeftToRight : .forceRightToLeft
ง่ายเหมือนที่ เป็นโบนัสภาพจะอยู่ทางด้านซ้ายในสถานที่จากขวาไปซ้าย
แก้ไข : เป็นคำถามที่ได้รับการถามกี่ครั้งนี้เป็นiOS ของ 9 +
semanticContentAttribute
เป็นเพียงการแฮ็ค / วิธีแก้ปัญหาไม่ใช่วิธีการแก้ปัญหาจริง
วิธีที่ง่ายที่สุด:
iOS 10 ขึ้นไป, Swift:
button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
ก่อน iOS 10 Swift / Obj-C:
button.transform = CGAffineTransformMakeScale(-1.0, 1.0);
button.titleLabel.transform = CGAffineTransformMakeScale(-1.0, 1.0);
button.imageView.transform = CGAffineTransformMakeScale(-1.0, 1.0);
button.ImageEdgeInsets = new UIEdgeInsets(0, -leftPadding, 0, leftPadding); button.ContentEdgeInsets = new UIEdgeInsets(0, 0, 0, leftPadding);
เช่น ที่อยู่ใน Xamarin แต่ควรแปล Swift / Obj-C อย่างง่ายดายเพียงพอ
อัปเดตสำหรับ XCODE 9 (ผ่านตัวสร้างอินเตอร์เฟส)
มีวิธีที่ง่ายกว่าจากเป็นInterface Builder
เลือก UIButton และเลือกตัวเลือกนี้ใน View Utilities> Semantic :
ทางเลือก - ขั้นตอนที่ 2:
หากคุณต้องการปรับระยะห่างระหว่างรูปภาพและชื่อคุณสามารถเปลี่ยนImage Inset ได้ที่นี่:
หวังว่าจะช่วย!
การแบ่งคลาส UIButton ไม่จำเป็นอย่างสมบูรณ์ แต่คุณสามารถตั้งค่าสิ่งที่ใส่เข้าไปทางซ้ายสูงสำหรับภาพที่ใส่เข้าไปและสิ่งที่ใส่เข้าไปเล็ก ๆ ที่เหมาะสมสำหรับชื่อเรื่อง บางสิ่งเช่นนี้
button.imageEdgeInsets = UIEdgeInsetsMake(0., button.frame.size.width - (image.size.width + 15.), 0., 0.);
button.titleEdgeInsets = UIEdgeInsetsMake(0., 0., 0., image.size.width);
ฉันให้เครดิตกับInspire48สำหรับอันนี้ จากข้อเสนอแนะของเขาและดูคำถามอื่นฉันได้พบสิ่งนี้ คลาสย่อย UIButton และแทนที่เมธอดเหล่านี้
@implementation UIButtonSubclass
- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
CGRect frame = [super imageRectForContentRect:contentRect];
frame.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(frame) - self.imageEdgeInsets.right + self.imageEdgeInsets.left;
return frame;
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
CGRect frame = [super titleRectForContentRect:contentRect];
frame.origin.x = CGRectGetMinX(frame) - CGRectGetWidth([self imageRectForContentRect:contentRect]);
return frame;
}
@end
buttonWithType
If you subclass UIButton, this method does not return an instance of your subclass. If you want to create an instance of a specific subclass, you must alloc/init the button directly
และbackgroundRectForBounds
Subclasses ที่ให้การตกแต่งพื้นหลังที่กำหนดเองสามารถแทนที่วิธีนี้และส่งกลับขอบเขตที่ปรับเปลี่ยนเพื่อป้องกันไม่ให้ปุ่มวาดเนื้อหาที่กำหนดเองใด ๆ วิธีการ แต่ฉันคิดว่าพวกเขาไม่สนใจ subclasses
frame.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(frame) - self.imageEdgeInsets.right + self.imageEdgeInsets.left - frame.origin.x;
มันใช้งานได้ดีกว่าUIControlContentHorizontalAlignmentCenter
และอื่น ๆ ...
เพียงอัปเดตสิ่งที่แทรกเมื่อเปลี่ยนชื่อ คุณจำเป็นต้องชดเชยสิ่งที่ใส่เข้าไปด้วยสิ่งที่ใส่เข้าไปอย่างเท่าเทียมกันและตรงข้ามในอีกด้านหนึ่ง
[thebutton setTitle:title forState:UIControlStateNormal];
thebutton.titleEdgeInsets = UIEdgeInsetsMake(0, -thebutton.imageView.frame.size.width, 0, thebutton.imageView.frame.size.width);
thebutton.imageEdgeInsets = UIEdgeInsetsMake(0, thebutton.titleLabel.frame.size.width, 0, -thebutton.titleLabel.frame.size.width);
[thebutton.titleLabel sizeToFit];
ก่อน ความกว้างอาจเป็นศูนย์ถ้าคุณยังไม่ได้เรียกใช้เค้าโครง กันไปสำหรับขนาดของภาพ (เพียงแค่ใช้ UIImage.size แทนขนาด IMAGE ดู) ที่
titleWidth = [self.titleLabel sizeThatFits:CGSizeMake(CGFLOAT_MAX, self.bounds.size.height)].width;
(หรือหากคุณกังวลเกี่ยวกับกรอบปุ่มที่ยังไม่ได้สร้างให้ใช้ CGFLOAT_MAX เพื่อความสูงเช่นกัน) และimageWidth = self.currentImage.size.width;
layoutSubviews
ในUITableViewCell
คลาสย่อย แต่ก็ใช้งานได้ดี ขอบคุณ!
คำตอบทั้งหมดเหล่านี้ ณ เดือนมกราคม 2559 นั้นไม่จำเป็น ในเครื่องมือสร้างอินเทอร์เฟซตั้งค่ามุมมองความหมายเป็นForce Right-to-Left
หรือถ้าคุณชอบวิธีการเขียนโปรแกรมsemanticContentAttribute = .forceRightToLeft
ซึ่งจะทำให้รูปภาพปรากฏทางด้านขวาของข้อความของคุณ
UIBarButtonItem(customView: button)
แต่จะใช้งานได้หากคุณตัดปุ่มในมุมมองที่ว่างเปล่า
ในเครื่องมือสร้างอินเตอร์เฟสคุณสามารถกำหนดค่าตัวเลือก Edge Insets สำหรับ UIButton โดยแยกแต่ละส่วนได้สามส่วน: เนื้อหารูปภาพชื่อเรื่อง
Xcode 8:
อัปเดต: Swift 3
class ButtonIconRight: UIButton {
override func imageRect(forContentRect contentRect:CGRect) -> CGRect {
var imageFrame = super.imageRect(forContentRect: contentRect)
imageFrame.origin.x = super.titleRect(forContentRect: contentRect).maxX - imageFrame.width
return imageFrame
}
override func titleRect(forContentRect contentRect:CGRect) -> CGRect {
var titleFrame = super.titleRect(forContentRect: contentRect)
if (self.currentImage != nil) {
titleFrame.origin.x = super.imageRect(forContentRect: contentRect).minX
}
return titleFrame
}
}
คำตอบต้นฉบับสำหรับ Swift 2:
โซลูชันที่จัดการการจัดแนวนอนทั้งหมดด้วยตัวอย่างการปรับใช้ Swift เพียงแปลเป็น Objective-C หากจำเป็น
class ButtonIconRight: UIButton {
override func imageRectForContentRect(contentRect:CGRect) -> CGRect {
var imageFrame = super.imageRectForContentRect(contentRect)
imageFrame.origin.x = CGRectGetMaxX(super.titleRectForContentRect(contentRect)) - CGRectGetWidth(imageFrame)
return imageFrame
}
override func titleRectForContentRect(contentRect:CGRect) -> CGRect {
var titleFrame = super.titleRectForContentRect(contentRect)
if (self.currentImage != nil) {
titleFrame.origin.x = CGRectGetMinX(super.imageRectForContentRect(contentRect))
}
return titleFrame
}
}
นอกจากนี้ยังมีข้อสังเกตว่ามันสามารถจัดการกับรูปภาพและชื่อเรื่องได้ค่อนข้างดี
แรงบันดาลใจจากคำตอบ jasongregori;)
@IBDesignable
ในชั้นเรียนและดูมันพลิกในเวลาออกแบบ
หากจำเป็นต้องทำในUIBarButtonItemควรใช้การตัดเพิ่มเติมในมุมมองซึ่งจะใช้
งานได้
let view = UIView()
let button = UIButton()
button.setTitle("Skip", for: .normal)
button.setImage(#imageLiteral(resourceName:"forward_button"), for: .normal)
button.semanticContentAttribute = .forceRightToLeft
button.sizeToFit()
view.addSubview(button)
view.frame = button.bounds
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: view)
สิ่งนี้ใช้ไม่ได้
let button = UIButton()
button.setTitle("Skip", for: .normal)
button.setImage(#imageLiteral(resourceName:"forward_button"), for: .normal)
button.semanticContentAttribute = .forceRightToLeft
button.sizeToFit()
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
นี่คือวิธีการแก้ปัญหาUIButton
ด้วยเนื้อหาที่จัดกึ่งกลาง รหัสทำให้ภาพนี้สอดคล้องเหมาะสมและจะช่วยให้การใช้งานimageEdgeInsets
และtitleEdgeInsets
เพื่อให้ได้ตำแหน่งที่มีค่า
คลาสย่อยที่UIButton
มีคลาสแบบกำหนดเองของคุณและเพิ่ม:
- (CGRect)imageRectForContentRect:(CGRect)contentRect {
CGRect frame = [super imageRectForContentRect:contentRect];
CGFloat imageWidth = frame.size.width;
CGRect titleRect = CGRectZero;
titleRect.size = [[self titleForState:self.state] sizeWithAttributes:@{NSFontAttributeName: self.titleLabel.font}];
titleRect.origin.x = (self.frame.size.width - (titleRect.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
frame.origin.x = titleRect.origin.x + titleRect.size.width - self.imageEdgeInsets.right + self.imageEdgeInsets.left;
return frame;
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
CGFloat imageWidth = [self imageForState:self.state].size.width;
CGRect frame = [super titleRectForContentRect:contentRect];
frame.origin.x = (self.frame.size.width - (frame.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
return frame;
}
การที่โซลูชันการแปลงไม่ทำงานใน iOS 11 ฉันตัดสินใจเขียนวิธีการใหม่
การปรับปุ่มsemanticContentAttribute
ช่วยให้เราเห็นภาพทางด้านขวาโดยไม่จำเป็นต้องถ่ายทอดออกมาหากข้อความเปลี่ยนแปลง ด้วยเหตุนี้มันจึงเป็นทางออกที่ดี อย่างไรก็ตามฉันยังต้องการการสนับสนุน RTL ความจริงที่ว่าแอพไม่สามารถเปลี่ยนทิศทางของเลย์เอาต์ในเซสชันเดียวกันแก้ไขปัญหานี้ได้อย่างง่ายดาย
ด้วยสิ่งที่กล่าวมามันค่อนข้างตรงไปตรงมา
extension UIButton {
func alignImageRight() {
if UIApplication.shared.userInterfaceLayoutDirection == .leftToRight {
semanticContentAttribute = .forceRightToLeft
}
else {
semanticContentAttribute = .forceLeftToRight
}
}
}
วิธีการขยาย
ใช้ส่วนขยายเพื่อกำหนดภาพทางด้านขวาด้วยออฟเซ็ตที่กำหนดเอง
extension UIButton {
func addRightImage(image: UIImage, offset: CGFloat) {
self.setImage(image, for: .normal)
self.imageView?.translatesAutoresizingMaskIntoConstraints = false
self.imageView?.centerYAnchor.constraint(equalTo: self.centerYAnchor, constant: 0.0).isActive = true
self.imageView?.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -offset).isActive = true
}
}
Swift- ขยาย UiButton และใส่บรรทัดเหล่านี้
if let imageWidth = self.imageView?.frame.width {
self.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWidth, 0, imageWidth);
}
if let titleWidth = self.titleLabel?.frame.width {
let spacing = titleWidth + 20
self.imageEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, -spacing);
}
การสร้างโซลูชันที่หรูหราของ Piotr Tomasik: หากคุณต้องการเว้นระยะห่างระหว่างป้ายปุ่มและรูปภาพด้วยให้รวมไว้ในส่วนที่ขอบของคุณดังนี้ (คัดลอกรหัสของฉันที่นี่ทำงานได้ดีสำหรับฉัน):
CGFloat spacing = 3;
CGFloat insetAmount = 0.5 * spacing;
// First set overall size of the button:
button.contentEdgeInsets = UIEdgeInsetsMake(0, insetAmount, 0, insetAmount);
[button sizeToFit];
// Then adjust title and image insets so image is flipped to the right and there is spacing between title and image:
button.titleEdgeInsets = UIEdgeInsetsMake(0, -button.imageView.frame.size.width - insetAmount, 0, button.imageView.frame.size.width + insetAmount);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width + insetAmount, 0, -button.titleLabel.frame.size.width - insetAmount);
ขอบคุณ Piotr สำหรับทางออกของคุณ!
เอริค
ทำด้วยตัวเอง. Xcode10, swift4,
สำหรับการออกแบบ UI โดยทางโปรแกรม
lazy var buttonFilter : ButtonRightImageLeftTitle = {
var button = ButtonRightImageLeftTitle()
button.setTitle("Playfir", for: UIControl.State.normal)
button.setImage(UIImage(named: "filter"), for: UIControl.State.normal)
button.backgroundColor = UIColor.red
button.contentHorizontalAlignment = .left
button.titleLabel?.font = UIFont.systemFont(ofSize: 16)
return button
}()
ค่าสิ่งที่ใส่เข้าไปในขอบถูกนำไปใช้กับสี่เหลี่ยมเพื่อลดขนาดหรือขยายพื้นที่ที่เป็นตัวแทนของสี่เหลี่ยมผืนผ้า โดยทั่วไปแล้วการแทรกขอบจะใช้ในระหว่างการจัดวางมุมมองเพื่อปรับเปลี่ยนกรอบของมุมมอง ค่าบวกทำให้เฟรมถูกใส่เข้าไป (หรือหด) ตามจำนวนที่ระบุ ค่าลบทำให้เฟรมเริ่มต้น (หรือขยาย) ตามจำนวนที่ระบุ
class ButtonRightImageLeftTitle: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
guard imageView != nil else { return }
imageEdgeInsets = UIEdgeInsets(top: 5, left: (bounds.width - 35), bottom: 5, right: 5)
titleEdgeInsets = UIEdgeInsets(top: 0, left: -((imageView?.bounds.width)! + 10), bottom: 0, right: 0 )
}
}
สำหรับการออกแบบกระดานเรื่องราว UI
รูปแบบการจัดคลาสย่อยและ over-ridingSubviews น่าจะเป็นวิธีที่ดีที่สุดของคุณ
อ้างอิงจาก: iPhone UIButton - ตำแหน่งภาพ
คำตอบของ Took @ Piotr และทำให้มันกลายเป็นส่วนขยายที่รวดเร็ว ตรวจสอบให้แน่ใจว่าตั้งค่ารูปภาพและชื่อเรื่องก่อนเรียกสิ่งนี้เพื่อให้ปุ่มมีขนาดที่เหมาะสม
extension UIButton {
/// Makes the ``imageView`` appear just to the right of the ``titleLabel``.
func alignImageRight() {
if let titleLabel = self.titleLabel, imageView = self.imageView {
// Force the label and image to resize.
titleLabel.sizeToFit()
imageView.sizeToFit()
imageView.contentMode = .ScaleAspectFit
// Set the insets so that the title appears to the left and the image appears to the right.
// Make the image appear slightly off the top/bottom edges of the button.
self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -1 * imageView.frame.size.width,
bottom: 0, right: imageView.frame.size.width)
self.imageEdgeInsets = UIEdgeInsets(top: 4, left: titleLabel.frame.size.width,
bottom: 4, right: -1 * titleLabel.frame.size.width)
}
}
}
ตัวเลือกที่รวดเร็วที่ทำในสิ่งที่คุณต้องการโดยไม่ต้องเล่นกับสิ่งที่ใส่เข้าไป:
class RightImageButton: UIButton {
override func layoutSubviews() {
super.layoutSubviews()
if let textSize = titleLabel?.intrinsicContentSize(),
imageSize = imageView?.intrinsicContentSize() {
let wholeWidth = textSize.width + K.textImageGap + imageSize.width
titleLabel?.frame = CGRect(
x: round(bounds.width/2 - wholeWidth/2),
y: 0,
width: ceil(textSize.width),
height: bounds.height)
imageView?.frame = CGRect(
x: round(bounds.width/2 + wholeWidth/2 - imageSize.width),
y: RoundRetina(bounds.height/2 - imageSize.height/2),
width: imageSize.width,
height: imageSize.height)
}
}
struct K {
static let textImageGap: CGFloat = 5
}
}
โซลูชั่นกล่าวถึงที่นี่หยุดทำงานเมื่อฉันเปิดใช้เค้าโครงอัตโนมัติ ฉันต้องคิดเอง:
คลาสย่อย UIButton และlayoutSubviews
วิธีการแทนที่ :
//
// MIThemeButtonImageAtRight.m
// Created by Lukasz Margielewski on 7/9/13.
//
#import "MIThemeButtonImageAtRight.h"
static CGRect CGRectByApplyingUIEdgeInsets(CGRect frame, UIEdgeInsets insets);
@implementation MIThemeButtonImageAtRight
- (void)layoutSubviews
{
[super layoutSubviews];
CGRect contentFrame = CGRectByApplyingUIEdgeInsets(self.bounds, self.contentEdgeInsets);
CGRect frameIcon = self.imageView.frame;
CGRect frameText = self.titleLabel.frame;
frameText.origin.x = CGRectGetMinX(contentFrame) + self.titleEdgeInsets.left;
frameIcon.origin.x = CGRectGetMaxX(contentFrame) - CGRectGetWidth(frameIcon);
self.imageView.frame = frameIcon;
self.titleLabel.frame = frameText;
}
@end
static CGRect CGRectByApplyingUIEdgeInsets(CGRect frame, UIEdgeInsets insets){
CGRect f = frame;
f.origin.x += insets.left;
f.size.width -= (insets.left + insets.right);
f.origin.y += (insets.top);
f.size.height -= (insets.top + insets.bottom);
return f;
}
ผลลัพธ์:
โซลูชั่นการโอนย้ายข้อมูลswift 3.0มอบให้โดย jasongregori
class ButtonIconRight: UIButton {
override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
var imageFrame = super.imageRect(forContentRect: contentRect)
imageFrame.origin.x = super.titleRect(forContentRect: contentRect).maxX - imageFrame.width
return imageFrame
}
override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
var titleFrame = super.titleRect(forContentRect: contentRect)
if (self.currentImage != nil) {
titleFrame.origin.x = super.imageRect(forContentRect: contentRect).minX
}
return titleFrame
}
ฉันตัดสินใจที่จะไม่ใช้มุมมองภาพปุ่มมาตรฐานเพราะโซลูชั่นที่เสนอเพื่อย้ายไปรอบ ๆ รู้สึกแฮ็ค สิ่งนี้ทำให้ฉันมีสุนทรียภาพที่ต้องการและเป็นเรื่องง่ายที่จะเปลี่ยนตำแหน่งปุ่มโดยการเปลี่ยนข้อ จำกัด :
extension UIButton {
func addRightIcon(image: UIImage) {
let imageView = UIImageView(image: image)
imageView.translatesAutoresizingMaskIntoConstraints = false
addSubview(imageView)
let length = CGFloat(15)
titleEdgeInsets.right += length
NSLayoutConstraint.activate([
imageView.leadingAnchor.constraint(equalTo: self.titleLabel!.trailingAnchor, constant: 10),
imageView.centerYAnchor.constraint(equalTo: self.titleLabel!.centerYAnchor, constant: 0),
imageView.widthAnchor.constraint(equalToConstant: length),
imageView.heightAnchor.constraint(equalToConstant: length)
])
}
}
สวิฟท์ 3:
open override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
var frame = super.imageRect(forContentRect: contentRect)
let imageWidth = frame.size.width
var titleRect = CGRect.zero
titleRect.size = self.title(for: self.state)!.size(attributes: [NSFontAttributeName: self.titleLabel!.font])
titleRect.origin.x = (self.frame.size.width - (titleRect.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
frame.origin.x = titleRect.origin.x + titleRect.size.width - self.imageEdgeInsets.right + self.imageEdgeInsets.left;
return frame
}
open override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
var frame = super.titleRect(forContentRect: contentRect)
if let imageWidth = self.image(for: self.state)?.size.width {
frame.origin.x = (self.frame.size.width - (frame.size.width + imageWidth)) / 2.0 + self.titleEdgeInsets.left - self.titleEdgeInsets.right;
}
return frame
}
ข้อ จำกัด ล่ะ? ซึ่งแตกต่างจาก semanticContentAttribute พวกเขาจะไม่เปลี่ยนความหมาย บางสิ่งเช่นนี้อาจจะ:
button.rightAnchorconstraint(equalTo: button.rightAnchor).isActive = true
หรือใน Objective-C:
[button.imageView.rightAnchor constraintEqualToAnchor:button.rightAnchor].isActive = YES;
Caveats: ยังไม่ทดลอง, iOS 9+
หากต้องการจัดแนวรูปภาพภายใน UIButton ให้ลองโค้ดด้านล่าง
btn.contentHorizontalAlignment = .right
หลังจากลองใช้วิธีแก้ไขปัญหาต่าง ๆ จากอินเทอร์เน็ตฉันก็ไม่บรรลุตามข้อกำหนดที่แน่นอน ดังนั้นฉันเลยเขียนโค้ดยูทิลิตี้ที่กำหนดเอง โพสต์เพื่อช่วยคนในอนาคต ทดสอบกับสวิฟต์ 4.2
// This function should be called in/after viewDidAppear to let view render
func addArrowImageToButton(button: UIButton, arrowImage:UIImage = #imageLiteral(resourceName: "my_image_name") ) {
let btnSize:CGFloat = 32
let imageView = UIImageView(image: arrowImage)
let btnFrame = button.frame
imageView.frame = CGRect(x: btnFrame.width-btnSize-8, y: btnFrame.height/2 - btnSize/2, width: btnSize, height: btnSize)
button.addSubview(imageView)
//Imageview on Top of View
button.bringSubviewToFront(imageView)
}
สำหรับปัญหานี้คุณสามารถสร้าง UIView ภายใน "ป้ายกำกับด้วยมุมมอง UIImage" และตั้งค่าคลาส UIView เป็น UIControl และสร้าง IBAction เหมือนด้านข้าง
สวิฟต์ 4 และ 5
เปลี่ยนทิศทางของอิมเมจ UIButton (RTL และ LTR)
extension UIButton {
func changeDirection(){
isArabic ? (self.contentHorizontalAlignment = .right) : (self.contentHorizontalAlignment = .left)
// left-right margin
self.imageEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
self.titleEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
}
}
Utility
?
Xcode 11.4 Swift 5.2
สำหรับทุกคนที่พยายามสะท้อนสไตล์ปุ่มย้อนกลับด้วยเครื่องหมายบั้งแบบนี้:
import UIKit
class NextBarButton: UIBarButtonItem {
convenience init(target: Any, selector: Selector) {
// Create UIButton
let button = UIButton(frame: .zero)
// Set Title
button.setTitle("Next", for: .normal)
button.setTitleColor(.systemBlue, for: .normal)
button.titleLabel?.font = UIFont.systemFont(ofSize: 17)
// Configure Symbol
let config = UIImage.SymbolConfiguration(pointSize: 19.0, weight: .semibold, scale: .large)
let image = UIImage(systemName: "chevron.right", withConfiguration: config)
button.setImage(image, for: .normal)
// Add Target
button.addTarget(target, action: selector, for: .touchUpInside)
// Put the Image on the right hand side of the button
// Credit to liau-jian-jie for this part
button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
// Customise spacing to match system Back button
button.imageEdgeInsets = UIEdgeInsets(top: 0.0, left: -18.0, bottom: 0.0, right: 0.0)
button.titleEdgeInsets = UIEdgeInsets(top: 0.0, left: -12.0, bottom: 0.0, right: 0.0)
self.init(customView: button)
}
}
การดำเนินงาน:
override func viewDidLoad() {
super.viewDidLoad()
let nextButton = NextBarButton(target: self, selector: #selector(nextTapped))
navigationItem.rightBarButtonItem = nextButton
}
@objc func nextTapped() {
// your code
}
ฉันลงเอยด้วยการสร้างปุ่มแบบกำหนดเองซึ่งอนุญาตให้ตั้งค่ารูปภาพจากตัวตรวจสอบ ด้านล่างเป็นรหัสของฉัน:
import UIKit
@IBDesignable
class CustomButton: UIButton {
@IBInspectable var leftImage: UIImage? = nil
@IBInspectable var gapPadding: CGFloat = 0
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
override func layoutSubviews() {
super.layoutSubviews()
setup()
}
func setup() {
if(leftImage != nil) {
let imageView = UIImageView(image: leftImage)
imageView.translatesAutoresizingMaskIntoConstraints = false
addSubview(imageView)
let length = CGFloat(16)
titleEdgeInsets.left += length
NSLayoutConstraint.activate([
imageView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: gapPadding),
imageView.centerYAnchor.constraint(equalTo: self.titleLabel!.centerYAnchor, constant: 0),
imageView.widthAnchor.constraint(equalToConstant: length),
imageView.heightAnchor.constraint(equalToConstant: length)
])
}
}
}
คุณสามารถปรับค่าของช่องว่างภายในจากสารวัตรเพื่อปรับระยะห่างระหว่างข้อความและภาพ
PS: ใช้ส่วนของรหัสจาก @Mark Hennings