আমি কীভাবে কোনও UIButton- এ টেক্সটের ডানদিকে চিত্রটি রেখে পারি?


300

আমি যদি সাবউভিউটি এড়াতে পারি তবে তা ব্যবহার করতে চাই না। আমি UIButtonএকটি ব্যাকগ্রাউন্ড চিত্র, পাঠ্য এবং এতে একটি চিত্র চাই। এখনই, যখন আমি এটি করি, চিত্রটি পাঠ্যের বাম দিকে রয়েছে। পটভূমি চিত্র, পাঠ্য এবং চিত্র সবগুলিরই হাইলাইট স্থিতি রয়েছে।


এখানে ক্রমবর্ধমান তালিকায় অন্য একটি "হ্যাক" যুক্ত করার জন্য: আপনি বোতামের শিরোনামযুক্ত শিরোনামটিতে আপনার বোতামের শিরোনাম + একটি স্পেস + চিত্র (এনএসটিএক্সটাক্ট হিসাবে) যুক্ত একটি বৈশিষ্ট্যযুক্ত স্ট্রিংটিতে সেট করতে পারেন। আপনার পছন্দ মতো সারিবদ্ধ হওয়ার জন্য আপনার সংযুক্তিটির সীমানাগুলি টুইট করার দরকার হতে পারে ( স্ট্যাকওভারফ্লো . com/ প্রশ্নগুলি / 26105803/… দেখুন )।
মানব

উত্তর:


266

প্রস্তাবিত কয়েকটি উত্তর অত্যন্ত সৃজনশীল এবং অত্যন্ত চতুর হওয়া সত্ত্বেও সহজ সমাধানটি নিম্নরূপ:

button.semanticContentAttribute = UIApplication.shared
    .userInterfaceLayoutDirection == .rightToLeft ? .forceLeftToRight : .forceRightToLeft

এর মত সহজ. বোনাস হিসাবে, চিত্রটি বাম দিকে ডান থেকে বাম লোকালয়ে থাকবে।

সম্পাদনা : যেহেতু কয়েকবার প্রশ্ন জিজ্ঞাসা করা হয়েছে, এটি আইওএস 9 +


88
আমি বিশ্বাস করতে পারি না এই উত্তরটি গৃহীত উত্তর ছিল। তাদের অ্যাপ্লিকেশনগুলির জন্য কেউ স্থানীয়করণ করে না?
Zoltán

6
@ পলজল্টন: এটি প্রশ্নের উত্তর দেয় (উদাঃ "আমি কীভাবে ছবিটি কোনও ইউআইবাটনে টেক্সটের ডান দিকে রাখতে পারি?")। স্থানীয়করণ এর সাথে কী করতে পারে?
বেনিয়ামিন

16
আরটিএল ভাষায় আপনার লেআউটটি "ফ্লিপড" হওয়া চাইবেন না এমন অনেকগুলি পরিস্থিতি নেই। সরাসরিভাবে সেটিংটি semanticContentAttributeহ্যাক / ওয়ার্কআরাউন্ড, আসল সমাধান নয়।
Zoltán

6
আমার দৃষ্টিভঙ্গি হ'ল যে প্রশ্ন জিজ্ঞাসা করা ব্যক্তিটি কী তৈরি করছে তা আপনি জানেন না, সুতরাং এটি লেআউটের জন্য নমনীয়তার সাথে সর্বদা ভাল গণনা।
Zoltán

2
@ জোল্টন স্থানীয়করণ কোনও সমস্যা নয়, কেবল বর্তমান লোকেলের উপর নির্ভর করে সম্পত্তিটি উল্টে দিন।
মনমল

560

সহজ সমাধান:

আইওএস 10 এবং তার বেশি, সুইফট:

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)

আইওএস 10 এর আগে, সুইফট / ওবজে-সি:

button.transform = CGAffineTransformMakeScale(-1.0, 1.0);
button.titleLabel.transform = CGAffineTransformMakeScale(-1.0, 1.0);
button.imageView.transform = CGAffineTransformMakeScale(-1.0, 1.0);

8
আমি নেভিগেশন বার শিরোনাম দেখার জন্য এটি ব্যবহার করেছি এবং সেখানে কোনও ত্রুটি রয়েছে। এটি যখন প্রথম লোড হয় ঠিক আছে তবে আপনি যখন একটি ভিউ কন্ট্রোলারটিকে চাপ দিন এবং পপ করবেন তখন শিরোনামটি উল্টে যাবে।
funct7

