ইউআইবাটন চিত্র + পাঠ্য আইওএস


129

আমি প্রয়োজন UIButtonসঙ্গে চিত্র & টেক্সট । চিত্র শীর্ষে থাকা উচিত এবং পাঠ্যটি চিত্রের আওতায় আসে উভয়ই ক্লিকযোগ্য হবে।


এই সাহায্য আশা দেখুন [1] [UiButton উভয় টেক্সট এবং ইমেজ সঙ্গে] stackoverflow.com/questions/4926581/... [1]: stackoverflow.com/questions/4926581/... তারপর আপনি হ্যান্ডেল custombutton আপনার দৃশ্য উপর একটি UITapGestureRecognizer যোগ করতে পারেন ক্লিকের।
হুমায়ুন গণি

22
একটি প্রশ্নের চেয়ে প্রয়োজন স্পেসিফিকেশন মত আরো মনে হচ্ছে।
আবিজার্ন

দেখুন গৃহীত উত্তর এবং এই commandshift.co.uk/blog/2013/03/12/uibutton-edge-insets UIButton সম্পর্কে প্রান্ত
onmyway133

উত্তর:


308

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

  1. বোতামটি নির্বাচন করুন এবং একটি শিরোনাম এবং একটি চিত্র সেট করুন। মনে রাখবেন আপনি যদি চিত্রটির পরিবর্তে ব্যাকগ্রাউন্ড সেট করেন তবে বোতামের চেয়ে ছোট হলে চিত্রটির আকার পরিবর্তন করা হবে।আইবি মৌলিক চিত্র এবং শিরোনাম
  2. প্রান্ত এবং ইনসেটগুলি পরিবর্তন করে উভয় আইটেমের অবস্থান নির্ধারণ করুন। এমনকি আপনি নিয়ন্ত্রণ বিভাগে উভয় প্রান্তিককরণ নিয়ন্ত্রণ করতে পারে।

আইবি পজিশন সেট আইবি কন্ট্রোল সেট

এমনকি ইউআইএলবেল এবং ইউআইআইমেজগুলি অন্যান্য সমাধান প্রস্তাবিত হিসাবে তৈরি না করেই আপনি কোডের মাধ্যমে একই পন্থাটি ব্যবহার করতে পারেন। সর্বদা এটি সরল রাখুন!

সম্পাদনা: সঠিক ইনসেটের সাথে 3 টি জিনিস সেট (শিরোনাম, চিত্র এবং পটভূমি) থাকা একটি ছোট উদাহরণ সংযুক্ত বাটন পূর্বরূপ


2
এটা সঠিক। আপনি দুটিটি সঠিকভাবে সারিবদ্ধ করতে শিরোনাম এবং চিত্রের প্রান্ত ইনসেটগুলি ব্যবহার করতে চাইবেন। আপনি কোডটি এডিজাইনসেটস এবং কন্টেন্টএডজেইনসেটস বৈশিষ্ট্য সেট করে কোডটিতে এটি করতে পারেন।
টিম মাহুনি

4
হ্যাঁ, এটা প্রায় সঠিক। কেবল আপনাকে Backgroundচিত্রটির পরিবর্তে চিত্রটি সেট Imageকরতে হবে, অন্যথায় আপনি শিরোনামটি শিরোনামটি পুনরায় স্থাপনের জন্য ইনসেট মানগুলি সেট করে না।
হোলএক্স

6
আমারও এ নিয়ে সমস্যা হয়েছিল। যদি আপনার শিরোনামটি প্রদর্শিত হচ্ছে না, তবে এটির জন্য নেতিবাচক বাম অফসেটটি সেট করার চেষ্টা করুন। দেখে মনে হচ্ছে আইবি স্বয়ংক্রিয়ভাবে এটিকে চিত্রের ডানদিকে ঠেলে দেয়।
গ্রাহকরা

8
এটি কেবল চিত্র এবং টেক্সট পাশাপাশি পাশাপাশি প্রদর্শন করে? ওরিয়েন্টেশনকে উপরে থেকে নীচে পরিবর্তন করার কোনও উপায় আছে কি? এটিই মূল প্রশ্নটি বলে এবং আমি পাশাপাশি যা খুঁজছি। ধন্যবাদ!
flohei

12
এক্সকোড 8 ব্যবহারকারীদের জন্য আপনি এজ সম্পত্তিটি দেখতে পাবেন না। ছবিটি যুক্ত করার পরেও পাঠ্যটি অদৃশ্য হয়ে যেতে পারে। এটি পাঠ্যকে সাদা করে দেয় এবং আপনি যদি একটি সাদা পটভূমিতে থাকেন তবে মনে হয় এটি অদৃশ্য হয়ে গেছে। পাঠ্যের রঙ পরিবর্তন করুন এবং এটি চিত্রের নিকটে উপস্থিত হবে। আপনি আকার পরিদর্শকের অধীনে ইনসেটগুলি সামঞ্জস্য করতে পারেন।
মিকাহ মন্টোয়া

67

