iphone أين توجد - محاذاة النص والصورة على UIButton مع imageEdgeInsets و titleEdgeInsets
أوافق على الوثائق حول imageEdgeInsets و titleEdgeInsets يجب أن تكون أفضل ، لكني اكتشفت كيفية الحصول على الوضع الصحيح دون اللجوء إلى التجربة والخطأ.
الفكرة العامة هنا في هذا السؤال ، لكن هذا كان إذا كنت تريد أن يتمحور كل من النص والصورة. لا نريد أن يتم توسيط الصورة والنص بشكل فردي ، ونريد أن يتم توسيط الصورة والنص معًا ككيان واحد. هذا هو في الواقع ما يقوم به بالفعل UIButton لذا نحن ببساطة نحتاج إلى ضبط التباعد.
CGFloat spacing = 10; // the amount of spacing to appear between image and title
tabBtn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
tabBtn.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);
قمت أيضًا بتحويل هذا إلى فئة لـ UIButton لذا سيكون سهل الاستخدام:
UIButton + Position.h
@interface UIButton(ImageTitleCentering)
-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing;
@end
UIButton + Position.m
@implementation UIButton(ImageTitleCentering)
-(void) centerButtonAndImageWithSpacing:(CGFloat)spacing {
self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, spacing);
self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing, 0, 0);
}
@end
الآن كل ما علي فعله هو:
[button centerButtonAndImageWithSpacing:10];
وأحصل على ما أحتاجه في كل مرة. لا مزيد من العبث مع إدراجات الحافة يدويًا.
تحرير: تبادل الصور والنص
ردا علىJaval في التعليقات
باستخدام هذه الآلية نفسها ، يمكننا تبديل الصورة والنص. لإنجاز التبادل ، ما عليك سوى استخدام تباعد سلبي ولكن أيضًا تتضمن عرض النص والصورة. سيتطلب ذلك معرفة الإطارات وتخطيطها بالفعل.
[self.view layoutIfNeeded];
CGFloat flippedSpacing = -(desiredSpacing + button.currentImage.size.width + button.titleLabel.frame.size.width);
[button centerButtonAndImageWithSpacing:flippedSpacing];
بالطبع قد ترغب في تقديم طريقة لطيفة لهذا ، من المحتمل أن تضيف طريقة الفئة الثانية ، هذا هو ترك التمرين للقارئ.
أود وضع رمز على يسار سطرين من النص بحيث يكون هناك حوالي 2-3 بكسل من المساحة بين الصورة وبداية النص. عنصر التحكم نفسه هو مركز محاذاة أفقيًا (تم تعيينه من خلال واجهة منشئ)
سيشبه هذا الزر شيئًا كالتالي:
| |
|[Image] Add To |
| Favorites |
أحاول تكوين هذا مع contentEdgeInset و imageEdgeInsets و titleEdgeInsets دون جدوى. أتفهم أن القيمة السالبة توسع الحافة بينما تقللها القيمة الإيجابية لنقلها إلى المركز أقرب.
حاولت:
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, 0)];
لكن هذا لا يعرضها بشكل صحيح. لقد قمت بتعديل القيم لكن الانتقال من القول -5 إلى -10 على القيمة الداخلية اليسرى لا يبدو أنه يتحرك بطريقة متوقعة. -10 سوف يسحبون النص على طول الطريق إلى اليسار لذا كنت أتوقع -5 أن أسحره في منتصف الطريق من الجانب الأيسر لكنه لا.
ما هو المنطق وراء الدفاتر؟ لست على دراية بمواضع الصور والمصطلحات ذات الصلة.
لقد استخدمت سؤال SO كمرجع لكن شيئًا عن قيمي ليس صحيحًا. UIButton: كيفية توسيط صورة ونص باستخدام imageEdgeInsets و titleEdgeInsets؟
في واجهة الباني. حدد UIButton -> Attributes Inspector -> Edge = Title وعدّل حافة الأشكال
يمكنك تجنب الكثير من المتاعب عن طريق استخدام هذا -
myButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
myButton.contentVerticalAlignment = UIControlContentVerticalAlignment;
سيؤدي هذا إلى محاذاة جميع المحتويات تلقائيًا إلى اليسار (أو أينما تريد)
سويفت 3:
myButton.contentHorizontalAlignment = UIControlContentHorizontalAlignment.left;
myButton.contentVerticalAlignment = UIControlContentVerticalAlignment.center;
في Xcode 8.0 يمكنك ببساطة القيام بذلك عن طريق تغيير insets في حجم المفتش.
حدد UIButton -> Attributes Inspector -> go to size inspector وتعديل المحتوى والصورة والعنوان insets.
وإذا كنت ترغب في تغيير الصورة على الجانب الأيمن يمكنك ببساطة تغيير الخاصية الدلالية إلى Force Right-to-left في مفتش سمة.
سويفت 4.x
extension UIButton {
func centerTextAndImage(spacing: CGFloat) {
let insetAmount = spacing / 2
let writingDirection = UIApplication.shared.userInterfaceLayoutDirection
let factor: CGFloat = writingDirection == .leftToRight ? 1 : -1
self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -insetAmount*factor, bottom: 0, right: insetAmount*factor)
self.titleEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount*factor, bottom: 0, right: -insetAmount*factor)
self.contentEdgeInsets = UIEdgeInsets(top: 0, left: insetAmount, bottom: 0, right: insetAmount)
}
}
الاستعمال :
button.centerTextAndImage(spacing: 10.0)
طريقة أنيقة في Swift 3 وأفضل للفهم:
override func imageRect(forContentRect contentRect: CGRect) -> CGRect {
let leftMargin:CGFloat = 40
let imgWidth:CGFloat = 24
let imgHeight:CGFloat = 24
return CGRect(x: leftMargin, y: (contentRect.size.height-imgHeight) * 0.5, width: imgWidth, height: imgHeight)
}
override func titleRect(forContentRect contentRect: CGRect) -> CGRect {
let leftMargin:CGFloat = 80
let rightMargin:CGFloat = 80
return CGRect(x: leftMargin, y: 0, width: contentRect.size.width-leftMargin-rightMargin, height: contentRect.size.height)
}
override func backgroundRect(forBounds bounds: CGRect) -> CGRect {
let leftMargin:CGFloat = 10
let rightMargin:CGFloat = 10
let topMargin:CGFloat = 10
let bottomMargin:CGFloat = 10
return CGRect(x: leftMargin, y: topMargin, width: bounds.size.width-leftMargin-rightMargin, height: bounds.size.height-topMargin-bottomMargin)
}
override func contentRect(forBounds bounds: CGRect) -> CGRect {
let leftMargin:CGFloat = 5
let rightMargin:CGFloat = 5
let topMargin:CGFloat = 5
let bottomMargin:CGFloat = 5
return CGRect(x: leftMargin, y: topMargin, width: bounds.size.width-leftMargin-rightMargin, height: bounds.size.height-topMargin-bottomMargin)
}