web-dev-qa-db-ja.com

背景画像を画面サイズに合わせて迅速に拡大するにはどうすればよいですか？

Swiftパターン画像を使用して、背景のUIView画像を作成しようとしています。画像を画面全体に表示したいという事実を除いて、私が持っているコードはうまく機能します。 self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundImage")!)のようになります

背景を画面全体を占める画像にする方法を知っている人はいますか？

iosswiftxcodebackground-image
27
GuiGui23

ご了承ください：

古いアカウントからこの回答を投稿しました（これは非推奨であり、これ以上アクセスできません）、これは私の 改善された回答 。

各ビューでIBOutletを作成する代わりに、プログラムで実行できます。 UIViewを作成するだけです 拡張子 （ファイル->新規->ファイル-> Swiftファイル->好きな名前を付けてください）そして追加：

extension UIView {
func addBackground() {
    // screen width and height:
    let width = UIScreen.mainScreen().bounds.size.width
    let height = UIScreen.mainScreen().bounds.size.height

    let imageViewBackground = UIImageView(frame: CGRectMake(0, 0, width, height))
    imageViewBackground.image = UIImage(named: "YOUR IMAGE NAME GOES HERE")

    // you can change the content mode:
    imageViewBackground.contentMode = UIViewContentMode.ScaleAspectFill

    self.addSubview(imageViewBackground)
    self.sendSubviewToBack(imageViewBackground)
}}

これで、このメソッドをビューで使用できるようになりました。たとえば：

override func viewDidLoad() {
    super.viewDidLoad()

    self.view.addBackground()
}
35
Ahmad Fayyas

UIImageViewを中央に配置し、すべてのエッジがエッジにスナップするように追加するだけです。そのままにして、下に示すように右下隅をクリックして、先に進み、上、下、左、右のエッジに4つの制約を追加します。

enter image description here

次に、画像ビューを選択し、IBインスペクターを使用して、次のように画像の好みを選択します。

enter image description here

26
Leo Dabus

これは私の 前のもの 。の更新された答えです

前の回答と同じアプローチとして、次のようにUIViewの拡張機能を作成し、それにaddBackground()メソッドを追加できます。

注意：新しい.Swiftファイルに追加する場合は、必ず_import UIKit_を追加してください

_extension UIView {
    func addBackground(imageName: String = "YOUR DEFAULT IMAGE NAME", contentMode: UIView.ContentMode = .scaleToFill) {
        // setup the UIImageView
        let backgroundImageView = UIImageView(frame: UIScreen.main.bounds)
        backgroundImageView.image = UIImage(named: imageName)
        backgroundImageView.contentMode = contentMode
        backgroundImageView.translatesAutoresizingMaskIntoConstraints = false

        addSubview(backgroundImageView)
        sendSubviewToBack(backgroundImageView)

        // adding NSLayoutConstraints
        let leadingConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0.0)
        let trailingConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0.0)
        let topConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
        let bottomConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 0.0)

        NSLayoutConstraint.activate([leadingConstraint, trailingConstraint, topConstraint, bottomConstraint])
    }
}
_

この回答の更新は次のとおりです。

  • Swift 4コード????
  • -programatically-NSLayoutConstraintsの追加：これは、前の回答で言及された内容を適用する場合、現在のデバイスの向きに対しては正常に機能するためですが、notアプリケーションは、ポートレート/ランドスケープモードの両方をサポートします。デバイスの向きが変更された場合、背景のimageViewサイズは同じ（同じサイズ）になり、デバイス画面の新しい幅/高さを調整しないため、制約を追加することでこの問題を解決できます。
  • デフォルトのパラメーターを追加する：柔軟性を高めるために、場合によってはデフォルトの画像や背景のコンテキストモードを変更することもできます。

使用法：

viewDidLoad()で呼び出したいと仮定すると：

_override func viewDidLoad() {
    //...

    // you can call 4 versions of addBackground() method

    // 1- this will add it with the default imageName and default contextMode
    view.addBackground()

    // 2- this will add it with the edited imageName and default contextMode
    view.addBackground(imageName: "NEW IMAGE NAME")

    // 3- this will add it with the default imageName and edited contextMode
    view.addBackground(contentMode: .scaleAspectFit)

    // 4- this will add it with the default imageName and edited contextMode
    view.addBackground(imageName: "NEW IMAGE NAME", contextMode: .scaleAspectFit)
}
_
13
Ahmad F

スケーリングのオプションは次のとおりです！

.contentModeプロパティの場合：

ScaleToFillこれは、画像ビュー内の画像を拡大縮小して、画像ビューの境界全体を埋めます。

ScaleAspectFitこれにより、画像ビュー内の画像のアスペクト比が適切になり、画像ビューの境界内に収まるようになります。

ScaleAspectFillこれにより、画像ビュー内の画像のアスペクト比が適切になり、画像ビューの境界全体が埋められます。この値が適切に機能するには、imageviewのclipsToBoundsプロパティをtrueに設定していることを確認してください。

class SecondViewController : UIViewController {

