ユーザーアイコン画像を丸くする!!(Storyboard)

# はじめに
多くのSNSで採用されているユーザーアイコンは任意の画像の対して、丸く切り取られて表示されています。
Swiftでもコードを書いて表現する方法はあるのですが、今回はStoryboradで簡単に画像を丸くする方法を紹介したいと思います。

### 1.任意の画像を用意する。
今回はこの画像を使います。
![IMG_6083.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2428088/27ec18d9-f413-0e1d-9d01-7ebff536a07f.png)

### 2.Assetsに画像を取り込む
![スクリーンショット_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2428088/f06d6158-69fb-37fa-2677-37601bdcb555.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2428088/91099eaf-57a5-8e52-d0d9-4c1e3e3e2f87.png)
### 3.カスタムセルの準備

今回はXIBファイルでカスタムセルを作成しています。
参考URL https://qiita.com/masasumi0327/items/f01e764a2f4a29a8afa5
尚、ユーザーアイコンは大きくしています。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2428088/7d4b9160-24a2-85a1-fa74-cf4390910d2e.png)


3.赤枠内の左下＋ボタンをクリックし、
clipsToBounds
layer.cornerRadius
を作成します。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2428088/c1c3eb52-38cf-1822-fe8b-700912013a3a.png)

clipsToBoundsは指定してあるUIImageViewの領域内で描画する場合はtrue,領域外まで描画する場合はfalseを選択します。
今回はtrueにしたいので、Valueにチェックを入れています。

layer.cornerRadiusは数値を上げるほど丸みを増していきます。

### 4.コードを書いてビルドする!!
![スクリーンショット 2022-03-11 6.30.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2428088/02839494-2eb8-57c8-c4c0-f5153febe06b.png)
無事出力できましたね!!

コード全文載せておきます。
```swift:ViewController
import UIKit

class ViewController: UIViewController {
    
    var itemArray = ["cell 1","cell 2","cell 3"]
    
    @IBOutlet weak var tableView: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.register(UINib(nibName: "TableViewCell", bundle: nil), forCellReuseIdentifier: "customCell")
        tableView.delegate = self
        tableView.dataSource = self
    }
}

extension ViewController: UITableViewDelegate,UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        itemArray.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "customCell",for: indexPath) as! TableViewCell
        //画像の表示
        cell.icon.image = UIImage(named: "picture")
        cell.content.text = itemArray[indexPath.row]
        cell.indexPathRow = indexPath.row
        cell.delegate = self
        return cell
    }
}
extension ViewController: TableViewCellDelegate {
    
    func deleteButton(indexPathRow: Int) {
        let indexPath = IndexPath(row: indexPathRow, section: 0)
        let alert: UIAlertController = UIAlertController(title: "注意", message: "削除してもいいですか？", preferredStyle: .alert)
        let canselAction: UIAlertAction = UIAlertAction(title: "キャンセル", style: .cancel) { (UIAlertAction) in
            print("キャンセル")
        }
        let okAction: UIAlertAction = UIAlertAction(title: "削除", style: .destructive) { (UIAlertAction) in
        self.itemArray.remove(at: indexPathRow)
        self.tableView.deleteRows(at: [indexPath], with: .automatic)
        self.tableView.reloadData()
            
        }
        alert.addAction(okAction)
        alert.addAction(canselAction)
        present(alert, animated: true, completion: nil)
    }
}
```
```swift:TableViewCell
import UIKit

protocol TableViewCellDelegate {
    func deleteButton(indexPathRow: Int)
}

class TableViewCell: UITableViewCell {
    
    var delegate: TableViewCellDelegate?
    var indexPathRow = 0
    //UIimageViewと紐付ける
    @IBOutlet weak var icon: UIImageView!
    @IBOutlet weak var content: UILabel!
    @IBAction func deleteButton(_ sender: Any) {
        delegate?.deleteButton(indexPathRow: indexPathRow)
    }
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
    
    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        // Configure the view for the selected state
    }
}
```