読み込み中...

Swiftでドロップダウンリストの13の作成方法

Swift言語を使ったドロップダウンリストのイラスト Swift
2023.10.28
この記事は約30分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

ドロップダウンリスト。

ウェブページやアプリのUI上で頻繁に遭遇するこの要素は、ユーザーインターフェイスの設計において非常に一般的です。

SwiftでiOSアプリを開発する際、ドロップダウンリストを実装する必要が出てくることは少なくありません。

この記事を読めばドロップダウンリストの実装をマスターすることができるようになります。

Swift初心者から経験者まで、わかりやすく具体的なサンプルコードとともに、ドロップダウンリストの作成方法を学びましょう。

●Swiftとドロップダウンリスト

SwiftはAppleが開発したプログラミング言語で、iOSやmacOSなどのアプリケーション開発に使われます。

強力な性能と直感的なコード記述が魅力の一つです。

○Swiftの基礎

Swiftは、シンプルで強力な言語機能を持っています。

変数の定義、制御文、関数などの基本的な部分から、クロージャやプロトコルなどの高度な機能まで、幅広い範囲をカバーしています。

○ドロップダウンリストとは

ドロップダウンリストは、複数の選択肢から1つを選ぶためのUI要素です。

利用者はリスト上の選択肢から1つをクリックまたはタップして選びます。

iOSアプリの中でも、設定画面やフォーム入力など、さまざまな場面で利用されることが多いです。

●Swiftでのドロップダウンリストの基本的な実装方法

Swiftでのドロップダウンリストの実装は、UIPickerViewを中心に行われます。

これはiOSの標準ライブラリで提供されているコンポーネントの1つです。

ここでは、Swiftでの基本的なドロップダウンリストの実装方法を2つのサンプルコードを通して詳しく解説します。

○サンプルコード1：基本的なドロップダウンリスト

最も基本的なドロップダウンリストの作成方法を学ぶため、シンプルなドロップダウンリストを作成してみましょう。

このコードでは、SwiftのUIPickerViewを使用して、基本的なドロップダウンリストを実装しています。

具体的には、3つの選択肢を持つドロップダウンリストを作成します。

import UIKit

class BasicDropdownViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let items = ["Apple", "Banana", "Cherry"]
    var selectedFruit = "Apple"

    override func viewDidLoad() {
        super.viewDidLoad()

        let pickerView = UIPickerView()
        pickerView.delegate = self
        pickerView.dataSource = self

        view.addSubview(pickerView)
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return items.count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return items[row]
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selectedFruit = items[row]
    }
}

上記のコードを適用すると、Apple, Banana, Cherryの3つの選択肢を持つドロップダウンリストが表示されます。

ユーザーが選択したフルーツの名前は、selectedFruit変数に保存されます。

○サンプルコード2：色を変えたドロップダウンリスト

基本的なドロップダウンリストをカスタマイズして、選択肢の背景色や文字色を変える方法を見てみましょう。

このコードでは、UIPickerViewのデリゲートメソッドを使用して、選択肢の背景色や文字色をカスタマイズします。

import UIKit

class ColoredDropdownViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let items = ["Red", "Green", "Blue"]
    var selectedColor = "Red"

    override func viewDidLoad() {
        super.viewDidLoad()

        let pickerView = UIPickerView()
        pickerView.delegate = self
        pickerView.dataSource = self

        view.addSubview(pickerView)
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return items.count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return items[row]
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selectedColor = items[row]
    }

    func pickerView(_ pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {
        var attributes: [NSAttributedString.Key: Any] = [:]

        switch items[row] {
        case "Red":
            attributes = [.foregroundColor: UIColor.red]
        case "Green":
            attributes = [.foregroundColor: UIColor.green]
        case "Blue":
            attributes = [.foregroundColor: UIColor.blue]
        default:
            break
        }

        return NSAttributedString(string: items[row], attributes: attributes)
    }
}

このコードを実行すると、「Red」「Green」「Blue」という3つの選択肢がそれぞれの色に応じて表示されるドロップダウンリストが作成されます。

選択した色の名前は、selectedColor変数に格納されます。

●応用的な実装方法

Swiftでのドロップダウンリストの実装には様々な方法があり、基本的なものからさらに発展的なものまで存在します。

ここでは、複数項目のドロップダウンリストの作成や、スクロール可能なドロップダウンリストの実装方法について詳しく解説していきます。

○サンプルコード3：複数項目のドロップダウンリスト

このコードでは、UIPickerViewを使用して、2列のドロップダウンリストを実装する方法を説明します。

