指定したURLから取得した複数の画像をUIScrollViewに表示する方法。

AutoLayoutを使わず、横３列で画像を表示する。

 

まず、UIScrollViewを作成

//UIScrollViewを作成
let scrView = UIScrollView()

//UIScrollViewの1ページ分のサイズ + 表示位置（高さは70%に指定）
scrView.frame = CGRectMake(0, 0, 240, CGFloat(self.view.bounds.height) * 0.7)

// 画面中央に設定（親Viewとスクロールビューの中心座標を合わせる）
scrView.center.x = self.view.center.x
scrView.center.y = self.view.center.y

// Viewに追加
self.view.addSubview(scrView)

 

メインとなる指定したURLから取得した画像をスクロールビューに追加する処理を順を追って説明する。

以前の記事内容と重なる部分もあるので、そちらも参考に。

↓以前の記事

【SWIFT】バックグラウンド処理でWEBから画像取得しVIEWにセット

 

1.Webから画像取得し、配列に格納

// Webから取得した画像を格納する配列
var webImageArr: [UIImage] = []

// NSURLを生成
let url = NSURL(string: image_url);

// Webから画像取得し配列に追加
do {
	var imgData = try NSData(contentsOfURL:url!,options: NSDataReadingOptions.DataReadingMappedIfSafe)
	self.webImageArr.append(UIImage(data:imgData)!);

} catch {
	print("Error: can't create image.")
}

 

2.配列に格納した複数の画像をすべてスクロールビューに追加

今回は写真ギャラリーのように横３列の並びで表示する。

まず全体のコードが以下。

// 列,行をカウントする変数
var colCnt = 0
var rowCnt = 0
// アイコンのx,y座標指定用変数
var xpoint:CGFloat = 0
var ypoint:CGFloat = 0

// 取得した画像分ループしViewに配置
for webImage in webImageArr {
    
    xpoint = CGFloat(20 + colCnt * 70)
    ypoint = CGFloat(rowCnt * 70)
    
    // UIImageView インスタンスの生成
    let iconView = UIImageView(image:webImage)
    
    // アイコン画像のサイズと位置を指定
    iconView.frame = CGRectMake(xpoint, ypoint, 60, 60)
    
    // Viewに追加
    scrView.addSubview(iconView)
    
　　　　　　　　// ３列目の処理
    if (colCnt == 2) {
        // 列カウンタをリセット
        colCnt = 0
        // 行カウンタをプラス
        rowCnt++
        continue
    }
    
    // 1,2列目を処理した後にカウンタをプラス
    colCnt++
}

// 行の数でスクロールの高さを変更
scrView.contentSize = CGSizeMake(240, 80 * CGFloat(rowCnt))

 

変数のxpoint、ypointでスクロールビュー内の画像の位置を指定している。

xpointには20のマージンを設定。

xpoint = CGFloat(20 + colCnt * 70)
ypoint = CGFloat(rowCnt * 70)

 

それぞれ列と行カウンタの値が増加すると指定する位置もズレてうまく3列で表示するようになっている。

座標を指定し、スクロールビューに追加。

// アイコンのサイズと位置を指定
iconView.frame = CGRectMake(xpoint, ypoint, 60, 60)
 
// Viewに追加
scrView.addSubview(iconView)

 

３列目を処理した時のみ、列カウンタをリセットし行カウンタをプラス。

if (colCnt == 2) {
　　　　// 右の列を処理した後に列カウンタをリセット
　　　　colCnt = 0
        
　　　　// 行カウンタをプラス
　　　　rowCnt++
　　　　continue
}

 

最後に画像を追加した分の高さをスクロールビューに指定する。

これがないとすべての画像がスクロールビュー内に表示されない。

// 行の数でスクロールの高さを変更
scrView.contentSize = CGSizeMake(240, 80 * CGFloat(rowCnt))