2012-11-19 77 views
3

我在UIToolBar內使用UISegmentedControl作爲按鈕。我不能使用正常的UIButtonBarItem,因爲我需要設置tintColor並支持iOS 4.3。 所以我用下面的代碼:帶圖像和標題的UISegmentedControl

UISegmentedControl* searchButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"", nil]]; 
[searchButton setImage:[UIImage imageNamed:@"search_picto"] forSegmentAtIndex:0]; 
searchButton.momentary = YES; 
searchButton.segmentedControlStyle = UISegmentedControlStyleBar; 
searchButton.tintColor = [UIColor colorWithRed:0.27 green:0.60 blue:0.20 alpha:1.00]; 
[searchButton addTarget:self action:@selector(actionSearch:) forControlEvents:UIControlEventValueChanged]; 

這個偉大的工程,但有一個方法可以讓我有一個文本/標題,以我的形象下? 方法setTitle:刪除圖像。必須有其他方式...

感謝您的幫助。

-

編輯: 我決定把文字直接添加到UIImageView這樣的:

NSString* label = @"My Label"; 
UIImage* image = [self addText:label toImage:[UIImage imageNamed:@"icon"]]; 
[_segmentedControl insertSegmentWithImage:image atIndex:0 animated:NO]; 
[_segmentedControl setWidth:image.size.width + 10]; // add some margin on the right 



- (UIImage *)addText:(NSString *)text toImage:(UIImage *)image { 
    UIFont* font = [UIFont boldSystemFontOfSize: 12]; 
    CGSize expectedSize = [text sizeWithFont:font]; 

    [self retinaAwareUIGraphicsBeginImageContext:CGSizeMake(image.size.width + expectedSize.width + 10, image.size.height)]; 
    [image drawAtPoint: CGPointZero]; 
    [[UIColor whiteColor] set]; 
    [text drawAtPoint: CGPointMake(30, 2) withFont:font]; 
    image = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    return image; 
} 

- (void)retinaAwareUIGraphicsBeginImageContext:(CGSize) size { 
    CGFloat scale = -1.0; 
    if (scale<0.0) { 
     UIScreen *screen = [UIScreen mainScreen]; 
     if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 4.0) { 
      scale = [screen scale]; 
     } 
     else { 
      scale = 0.0; 
     } 
    } 
    if (scale>0.0) { 
     UIGraphicsBeginImageContextWithOptions(size, NO, scale); 
    } 
    else { 
     UIGraphicsBeginImageContext(size); 
    } 
} 

回答

-3

試試這個:

UISegmentedControl* searchButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"", nil]]; 
[searchButton insertSegmentWithImage:[UIImage imageNamed:@"up_button.png"] atIndex:0 animated:YES]; 
[searchButton insertSegmentWithImage:[UIImage imageNamed:@"down_button.png"] atIndex:1 animated:YES]; 
searchButton.segmentedControlStyle = UISegmentedControlStyleBar; 
searchButton.tintColor = [UIColor colorWithRed:0.27 green:0.60 blue:0.20 alpha:1.00]; 
[searchButton setMomentary:YES]; 
+3

而你在哪裏設置標題?我不認爲你理解我的問題... –

+1

我不認爲這是可能的。該文檔說明如下: 分段控件可以顯示標題(NSString對象)或圖像(UIImage對象)。 如果你想設置標題: [searchButton insertSegmentWithTitle:@「Up」atIndex:0 animated:NO]; [searchButton insertSegmentWithTitle:@「Down」atIndex:1 animated:NO]; –

20

你可以這樣做:

爲UIImage添加類別:

中的UIImage + UISegmentIconAndText.h

@interface UIImage (UISegmentIconAndText) 

+ (id) imageFromImage:(UIImage*)image string:(NSString*)string color:(UIColor*)color; 
+ (id) imageFromImage:(UIImage*)image string:(NSString*)string color:(UIColor*)color position:(NSString*)position; 

@end 

的UIImage + UISegmentIconAndText.m

#import "UIImage+UISegmentIconAndText.h" 

@implementation UIImage (UISegmentIconAndText) 
+ (id) imageFromImage:(UIImage*)image string:(NSString*)string color:(UIColor*)color 
{ 
    UIFont *font = [UIFont systemFontOfSize:16.0]; 
    CGSize expectedTextSize = [string sizeWithAttributes:@{NSFontAttributeName: font}]; 
    int width = expectedTextSize.width + image.size.width + 5; 
    int height = MAX(expectedTextSize.height, image.size.width); 
    CGSize size = CGSizeMake((float)width, (float)height); 
    UIGraphicsBeginImageContextWithOptions(size, NO, 0); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetFillColorWithColor(context, color.CGColor); 
    int fontTopPosition = (height - expectedTextSize.height)/2; 
    CGPoint textPoint = CGPointMake(image.size.width + 5, fontTopPosition); 

    [string drawAtPoint:textPoint withAttributes:@{NSFontAttributeName: font}]; 
    // Images upside down so flip them 
    CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, size.height); 
    CGContextConcatCTM(context, flipVertical); 
    CGContextDrawImage(context, (CGRect){ {0, (height - image.size.height)/2}, {image.size.width, image.size.height} }, [image CGImage]); 
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return newImage; 
} 
@end 