具体的には、果物と野菜の2つのカテゴリーを持つドロップダウンリストを作成します。

import UIKit

class MultiColumnDropdownViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let categories = [["Apple", "Banana", "Cherry"], ["Carrot", "Broccoli", "Lettuce"]]
    var selectedItems = ["Apple", "Carrot"]

    override func viewDidLoad() {
        super.viewDidLoad()

        let pickerView = UIPickerView()
        pickerView.delegate = self
        pickerView.dataSource = self

        view.addSubview(pickerView)
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return categories.count
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return categories[component].count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return categories[component][row]
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selectedItems[component] = categories[component][row]
    }
}

このコードを実行すると、果物と野菜の2つのカテゴリーを持つドロップダウンリストが作成されます。

選択したアイテムは、selectedItems配列に保存されます。

○サンプルコード4：スクロール可能なドロップダウンリスト

長い項目リストを持つドロップダウンには、スクロール機能が必要です。

この例では、長い項目リストを持つスクロール可能なドロップダウンリストの作成方法を解説します。

import UIKit

class ScrollableDropdownViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let items = Array(1...100).map { "Item \($0)" }
    var selectedItem = "Item 1"

    override func viewDidLoad() {
        super.viewDidLoad()

        let pickerView = UIPickerView()
        pickerView.delegate = self
        pickerView.dataSource = self

        view.addSubview(pickerView)
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return items.count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return items[row]
    }

    func pickerView(_ pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        selectedItem = items[row]
    }
}

このコードを適用すると、1から100までの数字を項目として持つドロップダウンリストが作成されます。

選択したアイテムの名前は、selectedItem変数に格納されます。

○サンプルコード5：画像を含むドロップダウンリスト

Swiftでドロップダウンリストを実装する際、項目としてテキストだけでなく画像も組み合わせて表示することができます。

これにより、ユーザーエクスペリエンスを向上させることができます。

ここでは、UIPickerViewを利用して、テキストと画像の組み合わせを項目とするドロップダウンリストの作成方法を解説します。

このコードでは、UIPickerViewのデリゲートメソッドとデータソースメソッドを利用して、画像とテキストを持つカスタムビューを作成する方法を説明します。

具体的には、果物の名前とその果物の画像を表示するドロップダウンリストを実装します。

import UIKit

class ImageDropdownViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let fruits = ["Apple", "Banana", "Cherry"]
    let fruitImages = [UIImage(named: "apple"), UIImage(named: "banana"), UIImage(named: "cherry")]

    override func viewDidLoad() {
        super.viewDidLoad()

        let pickerView = UIPickerView()
        pickerView.delegate = self
        pickerView.dataSource = self

        view.addSubview(pickerView)
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return fruits.count
    }

    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let customView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
        let label = UILabel(frame: CGRect(x: 60, y: 0, width: 140, height: 50))
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height: 50))

        label.text = fruits[row]
        imageView.image = fruitImages[row]

        customView.addSubview(label)
        customView.addSubview(imageView)

        return customView
    }
}

このコードを実行すると、果物の名前とそれに対応する画像を含むドロップダウンリストが表示されます。

各行には、画像が左側に、その画像に対応する果物の名前が右側に配置されています。

○サンプルコード6：要素分けされたドロップダウンリスト

ドロップダウンリストの中で、関連する項目をまとめて要素として分けることで、ユーザーが項目を見つけやすくなります。

この例では、果物と野菜を2つの要素に分けて表示するドロップダウンリストを実装します。

import UIKit

class SectionedDropdownViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    let sections = ["Fruits", "Vegetables"]
    let items = [["Apple", "Banana", "Cherry"], ["Carrot", "Broccoli", "Lettuce"]]

    override func viewDidLoad() {
        super.viewDidLoad()

        let pickerView = UIPickerView()
        pickerView.delegate = self
        pickerView.dataSource = self

        view.addSubview(pickerView)
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return sections.count
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return items[component].count
    }

    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return items[component][row]
    }
}

このコードを適用すると、2つの要素（果物と野菜）を持つドロップダウンリストが作成されます。

各要素には、関連する項目が表示されています。

これにより、ユーザーは関連する項目を一覧で確認できるようになり、選択が簡単になります。

●カスタマイズ方法

Swiftを使用したドロップダウンリストは、そのデフォルトの状態だけでなく、さまざまなカスタマイズが可能です。

これにより、アプリのブランドやデザインに合わせて、ユーザーにとって使いやすいUIを提供することができます。

ここでは、Swiftでのドロップダウンリストのカスタマイズ方法について3つのサンプルコードを通じて詳しく見ていきましょう。

