【Swift】UIScrollViewでInstagramのストーリーっぽいUIを実装

はじめに

ScrollViewとImageViewを触っていたらどことなくそれに見えてきたのでつい作り始めてしまいました。
簡単に出来て色々と工夫したら楽しそうです。
これであなたも今日からインスタグラマー。(?)

作成したもの

ImageView(アイコン画像)を横スワイプして切り替え
タップすると選択済みマークをつける（枠線グレー）

UIScrollViewとは

画面をスクロールしたい際に用いられる。
画面全体・部分・無限スクロールなをはじめ、
キーボード表示時に用いることもある。

作ってみた

スクロールさせたい範囲にViewを配置し、その上にScrollViewを配置

ViewController.swift

import UIKit

struct Icon {
    var image: UIImage
    var name: String
}

class ViewController: UIViewController {
    
    @IBOutlet weak var iconScrollView: UIScrollView!
    
    // 仮データ格納
    var icons: [Icon] = [Icon(image: UIImage(named: "woman1")!, name: "test0101"),
                         Icon(image: UIImage(named: "woman2")!, name: "toutoi123"),
                         Icon(image: UIImage(named: "man1")!, name: "mazimanzi"),
                         Icon(image: UIImage(named: "man2")!, name: "ariyoriari"),
                         Icon(image: UIImage(named: "woman3")!, name: "nasiyoriari"),
                         Icon(image: UIImage(named: "woman1")!, name: "wakarimi"),
                         Icon(image: UIImage(named: "man1")!, name: "azamaru"),
                         Icon(image: UIImage(named: "woman2")!, name: "agemizawa")]
    

    override func viewDidLoad() {
      
        super.viewDidLoad()
        
        iconScrollView.indicatorStyle = .white

        // iconImageの横幅　あとで丸くするため正方形になるように設定をする
        let iconImageWidth: CGFloat = self.iconScrollView.frame.height * 0.4
        
        // iconImageの縦幅
        let iconImageHeight: CGFloat = self.iconScrollView.frame.height * 0.4
        
        // iconImageのx座標．少しずつ右にずらす
        var iconImageX: CGFloat = 8
        
        for icon in icons {
            let iconImageView = UIImageView()
            iconImageView.image = icon.image
            iconImageView.frame = CGRect(x: iconImageX,
                                         y: self.iconScrollView.frame.height * 0.5 - iconImageHeight * 0.5 ,
                                         width: iconImageWidth,
                                         height: iconImageHeight)
            
            // 画像を丸くする
            iconImageView.contentMode = .scaleAspectFit
            iconImageView.layer.cornerRadius = iconImageView.frame.size.width * 0.5
            iconImageView.clipsToBounds = true
            iconImageView.backgroundColor = UIColor.cyan
            iconImageView.layer.borderWidth = 3
            iconImageView.layer.borderColor = UIColor.red.cgColor
            
            // 画像タップ処理を許可し、追加
            iconImageView.isUserInteractionEnabled = true
            iconImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(tapImage)))
            
            // scrollViewにadd
            self.iconScrollView.addSubview(iconImageView)
            
            let name = UILabel()
            name.font = UIFont.systemFont(ofSize: 14)
            name.frame = CGRect(x: iconImageX, y: iconImageView.frame.maxY + 8, width:iconImageWidth + 8, height: 16)
            name.text = icon.name
            
            self.iconScrollView.addSubview(name)
            
            // 次のiconImageのx座標を用意する
            iconImageX += iconImageWidth + 16
        }
        
        // scrollViewのcontentSizeを全体のサイズに設定 サイズを決めなければscrollViewが機能しない
        // 最終的なiconImageX = 全体の横幅  
        self.iconScrollView.contentSize = CGSize(width: iconImageX, height: iconImageHeight)
    }
    
    @objc func tapImage(sender: UITapGestureRecognizer) {
        if let tapImage = sender.view {
            tapImage.layer.borderColor = UIColor.lightGray.cgColor
        }
    }
}

おわり

今回は実装しませんでしたが、タップしたら画面遷移をしたり、タップしたものはいなくなったりと、色々応用できます。

UIScrollViewのsetContentOffsetを設定することにより、
初回の位置を決めることができるのでこちらも色々使えそうです。