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



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

##作成したもの
ImageView(アイコン画像)を横スワイプして切り替え
タップすると選択済みマークをつける（枠線グレー）
![instaStoryGIF.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308698/69e7c42e-bb9c-9a57-b545-21d310c19015.gif)

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

##作ってみた
<img width="552" alt="StoryBoard.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308698/68616346-afcc-e722-295c-43d9c054c06f.png">

スクロールさせたい範囲に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を設定することにより、
初回の位置を決めることができるのでこちらも色々使えそうです。