আমি মনে করি আপনি আপনার সমস্যার জন্য এই সমাধানটি সন্ধান করছেন:

UIButton *_button = [UIButton buttonWithType:UIButtonTypeCustom];
[_button setFrame:CGRectMake(0.f, 0.f, 128.f, 128.f)]; // SET the values for your wishes
[_button setCenter:CGPointMake(128.f, 128.f)]; // SET the values for your wishes
[_button setClipsToBounds:false];
[_button setBackgroundImage:[UIImage imageNamed:@"jquery-mobile-icon.png"] forState:UIControlStateNormal]; // SET the image name for your wishes
[_button setTitle:@"Button" forState:UIControlStateNormal];
[_button.titleLabel setFont:[UIFont systemFontOfSize:24.f]];
[_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; // SET the colour for your wishes
[_button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; // SET the colour for your wishes
[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, -110.f, 0.f)]; // SET the values for your wishes
[_button addTarget:self action:@selector(buttonTouchedUpInside:) forControlEvents:UIControlEventTouchUpInside]; // you can ADD the action to the button as well like

... বোতামটির বাকি কাস্টমাইজেশনটি এখন আপনার দায়িত্ব, এবং বোতামটি আপনার ভিউতে যুক্ত করতে ভুলবেন না।

আপডেট # 1 এবং আপডেট # 2

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

আপনি এছাড়াও চূড়ান্ত ফলাফল দেখতে পারেন মধ্যে ইন্টারফেস বিল্ডার যেমন স্ক্রিনশট হয়।

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


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

@ বাদলশাহ, হ্যাঁ, কিছু পরিস্থিতি রয়েছে (বোতামের আকার, চিত্রের আকার, শিরোনামের দৈর্ঘ্য ইত্যাদির উপর নির্ভর করে ...) যখন আপনি যা বলেছেন তা সত্য এবং আপনি একই সাথে শিরোনাম এবং চিত্র দেখতে পারবেন না কারণ চিত্রটি দৃশ্যমান অঞ্চলের শিরোনামটি ঠেলে দেয় ; তবে সেই দৃশ্যটি মোটেই জেনেরিক নয়, জেনেরিক পরিস্থিতিটি হ'ল শিরোনাম এবং চিত্র উভয়ই একই সময়ে প্রদর্শিত হতে পারে এবং প্রদর্শিত হবে।
হোলএক্স

31

এক্সকোড -9 এবং এক্সকোড -10 অ্যাপল এখন এজ ইনসেট সম্পর্কিত কয়েকটি পরিবর্তন করেছে, আপনি এটি আকার-পরিদর্শকের অধীনে পরিবর্তন করতে পারেন।

নীচের পদক্ষেপগুলি অনুসরণ করুন:

পদক্ষেপ -১: ইনপুট পাঠ্য এবং চিত্রটি নির্বাচন করুন যা আপনি প্রদর্শন করতে চান:

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

পদক্ষেপ -২: নীচের চিত্রের মতো আপনার প্রয়োজন অনুসারে বাটন নিয়ন্ত্রণ নির্বাচন করুন:

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

পদক্ষেপ -৩: এখন যান আকারের পরিদর্শক এবং আপনার প্রয়োজন অনুসারে মান যুক্ত করুন:

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


9
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.imageView.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

তবে নীচের কোডটি উপরে লেবেল এবং পটভূমিতে চিত্র প্রদর্শন করবে

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.background.image = [UIImage imageNamed:@"your image name here"];
button.titleLabel.text = @"your text here";

একই নিয়ন্ত্রণে লেবেল এবং বোতাম ব্যবহার করার দরকার নেই কারণ UIButton এর UILabel এবং UIimageview বৈশিষ্ট্য রয়েছে।


1
আমার উপরের চিত্রটি উপরে রাখতে হবে এবং চিত্রের নীচে পাঠ্য উভয়ই ক্লিকযোগ্য হতে হবে ..
কোডসেন

4

এই কোডটি ব্যবহার করুন:

UIButton *button=[UIButton buttonWithType:UIButtonTypeRoundedRect];
    button.imageView.frame=CGRectMake(0.0f, 0.0f, 50.0f, 44.0f);///You can replace it with your own dimensions.
    UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0.0f, 35.0f, 50.0f, 44.0f)];///You can replace it with your own dimensions.
    [button addSubview:label];

4

এই কোডটি ব্যবহার করুন:

UIButton *sampleButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sampleButton setFrame:CGRectMake(0, 10, 200, 52)];
[sampleButton setTitle:@"Button Title" forState:UIControlStateNormal];
[sampleButton setFont:[UIFont boldSystemFontOfSize:20]];
[sampleButton setBackgroundImage:[[UIImage imageNamed:@"redButton.png"] 
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0] forState:UIControlStateNormal];
[sampleButton addTarget:self action:@selector(buttonPressed)
forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:sampleButton]

4

আমি একই সমস্যার মুখোমুখি হয়েছি এবং নীচের মতো পদ্ধতিটির একটি নতুন সাবক্লাস তৈরি করে UIButtonএবং ওভাররাইড করে এটি ঠিক করেছি layoutSubviews::

