web-dev-qa-db-ja.com

タイル張りの背景画像：UIImageViewで簡単にできますか？

タイリングされたフルスクリーンの背景画像があります。つまり、大きな画像を作成するには、水平方向と垂直方向に数回再生する必要があります。いホームページのブラウザのように;）

UIImageViewは私の友人ですか？

iphoneuiimageview
60
Thanks

あなたの質問を正しく理解していれば、colorWithPatternImage: on UIColorその後、UIViewに背景色を設定します。

UIImageViewを使用する必要がある場合も同じことができますが、画像ビューに配置する画像はタイル画像の前に描画されます。

103
Bill Dudney

アルファをパターン画像で動作させるには、次の設定があることを確認してください。

view.backgroundColor = [UIColor colorWithPatternImage:aImage];
view.layer.opaque = NO;
30
Kyle

何年もの間、Bill Dudneyのアプローチを使用していましたが、iOS 6にははるかに優れたソリューションがあります。そして...今日、古いバージョンのiOSでもこの作業を行う方法を見つけました。

  1. 新しいクラス「UIImage + Tileable」を作成します（以下のソースをコピー/貼り付け）
  2. これをタイル化可能な画像を含むUIImageViewが必要なクラスにインポートします。これはカテゴリなので、標準のApple呼び出しを使用して、すべてのUIImageをタイル可能なものに「アップグレード」します
  3. イメージの「タイル」バージョンが必要な場合は、「image = [image imageResizingModeTile]」を呼び出します

UIImage + Tileable.h

#import <UIKit/UIKit.h>

@interface UIImage (Tileable)

-(UIImage*) imageResizingModeTile;

@end

UIImage + Tileable.m

#import "UIImage+Tileable.h"

@implementation UIImage (Tileable)

-(UIImage*) imageResizingModeTile
{
    float iOSVersion = [[[UIDevice currentDevice] systemVersion] floatValue];

    if( iOSVersion >= 6.0f )
    {
        return [self resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeTile];
    }
    else
    {
        return [self resizableImageWithCapInsets:UIEdgeInsetsZero];
    }
}
@end
16
Adam

@Riveraのソリューションのバリエーションを使用します。

UIView拡張機能に次を追加します。

- (void)setColorPattern:(NSString *)imageName
{
    [self setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:imageName]]];
}

次に、storyboard/xibファイルで背景パターンを設定できます。 Image showing how to set the colorPattern in the storyboard/xib

8
Daniel T.

Interface Builderが本当に好きなので、このUIImageViewサブクラスを作成して、タイル張りの背景を適用します。

@interface PETiledImageView : UIImageView

@end

@implementation PETiledImageView

- (void)awakeFromNib
{
    [super awakeFromNib];

    UIImage * imageToTile = self.image;
    self.image = nil;
    UIColor * tiledColor = [UIColor colorWithPatternImage:imageToTile];
    self.backgroundColor = tiledColor;
}

@end

setImage:をオーバーライドしようとしましたが、IBはNibファイルをデコードするときに呼び出しません。

4
Rivera

WWDC 2018ビデオセッション219-画像とグラフィックスのベストプラクティス 、Appleエンジニアは、タイルの背景にパターンの色を使用しないことを明示的に推奨しています。

UIViewの背景色プロパティでパターン化された色を使用しないことをお勧めします。代わりに、UIImageViewを作成します。画像をその画像ビューに割り当てます。 UIImageViewの関数を使用して、タイルパラメーターを適切に設定します。

したがって、タイル状の背景を作成する最良かつ最も簡単な方法は次のようになります。

imageView.image = image.resizableImage(withCapInsets: .zero, resizingMode: .tile)

または、アセットカタログを使用する場合はさらに簡単です。パターンイメージアセットを選択し、属性インスペクターでSlicing（Horizo​​ntal/Verticalまたはboth）を有効にします。インセットをゼロに設定し、幅/高さを画像の寸法に設定します。

次に、この画像を画像ビューに割り当てます（Interface Builderも機能します）。UIImageViewのcontentModeを.scaleToFillに設定することを忘れないでください。

3
maxkonovalov

ダニエルTのソリューションの迅速なバージョン。 IBでkeyPath値を設定する必要があります。もちろん、オプションのUIImageをより注意深くアンラップすることもできます。

extension UIView {
    var colorPattern:String {
        get {
            return ""  // Not useful here.
        }
        set {
            self.backgroundColor = UIColor(patternImage: UIImage(named:newValue)!)
        }
    }
}
0
Andrew Duncan