    let backgroundImage = UIImage(named: "centralPark")
    var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        self.thirdChoiceField.delegate = self
        self.datePicker.minimumDate = NSDate()
        imageView = UIImageView(frame: view.bounds)
        imageView.contentMode = .ScaleAspectFill
        imageView.clipsToBounds = true
        imageView.image = backgroundImage
        imageView.center = view.center
        view.addSubview(imageView)
        self.view.sendSubviewToBack(imageView)
2
MacInnis

Swift 3.のAhmad Fayyasソリューション

func addBackground() {
    let width = UIScreen.main.bounds.size.width
    let height = UIScreen.main.bounds.size.height

    let imageViewBackground = UIImageView(frame: CGRect(x:0, y:0, width: width, height: height))
    imageViewBackground.image = UIImage(named: "YOUR IMAGE NAME GOES HERE")

    // you can change the content mode:
    imageViewBackground.contentMode = UIViewContentMode.scaleAspectFill

    self.view.addSubview(imageViewBackground)
    self.view.sendSubview(toBack: imageViewBackground)
}
1
ochhii

これは PureLayout を使用します。さらに数行のAutoLayoutを使用できます。

UIImageView* imgView = UIImageView(image: myUIImage)
imgView.setTranslatesAutoresizingMaskIntoConstraints(false)
self.view.addSubview(imgView)
self.view.addConstraints(imgView.autoPinEdgesToSuperviewEdgesWithInsets(UIEdgeInsetsMake(0,0,0,0))
1
Stephen Johnson

イメージを「autoLayout」にするために制約を使用しました。セグエのビューが読み込まれている間に、アクティビティインジケーター（完全な背景画像）を表示するビューを作成しました。コードは次のとおりです。

var containerView: UIView = UIView()
var actionIndicator: UIActivityIndicatorView = UIActivityIndicatorView()

private func showActivityIndicator() {
    ///first I set the containerView and the background image
    containerView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(containerView)
    adjustConstFullSize(containerView, parentView: self.view)
    let backImage = UIImageView(image: UIImage(named: "AppBackImage"))
    backImage.contentMode = UIViewContentMode.ScaleAspectFill
    backImage.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(backImage)
    adjustConstFullSize(backImage, parentView: containerView)

    ////setting the spinner (activity indicator)
    actionIndicator.frame = CGRectMake(0.0, 0.0, 40.0, 40.0)
    actionIndicator.center = CGPointMake(containerView.bounds.size.width / 2, containerView.bounds.size.height / 2)
    actionIndicator.hidesWhenStopped = true
    actionIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge
    containerView.insertSubview(actionIndicator, aboveSubview: backImage)

    ///throw the container to the main view
    view.addSubview(containerView)
    actionIndicator.startAnimating()
}

これは、「adjustConstFullSize」関数のコードです。

func adjustConstFullSize(adjustedView: UIView!, parentView: UIView!) {
    let topConstraint = NSLayoutConstraint(item: adjustedView,
        attribute: .Top,
        relatedBy: .Equal,
        toItem: parentView,
        attribute: .Top,
        multiplier: 1.0,
        constant: 0.0)

    let leftConstraint = NSLayoutConstraint(item: adjustedView,
        attribute: .Leading,
        relatedBy: .Equal,
        toItem: parentView,
        attribute: .Leading,
        multiplier: 1.0,
        constant: 0.0)

    let rightConstraint = NSLayoutConstraint(item: adjustedView,
        attribute: .Trailing,
        relatedBy: .Equal,
        toItem: parentView,
        attribute: .Trailing,
        multiplier: 1.0,
        constant: 0.0)


    let bottomConstraint = NSLayoutConstraint(item: adjustedView,
        attribute: .Bottom,
        relatedBy: .Equal,
        toItem: parentView,
        attribute: .Bottom,
        multiplier: 1.0,
        constant: 0.0)

    parentView.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
}

上記の関数では、containerView制約をメインビュー制約に「結び付け」、ビューを「フルサイズ」にしました。 UIImageViewでも同じことを行い、contentModeをAspectFillに設定しました。これは非常に重要です。画像をストレッチせずにコンテンツで埋めたいからです。

遅延読み込みの後にビューを削除するには、次のコードを使用します。

private func hideActivityIndicator() {
    actionIndicator.stopAnimating()
    containerView.removeFromSuperview()
}
1
Pablo

`

CGRect screenRect = [[UIScreen mainScreen] bounds];

CGFloat screenWidth = screenRect.size.width;

CGFloat screenHeight = screenRect.size.height;

_imgBackGround.frame = CGRectMake(0, 0, screenWidth, screenHeight);`
0
Robert William Clancy

このために、親ビューの上下/左右に固定されるUIImageViewを作成する必要があると思います。これにより、UIImageViewは常にディスプレイのサイズに一致します。画像ビューのコンテンツモードをAspectFitに設定してください。

var newImgThumb : UIImageView
newImgThumb = UIImageView(view.bounds)
newImgThumb.contentMode = .ScaleAspectFit
view.addSubview(newImgThumb)

//Don't forget this line
newImgThumb.setTranslatesAutoresizingMaskIntoConstraints(false)

NSDictionary *views =NSDictionaryOfVariableBindings(newImgThumb);


// imageview fills the width of its superview
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[newImgThumb]|" options:0 metrics:metrics views:views]];
// imageview fills the height of its superview
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[newImgThumb]|" options:0 metrics:metrics views:views]];
0
wottle