কোনও ইউআইবাটনের ইমেজ সাইজ কীভাবে সামঞ্জস্য করবেন?


158

আমি কীভাবে ইউআইবাটনটির চিত্রের আকারটি সামঞ্জস্য করতে পারি? আমি ইমেজটি এভাবে স্থাপন করছি:

[myLikesButton setImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

তবে এটি পূর্ণ বোতামে চিত্রটি পূর্ণ করে, আমি কীভাবে চিত্রটি ছোট করব?


6
আপনি কি চিত্রটি আরও ছোট (এলএল) করার চেষ্টা করেছেন?
কোডাফাই

1
@ কোডাফাই ঠিক আছে, আপনার সিপিইউয়ের জন্য যে কোনও কাজ হ্রাস হয়, কম মেমরি ব্যবহার করা হয় এবং সম্ভবত আপনি কোনও স্কেলিং
প্রত্নতত্ত্বগুলি

এছাড়াও আপনি চিত্রের আকারে বাটনটি তৈরি করতে পারেন (বা তদ্বিপরীত) hyএতে একটি ছোট বাটন রয়েছে ... এটিতে একটি ছোট বোতাম রয়েছে imp কেবল আপনি যে চিত্রটি চান তা যুক্ত করুন, এটিই কাস্টম বোতামগুলির জন্য বা আপনি করতে পারেন অন্যদের স্পষ্ট ধারণা পাওয়ার জন্য আপনি যে যুক্তিটি প্রয়োগ করতে চান তা ব্যাখ্যা করুন।
অভিষেক সিং

উত্তর:


243

আপনি কী করতে চাইছেন তা যদি আমি সঠিকভাবে বুঝতে পারি তবে আপনার বোতামের ইমেজের প্রান্তটি ইনসেটের সাথে খেলতে হবে। কিছুটা এইরকম:

myLikesButton.imageEdgeInsets = UIEdgeInsets(top, left, bottom, right)

96

টিমের উত্তর সঠিক, তবে আমি অন্য একটি পরামর্শ যুক্ত করতে চেয়েছিলাম, কারণ আমার ক্ষেত্রে এখানে একটি সহজ সমাধান ছিল।

আমি UIButtonচিত্রের ইনসেটগুলি সেট করতে চেয়েছিলাম কারণ আমি বুঝতে পারি নি যে আমি বোতামের সামগ্রীতে মোড সেট করতে পারি UIImageView, যা ইউআইইডিজিনসেটস এবং হার্ড-কোডেড মানগুলি পুরোপুরি ব্যবহারে বাধা দিত। কেবলমাত্র বোতামের অন্তর্নিহিত চিত্রদর্শনটি অ্যাক্সেস করুন এবং সামগ্রী মোড সেট করুন:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

দেখুন ইউআইবাটন কন্টেন্ট মোড সেটিং শুনছে না?

সুইফট 3

myButton.imageView?.contentMode = .scaleAspectFit

1
ব্যাকগ্রাউন্ড ইমেজ এর জন্য কীভাবে?
সের্গেই সহ্যাকায়ান

মাইবাটন.ব্যাকগ্রাউন্ডআইমেজভিউ?। কনটেন্টমোড = .স্কেলআস্পেক্টফিট
আন্দ্রেয়া.ফেরান্দো

@ আন্দ্রেয়া.ফেরান্দো button.backgroundImageView.contentModeকাজ করে না
সিওং লি

নিজেকে কিছুটা সময় সাশ্রয় করুন এবং নিশ্চিত করুন যে আপনি ব্যাকগ্রাউন্ড ইমেজ নয় চিত্রটি সেট করছেন! @ সিয়ংলাই সঠিক আপনি কন্টেন্টমোড বা এজ এজেন্টস সহ ব্যাকগ্রাউন্ড ইমেজ ম্যানিপুলেট করতে পারবেন না
redPanda

42

সুইফট 3:

button.setImage(UIImage(named: "checkmark_white"), for: .normal)
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

6
এটি আমার জন্য সুন্দরভাবে কাজ করেছে। আমি ইনস্কেপের মধ্যে একটি পিডিএফ আইকন তৈরি করেছি এবং contentVerticalAlignment/contentHorizontalAlignmentঅপশনগুলি আমাকে যেভাবে প্রত্যাশা করছিল সেভাবে এটি স্কেল করতে সক্ষম করে। এই পোস্ট করার জন্য আপনাকে ধন্যবাদ।
অ্যাড্রিয়ান

2
কৌতুকটি সেটিং contentHorizontalAlignmentএবং contentVerticalAlignmentকরেছিলেন
টম ন্যাপেন

1
আইকনগুলির জন্য পিডিএফ সম্পদ ব্যবহার করার সময় এই সমাধানটি দুর্দান্ত কাজ করে। ধন্যবাদ!
এনেকো অ্যালোনসো


26

যদি আপনার চিত্রটি খুব বড় হয় (এবং আপনি কেবল চিত্রটি আরও ছোট করতে চান না / করতে চান না) তবে প্রথম দুটি উত্তরের সংমিশ্রণ দুর্দান্ত কাজ করে।

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 5.0)

