アプリにタグシステムを実装しています。これを実現するには、タグの背景画像とその画像をオーバーレイするテキストが必要です。問題は、テキストに「合わせる」ために画像をどのように引き伸ばすことができるかということです。「Maths」は正常に機能しますが、「Economics」のような単語は背景画像と重なるため、機能しません。
これは私のタグがどのように見えるかです:
アプリにタグシステムを実装しています。これを実現するには、タグの背景画像とその画像をオーバーレイするテキストが必要です。問題は、テキストに「合わせる」ために画像をどのように引き伸ばすことができるかということです。「Maths」は正常に機能しますが、「Economics」のような単語は背景画像と重なるため、機能しません。
これは私のタグがどのように見えるかです:
伸縮可能な画像を使用するのが一番だと思います。これらは、iOSが伸縮できる部分を設定した単なる画像です。
これらの画像は簡単に作成できます。
UIImage *imageTemp = [UIImage imageNamed:@"ButtonBackground.png"];
// For iOS 4.3 and lower
UIImage *stretchableImage = [imageTemp stretchableImageWithLeftCapWidth:20 topCapHeight:10];
// if you are targetting iOS 5 and higher
UIImage *stretchableImage = [imageTemp resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 20, 20)];
20
とは単なる例であり、10
画像によって異なる場合があります。これらUIButton
の場合は、伸縮可能な画像をボタンの背景として設定するだけで、ボタンとともに正しく拡大します。コードからテキストを設定する場合は、UILabel
を使用しsizeWithFont:constrainedToSize:
て文字列のwithを計算できます。次に、画像の正しいサイズを設定します。
文字列の幅(この場合はUILabelの場合があります)は次のようになります。
CGSize expectedLabelSize = [yourString sizeWithFont:yourLabel.font
constrainedToSize:maximumLabelSize
lineBreakMode:yourLabel.lineBreakMode];
テキストの長さがわかれば、それを使用して背景を伸縮可能な画像として設定できます。
UIImage *strechableImage = [[UIImage imageNamed:@"tagImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 3, 3, 25)]
挿入図(キャップ)は(上、左、下、上)であり、拡大縮小/拡大されていない領域(丸みを帯びた角など)を定義します。
Appleのドキュメントから
画像の拡大縮小またはサイズ変更中、キャップで覆われた領域は拡大縮小またはサイズ変更されません。代わりに、各方向のキャップで覆われていないピクセル領域は、画像のサイズを変更するために、左から右、上から下に並べて表示されます。
最初にテキストの予想サイズを計算してから、それに応じて画像にフレームを指定する必要があります。必要に応じて、キャップ幅とキャップ高さのある画像を使用できます。これがコードスニペットです。
CGSize maximumLabelSize = CGSizeMake(600,52); // maximum possible size
CGSize expectedLabelSize = [brandName sizeWithFont:[UIFont fontWithName: @"Helvetica-Bold" size:20]
constrainedToSize:maximumLabelSize
lineBreakMode:UILineBreakModeTailTruncation];
UIImage *centerStretchedImage =[[UIImage imageNamed:@"yourImage.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0];
CGRect frame = CGRectMake(x, y, expectedLabelSize.width+20,52);
UIImageView *dynamicImage = [[UIImageView alloc] initWithFrame:frame];
dynamciImage.image = centerStretchedImage;