○サンプルコード7：アニメーション付きドロップダウンリスト

ドロップダウンリストにアニメーションを追加することで、ユーザーエクスペリエンスを向上させることができます。

このコードでは、ドロップダウンリストが開かれるときにアニメーションが追加される方法を表しています。

import UIKit

class AnimatedDropdownViewController: UIViewController {
    let dropdownButton = UIButton()
    let dropdownList = UITableView()
    var isDropdownOpen = false

    override func viewDidLoad() {
        super.viewDidLoad()

        dropdownButton.addTarget(self, action: #selector(toggleDropdown), for: .touchUpInside)
        view.addSubview(dropdownButton)
        view.addSubview(dropdownList)

        dropdownList.isHidden = true
    }

    @objc func toggleDropdown() {
        if isDropdownOpen {
            UIView.animate(withDuration: 0.3) {
                self.dropdownList.frame.size.height = 0
            } completion: { _ in
                self.dropdownList.isHidden = true
            }
            isDropdownOpen = false
        } else {
            dropdownList.isHidden = false
            UIView.animate(withDuration: 0.3) {
                self.dropdownList.frame.size.height = 150
            }
            isDropdownOpen = true
        }
    }
}

このコードの適用により、ドロップダウンリストが開いたり閉じたりする際にスムーズなアニメーションが追加されます。

○サンプルコード8：サイズ調整の方法

ドロップダウンリストのサイズは、内容やデザインに合わせて調整することができます。

ここでは、ドロップダウンリストの幅と高さを調整する方法を紹介します。

import UIKit

class SizeAdjustableDropdownViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    let pickerView = UIPickerView()

    override func viewDidLoad() {
        super.viewDidLoad()

        pickerView.delegate = self
        pickerView.dataSource = self
        pickerView.frame.size.width = 250
        pickerView.frame.size.height = 300

        view.addSubview(pickerView)
    }
}

このコードにより、指定したピクセル値に基づいて、ドロップダウンリストの幅と高さが調整されます。

○サンプルコード9：フォントやテキストスタイルの変更

ドロップダウンリスト内のテキストに対して、フォントやスタイルを変更することで、見た目をカスタマイズすることができます。

import UIKit

class TextStyleDropdownViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    let pickerView = UIPickerView()

    override func viewDidLoad() {
        super.viewDidLoad()

        pickerView.delegate = self
        pickerView.dataSource = self

        view.addSubview(pickerView)
    }

    func pickerView(_ pickerView: UIPickerView, attributedTitleForRow row: Int, forComponent component: Int) -> NSAttributedString? {
        let attributes: [NSAttributedString.Key: Any] = [
            .font: UIFont(name: "Helvetica-Bold", size: 18)!,
            .foregroundColor: UIColor.blue
        ]

        return NSAttributedString(string: "Sample Text", attributes: attributes)
    }
}

このコードを適用すると、ドロップダウンリスト内のテキストが指定したフォントと色で表示されます。

●注意点と対処法

Swiftを使用してドロップダウンリストを実装する際には、いくつかの注意点があります。

これらの注意点を無視すると、予期しないエラーやバグが発生する可能性があります。

ここでは、Swiftでのドロップダウンリスト実装における主な注意点と、それに関連するエラーハンドリングの方法について詳しく見ていきましょう。

○サンプルコード10：ドロップダウンリスト内でのエラーハンドリング

ドロップダウンリストの項目を動的に取得する場合や、外部APIとの連携を行う際には、エラーが発生する可能性があります。

このコードでは、ドロップダウンリストのデータ取得に失敗した場合のエラーハンドリングを行っています。

import UIKit

class DropdownErrorHandlingViewController: UIViewController {
    let dropdownButton = UIButton()
    let dropdownList = UITableView()
    var itemList: [String] = []

