【iOS】レシート風 CardViewの作成（WIP）

はじめに

レシート風のCardViewを一緒に作ってみよう！

実装

大まかな流れは，

1. Main.storyboardにレシートの土台となるViewをおく
2. レシートViewの細かい設定
3. 他の部品を置いてよりレシートっぽく
4. labelデータの反映（後日記載）
   となっています．また，今回の記事は以下の動画を参考にしております．
   参考：Card View in iOS (Xcode8 , Swift3)

1. storyboardの準備

まずは，Main.storyboardにViewをおきます．

ここで，AutoLayoutの設定もしておきましょう．画面全体に表示したいので，今回は上下左右全て10pxだけ余白をとります．ぽちぽち．

AutoLayoutについて詳しく知りたい人はこちらをオススメします．
→ 怖くない！AutoLayout 〜多画面対応 with Storyboard〜

2.レシートViewの設定

続いて，Viewに影をつけていく設定をしていきましょう！
UIViewファイルを追加しましょう．ここではReceiptViewと名付けます．

作れたら，中身を書いていきましょう．
レシートの影の色や大きさ，不透明度，またViewの角を丸くしたい時もここに書いていきます．

ReceiptView.swift

import UIKit

@IBDesignable class ReceiptView: UIView {

    //影の設定
    @IBInspectable var shadowOffSetWidth : CGFloat = 0  //影の横幅
    @IBInspectable var shadowOffSetHeight : CGFloat = 5  //影の縦幅
    @IBInspectable var shadowColor : UIColor = UIColor.black  //影の色
    @IBInspectable var shadowOpacity : CGFloat = 0.5  //影の不透明度
    
    override func layoutSubviews() {
        layer.shadowColor = shadowColor.cgColor
        layer.shadowOffset = CGSize(width: shadowOffSetWidth, height: shadowOffSetHeight)
        layer.shadowOpacity = Float(shadowOpacity)
    }
        
}

@IBDesignable と @IBInspectableは簡単に言うと，デフォルトでいじれない設定をいじれるようにしたり，storyboard上でリアルタイムで見た目を変えてくれるための呪文みたいなもの．
詳しくはこちらの記事を参考に！
参考：【決定版】IBDesignable, IBInspectable

さぁ，ここまできたらMain.storyboardで作成したUIViewファイルを紐付けましょう！

1で置いたViewを選択し，Classに先ほど作成したUIViewファイル名（今回はReceiptView）を手打ち．自動的に読み込みがスタートし，影がついたら成功！何も動かない場合は⌘+Bでビルドしてみましょう．
ここまできたら，一度Runしてみましょう！以下のようになりましたか？

背景を暗くしても◎

ViewController.swift

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = UIColor.gray
    }

3.他の部品を置いてよりレシートっぽく

タイトルや日付，セットリストなど自分の好きなデザインに必要なlabelや画像を配置していきましょう．
ここからはあなた次第！