在代碼中實現細分:

UIImage *imageWithText = [UIImage imageFromImage:[UIImage imageNamed:@"images/jobaids_tab_icon"] string:@"Hello", nil) color:[UIColor whiteColor]]; 

[_segmentedController setImage:imageWithText forSegmentAtIndex:0]; 
+0

完美答案:)謝謝 – Mak13

+0

效果很好,但字體大小已關閉。文字大小似乎隨着字符串大小的增加而變小 – Rick

+0

好的一段代碼!完美滿足我的需求 – Thorax

1

對於斯威夫特。

segFont是嵌入文本的字體。

imageAlignment是出現在文本左側或右側的圖像對齊方式。

設置imageAlignment到爲左對齊(圖像將出現在文本的左側)和爲右對齊(圖像將出現在文本的右側)

class func textEmbededImage(image: UIImage, string: String, color:UIColor, imageAlignment: Int = 0, segFont: UIFont? = nil) -> UIImage { 

let font = segFont ?? UIFont.systemFontOfSize(16.0) 

let expectedTextSize: CGSize = (string as NSString).sizeWithAttributes([NSFontAttributeName: font]) 

let width: CGFloat = expectedTextSize.width + image.size.width + 5.0 

let height: CGFloat = max(expectedTextSize.height, image.size.width) 

let size: CGSize = CGSizeMake(width, height) 

UIGraphicsBeginImageContextWithOptions(size, false, 0) 

let context: CGContextRef = UIGraphicsGetCurrentContext()! 

CGContextSetFillColorWithColor(context, color.CGColor) 

let fontTopPosition: CGFloat = (height - expectedTextSize.height)/2.0 

let textOrigin: CGFloat = (imageAlignment == 0) ? image.size.width + 5 : 0 
let textPoint: CGPoint = CGPointMake(textOrigin, fontTopPosition) 


string.drawAtPoint(textPoint, withAttributes: [NSFontAttributeName: font]) 
let flipVertical: CGAffineTransform = CGAffineTransformMake(1, 0, 0, -1, 0, size.height) 
CGContextConcatCTM(context, flipVertical) 

let alignment: CGFloat = (imageAlignment == 0) ? 0.0 : expectedTextSize.width + 5.0 
CGContextDrawImage(context, CGRectMake(alignment, ((height - image.size.height)/2.0), image.size.width, image.size.height), image.CGImage) 
let newImage = UIGraphicsGetImageFromCurrentImageContext() 
UIGraphicsEndImageContext() 

return newImage 
} 
0

斯威夫特3

extension UIImage{ 


class func textEmbededImage(image: UIImage, string: String, color:UIColor, imageAlignment: Int = 0, segFont: UIFont? = nil) -> UIImage { 
    let font = segFont ?? UIFont.systemFont(ofSize: 16.0) 
    let expectedTextSize: CGSize = (string as NSString).size(attributes: [NSFontAttributeName: font]) 
    let width: CGFloat = expectedTextSize.width + image.size.width + 5.0 
    let height: CGFloat = max(expectedTextSize.height, image.size.width) 
    let size: CGSize = CGSize(width: width, height: height) 
    UIGraphicsBeginImageContextWithOptions(size, false, 0) 
    let context: CGContext = UIGraphicsGetCurrentContext()! 
    context.setFillColor(color.cgColor) 
    let fontTopPosition: CGFloat = (height - expectedTextSize.height)/2.0 
    let textOrigin: CGFloat = (imageAlignment == 0) ? image.size.width + 5 : 0 
    let textPoint: CGPoint = CGPoint.init(x: textOrigin, y: fontTopPosition)   
    string.draw(at: textPoint, withAttributes: [NSFontAttributeName: font]) 
    let flipVertical: CGAffineTransform = CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: size.height) 
    context.concatenate(flipVertical) 
    let alignment: CGFloat = (imageAlignment == 0) ? 0.0 : expectedTextSize.width + 5.0 
    context.draw(image.cgImage!, in: CGRect.init(x: alignment, y: ((height - image.size.height)/2.0), width: image.size.width, height: image.size.height)) 
    let newImage = UIGraphicsGetImageFromCurrentImageContext() 
    UIGraphicsEndImageContext() 
    return newImage! 
} 

}