@ উওমিন জোশপার্ক আকর্ষণীয় ... আমি কেবল অনুমান করতে পারি যে এটি নেভিগেশনাল পপ অ্যানিমেশনগুলির জন্য অভ্যন্তরীণভাবে রূপান্তরটি অ্যানিমেটেড।
লিয়াউ জিয়ান জি

1
আমি খুঁজে পেয়েছি যে এটি রানটাইমের সময় অটোলেআউট সীমাবদ্ধতার বিরোধের বিষয়ে অভিযোগ সৃষ্টি করছে যদি এটি লেআউটসুবউভিউগুলিতে ()
ভ্লাদ

1
আমি কীভাবে পাঠ্য এবং চিত্রের মধ্যে আরও স্থান রাখতে পারি?
রোহেনব

2
@rohinb @ jose920405 প্যাডিংয়ের জন্য ইমেজএডজিনসেটস এবং কন্টেন্টএডজিনসেটস সেট করার চেষ্টা করুন (তারা বিপরীত হয়েছে তা মনে রেখে)। উদাহরণস্বরূপ button.ImageEdgeInsets = new UIEdgeInsets(0, -leftPadding, 0, leftPadding); button.ContentEdgeInsets = new UIEdgeInsets(0, 0, 0, leftPadding);। এটি জামারিনে রয়েছে তবে এটি সহজেই সুইফট / ওবজে-সিতে অনুবাদ করা উচিত।
লি রিচার্ডসন

266

এক্সকোড 9 এর জন্য আপডেট হয়েছে (ইন্টারফেস বিল্ডারের মাধ্যমে)

ইন্টারফেস বিল্ডার থেকে একটি সহজ উপায় আছে ।

UIButton নির্বাচন করুন এবং দেখুন উপযোগীতা > অর্থপূর্ণ : এই বিকল্পটি নির্বাচন করুন

বাম থেকে ডান এখানে চিত্র বর্ণনা লিখুন এটাই! সুন্দর এবং সহজ!

বিকল্প - দ্বিতীয় পদক্ষেপ:

আপনি যদি চিত্র এবং শিরোনামের মধ্যে ব্যবধানটি সামঞ্জস্য করতে চান তবে আপনি এখানে চিত্রের ইনসেট পরিবর্তন করতে পারেন :

এখানে চিত্র বর্ণনা লিখুন

আশা করি এইটি কাজ করবে!


2
এক্সকোড 9.0 বিটা 5 (9M202q) এ, আপনি দুর্ভাগ্যবশত স্টোরবোর্ডে রানটাইম-এ কেবল ফলাফলটি দেখতে পান এটি এখনও চিত্রটি বাম দিকে দেখায়। এছাড়াও নোট করুন যে এর কারণে সঠিক ইনসেটগুলি সেট করতে কিছু পরীক্ষা এবং ত্রুটি লাগে।
পিডিকে

3
দয়া করে এটি করবেন না - এটি ডান থেকে বাম ভাষাগুলির জন্য স্থানীয়করণ ভঙ্গ করে।
jsadler

169

সাবক্লাসিং ইউআইবাটন সম্পূর্ণ অপ্রয়োজনীয়। পরিবর্তে আপনি কেবল চিত্রের ইনসেটের জন্য একটি উচ্চ বাম ইনসেট মান এবং শিরোনামের জন্য একটি ছোট ডান ইনসেট সেট করতে পারেন। এটার মতো কিছু:

button.imageEdgeInsets = UIEdgeInsetsMake(0., button.frame.size.width - (image.size.width + 15.), 0., 0.);
button.titleEdgeInsets = UIEdgeInsetsMake(0., 0., 0., image.size.width);

3
এটি কাজ করেছিল, তবে কেবল মনে রাখবেন আজ অটোলেট দিয়ে আপনাকে ভিউডিড অ্যাপে করতে হবে এবং ভিউডিডোডে নয়
হোলা সোয়ে

91

আমি এটার জন্য ক্রেডিট দিচ্ছি অনুপ্রেরণা 48 । তার পরামর্শের ভিত্তিতে এবং সেই অন্যান্য প্রশ্নের দিকে তাকিয়ে আমি এটি নিয়ে এসেছি। সাবক্লাস ইউআইবাটন এবং এই পদ্ধতিগুলিকে ওভাররাইড করে।