আপনি কেবল চিত্রের ইনসেটগুলি না পেলে চিত্রটি পরিবর্তন না করে চিত্রটি স্কিউ হবে contentMode


23

আপনি imageEdgeInsetsসম্পত্তিটি ব্যবহার করতে পারেন বোতামটির চিত্রের চারপাশে আয়তক্ষেত্রের জন্য ইনসেট বা আউটসেট মার্জিন।

 [self.btn setImageEdgeInsets:UIEdgeInsetsMake(6, 6, 6, 6)];

একটি ধনাত্মক মান সঙ্কুচিত হয়, বা পোকামাকড়, যে প্রান্তটি — চলমান। একটি নেতিবাচক মান প্রসারিত হয়, বা প্রান্ত, যে প্রান্ত।


17

এখানে ইউআইবাটনটির চিত্র ভিউ স্কেল করার অন্যান্য সমাধান।

button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8)

আপনি আমার দিন বাঁচিয়েছেন। আমি কেবল একটি বোতামের মধ্যে আমার চিত্রটি স্কেল করতে চেয়েছিলাম। কোন পোকামাকড় কিছুই নেই, ধন্যবাদ!
পেড্রো আন্তোনিও

15

হেরস সুইফট সংস্করণ:

myButton.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

8

সুইফট 4

এই নির্দিষ্ট ক্রমে আপনার এই দুটি লাইন কোড ব্যবহার করতে হবে। আপনার কেবলমাত্র প্রান্ত ইনসেটের উপরের এবং নীচের মানটি পরিবর্তন করতে হবে।

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 10.0, 0.0)

এগুলি EXC_BAD_ACCESSযখন ফোন করা হয়েছিল তখন ত্রুটি ঘটায় override func layoutSubviews()
অ্যান্ড্রু কির্না

7

সাহায্যে টিম C- এর উত্তর , আমি একটি এক্সটেনশন তৈরি করতে সক্ষম ছিল UIButtonসুইফট ব্যবহার আপনার ব্যবহার করা চিত্রটিকে ফ্রেম নির্দিষ্ট করার অনুমতি দেয় .setImage()একটি অতিরিক্ত সঙ্গে ফাংশন frameপ্যারামিটার

extension UIButton{

    func setImage(image: UIImage?, inFrame frame: CGRect?, forState state: UIControlState){
        self.setImage(image, forState: state)

        if let frame = frame{
            self.imageEdgeInsets = UIEdgeInsets(
                top: frame.minY - self.frame.minY,
                left: frame.minX - self.frame.minX,
                bottom: self.frame.maxY - frame.maxY,
                right: self.frame.maxX - frame.maxX
            )
        }
    }

}

