未読と既読を区別できるpage controlのようなUIを作ってみました

2019.03.08

2021.08.12

Fabeee社員ブログ

はじめまして。むらです。
主にウェブ系や業務系のiphoneアプリの案件を担当しています。
参画している案件で入力項目の画面が多いため、ページ位置がわかるようにし、
入力内容を保存して再編集できる機能のアプリを作ることになったので、
入力内容を保存したあとに入力済と未入力の部分が区別できるライブラリを探したのですが、
しっくり来るものが見つからなかったので、自分でUIを作ってみました。
デモアニメ
ちなみに表題のpage controlとは、iphoneの画面に表示されたページを識別するための丸い形をしたiOSのUI部品です。
以下のように既読と未読の部分で色分けをさせるようにしました。

実装方法は以下のように、viewControllerのロード時などでページ数と色を決めます。

// ページ数
self.stepControl?.stepCount = 5
// 現在位置の色
self.stepControl?.currentFillColor = UIColor(red: 255/255, green: 230/255, blue: 0, alpha: 1.0)
// 現在位置の線の色
self.stepControl?.currentStrokeColor = UIColor(red: 255/255, green: 230/255, blue: 0, alpha:1.0)
// 未読の色
self.stepControl?.waitingFillColor = UIColor(red: 224/255, green: 224/255, blue: 224/255, alpha: 1.0)
// 未読の線の色
self.stepControl?.waitingStrokeColor = UIColor(red: 224/255, green: 224/255, blue: 224/255, alpha: 1.0)
// 既読の色
self.stepControl?.doneFillColor = UIColor.white
// 既読の線の色
self.stepControl?.doneStrokeColor = UIColor(red: 192/255, green: 192/255, blue: 192/255, alpha: 1.0)

そして以下のようにScrollViewのスクロール終了時などで現在ページ番号と既読のページ数を設定し、
ビューのレイアウトを更新する処理を加えれば完了です。

    // MARK: - UIScrollViewDelegate
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        if fmod(scrollView.contentOffset.x, scrollView.frame.width) == 0 {
            let currentStep: Int = Int(scrollView.contentOffset.x / scrollView.frame.size.width)
            print("step:", currentStep)
            self.stepControl?.currentStep = currentStep
            if let maxStep = self.stepControl?.hasDoneStep {
                if maxStep <= currentStep {
                    self.stepControl?.hasDoneStep = currentStep
                }
            }
            self.stepControl?.setNeedsLayout()
            self.stepControl?.layoutIfNeeded()
        }
    }

デモ用のソースをgithubにアップロードしました。
https://github.com/f-rm/StepPageControl
現在、実用化に向けて改良予定です。
ご意見などあればご連絡頂けると幸いです。
SES/受託開発のご依頼についてはこちら

iOS swift