@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

3
ইউআইবাটন একটি ক্লাস ক্লাস্টার এবং সাবক্ল্যাস করা উচিত নয়।
স্কট বেরেরোয়েটস

50
এটি সত্য নয়, ডকুমেন্টেশনে সুস্পষ্টভাবে সাবক্লাসিংয়ের উল্লেখ রয়েছে এবং কাস্টম লেআউট আচরণের জন্য আপনার ওভাররাইড করা উচিত এমন পদ্ধতিগুলি সরবরাহ করে।
টার্ক

2
বিকাশকারী.অ্যাপল. com/library/ios/docamentation/uikit/references/… 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কাস্টম ব্যাকগ্রাউন্ড শোভাকর সরবরাহ করে এমন সাবক্লাসগুলি এই পদ্ধতিটিকে ওভাররাইড করতে পারে এবং কোনও কাস্টম বিষয়বস্তুতে বোতামটি আঁকতে বাধা দিতে পরিবর্তিত সীমা আয়তক্ষেত্রটি ফিরিয়ে দিতে পারে ` পদ্ধতিগুলি, তবে আমি ধরে নিয়েছি তারা সাবক্লাসগুলিতে কিছু মনে করে না।
ক্রিস্টোফেরকটন

1
দেখে মনে হচ্ছে এই সূত্রটি চিত্রের ফ্রেমের প্রতিবিম্বের জন্য আরও ভাল: frame.origin.x = CGRectGetMaxX(contentRect) - CGRectGetWidth(frame) - self.imageEdgeInsets.right + self.imageEdgeInsets.left - frame.origin.x;এটি UIControlContentHorizontalAlignmentCenterঅন্যদের জন্য আরও ভাল কাজ করে ...
k06a

@ GwendalRoué কেবলমাত্র এটি ছোট হওয়ার অর্থ এই নয় যে এটি আরও ভাল। এটি একটি হ্যাকিয়ার উপায় এবং এটি বোতামটি প্রকৃত ইনসেটগুলিকে উপেক্ষা করে এবং ডান থেকে বাম ভাষায় ভাঙতে পারে। এই উত্তরের সাথে আপনার বিন্যাসের পুরো নিয়ন্ত্রণ রয়েছে
অ্যাক্যাট্যাসাইক

76

শিরোনাম পরিবর্তন হয়ে গেলে কেবল ইনসেটগুলি আপডেট করুন। আপনার অন্যদিকে সমান এবং বিপরীত ইনসেটের সাথে ইনসেটটির ক্ষতিপূরণ দিতে হবে।

[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);

3
আপনি [thebutton.titleLabel sizeToFit];আগে যোগ করতে চাইতে পারেন । আপনি যদি কোনও বিন্যাস ট্রিগার না করেন তবে প্রস্থটি শূন্য হতে পারে। একই চিত্রের আকারের জন্য যায় (কেবলমাত্র চিত্রের ভিউ আকারের পরিবর্তে UIImage.size ব্যবহার করুন)
ডেলোকক্স

পছন্দ করুন ব্যবহার করতে পারেন titleWidth = [self.titleLabel sizeThatFits:CGSizeMake(CGFLOAT_MAX, self.bounds.size.height)].width;(বা আপনি যদি এখনও বোতামের ফ্রেমটি প্রতিষ্ঠিত না হওয়ায় উদ্বিগ্ন হন তবে উচ্চতার জন্য সিজিএফএলএএফএএমএএমএক্সও ব্যবহার করুন) এবংimageWidth = self.currentImage.size.width;
ডেভ গোল্ডম্যান

1
ViewDidLayoutSubviews উপর পুরোপুরি কাজ করে
Gwendal লম্পট

আমাকে layoutSubviewsএটি আমার UITableViewCellসাবক্লাসে রাখতে হয়েছিল তবে এটির কাজ ভাল। ধন্যবাদ!
RyanG

60

এই উত্তরগুলির সমস্ত, জানুয়ারী 2016 হিসাবে, অপ্রয়োজনীয়। ইন্টারফেস বিল্ডারে, ভিউ সিমেন্টিক এতে সেট করুন Force Right-to-Leftবা আপনি যদি প্রোগ্রামিক পদ্ধতিতে পছন্দ semanticContentAttribute = .forceRightToLeftকরেন তবে এটি আপনার পাঠ্যের ডানদিকে চিত্রটি প্রদর্শিত হবে।


5
দুঃখজনকভাবে এটি 9 বছরেরও বেশি পুরানো আইওএসকে সমর্থন করে না তবুও সুন্দর উত্তর, তাই o
এডি

1
আমি দুঃখের সাথে জানাচ্ছি যে, ইউআইবার্টন আইটেমের জন্য এটি ব্যবহৃত হয় এমন একটি ইউআইবুটনে এটি সেট করার ফলে কোনও পরিবর্তন হয়নি।
এমেলিয়া

@ অ্যামেলিয়ার উল্লেখ অনুসারে, আপনি কল করলে এটি কাজ করে না UIBarButtonItem(customView: button), তবে কিছু খালি
দৃষ্টির

@ টিটি.কিলিউ, এক্সকোড ৮.১ ব্যবহার করে আপনি এটি কার্যকর করুন। আমি uiButton.semanticContentAttribute = .forRightToLeft সেট করেছি এবং NextButton = UIBarButtonItem (কাস্টমভিউ: uiButton) সরবরাহ করি
ইউজিন বিরিয়ুকভ

53

ইন্টারফেস বিল্ডারে আপনি ইউআইবাটনের জন্য এজ ইনসেটগুলি অপশন কনফিগার করতে পারেন, পৃথকভাবে তিনটি অংশের জন্য: সামগ্রী, চিত্র, শিরোনাম

এখানে চিত্র বর্ণনা লিখুন এখানে চিত্র বর্ণনা লিখুন

এক্সকোড 8:

এখানে চিত্র বর্ণনা লিখুন


3
আসলে আমার মতে এই সর্বোত্তম উত্তর stackoverflow.com/a/39013315/1470374 ))
Gennadiy Ryabkin

25

আপডেট: সুইফট 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
    }
}

সুইফট 2 এর মূল উত্তর:

একটি সমাধান যা একটি সুইফ্ট বাস্তবায়ন উদাহরণ সহ সমস্ত অনুভূমিক প্রান্তিককরণ পরিচালনা করে। প্রয়োজনে কেবল উদ্দেশ্য-সিতে অনুবাদ করুন।

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
    }
}

এটি লক্ষণীয় যে এটি বেশ ভাল চিত্র এবং শিরোনাম ইনসেটগুলি পরিচালনা করে।

জাসংগ্রোগোরি উত্তর থেকে অনুপ্রাণিত;)


1
এই সমাধানটি আমার পক্ষে কাজ করেছে, তবে আমার চিত্রটির চারপাশের কিছু জায়গার প্রয়োজন ছিল তাই আমি নীচের কোডটি যুক্ত করেছি: self.contentEdgeInsets = UIEdgeInsetsMake (10.0, 10.0, 10.0, 10.0)
ব্যবহারকারী1354603

1
আমি এই উপায়টি পছন্দ করি কারণ আপনি @IBDesignableক্লাসে যুক্ত করতে পারেন এবং এটি ডিজাইনের সময় উল্টিয়ে দেখতে পারেন।
জেমস টুমি

আমি এই সমাধানটি পছন্দ করি কারণ এটি নেভিগেশন বারে রাখার পরেও কার্যকর হয়।
এল ভয়ঙ্কর

10

এটি যদি ইউআইবারবারটন আইটেমে করা দরকার হয় , তবে অতিরিক্ত র্যাপিং ভিউ করা উচিত
এটি কাজ করবে

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)

7

এখানে 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;
}

1
এছাড়াও আপনি IBDESIGNABLE বর্গ হেডার storyborad এটা দেখার জন্য যোগ করতে পারেন yadi.sk/i/fd6Si-BJqzCFD
নিকোলাই Shubenkov

6

রূপান্তর সমাধান আইওএস 11 এ কাজ করে না বলে আমি একটি নতুন পদ্ধতির লেখার সিদ্ধান্ত নিয়েছি।

বোতামগুলি সামঞ্জস্য করা semanticContentAttribute পাঠ্যটি পরিবর্তন হলে রিলেআউট না করে ডানদিকে চিত্রটি সুন্দরভাবে দেয়। এ কারণেই এটি আদর্শ সমাধান। তবে এখনও আমার আরটিএল সমর্থন দরকার। কোনও অ্যাপ্লিকেশন একই সেশনে এটির বিন্যাসের দিক পরিবর্তন করতে পারে না এই বিষয়টি সহজেই সমাধান করে।

এই যে বলেন, এটি বেশ সোজা এগিয়ে।

extension UIButton {
    func alignImageRight() {
        if UIApplication.shared.userInterfaceLayoutDirection == .leftToRight {
            semanticContentAttribute = .forceRightToLeft
        }
        else {
            semanticContentAttribute = .forceLeftToRight
        }
    }
}

6

এক্সটেনশন ওয়ে

কাস্টম অফসেট সহ ডানদিকে চিত্র সেট করতে এক্সটেনশন ব্যবহার করা

   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
    }
}

4

সুইফট - ইউআইবাটনটি প্রসারিত করুন এবং এই লাইনগুলি রাখুন

    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);
    }

3

পাইওটর টমাসিকের মার্জিত সমাধানের উপর ভিত্তি করে তৈরি করা: আপনি যদি বোতামের লেবেল এবং চিত্রের মধ্যেও কিছুটা ফাঁক রাখতে চান তবে আপনার প্রান্তের ইনসেটগুলিকে নীচে অন্তর্ভুক্ত করুন (আমার কোডটি এখানে অনুলিপি করুন যা আমার পক্ষে পুরোপুরি কার্যকর হয়):

    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);

পাইওটার আপনার সমাধানের জন্য ধন্যবাদ!

এরিক


@ লুলিয়ান: আমি সম্প্রতি পরিবর্তে লিয়া জিয়ান জিয়ার সমাধানটি ব্যবহার করেছি (এখানে স্বীকৃত উত্তর) এবং এটি দুর্দান্তভাবে কাজ করে এবং এটি একটি খুব মার্জিত সমাধান।
এরিক ভ্যান ডের নিউট

এটি আমার পক্ষে কাজ করে না কারণ এটি পাঠ্যের প্রান্তিককরণ পরিবর্তন করে।
আইউলিয়ান ওনোফ্রেই

3

নিজে কর. এক্সকোড 10, সুইফট 4,

প্রোগ্রামগতভাবে ইউআই ডিজাইনের জন্য

এখানে চিত্র বর্ণনা লিখুন

 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
}()

প্রান্ত ইনসেট মানগুলি আয়তক্ষেত্র দ্বারা উপস্থাপিত অঞ্চল সঙ্কুচিত বা প্রসারিত করতে একটি আয়তক্ষেত্রায় প্রয়োগ করা হয়। সাধারণত, প্রান্তের ইনসেটগুলি ভিউর ফ্রেমটি সংশোধন করতে দর্শন বিন্যাসের সময় ব্যবহৃত হয়। ধনাত্মক মানগুলি নির্দিষ্ট পরিমাণ দ্বারা ফ্রেমটিকে ইনসেট (বা সঙ্কুচিত) করে। Gণাত্মক মানগুলি নির্দিষ্ট পরিমাণ দ্বারা ফ্রেমটিকে প্রসারিত (বা প্রসারিত) করে cause

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 )

    }
}

স্টোরিবোর্ড ইউআই ডিজাইনের জন্য

এখানে চিত্র বর্ণনা লিখুন এখানে চিত্র বর্ণনা লিখুন


এটি আরও মার্জিত করার উপায় আছে?
জাপোরোজচেনকো ওলেকসান্ডার

নেতিবাচক ভোট কেন একটি মন্তব্য করুন দয়া করে
নাজমুল হাসান

2

সাবক্ল্যাসিং এবং ওভার-রাইডিং লেআউটসউভিউগুলি সম্ভবত আপনার সবচেয়ে ভাল উপায়।

থেকে রেফারেন্স: আইফোন ইউআইবাটন - চিত্রের অবস্থান


3
ইউআইবাটন সাবক্লাসে একেবারে কোনও সমস্যা নেই।
nonamelive

2

পিওটারের উত্তর নিয়েছেন এবং এটিকে একটি সুইফট এক্সটেনশনে পরিণত করেছেন। এটিকে কল করার আগে চিত্র এবং শিরোনামটি নিশ্চিত করে নিন যাতে বোতামটি সঠিকভাবে মাপ দেয়।

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)
    }
}

}


2

একটি সুইফ্ট বিকল্প যা কোনও পোকামাকড় না করে আপনি যা চান তা করে:

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
    }

}

1

এখানে উল্লিখিত সমাধানগুলি কাজ করা বন্ধ করে দিয়েছে, একবার আমি অটো লেআউট সক্ষম করেছি । আমার নিজের সাথে আসতে হবে:

সাবক্লাস ইউআইবাটন এবং ওভাররাইড 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;

}

ফলাফল:

এখানে চিত্র বর্ণনা লিখুন


1

জ্যাসংগ্রোরির দেওয়া সুইফ্ট 3.0 মাইগ্রেশন সলিউশন

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
        }

1

আমি স্ট্যান্ডার্ড বাটন ইমেজ ভিউটি ব্যবহার না করার সিদ্ধান্ত নিয়েছি কারণ প্রস্তাবিত সমাধানগুলি এটিকে ঘুরিয়ে আনার জন্য হ্যাকি অনুভূত হয়েছিল। এটি আমার পছন্দসই নান্দনিকতা পেয়েছে এবং সীমাবদ্ধতাগুলি পরিবর্তন করে বোতামটি প্রতিস্থাপন করা স্বজ্ঞাত:

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)
        ])
    }
}

ডান তীরযুক্ত বোতাম


এটি ট্যাপগুলির প্রতিক্রিয়া দেয় না, পাঠ্যটি ম্লান হয় তবে চিত্রটি দেয় না
টেডি কে

0

সুইফট 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
}

0

সীমাবদ্ধতা সম্পর্কে কীভাবে? সিমান্টিক কনটেন্টঅ্যাট্রিবিউটের বিপরীতে, তারা শব্দার্থবিজ্ঞান পরিবর্তন করে না। এরকম কিছু সম্ভবত:

 button.rightAnchorconstraint(equalTo: button.rightAnchor).isActive = true

বা উদ্দেশ্য সি-তে:

[button.imageView.rightAnchor constraintEqualToAnchor:button.rightAnchor].isActive = YES;

ক্যাভেটস: অনির্ধারিত, আইওএস 9+



0

ইন্টারনেট থেকে একাধিক সমাধান চেষ্টা করার পরেও আমি সঠিক প্রয়োজনীয়তা অর্জন করছিলাম না। সুতরাং আমি কাস্টম ইউটিলিটি কোড লিখে শেষ করেছি। ভবিষ্যতে কাউকে সহায়তা করার জন্য পোস্ট করা। দ্রুত 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)
    }

0

এই ইস্যুটির জন্য আপনি "ইউআইআইভিউজ ভিউ সহ লেবেল" এর ভিতরে ইউআইভিউ তৈরি করতে পারেন এবং ইউআইভিউ ক্লাসটিকে ইউআইসিএন্ট্রোল হিসাবে সেট করতে পারেন এবং আইবিএक्शनটি পাশাপাশি তৈরি করতে পারেন

এখানে চিত্র বর্ণনা লিখুন


0

সুইফট 4 এবং 5

UIButton চিত্রের দিক পরিবর্তন করুন (আরটিএল এবং এলটিআর)

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)
    }
}


আমি কেবল ইউটিলিটিটি সরিয়েছি, এটি আমার কোডের একটি শ্রেণি যেখানে আমি যাচাই করতে পারি যে নির্বাচিত ভাষা আরবী বা ইংরেজি কিনা
রশিদ লতিফ

0

এক্সকোড 11.4 সুইফ্ট 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
}

0

আমি একটি কাস্টম বোতাম তৈরি করে শেষ করেছি, যা ইন্সপেক্টর থেকে চিত্র সেট করতে দেয়। নীচে আমার কোডটি দেওয়া হয়েছে:

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)
            ])
        }
    }
}

আপনি পাঠ্য এবং চিত্রের মধ্যে ব্যবধানটি সামঞ্জস্য করতে ইন্সপেক্টর থেকে গ্যাপ প্যাডিংয়ের মান সমন্বয় করতে পারেন।

পিএস: @ মার্ক হেনিংস উত্তর থেকে কিছু কোড অংশ ব্যবহার করেছেন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.