এই ব্যবহার করে, যদি আপনি একটি ফ্রেম সেট করতে চেয়েছিলেন UIButtonকরার CGRectMake(0, 0, 64, 64), এবং এটি ইমেজ সেট myImageএকটি ফ্রেম সঙ্গে CGRectMake(8, 8, 48, 48), আপনি ব্যবহার করতে পারে

let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64))
button.setImage(
    myImage,
    inFrame: CGRectMake(8, 8, 48, 48),
    forState: UIControlState.Normal
)

4
আপনার if letকিনা frameতা পরীক্ষা করে দেখার পরিবর্তে উচিত nilএবং তারপরে জিলিয়ন বার আন-র্যাপিংয়ে বাধ্য করা উচিত ।
fpg1503

7

আইকন আকারটি এর সাথে পরিবর্তন করার সময় UIEdgeInsetsMake(top, left, bottom, right), বোতামের মাত্রা এবং UIEdgeInsetsMack এর সক্ষমতা মনে রাখবেন negativeণাত্মক মানগুলির সাথে কাজ করুন যেমন তারা ইতিবাচক।

উদাহরণ: উচ্চতা 100 এবং দিক 1: 1 সহ দুটি বোতাম।

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)

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

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(45, 0, 45, 0)

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

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(60, 0, 60, 0)

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

ABS (100 - (40 + 40)) = ABS (100 - (60 + 60)) থেকে 1 এবং 3 টি উদাহরণ অভিন্ন


2

সুইফট 3

আমি আমার বাটনের প্রস্থ এবং উচ্চতা 40 এ সেট করেছি এবং এজজেনসেকমেক থেকে আমার প্যাডিং সমস্ত পক্ষের 15। আসল প্যাডিংটি দেখার জন্য আমি আপনার বোতামটিতে একটি পটভূমি রঙ যুক্ত করার পরামর্শ দিচ্ছি।

myButton.backgroundColor = UIColor.gray // sample color to check padding
myButton.imageView?.contentMode = .scaleAspectFit
myButton.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15)

2

একটি পন্থা হ'ল নীচের মত কোডগুলিতে ইউআইআইজেজকে পুনরায় আকার দিন। দ্রষ্টব্য: এই কোডটি কেবল উচ্চতার দ্বারা স্কেল করে তবে আপনি সহজেই ফাংশনটি প্রস্থ অনুসারে মাপতেও সামঞ্জস্য করতে পারেন।

let targetHeight = CGFloat(28)
let newImage = resizeImage(image: UIImage(named: "Image.png")!, targetHeight: targetHeight)
button.setImage(newImage, for: .normal)

fileprivate func resizeImage(image: UIImage, targetHeight: CGFloat) -> UIImage {
    // Get current image size
    let size = image.size

    // Compute scaled, new size
    let heightRatio = targetHeight / size.height
    let newSize = CGSize(width: size.width * heightRatio, height: size.height * heightRatio)
    let rect = CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height)

    // Create new image
    UIGraphicsBeginImageContextWithOptions(newSize, false, 0)
    image.draw(in: rect)
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // Return new image
    return newImage!
}

2

সুইফট> 5 এর জন্য আপডেট করা হয়েছে

আকার সেট করুন:

button.frame = CGRect(x: 0, y: 0, width: 44, height: 44)

মার্জিন সেট করুন:

button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

1

সুইফট 3-এর জন্য আপডেট করা হয়েছে

yourButtonName.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

-6

আমি মনে করি, আপনার চিত্রের আকারটিও বোতামের আকারের সমান এবং তারপরে আপনি এই বোতামটির পটভূমিতে চিত্রটি রাখেন:

[myLikesButton setBackgroundImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

আপনার কাছে মাস্টের মতো আকারের চিত্র এবং বোতাম রয়েছে i আমি আশা করি আপনি আমার বক্তব্যটি বুঝতে পেরেছেন।

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