-(void)layoutSubviews {
    [super layoutSubviews];

    // Center image
    CGPoint center = self.imageView.center;
    center.x = self.frame.size.width/2;
    center.y = self.imageView.frame.size.height/2;
    self.imageView.center = center;

    //Center text
    CGRect newFrame = [self titleLabel].frame;
    newFrame.origin.x = 0;
    newFrame.origin.y = self.imageView.frame.size.height + 5;
    newFrame.size.width = self.frame.size.width;

    self.titleLabel.frame = newFrame;
    self.titleLabel.textAlignment = UITextAlignmentCenter;

}

আমি মনে করি যে এঞ্জেল গার্সিয়া ওলোকুইয়ের উত্তরটি আরও একটি ভাল সমাধান, আপনি যদি এগুলি সমস্তই ইন্টারফেস বিল্ডারের সাথে ম্যানুয়ালি রাখেন তবে আমি আমার সমাধানটি রাখব যেহেতু আমার প্রতিটি বোতামের সামগ্রীর ইনসেটগুলি সংশোধন করতে হবে না।


4

তৈরি করুন UIImageViewএবং UILabel, এবং এই দুটিতে চিত্র এবং পাঠ্য সেট করুন .... তারপরে চিত্রভিউ এবং লেবেলের উপর একটি কাস্টম বোতাম রাখুন ....

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search.png"]];
    imageView.frame = CGRectMake(x, y, imageView.frame.size.width, imageView.frame.size.height);
    [self.view addSubview:imageView];

UILabel *yourLabel = [[UILabel alloc] initWithFrame:CGRectMake(x, y,a,b)];
yourLabel.text = @"raj";
[self.view addSubview:yourLabel];

UIButton * yourBtn=[UIButton buttonWithType:UIButtonTypeCustom];
[yourBtn setFrame:CGRectMake(x, y,c,d)];
[yourBtn addTarget:self action:@selector(@"Your Action") forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:yourBtn];  

সহজ এবং দরকারী। হাইলাইট করা চিত্র এবং শিরোনাম কীভাবে সেট করবেন?
ডনসং

lable setHighlightedTextColor জন্য এবং আপনি forControlEvents সাথে খেলতে আছে
Rajneesh071

3

আপনার চিত্রের জন্য কাস্টম চিত্রদর্শন এবং পাঠ্যের জন্য কাস্টম লেবেল তৈরি করা উচিত এবং আপনি আপনার বোতামটিতে সাবউভিউ হিসাবে যুক্ত করুন। এটাই.

UIButton *yourButton = [UIButton buttonWithType:UIButtonTypeCustom];
yourButton.backgroundColor = [UIColor greenColor];
yourButton.frame = CGRectMake(140, 40, 175, 30);     
[yourButton addTarget:self action:@selector(yourButtonSelected:) forControlEvents:UIControlEventTouchUpInside]; 
[self.view addSubview:yourButton];

UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, yourButton.frame.size.width, yourButton.frame.size.height/2)];
imageView1.image =[UIImage imageNamed:@"images.jpg"];
[yourButton addSubview:imageView1];

UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, yourButton.frame.size.height/2, yourButton.frame.size.width, yourButton.frame.size.height/2)];
label.backgroundColor = [UIColor greenColor];
label.textAlignment= UITextAlignmentCenter;
label.text = @"ButtonTitle";
[yourButton addSubview:label];

পরীক্ষার উদ্দেশ্যে, yourButtonSelected:পদ্ধতিটি ব্যবহার করুন

-(void)yourButtonSelected:(id)sender{
    NSLog(@"Your Button Selected");

}

আমি মনে করি এটি আপনার পক্ষে সহায়ক হবে।


3

এটি সত্যিই সহজ, কেবল আপনার বোতামের ব্যাকগ্রাউন্ডে চিত্র যুক্ত করুন এবং ইউিকন্ট্রোলস্ট্যাটেনরমাল জন্য বোতামের টাইটেলবেলে পাঠ্য দিন। এটাই.

[btn setBackgroundImage:[UIImage imageNamed:@"img.png"] forState:UIControlStateNormal];
[btn setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];
[btn setTitle:@"Click Me" forState:UIControlStateNormal];

4
... এবং পাঠ্যটি কীভাবে চিত্রের নীচে যায়?
হোলএক্স

@ হোলেক্স: আমাকে পরিচালিত করার জন্য আপনাকে অনেক ধন্যবাদ, আমি এর মধ্যে ত্রুটি খুঁজে পেয়েছি এবং তারপরে সে অনুযায়ী পরিবর্তন হয়েছে।
ধ্রুব

0

দ্রুত সংস্করণ:

var button = UIButton()

newGameButton.setTitle("Новая игра", for: .normal)
newGameButton.setImage(UIImage(named: "energi"), for: .normal)
newGameButton.backgroundColor = .blue
newGameButton.imageEdgeInsets.left = -50

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

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