    override func viewDidLoad() {
        super.viewDidLoad()

        dropdownButton.addTarget(self, action: #selector(loadDropdownItems), for: .touchUpInside)
        view.addSubview(dropdownButton)
        view.addSubview(dropdownList)
    }

    @objc func loadDropdownItems() {
        fetchData { (result) in
            switch result {
            case .success(let data):
                self.itemList = data
                self.dropdownList.reloadData()
            case .failure(let error):
                // エラーハンドリング処理
                print("エラーが発生しました: \(error.localizedDescription)")
            }
        }
    }

    func fetchData(completion: @escaping (Result<[String], Error>) -> Void) {
        // ここにデータ取得のロジックを書く
        // 疑似的にエラーを発生させる
        let error = NSError(domain: "com.example.dropdown", code: 500, userInfo: [NSLocalizedDescriptionKey: "データの取得に失敗しました。"])
        completion(.failure(error))
    }
}

このコードでは、fetchData関数を使用してデータを取得しようとしますが、疑似的にエラーを発生させています。

エラーが発生した場合、failureのケースが呼ばれ、エラーメッセージが表示されます。

●Swiftでのドロップダウンリストのさらなる応用例

Swiftを用いたドロップダウンリストの実装方法は、基本的なものから高度なものまで多岐にわたります。

ここでは、さらに高度な応用例として、データベースとの連携や複数選択、フィルタリング機能を持つドロップダウンリストの作成方法を詳しく解説します。

○サンプルコード11：ドロップダウンリストとデータベースの連携

データベースから動的に情報を取得し、それをドロップダウンリストの項目として表示する方法について説明します。

この例では、SQLiteを使ったデータベースから情報を取得しています。

import SQLite

class DatabaseDropdownViewController: UIViewController {
    let dropdownButton = UIButton()
    let dropdownList = UITableView()
    var itemList: [String] = []

    let db = try! Connection("path_to_db")
    let items = Table("items")
    let name = Expression<String>("name")

    override func viewDidLoad() {
        super.viewDidLoad()

        dropdownButton.addTarget(self, action: #selector(loadDropdownItems), for: .touchUpInside)
        view.addSubview(dropdownButton)
        view.addSubview(dropdownList)
    }

    @objc func loadDropdownItems() {
        do {
            for item in try db.prepare(items) {
                itemList.append(item[name])
            }
            dropdownList.reloadData()
        } catch {
            print("データベースからの情報取得に失敗しました: \(error.localizedDescription)")
        }
    }
}

このコードでは、SQLiteのデータベースからitemsテーブルの情報を取得して、それをitemListに追加しています。

○サンプルコード12：ドロップダウンでの複数選択

複数の項目を選択可能にするドロップダウンリストの実装方法です。

import UIKit

class MultiSelectDropdownViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    let dropdownList = UITableView()
    var itemList: [String] = ["項目1", "項目2", "項目3"]
    var selectedItems: [String] = []

    override func viewDidLoad() {
        super.viewDidLoad()

        dropdownList.delegate = self
        dropdownList.dataSource = self
        dropdownList.allowsMultipleSelection = true
        view.addSubview(dropdownList)
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemList.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = itemList[indexPath.row]
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        selectedItems.append(itemList[indexPath.row])
    }

    func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
        if let index = selectedItems.firstIndex(of: itemList[indexPath.row]) {
            selectedItems.remove(at: index)
        }
    }
}

このコードでは、複数の項目を選択できるドロップダウンリストを実装しています。

選択した項目はselectedItemsに格納されます。

○サンプルコード13：フィルタリング機能付きドロップダウンリスト

ユーザーが入力した文字列に基づいてドロップダウンリストの項目をフィルタリングする方法です。

import UIKit

class FilteredDropdownViewController: UIViewController, UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate {
    let dropdownList = UITableView()
    let searchBar = UISearchBar()
    var allItems: [String] = ["アップル", "バナナ", "チェリー", "ドリアン"]
    var filteredItems: [String] = []

    override func viewDidLoad() {
        super.viewDidLoad()

        searchBar.delegate = self
        dropdownList.delegate = self
        dropdownList.dataSource = self
        filteredItems = allItems

        view.addSubview(searchBar)
        view.addSubview(dropdownList)
    }

    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        filteredItems = allItems.filter { $0.contains(searchText) }
        dropdownList.reloadData()
    }
}

このコードでは、searchBarの入力に応じてallItemsから項目をフィルタリングして、それをfilteredItemsに格納しています。

フィルタリングされた項目のみがドロップダウンリストに表示されます。

まとめ

Swiftでのドロップダウンリストの実装は、基本的なものから応用的なものまで多岐にわたり、さまざまなシチュエーションでの対応が可能です。

今回の記事を通じて、Swiftを使用してドロップダウンリストを実装する際の基本的な方法から、データベースとの連携や複数選択、フィルタリング機能を持つドロップダウンリストの作成方法まで、幅広く学ぶことができたかと思っています。

実際の開発においては、必要な機能やユーザーエクスペリエンスを考慮し、適切なドロップダウンリストの実装方法を選択することが重要です。

特にデータベースとの連携や複数選択などの応用的な実装は、より柔軟なアプリケーションを作成する上で有効です。

この記事が、Swiftを用いたドロップダウンリストの実装に関する知識の向上や、新しい実装方法の発見の参考となれば幸いです。

最後まで読んでいただき、ありがとうございました。